@extends('layouts.app')
@section('content')
@php
$allHotels = $allHotels ?? [];
$SelectedData = $SelectedData ?? [];
$cities = $cities ?? [];
$FiltersData = $FiltersData ?? [];
$defaulthotels = $defaulthotels ?? null;
$recommendedHotels = $recommendedHotels ?? collect();
@endphp

{{-- Page-specific styles only — search bar CSS already comes from the partial --}}
<style>
    .sort-container {
        background: #fff;
        border: 1px solid var(--bdr-lt);
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .filter-card {
        background: #fff;
        border: 1px solid var(--bdr-lt);
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
        position: sticky;
        top: 20px;
        align-self: flex-start;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    .filter-card h5 {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--p);
        margin-bottom: 16px;
    }

    .filter-card h6 {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: var(--sub);
        margin-bottom: 10px;
    }

    .hotel-card {
        background: #fff;
        border: 1px solid var(--bdr-lt) !important;
        border-radius: 14px !important;
        overflow: hidden;
        margin-bottom: 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
        transition: var(--tr);
    }

    .hotel-card:hover {
        box-shadow: 0 6px 24px rgba(21, 101, 192, .12);
        border-color: #90caf9 !important;
        transform: translateY(-1px);
    }

    .hotel-card img {
        object-fit: cover;
        width: 100%;
        height: 200px;
    }

    .hotel-name-search-wrap {
        display: flex;
        align-items: center;
        flex: 1;
        gap: 8px;
        background: #f8fafc;
        border: 1.5px solid #e2e8f0;
        border-radius: 50px;
        padding: 8px 18px;
        width: 100%;
        transition: var(--tr);
    }

    .hotel-name-search-wrap input {
        border: none;
        outline: none;
        background: transparent;
        color: #334155;
        font-size: 13.5px;
        font-weight: 500;
        width: 100%;
        text-align: left;
    }

    .hotel-name-search-wrap:focus-within {
        border-color: var(--p);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(21, 101, 192, .08);
    }



    .recommended-section {
        background: #fff;
        border: 1px solid var(--bdr-lt);
        border-radius: 14px;
        padding: 20px;
        margin-top: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    }

    .recommended-section h5 {
        font-size: 14px;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .recommended-section h5 i {
        color: var(--p);
    }
</style>

<div class="d-flex flex-column flex-column-fluid">
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">

            @include('hotels.partials.hotel-card')

            @if(count($allHotels) > 0)
            <div class="sort-container">
                <div class="d-flex align-items-center gap-2">
                    <h5 class="fw-bold mb-0" id="hotelCountText">
                        {{ count($allHotels) }} Hotels Found
                    </h5>
                </div>
                <form action="{{ route('b2b.hotels.filteredhotels') }}" method="GET" id="rateTypeForm" class="d-flex flex-wrap align-items-end gap-3">
                    @csrf
                    <input type="hidden" name="search_data" value='@json($SelectedData)'>
                    @php $rateType = $SelectedData['rate_type'] ?? 'concise'; @endphp
                    <label for="rateType" class="mb-0 text-nowrap fw-semibold" style="font-size:13px;">Sort by</label>
                    <select id="rateType" class="form-select form-select-sm" name="rate_type" onchange="$('#rateTypeForm').submit()" style="min-width:200px;font-size:13px;">
                        <option value="comprehensive" {{ $rateType == 'comprehensive' ? 'selected' : '' }}>Most Rated Hotels</option>
                        <option value="concise" {{ $rateType == 'concise' ? 'selected' : '' }}>Cheapest Hotels</option>
                    </select>
                </form>
            </div>
            @endif

            <div class="row">

                @if(count($SelectedData) > 0 && count($allHotels) == 0)
                <div class="col-12 d-flex flex-column align-items-center justify-content-center p-5 my-5 border rounded-4 bg-white shadow-sm">
                    <img src="https://cdn-icons-png.flaticon.com/512/6134/6134065.png" alt="No Hotels Found" width="120" height="120" class="mb-4" style="opacity:.6;">
                    <h4 class="text-danger mb-2">No Hotels Found</h4>
                    <p class="text-muted mb-0 text-center" style="max-width:500px;">We couldn't find any hotels matching your search. Try modifying the filters, changing the dates, or exploring nearby areas.</p>
                </div>
                @endif

                @if(count($allHotels))

                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="hotel-name-search-wrap">
                        <input type="text" id="hotelNameSearch" placeholder="Search hotel by name...">
                        <i class="bi bi-x-circle-fill" id="clearHotelSearch" title="Clear" style="color:#cbd5e1;font-size:14px;cursor:pointer;display:none;"></i>
                        <i class="bi bi-search" style="color:#94a3b8;font-size:13px;"></i>
                    </div>
                    <div class="btn-group toggle-view flex-shrink-0" role="group">
                        <button type="button" class="btn btn-sm btn-outline-primary view-toggle-btn active" id="listViewBtn"><i class="bi bi-list-ul me-1"></i> List View</button>
                        <button type="button" class="btn btn-sm btn-outline-primary view-toggle-btn" id="gridViewBtn"><i class="bi bi-grid-3x3-gap-fill me-1"></i> Grid View</button>
                    </div>
                </div>

                <div class="col-md-3 mb-4">
                    <div class="filter-card">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">Filters</h5>
                            <button type="button" id="resetFilters"
                                style="background:linear-gradient(135deg,#1565C0,#1976D2);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;padding:5px 14px;cursor:pointer;">
                                <i class="bi bi-arrow-counterclockwise me-1"></i> Reset
                            </button>
                        </div>
                        <h6>Preferences</h6>
                        @foreach(['Free Cancellation','Breakfast Included','Top Rated'] as $opt)
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input pref-filter" type="checkbox" value="{{ strtolower($opt) }}" id="{{ Str::slug($opt) }}">
                            <label class="form-check-label" for="{{ Str::slug($opt) }}" style="font-size:13px;">{{ $opt }}</label>
                        </div>
                        @endforeach
                        <h6 class="mt-3">Star Rating</h6>
                        @foreach([5,4,3,2,1] as $star)
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input star-filter" type="checkbox" value="{{ $star }}" id="star{{ $star }}">
                            <label class="form-check-label" for="star{{ $star }}" style="font-size:13px;">{{ $star }} Star</label>
                        </div>
                        @endforeach
                        <h6 class="mt-3">Property Type</h6>
                        @foreach(['0' => 'Hotels', '3' => 'Apartments / Aparthotel'] as $val => $lbl)
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input prop-filter" type="checkbox" value="{{ $val }}" id="prop{{ $val }}">
                            <label class="form-check-label" for="prop{{ $val }}" style="font-size:13px;">{{ $lbl }}</label>
                        </div>
                        @endforeach
                        <h6 class="mt-3">Price Range</h6>
                        <select class="form-select form-select-sm" id="priceRange" style="font-size:13px;">
                            <option value="">Any Price</option>
                            <option value="0-2000">₹0 – ₹2,000</option>
                            <option value="2000-5000">₹2,000 – ₹5,000</option>
                            <option value="5000-10000">₹5,000 – ₹10,000</option>
                            <option value="10000+">₹10,000+</option>
                        </select>
                        <h6 class="mt-3">Facilities</h6>
                        @foreach(['Free WiFi','Free Self Parking','Free Dinner'] as $fac)
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input fac-filter" type="checkbox" value="{{ strtolower($fac) }}" id="fac{{ $loop->index }}">
                            <label class="form-check-label" for="fac{{ $loop->index }}" style="font-size:13px;">{{ $fac }}</label>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="col-md-9" id="listViewContainer">
                    <div id="noFilterResults" style="display:none;">
                        <div class="d-flex flex-column align-items-center justify-content-center p-4 border rounded-4 bg-white shadow-sm mb-3">
                            <img src="https://cdn-icons-png.flaticon.com/512/6134/6134065.png" width="70" height="70" class="mb-3" style="opacity:.6;">
                            <h5 class="text-danger mb-2">No Hotels Match Your Filters</h5>
                            <p class="text-muted text-center mb-2" style="max-width:400px;font-size:13px;">Try adjusting or resetting your filters.</p>
                            <button class="btn btn-sm" onclick="$('#resetFilters').click()"
                                style="background:linear-gradient(135deg,#1565C0,#1976D2);color:#fff;border:none;border-radius:8px;font-weight:600;">
                                <i class="bi bi-arrow-counterclockwise me-1"></i> Reset Filters
                            </button>
                        </div>
                    </div>

                    @forelse($allHotels as $hotel)
                    <div class="hotel-card"
                        data-name="{{ strtolower($hotel['name'] ?? '') }}"
                        data-star="{{ (int)($hotel['star_rating'] ?? 0) }}"
                        data-price="{{ (float)($hotel['display_price'] ?? 0) }}"
                        data-property="{{ strtolower($hotel['property_type'] ?? 'hotel') }}"
                        data-refundable="{{ strtolower($hotel['Refund_Status']['text'] ?? '') }}"
                        data-meal="{{ strtolower($hotel['boarding_details']['text'] ?? $hotel['mealPlan']['text'] ?? '') }}"
                        data-facilities="{{ strtolower(implode(',', array_column($hotel['facilities'] ?? [], 'name'))) }}">
                        <div class="row g-0 align-items-center">
                            <div class="col-md-4" style="min-height:160px;">
                                <img src="{{ $hotel['image'] ?? '' }}"
                                    style="height:100%;max-height:200px;border-radius:12px 0 0 12px;object-fit:cover;width:100%;"
                                    alt="{{ $hotel['name'] ?? '' }}">
                            </div>
                            <div class="col-md-5 px-3 py-3">
                                <h5 class="fw-bold mb-1" style="font-size:15px;">
                                    {{ $hotel['name'] ?? '' }}
                                    {!! str_repeat('<i class="bi bi-star-fill text-warning" style="font-size:11px;"></i>', (int)($hotel['star_rating'] ?? 3)) !!}
                                </h5>
                                <div class="text-muted mb-2" style="font-size:12px;">
                                    <i class="fa fa-map-marker-alt me-1" style="color:var(--p);"></i>{{ $hotel['address'] ?? '' }}
                                </div>
                                @if(!empty($hotel['boarding_details']))
                                <span class="badge bg-opacity-10 {{ $hotel['boarding_details']['class'] ?? '' }} border mb-2">{{ $hotel['boarding_details']['text'] }}</span>
                                @elseif(!empty($hotel['mealPlan']))
                                <span class="badge bg-opacity-10 {{ $hotel['mealPlan']['class'] ?? '' }} border mb-2">{{ $hotel['mealPlan']['text'] }}</span>
                                @endif
                                @if(!empty($hotel['property_type']))
                                <span class="badge mb-2" style="background-color:#e0e7ff;color:#3730a3;font-size:12px;font-weight:500;margin-right:5px;display:inline-block;">
                                    <i class="bi bi-building me-1"></i>{{ $hotel['property_type'] }}
                                </span>
                                @endif
                                @if(!empty($hotel['facilities']))
                                <div class="mb-2">
                                    @foreach($hotel['facilities'] as $facility)
                                    <span class="badge" style="background-color:#d1e7dd;color:#0f5132;font-size:12px;font-weight:500;margin-right:5px;margin-bottom:4px;display:inline-block;">
                                        <i class="{{ $facility['icon'] ?? 'bi bi-check' }} me-1"></i>{{ $facility['name'] }}
                                    </span>
                                    @endforeach
                                </div>
                                @endif
                                @if(!empty($hotel['room_description']))
                                <div class="mt-2">
                                    <div class="fw-semibold text-dark mb-1" style="font-size:12px;"><i class="bi bi-house-door me-1"></i>Recommended Room</div>
                                    <div class="bg-primary bg-opacity-10 text-primary px-2 py-1 rounded-3 d-inline-block" style="font-size:12px;">{!! $hotel['room_description'] !!}</div>
                                </div>
                                @endif
                                <div class="mt-3">
                                    <a href="{{ route('b2b.hotel.details', [
                                            'hotel_master_id' => $hotel['hotel_master_id'],                                      
                                            'dates'           => $SelectedData['daterange'] ?? '',
                                            'client'          => $SelectedData['client_code'] ?? '',
                                            'supplier_offers' => urlencode(json_encode($hotel['supplier_offers'] ?? [])),
                                            'search_data'     => urlencode(json_encode($SelectedData))
                                        ]) }}" class="btn btn-sm" style="background:linear-gradient(135deg,#1565C0,#1976D2);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;padding:6px 16px;" target="_blank">Show Full Details
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-3 text-end pe-3 py-3">
                                @if(!empty($hotel['Refund_Status']))
                                <div class="mb-2">
                                    <span style="{{ $hotel['Refund_Status']['custom_text'] ?? '' }}font-weight:600;padding:5px 12px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;font-size:13px;">
                                        <i class="{{ $hotel['Refund_Status']['custom_icon'] ?? '' }}"></i>
                                        {{ $hotel['Refund_Status']['text'] }}
                                    </span>
                                </div>
                                @endif
                                @if(!empty($hotel['promo_text']))
                                <div class="promo-badge mb-1" style="display:inline-block;background:linear-gradient(135deg,#0512c38f,#ff4b2b);color:#fff;font-weight:600;font-size:13px;padding:5px 14px;border-radius:20px;">{{ $hotel['promo_text'] }}</div>
                                <div><span class="badge" style="background:#f3e5f5;color:#7b1fa2;font-size:11px;">Limited Time Offer</span></div>
                                    @if(!empty($hotel['original_price']) && round((float)$hotel['original_price'], 2) > round((float)$hotel['display_price'], 2))
                                    
                                    <div class="text-decoration-line-through text-muted small" data-original-price="{{ $hotel['original_price'] }}" data-display-price="{{ $hotel['display_price'] }}">
                                        @if(strtolower($hotel['currency'] ?? 'inr') == 'inr') ₹ @endif
                                        {{ number_format($hotel['original_price'] ?? 0, 2) }}
                                        <span style="font-size:11px;color:var(--sub);font-weight:400;">{{ $hotel['currency'] ?? 'INR' }}</span>
                                    </div>
                                    @endif
                                @endif
                                <div class="fw-bold mb-1" style="font-size:20px;color:var(--dark);">
                                    @if(strtolower($hotel['currency'] ?? 'inr') == 'inr') ₹ @endif
                                    {{ number_format($hotel['display_price'] ?? 0, 2) }}
                                    <span style="font-size:11px;color:var(--sub);font-weight:400;">{{ $hotel['currency'] ?? 'INR' }}</span>
                                </div>
                                @if(($hotel['taxAmount'] ?? 0) > 0)
                                <div style="font-size:11px;color:var(--sub);">
                                    + @if(strtolower($hotel['currency'] ?? 'inr') == 'inr') ₹ @endif
                                    {{ number_format($hotel['taxAmount'] ?? 0, 2) }} taxes &amp; fees
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="text-muted text-center py-4">No hotels available.</div>
                    @endforelse



                    @if($recommendedHotels->count())
                    <div class="recommended-section">
                        <h5><i class="fa fa-thumbs-up"></i> Recommended Hotels</h5>
                        @foreach($recommendedHotels as $hotel)
                        <div class="hotel-card" data-name="{{ strtolower($hotel['name'] ?? '') }}" data-star="{{ (int)($hotel['star_rating'] ?? 0) }}" data-price="{{ (float)($hotel['display_price'] ?? 0) }}">
                            <div class="row g-0 align-items-center">
                                <div class="col-md-4" style="min-height:140px;">
                                    <img src="{{ $hotel['image'] ?? '' }}" style="height:100%;max-height:180px;border-radius:12px 0 0 12px;" alt="{{ $hotel['name'] ?? '' }}">
                                </div>
                                <div class="col-md-5 px-3 py-3">
                                    <h5 class="fw-bold mb-1" style="font-size:14px;">
                                        {{ $hotel['name'] ?? '' }}
                                        {!! str_repeat('<i class="bi bi-star-fill text-warning" style="font-size:10px;"></i>', (int)($hotel['star_rating'] ?? 3)) !!}
                                    </h5>
                                    <div class="text-muted mb-2" style="font-size:12px;"><i class="fa fa-map-marker-alt me-1" style="color:var(--p);"></i>{{ $hotel['address'] ?? '' }}</div>
                                    @if(!empty($hotel['boarding_details']))
                                    <span class="badge bg-opacity-10 {{ $hotel['boarding_details']['class'] ?? '' }} border mb-2">{{ $hotel['boarding_details']['text'] }}</span>
                                    @elseif(!empty($hotel['mealPlan']))
                                    <span class="badge bg-opacity-10 {{ $hotel['mealPlan']['class'] ?? '' }} border mb-2">{{ $hotel['mealPlan']['text'] }}</span>
                                    @endif
                                    @if(!empty($hotel['facilities']))
                                    <div class="mb-2">
                                        @foreach($hotel['facilities'] as $facility)
                                        <span class="badge" style="background-color:#d1e7dd;color:#0f5132;font-size:11px;margin-right:4px;margin-bottom:3px;display:inline-block;">
                                            <i class="{{ $facility['icon'] ?? 'bi bi-check' }} me-1"></i>{{ $facility['name'] }}
                                        </span>
                                        @endforeach
                                    </div>
                                    @endif
                                    @if(!empty($hotel['room_description']))
                                    <div class="bg-primary bg-opacity-10 text-primary px-2 py-1 rounded-3 d-inline-block mb-2" style="font-size:12px;">{!! $hotel['room_description'] !!}</div>
                                    @endif
                                    <a href="{{ route('b2b.hotel.details', [
                                            'hotel_master_id' => $hotel['hotel_master_id'],                                      
                                            'dates'           => $SelectedData['daterange'] ?? '',
                                            'client'          => $SelectedData['client_code'] ?? '',
                                            'supplier_offers' => urlencode(json_encode($hotel['supplier_offers'] ?? [])),
                                            'search_data'     => urlencode(json_encode($SelectedData))
                                        ]) }}" class="btn btn-sm" style="background:linear-gradient(135deg,#1565C0,#1976D2);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;padding:6px 16px;" target="_blank">Show Full Details
                                    </a>
                                </div>
                                <div class="col-md-3 text-end pe-3 py-3">
                                    @if(!empty($hotel['Refund_Status']))
                                    <div class="mb-2">
                                        <span style="{{ $hotel['Refund_Status']['custom_text'] ?? '' }}font-weight:600;padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:5px;font-size:12px;">
                                            <i class="{{ $hotel['Refund_Status']['custom_icon'] ?? '' }}"></i>
                                            {{ $hotel['Refund_Status']['text'] }}
                                        </span>
                                    </div>
                                    @endif

                                    @if(!empty($hotel['promo_text']))
                                    <div class="promo-badge mb-1" style="display:inline-block;background:linear-gradient(135deg,#0512c38f,#ff4b2b);color:#fff;font-weight:600;font-size:13px;padding:5px 10px 5px 10px;border-radius:20px;">{{ $hotel['promo_text'] }}</div>
                                    <div><span class="badge" style="background:#f3e5f5;color:#7b1fa2;font-size:11px;">Limited Time Offer</span></div>
                                    @if(!empty($hotel['original_price']) && round((float)$hotel['original_price'], 2) > round((float)$hotel['display_price'], 2))
                                    <div class="text-decoration-line-through text-muted small" data-original-price="{{ $hotel['original_price'] }}" data-display-price="{{ $hotel['display_price'] }}">
                                        @if(strtolower($hotel['currency'] ?? 'inr') == 'inr') ₹ @endif
                                        {{ number_format($hotel['original_price'] ?? 0, 2) }}
                                        <span style="font-size:11px;color:var(--sub);font-weight:400;">{{ $hotel['currency'] ?? 'INR' }}</span>
                                    </div>
                                    @endif
                                    @endif
                                    <div class="fw-bold mb-1" style="font-size:17px;color:var(--dark);">
                                        @if(strtolower($hotel['currency'] ?? 'inr') == 'inr') ₹ @endif
                                        {{ number_format($hotel['display_price'] ?? 0, 2) }}
                                        <span style="font-size:11px;color:var(--sub);font-weight:400;">{{ $hotel['currency'] ?? 'INR' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>

                <div class="col-md-9" id="gridViewContainer" style="display:none;">
                    <div class="row">
                        @forelse($allHotels as $hotel)
                        <div class="col-md-6 col-lg-4 mb-4">
                            <div class="hotel-card h-100 d-flex flex-column" data-name="{{ strtolower($hotel['name'] ?? '') }}" data-star="{{ (int)($hotel['star_rating'] ?? 0) }}" data-price="{{ (float)($hotel['display_price'] ?? 0) }}">
                                <img src="{{ $hotel['image'] ?? '' }}" style="height:180px;border-radius:12px 12px 0 0;" alt="{{ $hotel['name'] ?? '' }}">
                                <div class="p-3 flex-grow-1 d-flex flex-column">
                                    <h6 class="fw-bold mb-1" style="font-size:13px;">
                                        {{ $hotel['name'] ?? '' }}
                                        {!! str_repeat('<i class="bi bi-star-fill text-warning" style="font-size:10px;"></i>', (int)($hotel['star_rating'] ?? 3)) !!}
                                    </h6>
                                    <div class="text-muted mb-2" style="font-size:11px;"><i class="fa fa-map-marker-alt me-1" style="color:var(--p);"></i>{{ $hotel['address'] ?? '' }}</div>
                                    <div class="mt-auto">
                                        <div class="fw-bold mb-1" style="font-size:16px;color:var(--dark);">
                                            @if(strtolower($hotel['currency'] ?? 'inr') == 'inr') ₹ @endif
                                            {{ number_format($hotel['display_price'] ?? 0, 2) }}
                                        </div>
                                        <a href="{{ route('b2b.hotel.details', [
                                                'hotel_master_id' => $hotel['hotel_master_id'],                                      
                                                'dates'           => $SelectedData['daterange'] ?? '',
                                                'client'          => $SelectedData['client_code'] ?? '',
                                                'supplier_offers' => urlencode(json_encode($hotel['supplier_offers'] ?? [])),
                                                'search_data'     => urlencode(json_encode($SelectedData))
                                            ]) }}" class="btn btn-sm" style="background:linear-gradient(135deg,#1565C0,#1976D2);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;padding:6px 16px;" target="_blank">Show Full Details
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="text-muted text-center py-4">No hotels available.</div>
                        @endforelse
                    </div>
                    @if($recommendedHotels->count())
                    <div class="recommended-section">
                        <h5><i class="fa fa-thumbs-up"></i> Recommended Hotels</h5>
                        <div class="row">
                            @foreach($recommendedHotels as $hotel)
                            <div class="col-md-6 col-lg-4 mb-3">
                                <div class="hotel-card h-100 d-flex flex-column">
                                    <img src="{{ $hotel['image'] ?? '' }}" style="height:160px;border-radius:12px 12px 0 0;" alt="{{ $hotel['name'] ?? '' }}">
                                    <div class="p-3 flex-grow-1 d-flex flex-column">
                                        <h6 class="fw-bold mb-1" style="font-size:13px;">{{ $hotel['name'] ?? '' }}</h6>
                                        <div class="text-muted mb-2" style="font-size:11px;">{{ $hotel['address'] ?? '' }}</div>
                                        <div class="mt-auto">
                                            <div class="fw-bold mb-1" style="font-size:15px;color:var(--dark);">
                                                @if(strtolower($hotel['currency'] ?? 'inr') == 'inr') ₹ @endif
                                                {{ number_format($hotel['display_price'] ?? 0, 2) }}
                                            </div>
                                            <a href="{{ route('b2b.hotel.details', [
                                                    'hotel_master_id' => $hotel['hotel_master_id'],                                      
                                                    'dates'           => $SelectedData['daterange'] ?? '',
                                                    'client'          => $SelectedData['client_code'] ?? '',
                                                    'supplier_offers' => urlencode(json_encode($hotel['supplier_offers'] ?? [])),
                                                    'search_data'     => urlencode(json_encode($SelectedData))
                                                ]) }}" class="btn btn-sm" style="background:linear-gradient(135deg,#1565C0,#1976D2);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;padding:6px 16px;" target="_blank">Show Full Details
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>

                @endif
            </div>

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



{{-- Page-specific JS only — jQuery, ALL_COUNTRIES, nationality/calendar/guest/recent-search
     logic all come from the partial already included above --}}
<script>
    @if(count($allHotels) > 0 && !empty($SelectedData['dest_label']))
    @php
    $r_dest = addslashes($SelectedData['dest_label'] ?? '');
    $r_city = addslashes($SelectedData['city_id'] ?? '');
    $r_country = addslashes($SelectedData['country_code'] ?? '');
    $r_hotel = addslashes($SelectedData['hotel_id'] ?? '');
    $r_date = addslashes($SelectedData['daterange'] ?? '');
    $r_client = addslashes($SelectedData['client_code'] ?? '');
    $r_guests = addslashes($SelectedData['guests'] ?? '');
    @endphp
        (function() {
            recentAdd({
                dest_label: '{{ $r_dest }}',
                city_id: '{{ $r_city }}',
                country_code: '{{ $r_country }}',
                hotel_id: '{{ $r_hotel }}',
                daterange: '{{ $r_date }}',
                client_code: '{{ $r_client }}',
                guests_label: '{{ $r_guests }}',
            });
        })();
    @endif

    // ── HOTEL FILTER ──
    function filterHotels() {
        let visibleCount = 0;
        const searchTerm = $('#hotelNameSearch').val().toLowerCase().trim();
        const selStars = $('.star-filter:checked').map((_, el) => parseInt(el.value)).get();
        const selPrefs = $('.pref-filter:checked').map((_, el) => el.value).get();
        const selProps = $('.prop-filter:checked').map((_, el) => ({
            '0': 'hotel',
            '3': 'apartment'
        } [el.value] ?? el.value)).get();
        const selFacs = $('.fac-filter:checked').map((_, el) => el.value).get();
        const priceRange = $('#priceRange').val();
        const facMap = {
            'free wifi': ['wifi', 'wi-fi', 'internet'],
            'free self parking': ['parking'],
            'free dinner': ['dinner', 'full board', 'half board', 'all inclusive']
        };
        $('.hotel-card').each(function() {
            let show = true;
            const d = $(this).data();
            if (searchTerm && !(d.name || '').includes(searchTerm)) show = false;
            if (show && selStars.length && !selStars.includes(+d.star)) show = false;
            if (show && selPrefs.includes('free cancellation') && (d.refundable || '').includes('non')) show = false;
            if (show && selPrefs.includes('breakfast included') && !(d.meal || '').includes('breakfast')) show = false;
            if (show && selPrefs.includes('top rated') && +d.star < 4) show = false;
            if (show && selProps.length && !selProps.some(p => (d.property || '').includes(p))) show = false;
            if (show && selFacs.length) {
                const cf = (d.facilities || '').toLowerCase();
                const ok = selFacs.every(fac => (facMap[fac] ?? [fac]).some(kw => cf.includes(kw)));
                if (!ok) show = false;
            }
            if (show && priceRange) {
                const price = +d.price;
                if (priceRange === '10000+') {
                    if (price < 10000) show = false;
                } else {
                    const [mn, mx] = priceRange.split('-').map(Number);
                    if (price < mn || price > mx) show = false;
                }
            }
            $(this).toggle(show);
            if (show) visibleCount++;
        });
        $('#hotelCountText').text(visibleCount + ' Hotels Found');
        $('#noFilterResults').toggle(visibleCount === 0);
    }

    $('#hotelNameSearch').on('input', function() {
        $('#clearHotelSearch').toggle(!!this.value);
        filterHotels();
    });
    $('#clearHotelSearch').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#hotelNameSearch').val('');
        $(this).hide();
        filterHotels();
    });
    $(document).on('change', '.star-filter,.pref-filter,.prop-filter,.fac-filter,#priceRange', filterHotels);
    $('#resetFilters').on('click', function() {
        $('.star-filter,.pref-filter,.prop-filter,.fac-filter').prop('checked', false);
        $('#priceRange').val('');
        $('#hotelNameSearch').val('');
        $('#clearHotelSearch').hide();
        filterHotels();
    });

    document.addEventListener('DOMContentLoaded', function() {
        $('#listViewBtn').click(function() {
            $('#listViewContainer').show();
            $('#gridViewContainer').hide();
            $(this).addClass('active');
            $('#gridViewBtn').removeClass('active');
        });
        $('#gridViewBtn').click(function() {
            $('#listViewContainer').hide();
            $('#gridViewContainer').show();
            $(this).addClass('active');
            $('#listViewBtn').removeClass('active');
        });

        filterHotels();
    });
</script>

@endsection