@extends('layouts.master')
@section('body_id', 'home_one')
@section('content')

<style>
    /* 🏨 HOMEPAGE ROOM IMAGES UNIFORM STYLING */
    .welcome_area .room_media {
        height: 220px;
        width: 100%;
        overflow: hidden;
        background-color: #f5f5f5;
    }

    .welcome_area .room_media a,
    .welcome_area .room_media img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transition: transform 0.5s ease;
    }

    .welcome_area .single_room_wrapper:hover .room_media img {
        transform: scale(1.08);
    }

    .welcome_area .single_room_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 340px;
        margin-bottom: 30px;
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    .welcome_area .room_title {
        padding: 15px !important;
        background: #ffffff;
        width: 100%;
    }

    /* 📊 EQUAL HEIGHT UTILITIES FOR SHOWCASE & REVIEWS */
    .equal-height-showcase-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    
    .showcase-left-panel, .review-right-panel {
        margin-bottom: 30px;
    }
    
    .customer_says_card_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /*height: 450px; /* Left Slider Images ki height ke exact barabar lock */
        background: #ffffff;
        border: 1px solid #edf2f7;
        border-radius: 12px;
        padding: 30px 25px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        position: relative;
    }

    .customer_comment_body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Content vertically center me rahega */
        margin-bottom: 20px;
    }
