@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <button class="btn btn-secondary mb-0" onclick="window.location='{{ url('trsmybooking') }}'">
                <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
            </button>
            <button class="btn btn-primary mb-0"
                onclick="document.getElementById('reschedule-form').requestSubmit()">
                <i class="fas fa-paper-plane me-1"></i><span class="font-weight-bold">Ajukan Reschedule</span>
            </button>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-body">
                <h5>Reschedule Booking {{ $booking->booking_id }}</h5>
                <p class="text-sm text-secondary">
                    Jadwal lama tetap berlaku sampai pengajuan disetujui resepsionis.
                </p>
                @include('components.alert')

                <div class="row mb-4">
                    <div class="col-md-4">
                        <label class="form-control-label">Ruangan Lama</label>
                        <input class="form-control" value="{{ $old_room->name }}" disabled>
                    </div>
                    <div class="col-md-3">
                        <label class="form-control-label">Tanggal Lama</label>
                        <input class="form-control" value="{{ $schedule['date'] }}" disabled>
                    </div>
                    <div class="col-md-5">
                        <label class="form-control-label">Waktu Lama</label>
                        <input class="form-control" value="{{ $start_time }} - {{ $end_time }}" disabled>
                    </div>
                </div>

                <form method="POST"
                    action="{{ route('my-booking.reschedule.submit', ['token' => $reschedule_token]) }}"
                    id="reschedule-form">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="new-date" class="form-control-label">Tanggal Baru</label>
                                <input id="new-date" class="form-control" type="date" name="new_date"
                                    min="{{ now()->format('Y-m-d') }}" value="{{ old('new_date') }}" required>
                                @error('new_date') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="new-start-time" class="form-control-label">Jam Mulai Baru</label>
                                <input id="new-start-time" class="form-control" type="time" name="new_start_time"
                                    value="{{ old('new_start_time', $start_time) }}" required>
                                @error('new_start_time') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="new-end-time" class="form-control-label">Jam Selesai Baru</label>
                                <input id="new-end-time" class="form-control" type="time" name="new_end_time"
                                    value="{{ old('new_end_time', $end_time) }}" required>
                                @error('new_end_time') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="new-room-id" class="form-control-label">Ruangan Baru</label>
                        <select id="new-room-id" class="form-select" name="new_room_id" required disabled>
                            <option value="">Pilih tanggal dan waktu terlebih dahulu</option>
                        </select>
                        <small id="room-help" class="text-secondary">Ketersediaan ruangan diperiksa otomatis.</small>
                        @error('new_room_id') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                    </div>

                    <div class="form-group">
                        <label for="reason" class="form-control-label">Alasan Reschedule</label>
                        <textarea id="reason" class="form-control" name="reason" rows="4" maxlength="1000"
                            required>{{ old('reason') }}</textarea>
                        @error('reason') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const date = document.getElementById('new-date');
            const start = document.getElementById('new-start-time');
            const end = document.getElementById('new-end-time');
            const room = document.getElementById('new-room-id');
            const help = document.getElementById('room-help');
            const oldRoomId = @json((int) $old_room->id);
            const previousRoomId = @json((string) old('new_room_id', ''));

            async function loadRooms() {
                if (!date.value || !start.value || !end.value || end.value <= start.value) {
                    room.disabled = true;
                    room.innerHTML = '<option value="">Lengkapi jadwal baru</option>';
                    return;
                }

                room.disabled = true;
                room.innerHTML = '<option value="">Memeriksa ketersediaan...</option>';
                try {
                    const endpoint = @json(route('my-booking.reschedule.rooms'));
                    console.log('Fetching rooms from:', endpoint);
                    const query = new URLSearchParams({
                        booking_id: @json($booking->booking_id),
                        schedule_id: @json($schedule['schedule_id']),
                        date: date.value,
                        start_time: start.value,
                        end_time: end.value
                    });
              
                    const response = await fetch(`${endpoint}?${query.toString()}`, {
                        headers: {
                            'Accept': 'application/json'
                        }
                    });

                    
                    if (!response.ok) {
                        const errorData = await response.json().catch(() => null);
                        const validationMessage = errorData?.errors
                            ? Object.values(errorData.errors).flat()[0]
                            : errorData?.message;
                        throw new Error(validationMessage || `Gagal memeriksa ruangan (${response.status})`);
                    }
                    const data = await response.json();
                    const available = data.rooms.filter(item => item.available);
                    available.sort((a, b) => (b.id === oldRoomId) - (a.id === oldRoomId));
                    room.innerHTML = '<option value="">Pilih ruangan tersedia</option>' +
                        available.map(item =>
                            `<option value="${item.id}">${item.name} (kapasitas ${item.maximum_capacity})${item.id === oldRoomId ? ' — ruangan lama' : ''}</option>`
                        ).join('');
                    room.disabled = available.length === 0;
                    help.textContent = available.length
                        ? `${available.length} ruangan tersedia.`
                        : 'Tidak ada ruangan tersedia pada jadwal tersebut.';
                    if (available.some(item => String(item.id) === previousRoomId)) {
                        room.value = previousRoomId;
                    }
                } catch (error) {
                    room.innerHTML = '<option value="">Ketersediaan gagal dimuat</option>';
                    help.textContent = error.message;
                }
            }

            [date, start, end].forEach(input => input.addEventListener('change', loadRooms));
            if (date.value) loadRooms();
        });
    </script>
@endpush