@extends('layouts.app')

@section('page-title', 'Ubah Tugas')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet">
@endpush

@section('content')
<div class="max-w-lg mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('housekeeping.index') }}" class="text-slate-400 hover:text-slate-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
        </a>
        <h2 class="text-xl font-bold text-slate-800">Ubah Tugas</h2>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
        <form method="POST" action="{{ route('housekeeping.update', $housekeeping) }}" class="space-y-5">
            @csrf @method('PUT')

            @if($errors->any())
                <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl p-4 text-sm">
                    <ul class="list-disc list-inside space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Kamar <span class="text-red-500">*</span></label>
                <select name="room_id" required
                        class="room-search-select w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none"
                        >
                    @foreach($rooms as $room)
                        <option value="{{ $room->id }}" {{ old('room_id', $housekeeping->room_id) == $room->id ? 'selected' : '' }}>
                            Kamar {{ $room->room_number }} ({{ $room->roomType->name }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Ditugaskan Kepada</label>
                <select name="assigned_to"
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                    <option value="">Tidak Ditugaskan</option>
                    @foreach($staff as $s)
                        <option value="{{ $s->id }}" {{ old('assigned_to', $housekeeping->assigned_to) == $s->id ? 'selected' : '' }}>
                            {{ $s->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Jenis Tugas</label>
                    <select name="task_type" required
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                        @foreach(['cleaning' => 'Kebersihan', 'maintenance' => 'Pemeliharaan', 'inspection' => 'Inspeksi'] as $val => $label)
                            <option value="{{ $val }}" {{ old('task_type', $housekeeping->task_type) === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Prioritas</label>
                    <select name="priority" required
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                        @foreach(['low' => 'Rendah', 'normal' => 'Normal', 'high' => 'Tinggi', 'urgent' => 'Mendesak'] as $val => $label)
                            <option value="{{ $val }}" {{ old('priority', $housekeeping->priority) === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Status</label>
                <select name="status" required
                        class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                    @foreach(['pending', 'in_progress', 'completed', 'cancelled'] as $s)
                        <option value="{{ $s }}" {{ old('status', $housekeeping->status) === $s ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $s)) }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Dijadwalkan Pada</label>
                <input type="datetime-local" name="scheduled_at"
                       value="{{ old('scheduled_at', $housekeeping->scheduled_at?->format('Y-m-d\TH:i')) }}"
                       class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Catatan</label>
                <textarea name="notes" rows="2"
                          class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none resize-none">{{ old('notes', $housekeeping->notes) }}</textarea>
            </div>

            <div class="flex justify-end gap-3 pt-2">
                <a href="{{ route('housekeeping.index') }}"
                   class="px-5 py-2.5 text-sm font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors">
                    Batal
                </a>
                <button type="submit"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-colors">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const roomSelect = document.querySelector('.room-search-select');

            if (!roomSelect || typeof TomSelect === 'undefined') {
                return;
            }

            new TomSelect(roomSelect, {
                create: false,
                maxOptions: 500,
                placeholder: 'Cari nomor atau tipe kamar',
                allowEmptyOption: false,
                searchField: ['text'],
                sortField: {
                    field: 'text',
                    direction: 'asc'
                }
            });
        });
    </script>
@endpush