@extends('layouts.app')

@section('title', 'Edit Event')
@section('page-title', 'Edit Event 📅')
@section('page-subtitle', $event->title)

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="cat-card p-4 lg:p-8">
        <form action="{{ route('schedule.update', $event) }}" method="POST" id="edit-event-form"
              class="space-y-5">
            @csrf @method('PUT')

            {{-- Hidden combined datetime fields --}}
            <input type="hidden" name="start_time" id="start_time_hidden">
            <input type="hidden" name="end_time"   id="end_time_hidden">

            {{-- Title --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">
                    Title <span class="text-pink-400">*</span>
                </label>
                <input type="text" name="title" value="{{ old('title', $event->title) }}"
                       class="input-soft" placeholder="Event title" required>
                @error('title') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {{-- Type --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Type</label>
                    <select name="event_type" class="input-soft">
                        @foreach(['task' => '📋 Task', 'meeting' => '🤝 Meeting', 'deadline' => '⏰ Deadline', 'posting' => '📸 Posting'] as $val => $label)
                            <option value="{{ $val }}" {{ old('event_type', $event->event_type) === $val ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Status --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
                    <select name="status" class="input-soft">
                        @foreach($statuses as $s)
                            <option value="{{ $s->value }}"
                                {{ old('status', $event->status->value) === $s->value ? 'selected' : '' }}>
                                {{ $s->label() }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Client --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
                    <select name="client_id" class="input-soft">
                        <option value="">— None —</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}"
                                {{ old('client_id', $event->client_id) == $client->id ? 'selected' : '' }}>
                                {{ $client->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Start Date --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">
                        Start Date <span class="text-pink-400">*</span>
                    </label>
                    <input type="date" id="start_date" class="input-soft"
                           value="{{ old('_start_date', $event->start_time->format('Y-m-d')) }}" required>
                </div>

                {{-- Start Time --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Start Time</label>
                    <input type="time" id="start_time_input" class="input-soft"
                           value="{{ old('_start_time', $event->is_all_day ? '00:00' : $event->start_time->format('H:i')) }}">
                </div>

                {{-- End Date --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">End Date</label>
                    <input type="date" id="end_date" class="input-soft"
                           value="{{ old('_end_date', $event->end_time?->format('Y-m-d') ?? '') }}">
                </div>

                {{-- End Time --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">End Time</label>
                    <input type="time" id="end_time_input" class="input-soft"
                           value="{{ old('_end_time', $event->end_time?->format('H:i') ?? '18:00') }}">
                </div>

                {{-- Location --}}
                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Location</label>
                    <input type="text" name="location" value="{{ old('location', $event->location) }}"
                           class="input-soft" placeholder="Online / venue address">
                </div>
            </div>

            {{-- Description --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="2" class="input-soft resize-none"
                          placeholder="Brief description…">{{ old('description', $event->description) }}</textarea>
            </div>

            {{-- Color --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Color</label>
                <div class="flex gap-2 flex-wrap">
                    @foreach(['#FFB7C5','#B5EAD7','#FDFD96','#E8D5F5','#FFD5B8','#AEC6CF'] as $hex)
                        <label class="cursor-pointer">
                            <input type="radio" name="color" value="{{ $hex }}" class="sr-only peer"
                                   {{ old('color', $event->color) === $hex ? 'checked' : '' }}>
                            <span class="w-8 h-8 rounded-full block ring-2 ring-transparent peer-checked:ring-gray-500 peer-checked:ring-offset-1 transition-all"
                                  style="background:{{ $hex }};"></span>
                        </label>
                    @endforeach
                </div>
            </div>

            {{-- Priority checkbox --}}
            <div class="flex items-center gap-2">
                <input type="checkbox" name="is_priority" value="1" id="priority" class="w-4 h-4 accent-pink-400"
                       {{ old('is_priority', $event->is_priority) ? 'checked' : '' }}>
                <label for="priority" class="text-sm text-gray-600 cursor-pointer">⭐ Mark as Priority</label>
            </div>

            {{-- Notes --}}
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
                <textarea name="notes" rows="3" class="input-soft resize-none"
                          placeholder="Additional notes…">{{ old('notes', $event->notes) }}</textarea>
            </div>

            <div class="flex flex-col sm:flex-row gap-3 pt-1">
                <button type="submit" class="btn-sakura flex-1 py-3">💾 Save Changes</button>
                <a href="{{ route('schedule.index') }}"
                   class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('edit-event-form').addEventListener('submit', function (e) {
    const startDate = document.getElementById('start_date').value;
    const startTime = document.getElementById('start_time_input').value || '00:00';
    const endDate   = document.getElementById('end_date').value;
    const endTime   = document.getElementById('end_time_input').value || '00:00';

    if (!startDate) {
        e.preventDefault();
        alert('Please select a start date.');
        return;
    }

    document.getElementById('start_time_hidden').value = startDate + 'T' + startTime;

    if (endDate) {
        document.getElementById('end_time_hidden').value = endDate + 'T' + endTime;
    }
});
</script>
@endpush
@endsection