@extends('layouts.app')

@section('page-title', 'Reservasi Baru')

@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-2xl mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('reservations.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">Buat Reservasi Baru</h2>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
        <form method="POST" action="{{ route('reservations.store') }}" class="space-y-5"
              x-data="{
                guestId: '{{ old('guest_id', $selectedGuest?->id ?? '') }}',
                roomId: '',
                checkIn: '{{ old('check_in_date', date('Y-m-d')) }}',
                checkOut: '{{ old('check_out_date', date('Y-m-d', strtotime('+1 day'))) }}',
                pricePerMonth: 0,
                months: 1,
                totalPrice: 0,
                get computedTotal() {
                    const d1 = new Date(this.checkIn);
                    const d2 = new Date(this.checkOut);
                    const diff = (d2 - d1) / (1000 * 60 * 60 * 24);
                    this.months = diff > 0 ? Math.max(1, Math.ceil(diff / 30)) : 0;
                    return this.pricePerMonth * this.months;
                }
              }">
            @csrf

            @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

            <!-- Tamu -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Tamu <span class="text-red-500">*</span></label>
                @if($selectedGuest)
                    <div class="flex items-center gap-3 p-3 bg-indigo-50 border border-indigo-200 rounded-xl">
                        <div class="w-9 h-9 bg-indigo-200 rounded-full flex items-center justify-center text-indigo-800 font-bold">
                            {{ strtoupper(substr($selectedGuest->full_name, 0, 1)) }}
                        </div>
                        <div>
                            <p class="font-medium text-slate-800">{{ $selectedGuest->full_name }}</p>
                            <p class="text-xs text-slate-500">{{ $selectedGuest->phone }}</p>
                        </div>
                        <input type="hidden" name="guest_id" value="{{ $selectedGuest->id }}">
                        <a href="{{ route('reservations.create') }}" class="ml-auto text-xs text-slate-500 hover:text-slate-700">Ganti</a>
                    </div>
                @else
                    <select name="guest_id" required x-model="guestId"
                            class="guest-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"
                            >
                        <option value="">Pilih tamu</option>
                        @foreach($guests as $guest)
                            <option value="{{ $guest->id }}" {{ old('guest_id') == $guest->id ? 'selected' : '' }}>
                                {{ $guest->full_name }} ({{ $guest->phone }})
                            </option>
                        @endforeach
                    </select>
                    <p class="text-xs text-slate-400 mt-1">
                        Tamu belum terdaftar?
                        <a href="{{ route('guests.create') }}" class="text-indigo-500 hover:underline">Daftarkan tamu baru</a>
                    </p>
                @endif
            </div>

            <!-- Kamar -->
            <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 x-model="roomId"
                        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"
                        @change="pricePerMonth = parseFloat($event.target.selectedOptions[0]?.dataset.price || 0)"
                        >
                    <option value="">Pilih kamar tersedia</option>
                    @foreach($rooms as $room)
                        <option value="{{ $room->id }}"
                                data-price="{{ $room->roomType->price_per_month }}"
                                {{ old('room_id') == $room->id ? 'selected' : '' }}>
                            Kamar {{ $room->room_number }} — {{ $room->roomType->name }} (Rp {{ number_format($room->roomType->price_per_month, 0, ',', '.') }}/bulan)
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Tanggal -->
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Tanggal Check-in <span class="text-red-500">*</span></label>
                    <input type="date" name="check_in_date" required
                           x-model="checkIn"
                           min="{{ date('Y-m-d') }}"
                           value="{{ old('check_in_date', date('Y-m-d')) }}"
                           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">Tanggal Check-out <span class="text-red-500">*</span></label>
                    <input type="date" name="check_out_date" required
                           x-model="checkOut"
                           :min="checkIn"
                           value="{{ old('check_out_date', date('Y-m-d', strtotime('+1 day'))) }}"
                           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>

            <!-- Estimasi Harga -->
            <div class="bg-slate-50 rounded-xl p-4" x-show="pricePerMonth > 0">
                <div class="flex justify-between text-sm">
                    <span class="text-slate-600">Harga per bulan</span>
                    <span class="font-medium">Rp <span x-text="pricePerMonth.toLocaleString('id-ID')">0</span></span>
                </div>
                <div class="flex justify-between text-sm mt-1">
                    <span class="text-slate-600">Jumlah bulan</span>
                    <span x-text="months">0</span>
                </div>
                <div class="flex justify-between text-base font-bold mt-2 pt-2 border-t border-slate-200">
                    <span>Estimasi Total</span>
                    <span class="text-indigo-600">Rp <span x-text="computedTotal.toLocaleString('id-ID')">0</span></span>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <!-- Jumlah Tamu -->
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Jumlah Tamu <span class="text-red-500">*</span></label>
                    <input type="number" name="number_of_guests" value="{{ old('number_of_guests', 1) }}" required min="1" max="20"
                           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>

                <!-- Sumber -->
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Sumber Pemesanan <span class="text-red-500">*</span></label>
                    <select name="source" 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">
                        <option value="walk_in" {{ old('source', 'walk_in') === 'walk_in' ? 'selected' : '' }}>Langsung</option>
                        <option value="website" {{ old('source') === 'website' ? 'selected' : '' }}>Website</option>
                        <option value="ota" {{ old('source') === 'ota' ? 'selected' : '' }}>OTA (Booking.com, dll)</option>
                    </select>
                </div>
            </div>

            <!-- Catatan -->
            <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"
                          placeholder="Permintaan khusus, preferensi...">{{ old('notes') }}</textarea>
            </div>

            <div class="flex justify-end gap-3 pt-2">
                <a href="{{ route('reservations.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" name="status" value="pending"
                        class="px-5 py-2.5 text-sm font-medium text-indigo-700 bg-indigo-100 hover:bg-indigo-200 rounded-xl transition-colors">
                    Simpan sebagai Tertunda
                </button>
                <button type="submit" name="status" value="confirmed"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-colors">
                    Konfirmasi Reservasi
                </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 guestSelect = document.querySelector('.guest-search-select');
            const roomSelect = document.querySelector('.room-search-select');

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

            if (guestSelect) {
                new TomSelect(guestSelect, {
                    create: false,
                    maxOptions: 500,
                    placeholder: 'Cari nama atau nomor telepon tamu',
                    allowEmptyOption: true,
                    searchField: ['text'],
                    sortField: {
                        field: 'text',
                        direction: 'asc'
                    }
                });
            }

            if (roomSelect) {
                new TomSelect(roomSelect, {
                    create: false,
                    maxOptions: 500,
                    placeholder: 'Cari nomor atau tipe kamar',
                    allowEmptyOption: true,
                    searchField: ['text'],
                    sortField: {
                        field: 'text',
                        direction: 'asc'
                    },
                    onChange: function (value) {
                        roomSelect.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                });
            }
        });
    </script>
@endpush