@extends('layout.base')

@section('action')
    {{--   <form method="GET" action="{{ route('reservation') }}" class="filter-form">
    <div class="d-flex align-items-center p-2 rounded filter-container">
        <div class="filter-item me-2">
        <select class="form-control select2" name="category[]" multiple>
            @php
            $categories = ['Delegations', 'FIG', 'LOC', 'Television', 'Media', 'Security', 'Observers'];
            $selectedCategories = request()->input('category', []);
            @endphp
            @foreach ($categories as $category)
            <option value="{{ $category }}"
                {{ in_array($category, (array) $selectedCategories) ? 'selected' : '' }}>
                {{ $category }}
            </option>
            @endforeach
        </select>
        </div>

        <div class="filter-item me-2">
        <input type="text" id="dateRange" name="daterange" class="form-control"
            value="{{ request()->input('daterange') }}" placeholder="Select date range">
        </div>

        <div class="filter-item me-2">
        <input type="number" name="rooms" class="form-control" min="1" max="1000" step="1"
            value="{{ request()->input('rooms', 1) }}" placeholder="Enter rooms">
        </div>

        <button type="submit" class="btn btn-primary filter-button me-2">UPDATE</button>

        <a href="{{ route('reservation') }}" class="btn btn-secondary filter-button">RESET</a>
    </div>
    </form> --}}
@endsection


@section('content')
    <style>
        .select2-container--default .select2-selection--multiple {
            background-color: #fff !important;
            /* Ubah warna background */
            border: 1px solid #ced4da !important;
            /* Sesuaikan border */
            min-height: 38px !important;
            /* Sesuaikan tinggi */
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff !important;
            /* Ubah warna background */
            border: 1px solid #ced4da !important;
            /* Sesuaikan border */
        }

        .select2-dropdown {
            background-color: #fff !important;
            /* Background dropdown */
            border: 1px solid #ced4da !important;
        }

        .select2-results__option {
            background-color: #fff !important;
            /* Background opsi */
            color: #000 !important;
            /* Warna teks */
        }

        .select2-results__option--highlighted[aria-selected] {
            background-color: #007bff !important;
            color: #fff !important;
        }
    </style>
    <!-- Modal Filter -->
    <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true"
        data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="filterModalLabel">Filter Hotels</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="GET" action="{{ route('reservation') }}" id="filterForm">
                    <div class="modal-body">
                        <div class="row">
                            <!-- Pilih Tanggal Check-in -->
                            <div class="col-md-3 mb-3">
                                <label for="checkin">Check-in Date</label>
                                <input type="text" id="checkin" name="checkin" class="form-control"
                                    placeholder="Select check-in date" required>
                            </div>

                            <!-- Pilih Tanggal Check-out -->
                            <div class="col-md-3 mb-3">
                                <label for="checkout">Check-out Date</label>
                                <input type="text" id="checkout" name="checkout" class="form-control"
                                    placeholder="Select check-out date" required>
                            </div>

                            <!-- Pilih Kategori -->
                            <div class="col-md-3 mb-3">
                                <label for="category">Category</label>
                                <select class="form-control select2" name="category[]" multiple required>
                                @foreach($categories as $category)
                                    <option value="{{ $category }}" 
                                        {{ in_array($category, $selectedCategories ?? []) ? 'selected' : '' }}>
                                        {{ $category }}
                                    </option>
                                @endforeach
                                </select>
                            </div>

                            <!-- Pilih Jumlah Kamar -->
                            <div class="col-md-3 mb-3">
                                <label for="rooms">Number of Persons</label>
                                <input type="number" name="rooms" class="form-control" min="1"
                                    placeholder="Enter number of persons" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Apply Filter</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        @if (request()->has(['checkin', 'checkout', 'rooms']))
            <div class="row">
                @forelse ($hotels as $hotel)
                    <div class="col-md-4 mb-4">
                        <div class="card hotel-card shadow-sm">
                            <div id="carouselHotel{{ $hotel->id }}" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    @if ($hotel->photos->count() > 0)
                                        @foreach ($hotel->photos as $index => $photo)
                                            <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                                <img src="{{ asset($photo->photo_path) }}" class="d-block w-100 hotel-img"
                                                    style="object-fit: cover; height: 250px;" alt="Hotel Image">
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="carousel-item active">
                                            <img src="https://via.placeholder.com/400x250?text=No+Image"
                                                class="d-block w-100 hotel-img" style="object-fit: cover; height: 250px;"
                                                alt="No Image Available">
                                        </div>
                                    @endif
                                </div>
                                @if ($hotel->photos->count() > 1)
                                    <button class="carousel-control-prev" type="button"
                                        data-bs-target="#carouselHotel{{ $hotel->id }}" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    </button>
                                    <button class="carousel-control-next" type="button"
                                        data-bs-target="#carouselHotel{{ $hotel->id }}" data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    </button>
                                @endif
                            </div>

                            <div class="card-body">
                                <h5 class="fw-bold">{{ $hotel->hotel_name }}</h5>
                                <p class="text-muted"><i class="fas fa-map-marker-alt"></i> {{ $hotel->address }}</p>
                                <p class="hotel-description">{{ Str::limit($hotel->description, 100) }}</p>

                                <div class="hotel-facilities">
                                    @php
                                        $facilities = is_string($hotel->facilities)
                                            ? json_decode($hotel->facilities, true)
                                            : $hotel->facilities;
                                        $facilityTranslations = [
                                            'Parkir Gratis' => 'Free Parking',
                                            'WiFi Gratis' => 'Free WiFi',
                                            'Kolam Renang' => 'Swimming Pool',
                                            'Restoran' => 'Restaurant',
                                        ];
                                    @endphp
                                    @if ($facilities && is_array($facilities))
                                        @foreach ($facilities as $facility)
                                            <span
                                                class="badge bg-primary">{{ $facilityTranslations[$facility] ?? $facility }}</span>
                                        @endforeach
                                    @endif
                                </div>

                                <a href="{{ route('reservation.detail', array_merge(['id' => $hotel->id], request()->query())) }}"
                                    class="btn btn-primary w-100 mt-3">View Detail</a>

                            </div>
                        </div>
                    </div>

                @empty
                    <div class="col-12 text-center text-muted mt-4">
                        No hotels found for the selected filters.
                    </div>
                @endforelse
            </div>
        @else
            <div class="text-center text-muted mt-5">
                <p>Please apply filter first to view available hotels.</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
                    Open Filter
                </button>
            </div>
        @endif

    </div>
