@extends('layouts.master')
@section('body_id', 'accomodation_page')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

    <style>
        /* ✨ PREMIUM HOTEL SLIDER PREMIUM STYLING */
        .premium-hotel-slider-wrapper {
            margin-bottom: 60px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        .hotel-slide-item {
            position: relative;
            height: 480px; /* Perfect Luxury Banner Height */
            background-color: #0f172a;
        }
        .hotel-slide-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.85;
            transition: transform 6s ease;
        }
        .hotel-slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 80px 40px 40px 40px;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 70%, transparent 100%);
            color: #ffffff;
        }
        .hotel-slide-caption h2 {
            color: #ffffff !important;
            font-size: 32px;
            font-weight: 700;
            margin: 0 0 10px 0;
            font-family: 'Playfair Display', serif;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        .hotel-slide-caption p {
            color: #e2e8f0 !important;
            font-size: 15px;
            margin: 0;
            font-weight: 500;
        }
        .slider-luxury-badge {
            position: absolute;
            top: 25px;
            left: 25px;
            background: #ca8a04;
            color: #fff;
            padding: 6px 16px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 50px;
            letter-spacing: 1px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            z-index: 10;
        }
        /* Custom Arrow Controls Styling */
        .slick-prev, .slick-next {
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(4px);
            border-radius: 50%;
            z-index: 11;
            transition: all 0.3s;
        }
        .slick-prev { left: 20px; }
        .slick-next { right: 20px; }
        .slick-prev:hover, .slick-next:hover {
            background: #ca8a04 !important;
        }
        .slick-dots { bottom: 20px; }
        .slick-dots li button:before { color: #ffffff; font-size: 12px; }
        .slick-dots li.slick-active button:before { color: #ca8a04; }
        
        /* 🏨 UNIFORM ROOM CARDS IMAGE STYLING */

/* 1. Room Image ke outer container ko target karein */
.accomodation_single_room .single_room_image, 
.accomodation_single_room .room_img_wrapper { /* Jo bhi aapka actual card image class ho */
    height: 250px;            /* Sabhi images ki height fix karne ke liye */
    width: 100%;              /* Width auto stretched rahegi wrapper ke hisab se */
    overflow: hidden;         /* Agar koi image badi ho to bahar na nikle */
    position: relative;
    border-radius: 8px 8px 0 0; /* Upar ke corners round rakhne ke liye */
}

/* 2. Actual Image tag ko auto-crop aur center karne ke liye */
.accomodation_single_room img {
    width: 100% !important;
    height: 250px !important; /* Wrapper ke barabar fix height */
    object-fit: cover !important; /* Sabse important: Isse image khichegi (stretch) nahi, balki barabar crop ho jayegi */
    object-position: center !important; /* Image ka main focus center me rahega */
}

/* 3. Cards ki layout heights ko equal karne ke liye (Optional par recommended) */
.accomodation_single_room .single_room { 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Isse pure cards niche se barabar line me rahenge */
}
    </style>

    <section class="breadcrumb_main_area margin-bottom-80">
        <div class="container-fluid">
            <div class="row">
                <div class="breadcrumb_main nice_title">
                    <h2>Accomodation</h2>
                    <div class="special_offer_main">
                        <div class="container">
                            <div class="special_offer_sub">
                                <img src="{{ asset('assets/img/special-offer-yellow-main.png')}}" alt="img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if(!request('state_id') && !request('city_id') && !request('price_max') && !$showcaseHotels->isEmpty())
    <section class="hotel_slider_showcase_section margin-bottom-60">
        <div class="container">
            <div class="section_title nice_title text-center" style="margin-bottom: 30px;">
                <h3>Our Premium Properties</h3>
            </div>
            
            <div class="premium-hotel-slider-wrapper">
                <div class="luxury-hotel-core-slider">
                    @foreach($showcaseHotels as $hotel)
                        <div class="hotel-slide-item">
                            <span class="slider-luxury-badge"><i class="fa fa-star"></i> Verified Luxury Property</span>
                            <img src="{{ asset($hotel->cover_image) }}" alt="{{ $hotel->hotel_name }}">
                            <div class="hotel-slide-caption">
                                <h2>{{ $hotel->hotel_name }}</h2>
                                <p><i class="fa fa-map-marker" style="color: #eab308; margin-right: 6px;"></i> {{ $hotel->city }}, {{ $hotel->state }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif

    <section class="other_room_area">
        <div class="container">
            <div class="row">
                <div class="other_room">
                    <div class="section_title nice_title content-center">
                        <h3>Search & Filter Rooms</h3>
                    </div>
                    <div class="section_content">
                        <div class="hotel_booking_area">
                            <div class="container">
                                <div class="hotel_booking margin-bottom-30">
                                    <form id="filterForm" method="GET" action="{{ route('accomodation') }}">
                                        <div class="col-lg-2 col-md-2 col-sm-12">
                                            <div class="room_book border-right-dark-1">
                                                <h6>Filter</h6>
                                                <p>Rooms</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-sm-12">
                                            <div class="row">
                                                <div class="form-group col-lg-6 col-md-6 col-sm-6 icon_arrow">
                                                    <div class="input-group border-bottom-dark-2">
                                                        <select class="form-control" name="state_id" id="filter_state">
                                                            <option value="" selected>Select State</option>
                                                            @foreach($states as $state)
                                                                <option value="{{ $state->id }}" {{ request('state_id') == $state->id ? 'selected' : '' }}>{{ $state->state_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-group col-lg-6 col-md-6 col-sm-6 icon_arrow">
                                                    <div class="input-group border-bottom-dark-2">
                                                        <select class="form-control" name="city_id" id="filter_city" {{ request('state_id') ? '' : 'disabled' }}>
                                                            <option value="" selected>Select City</option>
                                                            @foreach($cities as $city)
                                                                <option value="{{ $city->id }}" {{ request('city_id') == $city->id ? 'selected' : '' }}>{{ $city->city_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group col-lg-3 col-md-3 col-sm-12">
                                            <div class="input-group range_slider" style="width: 100%;">
                                                <span style="color:#fff; font-size:12px; font-weight:600;">Max Price: <span id="current_price_label" style="color:#f59e0b;">Rs. 5,000</span></span>
                                                <div class="range" style="margin-top: 5px;">
                                                    <input type="range" name="price_max" id="price-max" value="{{ request('price_max', 5000) }}" min="100" max="5000" step="100" style="width: 100%;">
                                                    <div class="clearfix" style="color: #aab8ca; font-size: 11px; margin-top: 2px;">
                                                        <span class="floatleft">Rs. 100</span>
                                                        <span class="floatright">Rs. 5,000</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-2 col-md-2 col-sm-12 clearfix" style="display: flex; gap: 8px; margin-top: 5px;">
                                            <button type="button" id="clear_filter_btn" class="btn btn-danger btn-md" style="flex: 1; padding: 10px 0; text-align: center; font-weight: 600; display: none;">
                                                <i class="fa fa-refresh"></i> Clear
                                            </button>
                                            <button type="submit" class="btn btn-warning btn-md" style="flex: 1; padding: 10px 0; font-weight: 600;">Filter</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="accomodation_single_room">
                            <div class="container" id="ajax_rooms_container">
                                @include('frontend.partials.stream_rooms', ['rooms' => $rooms])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script>
        $(document).ready(function() {
            // ✨ SECURE SLIDER BINDING ENGINE
            function activateLuxurySlider() {
                var sliderTarget = $('.luxury-hotel-core-slider');
                if (sliderTarget.length > 0) {
                    if (sliderTarget.hasClass('slick-initialized')) {
                        sliderTarget.slick('unslick');
                    }
                    sliderTarget.slick({
                        dots: true,
                        infinite: true,
                        speed: 800,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        autoplay: true,
                        autoplaySpeed: 4000,
                        arrows: true,
                        fade: true, 
                        cssEase: 'linear'
                    });
                }
            }

            // Run on fresh document layout render
            activateLuxurySlider();

            $('#price-max').on('input', function() {
                $('#current_price_label').text('Rs. ' + parseInt($(this).val()).toLocaleString('en-IN'));
            });

            function fetchFilteredRooms(targetUrl) {
                $('#ajax_rooms_container').css('opacity', '0.5');

                $.ajax({
                    url: targetUrl,
                    type: 'GET',
                    success: function(responseHtml) {
                        $('#ajax_rooms_container').html(responseHtml).css('opacity', '1');
                        
                        let state = $('#filter_state').val();
                        let city = $('#filter_city').val();
                        let maxPrice = $('#price-max').val();
                        
                        if(state || city || maxPrice < 5000) {
                            $('#clear_filter_btn').fadeIn(200);
                        } else {
                            $('#clear_filter_btn').fadeOut(200);
                        }
                    },
                    error: function() {
                        $('#ajax_rooms_container').css('opacity', '1');
                        alert('System Core Routing error: Failed to process dynamic pool records.');
                    }
                });
            }

            $('#filterForm').on('submit', function(e) {
                e.preventDefault(); 
                let serializedDataParams = $(this).serialize();
                let requestPathUrl = "{{ route('accomodation') }}?" + serializedDataParams;
                fetchFilteredRooms(requestPathUrl);
            });

            $(document).on('click', '.ajax-pagination-wrapper .pagination a', function(e) {
                e.preventDefault();
                let pageUrlTarget = $(this).attr('href');
                if(pageUrlTarget) {
                    fetchFilteredRooms(pageUrlTarget);
                }
            });

            $(document).on('click', '#clear_filter_btn, #ajax_reset_btn', function() {
                $('#filterForm')[0].reset();
                $('#filter_city').html('<option value="">Select City</option>').prop('disabled', true);
                $('#current_price_label').text('Rs. 5,000');
                $('#clear_filter_btn').fadeOut(200);
                fetchFilteredRooms("{{ route('accomodation') }}");
            });

            $('#filter_state').on('change', function() {
                let stateId = $(this).val();
                let cityDropdown = $('#filter_city');
                
                if(!stateId) {
                    cityDropdown.html('<option value="">Select City</option>').prop('disabled', true);
                    return;
                }

                cityDropdown.html('<option value="">Loading Cities...</option>').prop('disabled', false);

                $.ajax({
                    url: '{{ url("/get-cities") }}/' + stateId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        cityDropdown.html('<option value="">Select City</option>');
                        if(data && data.length > 0) {
                            $.each(data, function(key, city) {
                                cityDropdown.append('<option value="'+ city.id +'">'+ city.city_name +'</option>');
                            });
                        }
                    }
                });
            });
        });
    </script>
@endpush