</style>

    <div class="main_slider_area">
        <div class="main_slider" id="slider_rev">
            <div class="fullwidthbanner-container">
                <div class="fullwidth_home_banner">
                    <ul>
                        @foreach($sliders as $slider)
                        <li data-transition="random" data-slotamount="7" data-masterspeed="1000">
                            <img src="{{ asset($slider->image) }}" alt="{{ $slider->title }}">

                            <div class="tp-caption large_black sfr" data-x="105" data-y="197" data-speed="1200" data-start="1100" data-easing="easeInOutBack"
                                 style="font-family:'Playfair Display', serif; font-size:48px; color:#ffffff; margin-bottom:23px; text-transform:uppercase; line-height:40px;">
                                {{ $slider->title }}
                            </div>

                            <div class="tp-caption large_black sfr" data-x="105" data-y="255" data-speed="1500" data-start="1400" data-easing="easeInOutBack"
                                 style="font-family:'Playfair Display', serif; font-size:20px; color:#ffffff; margin-bottom:23px; text-transform:uppercase;">
                                {{ $slider->subtitle }}
                            </div>

                            <div class="tp-caption lfb carousel-caption-inner" data-x="105" data-y="313" data-speed="1300" data-start="1700" data-easing="easeInOutBack"
                                 style="background:#f7c411;padding:10px;cursor:pointer;">
                                <a href="{{ route('about') }}" style="background:#f7c411; border-radius:0; color:#313a45; display:inline-block; font-size:18px; padding:8px 34px; text-transform:uppercase; border:1px solid #9e811a;">
                                    {{ $slider->button_text ?? 'Explore Now' }}
                                </a>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="hotel_booking_area">
                <div class="mt-5">
                    <div class="hotel_booking">
                        <form id="form1" role="form" action="{{ route('booking.index') }}" method="POST">
                            @csrf
                            <div class="col-lg-1 col-md-1 col-sm-2">
                                <div class="room_book border-right-dark-1">
                                    <h6>Book Your</h6>
                                    <p>Rooms</p>
                                </div>
                            </div>
                            
                            <div class="form-group col-lg-2 col-md-2 col-sm-2">
                                <div class="input-group border-bottom-dark-2">
                                    <input class="form-control mt-2" id="index_check_in" name="check_in_date" type="datetime-local" min="{{ \Carbon\Carbon::now()->format('Y-m-d\TH:i') }}" required style="background: transparent; border: none; box-shadow: none; color: inherit; padding-left: 0;" />
                                    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                            
                            <div class="form-group col-lg-2 col-md-2 col-sm-2">
                                <div class="input-group border-bottom-dark-2">
                                    <input class="form-control mt-2" id="index_check_out" name="check_out_date" type="datetime-local" min="{{ \Carbon\Carbon::now()->format('Y-m-d\TH:i') }}" required style="background: transparent; border: none; box-shadow: none; color: inherit; padding-left: 0;" />
                                    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                            
                            <div class="col-lg-7 col-md-7 col-sm-6">
                                <div class="row">
                                    <div class="form-group col-lg-2 col-md-2 col-sm-3 icon_arrow">
                                        <div class="input-group border-bottom-dark-2">
                                            <select class="form-control dynamic-state" name="state_id" id="home_state" required style="background: transparent; border: none; box-shadow: none; padding-left:0;">
                                                <option value="" selected disabled>State</option>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->id }}">{{ $state->state_name }}</option>
                                                @endforeach
                                            </select>               
                                        </div>
                                    </div>
                                    
                                    <div class="form-group col-lg-2 col-md-2 col-sm-3 icon_arrow">
                                        <div class="input-group border-bottom-dark-2">
                                            <select class="form-control dynamic-city" name="city_id" id="home_city" required disabled style="background: transparent; border: none; box-shadow: none; padding-left:0;">
                                                <option value="" selected disabled>City</option>
                                            </select>               
                                        </div>
                                    </div>
                                    
                                    <div class="form-group col-lg-2 col-md-2 col-sm-3 icon_arrow">
                                        <div class="input-group border-bottom-dark-2">
                                            <select class="form-control dynamic-hotel" name="hotel_id" id="home_hotel" required disabled style="background: transparent; border: none; box-shadow: none; padding-left:0;">
                                                <option value="" selected disabled>Hotel</option>
                                            </select>               
                                        </div>
                                    </div>
                                    
                                    <div class="form-group col-lg-2 col-md-2 col-sm-3 icon_arrow">
                                        <div class="input-group border-bottom-dark-2">
                                            <select class="form-control dynamic-room" name="room_id" id="home_room" required disabled style="background: transparent; border: none; box-shadow: none; padding-left:0;">
                                                <option value="" selected disabled>Room</option>
                                            </select>               
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
                                        <button type="submit" class="btn btn-primary floatright" style="border-radius: 0; font-weight: bold; width: 100%;">Book</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="welcome_area">
        <div class="container">
            <div class="welcome">
                <div class="section_title nice_title content-center">
                    <h3>Welcome To Hotel</h3>
                </div>
                <div class="section_description">
                    <p>Semper ac dolor vitae accumsan. Cras interdum hendrerit lacinia. Phasellus accumsan urna vitae molestie interdum. Nam sed placerat libero, non eleifend dolor.</p>
                </div>
                
                <div class="row">
                   @forelse($rooms as $room)
                    @php
                        if (is_array($room->images)) {
                            $roomImages = $room->images;
                        } else {
                            $roomImages = json_decode($room->images, true);
                        }
                        $firstImage = (!empty($roomImages) && is_array($roomImages)) ? $roomImages[0] : null;
                        if ($firstImage) {
                            $firstImage = ltrim($firstImage, '/');
                        }
                    @endphp

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="single_room_wrapper clearfix">
                            <figure class="uk-overlay uk-overlay-hover">
                                <div class="room_media">
                                    <a href="{{ route('room_details', $room->slug) }}">
                                        @if($firstImage)
                                            <img src="{{ asset($firstImage) }}" alt="{{ $room->room_name }}">
                                        @else
                                            <img src="{{ asset('assets/img/hotel-facility-one.jpg') }}" alt="No Image">
                                        @endif
                                    </a>
                                </div>
                                
                                <div class="room_title border-bottom-whitesmoke clearfix">
                                    <div class="left_room_title floatleft">
                                        <h6>{{ $room->room_name }}</h6>
                                        <p>Rs. {{ number_format($room->price_per_night, 2) }}/ <span>night</span></p>
                                    </div>
                                    <div class="left_room_title floatright">
                                        <a href="{{ route('room_details', $room->slug) }}" class="btn">Book</a>
                                    </div>
                                </div>
                                
                                <div class="uk-overlay-panel uk-overlay-background single_wrapper_details clearfix animated bounceInDown">
                                    <div class="border-dark-1 padding-22 clearfix single_wrapper_details_pad">
                                        <h5>Room name :- {{ $room->room_type }}</h5>
                                        @if(isset($room->hotel))
                                            <p style="font-weight: 600; color: #f7c411; font-size: 12px; margin-bottom: 5px;">
                                                <i class="fa fa-building"></i> {{ $room->hotel->name }}
                                            </p>
                                        @endif
                                        <p>{{ $room->description }} | Max Guests: {{ $room->max_occupancy }}</p>
                                        <div class="single_room_cost clearfix">
                                            <div class="floatleft">
                                                <p>Rs. {{ number_format($room->price_per_night, 2) }}/ <span>night</span></p>
                                            </div>
                                            <div class="floatright">
                                                <a href="{{ route('room_details', $room->slug) }}" class="btn">Book</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </figure>
                        </div>
                    </div>
                    @empty
                    <div class="col-12 text-center">
                        <p>No rooms available at the moment.</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <section class="hotel_facilities_area margin-top-115 margin-bottom-100">
        <div class="container">
            <div class="hotel_facilities">
                <div class="section_title nice_title content-center">
                    <h3>Hotel Facilities</h3>
                </div>
                <div class="hotel_facilities_content">
                    <div role="tabpanel">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#restaurant" aria-controls="restaurant" role="tab" data-toggle="tab"><img src="{{ asset('assets/img/home-facilities-icon-eleven.png')}}" alt="restaurant"><span>Restaurant</span></a></li>
                            <li role="presentation"><a href="#sports-club" aria-controls="sports-club" role="tab" data-toggle="tab"><img src="{{ asset('assets/img/home-facilities-icon-seven.png')}}" alt="sports-club"><span>Sports Club</span></a></li>
                            <li role="presentation"><a href="#pick-up" aria-controls="pick-up" role="tab" data-toggle="tab"><img src="{{ asset('assets/img/home-facilities-icon-eight.png')}}" alt="pick-up"><span>Pick Up</span></a></li>
                            <li role="presentation"><a href="#bar" aria-controls="bar" role="tab" data-toggle="tab"><img src="{{ asset('assets/img/home-facilities-icon-nine.png')}}" alt="bar"><span>Bar</span></a></li>
                            <li role="presentation"><a href="#gym" aria-controls="gym" role="tab" data-toggle="tab"><img src="{{ asset('assets/img/home-facilities-icon-ten.png')}}" alt="gym"><span>Gym</span></a></li>
                        </ul>

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="restaurant">
                                <div class="single-tab-content">
                                    <div class="row">
                                        <div class="col-lg-5 col-md-5 Explo-sm-12 col-xs-12">
                                            <div class="single-tab-image"><a href="#"><img src="{{ asset('assets/img/hotel-facility-one.jpg')}}" alt="Restaurant"></a></div>
                                        </div>
                                        <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                                            <div class="single-tab-details">
                                                <h6>The world class</h6>
                                                <h3>Restaurant & Banquets</h3>
                                                <p>Semper ac dolor vitae accumsan. Cras interdum hendrerit lacinia. Phasellus accumsan urna vitae molestie interdum. Nam sed placerat libero, non eleifend dolor.</p>
                                                <div class="our_services">
                                                    <a href="#" class="margin-right-33">Service Hours: 19:00–22:00</a>
                                                    <a href="#">Service Charge: $15</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about_us_area margin-bottom-128">
        <div class="container">
            <div class="about_us clearfix equal-height-showcase-wrapper">
                
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 showcase-left-panel">
                    <div class="showcase">
                        <div class="section_title margin-bottom-50">
                            <h5>Hotel Showcase</h5>
                        </div>
                        <div class="section_description">
                            <div class="clearfix demo">
                                <ul id="vertical" class="gallery list-unstyled">
                                    @php
                                        $showcaseHotels = \DB::table('hotels')->where('status', 1)->latest()->take(10)->get();
                                    @endphp

                                    @forelse($showcaseHotels as $hotel)
                                        @php
                                            $hotelImg = asset('assets/img/lightslider-img/cS-18.jpg');
                                            if (!empty($hotel->cover_image)) {
                                                $hotelImg = asset($hotel->cover_image);
                                            }
                                        @endphp
                                        <li data-thumb="{{ $hotelImg }}" style="position: relative;">
                                            <img alt="{{ $hotel->hotel_name ?? 'Hotel' }}" src="{{ $hotelImg }}" style="width: 100%; height: 450px; object-fit: cover;" />
                                            <div class="hotel-showcase-overlay" style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 25px 20px; color: #fff; text-align: left; z-index: 10;">
                                                <h3 style="margin: 0 0 5px 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">{{ $hotel->hotel_name }}</h3>
                                                <p style="margin: 0; font-size: 14px; font-weight: 500; color: #fe5d5d; text-transform: uppercase; letter-spacing: 0.05em;"><i class="fa fa-map-marker"></i> {{ $hotel->state ?? 'N/A' }}</p>
                                            </div>
                                        </li>
                                    @empty
                                        <li data-thumb="{{ asset('assets/img/lightslider-img/cS-18.jpg')}}"><img src="{{ asset('assets/img/lightslider-img/cS-18.jpg')}}" /></li>
                                    @endforelse
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 review-right-panel">
                    <div class="customer_says" style="height: 100%;">
                        <div class="section_title margin-bottom-50">
                            <h5>Customer Says</h5>
                        </div>
                        <div class="section_description">
                            <div id="customer_says_slider" class="carousel slide" data-ride="carousel" data-pause="none" style="height: 100%;">
                                <div class="carousel-inner" role="listbox" style="height: 100%;">
                                    @php
                                        // DYNAMIC JOIN: reviews ko rooms aur hotels table ke sath match karke hotel name nikala hai
                                        $activeReviews = \DB::table('reviews')
                                            ->join('users', 'reviews.user_id', '=', 'users.id')
                                            ->join('rooms', 'reviews.room_id', '=', 'rooms.id')
                                            ->join('hotels', 'rooms.hotel_id', '=', 'hotels.id')
                                            ->select('reviews.*', 'users.full_name', 'hotels.hotel_name')
                                            ->where('reviews.status', 1)
                                            ->latest()
                                            ->take(5)
                                            ->get();
                                    @endphp

                                    @forelse($activeReviews as $index => $review)
                                        <div class="item {{ $index == 0 ? 'active' : '' }}">
                                            <div class="customer_says_card_wrapper">
                                                <div class="customer_comment_body">
                                                    <div style="color: #ffb800; margin-bottom: 5px; font-size: 14px;">
                                                        {!! str_repeat('<i class="fa fa-star"></i>', $review->rating) !!}
                                                    </div>
                                                    
                                                    <div style="font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--primary-color); margin-bottom: 12px;">
                                                        <i class="fa fa-building-o" style="margin-right: 4px;"></i> {{ $review->hotel_name }}
                                                    </div>

                                                    <p style="color: #525f7f; font-size: 14px; line-height: 1.5; font-style: italic; margin: 0;">
                                                        "{{ Str::limit($review->comment ?? 'Excellent stay and highly professional team.', 140) }}"
                                                    </p>
                                                </div>
                                                <div class="customer_detail clearfix" style="border-top: 1px solid #f1f5f9; padding-top: 15px; display: flex; align-items: center;">
                                                    <div class="customer_pic">
                                                        <div style="width: 45px; height: 45px; background: #fe5d5d; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; box-shadow: 0 4px 10px rgba(254,93,93,0.2);">
                                                            {{ strtoupper(substr($review->full_name, 0, 1)) }}
                                                        </div>
                                                    </div>
                                                    <div class="customer_identity" style="padding-left: 12px;">
                                                        <h6 style="margin: 0 0 2px 0; font-weight: 700; color: #32325d; font-size: 14px;">{{ $review->full_name }}</h6>
                                                        <p style="margin: 0; font-size: 11px; color: #8898aa;"><i class="fa fa-check-circle text-success"></i> Verified Guest</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="item active">
                                            <div class="customer_says_card_wrapper" style="justify-content: center; text-align: center;">
                                                <p class="text-muted">No verified customer reviews found.</p>
                                            </div>
                                        </div>
                                    @endforelse
                                </div>
                                
                                <div style="position: absolute; top: -73px; right: 0; display: flex; gap: 5px;">
                                    <a class="btn btn-default btn-sm" href="#customer_says_slider" role="button" data-slide="prev" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; padding: 5px 10px;"><i class="fa fa-angle-left" style="font-size: 16px; font-weight: bold; color: #4a5568;"></i></a>
                                    <a class="btn btn-default btn-sm" href="#customer_says_slider" role="button" data-slide="next" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; padding: 5px 10px;"><i class="fa fa-angle-right" style="font-size: 16px; font-weight: bold; color: #4a5568;"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $(document).ajaxStart(function() {
        $('button[type="submit"]').prop('disabled', true).text('Loading...');
    }).ajaxStop(function() {
        $('button[type="submit"]').prop('disabled', false).text('Book');
    });

    $('#home_state').on('change', function() {
        let stateId = $(this).val();
        let cityDropdown = $('#home_city');
        cityDropdown.html('<option value="" disabled selected>Loading Cities...</option>').prop('disabled', false);
        $('#home_hotel').html('<option value="" disabled selected>Select Hotel</option>').prop('disabled', true);
        $('#home_room').html('<option value="" disabled selected>Select Room</option>').prop('disabled', true);

        $.ajax({
            url: '{{ url("/get-cities") }}/' + stateId,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                cityDropdown.html('<option value="" disabled selected>City</option>');
                if(data && data.length > 0) {
                    $.each(data, function(key, city) {
                        let cityName = city.city_name ? city.city_name : (city.name ? city.name : 'Unknown City');
                        cityDropdown.append('<option value="'+ city.id +'">'+ cityName +'</option>');
                    });
                } else {
                    cityDropdown.html('<option value="" disabled selected>No Cities</option>');
                }
            }
        });
    });

    $('#home_city').on('change', function() {
        let cityId = $(this).val();
        let hotelDropdown = $('#home_hotel');
        hotelDropdown.html('<option value="" disabled selected>Loading Hotels...</option>').prop('disabled', false);
        $('#home_room').html('<option value="" disabled selected>Select Room</option>').prop('disabled', true);

        $.ajax({
            url: '{{ url("/get-hotels") }}/' + cityId,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                hotelDropdown.html('<option value="" disabled selected>Hotel</option>');
                if(data && data.length > 0) {
                    $.each(data, function(key, hotel) {
                        let hotelName = hotel.hotel_name ? hotel.hotel_name : (hotel.name ? hotel.name : 'Unknown Hotel');
                        hotelDropdown.append('<option value="'+ hotel.id +'">'+ hotelName +'</option>');
                    });
                } else {
                    hotelDropdown.html('<option value="" disabled selected>No Hotels</option>');
                }
            }
        });
    });

    $('#home_hotel').on('change', function() {
        let hotelId = $(this).val();
        let roomDropdown = $('#home_room');
        roomDropdown.html('<option value="" disabled selected>Loading Rooms...</option>').prop('disabled', false);

        $.ajax({
            url: '{{ url("/get-rooms") }}/' + hotelId,
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                roomDropdown.html('<option value="" disabled selected>Room</option>');
                if(data && data.length > 0) {
                    $.each(data, function(key, room) {
                        roomDropdown.append('<option value="'+ room.id +'">'+ room.room_type +' (Rs. '+ room.price_per_night +')</option>');
                    });
                } else {
                    roomDropdown.html('<option value="" disabled selected>No Rooms</option>');
                }
            }
        });
    });
});
</script>
@endpush