@endsection

@section('styles')
    <style>
        .hotel-card {
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.2s ease-in-out;
        }

        .hotel-card:hover {
            transform: scale(1.05);
        }

        .hotel-img {
            height: 200px;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
        }

        .hotel-description {
            font-size: 14px;
            color: #555;
            margin-bottom: 10px;
        }

        .hotel-facilities .badge {
            margin-right: 5px;
            font-size: 12px;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }
    </style>
@endsection

@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const checkIn = flatpickr("#checkin", {
                dateFormat: "d-m-Y",
                minDate: "today",
                onClose: function(selectedDates) {
                    if (selectedDates.length) {
                        const checkinDate = new Date(selectedDates[0]);
                        checkinDate.setDate(checkinDate.getDate() + 1); //Comment kalo misalnya tanggal checkin & checkout bisa sama

                        checkOut.set('minDate', checkinDate);

                        if(checkOut.selectedDates[0] && checkOut.selectedDates[0] > checkinDate) {
                            checkOut.clear();
                        }
                    }
                }
            });

            const checkOut = flatpickr("#checkout", {
                dateFormat: "d-m-Y",
                minDate: "today",
            });

            $('.select2').select2({
                placeholder: "Select Categories",
                allowClear: true
            });

            // Cek apakah ada parameter di URL
            const urlParams = new URLSearchParams(window.location.search);
            if (!urlParams.has('category') && !urlParams.has('rooms') && !urlParams.has('checkin') && !urlParams
                .has('checkout')) {
                var filterModal = new bootstrap.Modal(document.getElementById('filterModal'));
                filterModal.show();
            }
        });
    </script>
@endsection