@extends('layouts.app')

@section('title', 'Tambah Task')

@section('content')
<div class="px-4 sm:px-0">
    <h3 class="text-3xl font-bold leading-tight text-gray-900">Tambah Task Baru</h3>
    <p class="mt-2 text-sm text-gray-600">Projek: <strong>{{ $project->name }}</strong></p>
    <p class="text-sm text-gray-600">Baki Tiket: <strong class="text-indigo-600">{{ number_format($project->remaining_tickets, 2) }}</strong></p>
</div>

<div class="mt-8 max-w-2xl">
    <div class="bg-white shadow sm:rounded-lg">
        <form action="{{ route('tasks.store', $project) }}" method="POST" class="px-4 py-5 sm:p-6">
            @csrf
            
            <div class="space-y-6">
                <div>
                    <label for="task_date" class="block text-sm font-medium text-gray-700">Tarikh Task</label>
                    <input type="date" name="task_date" id="task_date" value="{{ old('task_date', date('Y-m-d')) }}" required
                           class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    @error('task_date')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700">Perkara</label>
                    <textarea name="description" id="description" rows="4" required
                              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">{{ old('description') }}</textarea>
                    @error('description')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="ticket_value" class="block text-sm font-medium text-gray-700">Nilai Tiket</label>
                    <select name="ticket_value" id="ticket_value" required
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        <option value="">-- Pilih Nilai Tiket --</option>
                        <option value="0.25" {{ old('ticket_value') == '0.25' ? 'selected' : '' }}>0.25</option>
                        <option value="0.5" {{ old('ticket_value') == '0.5' ? 'selected' : '' }}>0.5</option>
                        <option value="0.75" {{ old('ticket_value') == '0.75' ? 'selected' : '' }}>0.75</option>
                        <option value="1" {{ old('ticket_value') == '1' ? 'selected' : '' }}>1</option>
                    </select>
                    @error('ticket_value')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-6 flex items-center justify-end space-x-3">
                <a href="{{ route('projects.show', $project) }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Batal
                </a>
                <button type="submit" class="bg-indigo-600 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection