@extends('layouts.app')
@section('content')
@php
$img = $hotel['images']['url'] ?? 'https://via.placeholder.com/800x400';
$facilities = explode(';', $hotel['facilities'] ?? '');
$rates = $hotel['rates'] ?? [];
@endphp
<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">
   <div class="bg-white shadow rounded-4 p-4 mb-5 mt-10 d-flex flex-column flex-md-row gap-4" >
      <div class="flex-shrink-0">
         <!-- Main Image -->
         <img src="{{ $img }}" class="rounded-3 border mb-2" style="width: 300px; height: 200px; object-fit: cover;">
         <!-- Thumbnail Images -->
         @if (!empty($images) && count($images) > 1)
         @php
         $thumbnailImages = array_slice($images, 1, 4); 
         $hasMoreImages = count($images) > 5;
         @endphp
         <div class="d-flex flex-wrap gap-4">
            @foreach ($thumbnailImages as $index => $image)
            <div 
               class="position-relative rounded border" 
               style="width: 65px; height: 65px; cursor: pointer; overflow: hidden;" 
               data-bs-toggle="modal" 
               data-bs-target="#imageGalleryModal"
               >
               <img src="{{ $image['url'] }}" class="img-fluid w-100 h-100" style="object-fit: cover;">
               @if ($loop->last && $hasMoreImages)
               <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-75 text-white fw-bold small rounded">
                  +{{ count($images) - 5 }}
               </div>
               @endif
            </div>
            @endforeach
         </div>
         @endif
      </div>
     
      <div class="flex-grow-1">
         <h2 class="fw-bold text-dark">{{ $hotel['name'] ?? 'Hotel Name' }}</h2>
         <p class="text-muted mb-2">{{ $hotel['description'] }}</p>
         <div class="text-muted small">
            <p class="mb-1"><i class="bi bi-geo-alt-fill text-danger"></i> <strong>Address:</strong> {{ $hotel['address'] }}</p>
            <p class="mb-1"><i class="bi bi-star-fill text-warning"></i><strong> Category:</strong> {{ $hotel['category'] ?? 'N/A' }} Star </p>
            
            <p><i class="bi bi-globe2"></i>{{-- <strong>City Code:</strong> {{ $hotel['city_code'] }}--}} Country: {{ $Countryname->name }}</p>
         </div>
      </div>
      <div class="modal fade" id="imageGalleryModal" tabindex="-1" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-dark text-white">
               <div class="modal-body p-0">
                  <div id="carouselImages" class="carousel slide" data-bs-ride="carousel">
                     <div class="carousel-inner">
                        @foreach ($images as $key => $image)
                        <div class="carousel-item {{ $key === 0 ? 'active' : '' }}">
                           <img src="{{ $image['url'] }}" class="d-block w-100" style="object-fit: contain; height: 500px;" alt="Hotel Image {{ $key + 1 }}">
                        </div>
                        @endforeach
                     </div>
                     <button class="carousel-control-prev" type="button" data-bs-target="#carouselImages" data-bs-slide="prev">
                     <span class="carousel-control-prev-icon"></span>
                     </button>
                     <button class="carousel-control-next" type="button" data-bs-target="#carouselImages" data-bs-slide="next">
                     <span class="carousel-control-next-icon"></span>
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- Room Rates -->
   <div class="bg-white shadow rounded-4 p-4 mb-5">
      <h4 class="fw-semibold mb-3 text-primary">Available Rooms & Rates</h4>
      @php
         $hasBundle = collect($rates)->contains(function($rate) {
         return count($rate['rooms'] ?? []) > 1;
         });
         $Com_Markup = DB::table('users')->where('id',1)->get();
         $Age_Markup = [];
         $User_id = 0;

         if(Auth::user()->agency_id != ""){
            $emp_id = Auth::user()->agency_id;
            $Age_Markup = DB::table('users')->where('id',$emp_id)->get();
         }else{
            $User_id = auth()->id();
         }
         if(count($Com_Markup) && $User_id != 1 ){
            $Com_Amt = $Com_Markup[0]->markup;  
            $type = "percentage";  
         }
        
         if(count($Age_Markup) && $User_id != 1 && isset($emp_id)){
            $Age_Amt = $Age_Markup[0]->markup;  
         }
         
         $Lastval = end($hotel['rates']);
       
         if($Lastval['no_of_rooms'] == 1 ){
            $isBundle = 1;
            $hasBundleval = 1;
         }
         
      @endphp
     
      @if($hasBundle)
      <div class="mb-4">
         <label class="form-label fw-bold me-3">Select Room Type:</label>
         <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="roomType" id="bundleOption" value="bundle" checked>
            <label class="form-check-label" for="bundleOption">Bundle</label>
         </div>
         <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="roomType" id="nonBundleOption" value="non-bundle">
            <label class="form-check-label" for="nonBundleOption">Non-Bundle</label>
         </div>
      </div>
      @endif

    @php
        $maxRooms = 0;
        foreach($rates as $rate) {
            if(isset($rate['no_of_rooms']) && $rate['no_of_rooms'] > $maxRooms) {
                $maxRooms = $rate['no_of_rooms']; 
            }
        }
        $Roomcount = $maxRooms; 
    @endphp


      
    @foreach($rates as $rate)
        @if($Roomcount == $rate['no_of_rooms'] || isset($hasBundleval))
            @php  
                $rooms = $rate['rooms'] ?? [];
                
                $inclusions = $rate['other_inclusions'] ?? [];
                $price = $rate['price'] ?? 0;
                $board = implode(', ', $rate['boarding_details'] ?? []);
                $currency = $rate['currency'] ?? 'INR';
                
                // Promo Discount
                $discountPercent = 0;
                $promoText = $rate['promotions_details'][0] ?? '';
                if (preg_match('/(\d+)\s?%/', $promoText, $matches)) {
                    $discountPercent = (int)$matches[1];
                }
                
                // Price Calculation
                $val = $price;
                if ($discountPercent > 0) {
                    $val = ceil($price / (1 - ($discountPercent / 100)));
                }
                $originalPrice1 = $val;
                
                // Tax & Surcharge
                $taxAmount = 0;
                $surchargeAmount = 0;
                foreach(($rate['price_details']['surcharge_or_tax'] ?? []) as $surcharge) {
                    $surchargeAmount += $surcharge['amount'] ?? 0;
                    $taxAmount += $surcharge['amount'] ?? 0; 
                }
                
                $originalPrice = $price - $surchargeAmount;
                $price = $originalPrice;
                
                $isBundle = count($rooms) > 1;
                $bundleClass = $isBundle ? 'bundle-rate' : 'non-bundle-rate';
                
                $val = 0 ;  
                $P_val = 0 ;
                $O_val = 0;
                $val1 = 0 ;
                if (isset($Com_Amt)) {
                    if ($type == "percentage") {
                        $val1 = ($originalPrice1 * $Com_Amt) / 100;
                        $val  = ($price * $Com_Amt) / 100;
                    } else {
                        $val = $Com_Amt;
                    }
                }
                
                $originalPrice1 = $originalPrice1 + $val1;
                $price = $price + $val;
                
                if (isset($Age_Amt) && isset($emp_id)) {
                    $originalPrice1 = ($originalPrice1 * $Age_Amt) / 100 + $originalPrice1;
                    $price = ($price * $Age_Amt) / 100 + $price;
                }
                
                // Refundability status
                //print_r($rate);
                $isNonRefundable = $rate['non_refundable'];
                $supportsCancellation = $rate['supports_cancellation'] ?? 0;

                //print_r($rate['cancellation_policy']['cancel_by_date']);
                
                if ($isNonRefundable == 1) {
                    $refundText = "Non-Refundable";
                    $refundClass = "text-danger";
                    $refundIcon = "bi-x-circle-fill";
                    $badgeClass = "badge bg-danger";
                } elseif ($isNonRefundable == 0 && isset($rate['cancellation_policy']['cancel_by_date'])) {
                    $refundText = "Refundable";
                    $refundClass = "text-success";
                    $refundIcon = "bi-check-circle-fill";
                    $badgeClass = "badge bg-success";
                } else {
                    $refundText = "Partially Refundable";
                    $refundClass = "text-warning";
                    $refundIcon = "bi-exclamation-triangle-fill";
                    $badgeClass = "badge bg-warning text-dark";
                }
                
                // Get rate comments
                $rateComments = $rate['rate_comments'] ?? [];
                $paxComments = $rateComments['pax_comments'] ?? '';
                $remarks = $rateComments['remarks'] ?? '';
                
                // Generate unique ID for accordion
                $accordionId = 'rateDetails' . uniqid();
            @endphp

            {{-- ROOM RATE CARD --}}
            <div class="room-rate-card {{ $bundleClass }}" style="display: {{ !$hasBundle || $isBundle ? 'block' : 'none' }};">
                <div style="border: 1px solid #dee2e6; border-radius: 20px; padding: 24px; margin-bottom: 24px; background: linear-gradient(135deg, #fdfdfd 0%, #f7f9fb 100%); box-shadow: 0 8px 24px rgba(0,0,0,0.05); transition: transform 0.2s ease; position: relative;">
                    
                    {{-- Non-Refundable Badge on Top Right --}}
                    <div style="position: absolute; top: 20px; right: 24px;">
                        <span class="{{ $badgeClass }} text-white" style="font-size: 0.85rem; font-weight: 500; padding: 6px 12px;">
                            <i class="bi {{ $refundIcon }} " style="margin-right: 4px;color:white;"></i>
                            {{ $refundText }}
                        </span>
                    </div>
                    
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6 style="font-size: 1.25rem; font-weight: 700; color: #212529; margin-bottom: 16px; padding-right: 120px;">
                                <i class="bi bi-building-fill-check" style="margin-right: 8px; color: #0d6efd;"></i>
                                @if($isBundle)
                                    {{ count($rooms) }} Room Bundle <br><br>
                                    {{ $rooms[0]['description'] ?? 'Room' }}
                                @else
                                    {{ $rooms[0]['description'] ?? 'Room' }}
                                @endif
                            </h6>
                            
                            {{-- Room Details --}}
                            @foreach($rooms as $index => $room)
                                <div style="padding: 10px 16px; background-color: #ffffff; border-radius: 10px; margin-bottom: 12px; border: 1px solid #dce3ea;">
                                    <p style="margin: 0 0 6px; font-weight: 600; font-size: 1rem; color: #444;">
                                        <i class="bi bi-door-open-fill" style="color: #0d6efd;"></i>
                                        Room {{ $index + 1 }}: {{ $room['description'] ?? 'Room' }}
                                    </p>
                                    <p style="font-size: 0.95rem; color: #555; margin: 0;">
                                        <i class="bi bi-person-fill" style="margin-right: 4px;"></i> {{ $room['no_of_adults'] }} Adults
                                        &nbsp;
                                        <i class="bi bi-person-bounding-box" style="margin-right: 4px;"></i> {{ $room['no_of_children'] }} Children
                                    </p>
                                </div>
                            @endforeach
                            
                            {{-- Meal Plan --}}
                            <p style="font-size: 0.95rem; color: #444; margin-bottom: 8px;">
                                <i class="bi bi-egg-fried" style="margin-right: 4px; color: #fd7e14;"></i>
                                <strong>Meal Plan:</strong> {{ $board }}
                            </p>
                            
                            {{-- Inclusions --}}
                            @if(!empty($inclusions))
                                <div style="font-size: 0.9rem; color: #198754; margin-bottom: 10px;">
                                    @foreach($inclusions as $incl)
                                        <div style="display: inline-block; margin-bottom: 4px;">
                                            <i class="bi bi-check-circle-fill" style="color: #198754; margin-right: 6px;"></i> {{ $incl }}
                                        </div>
                                        <br>
                                    @endforeach
                                </div>
                            @endif
                            
                            {{-- Rate Details & Policies Accordion --}}
                            <div class="rate-details-accordion" style="margin-top: 15px;">
                                <button class="accordion-toggle" type="button" data-bs-toggle="collapse" 
                                        data-bs-target="#{{ $accordionId }}" aria-expanded="false"
                                        style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 10px 15px; width: 100%; text-align: left; font-size: 0.9rem; color: #495057; font-weight: 500; cursor: pointer;">
                                    <span>Rate Details & Policies</span>
                                
                                </button>
                                
                                <div class="collapsed" id="{{ $accordionId }}" style="margin-top: 10px;">
                                    <div style="background: #f8f9fa; border-radius: 10px; padding: 15px; border: 1px solid #e9ecef;">
                                        <div class="row" style="margin-bottom: 15px;">
                                            <div class="col-6 mb-2">
                                                <div style="display: flex; align-items: center; gap: 8px;">
                                                    <i class="bi bi-x-circle" style="color: #dc3545;"></i>
                                                    <div>
                                                        <div style="font-size: 0.8rem; color: #6c757d;">Cancellation</div>
                                                        <div style="font-weight: 600; font-size: 0.9rem; {{ $supportsCancellation ? 'color: #198754;' : 'color: #dc3545;' }}">
                                                            {{ $supportsCancellation ? 'Allowed' : 'Not Allowed' }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="col-6 mb-2">
                                                <div style="display: flex; align-items: center; gap: 8px;">
                                                    <i class="bi bi-pencil-square" style="color: #0d6efd;"></i>
                                                    <div>
                                                        <div style="font-size: 0.8rem; color: #6c757d;">Amendments</div>
                                                        <div style="font-weight: 600; font-size: 0.9rem; {{ ($rate['supports_amendment'] ?? 0) ? 'color: #198754;' : 'color: #dc3545;' }}">
                                                            {{ ($rate['supports_amendment'] ?? 0) ? 'Allowed' : 'Not Allowed' }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="col-6 mb-2">
                                                <div style="display: flex; align-items: center; gap: 8px;">
                                                    <i class="bi bi-credit-card" style="color: #198754;"></i>
                                                    <div>
                                                        <div style="font-size: 0.8rem; color: #6c757d;">Payment Type</div>
                                                        <div style="font-weight: 600; font-size: 0.9rem; color: #212529;">
                                                            {{ !empty($rate['payment_type']) ? implode(', ', $rate['payment_type']) : 'Flexible' }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @if($rate['pan_required'] == 1)
                                            <div class="col-6 mb-2">
                                                <div style="display: flex; align-items: center; gap: 8px;">
                                                    <i class="bi bi-file-earmark-text" style="color: #0dcaf0;"></i>
                                                    <div>
                                                        <div style="font-size: 0.8rem; color: #6c757d;">PAN Required</div>
                                                        <div style="font-weight: 600; font-size: 0.9rem; {{ ($rate['pan_required']) ? 'color: #dc3545;' : 'color: #198754;' }}">
                                                            Yes
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        
                                        @if(!empty($rate['promotions_details'][0]))
                                        <div style="background: #d1e7dd; border: 1px solid #a3cfbb; border-radius: 8px; padding: 10px 15px; margin-bottom: 15px;">
                                            <div style="display: flex; align-items: center; gap: 10px; color: #0f5132;">
                                                <i class="bi bi-gift"></i>
                                                <div>
                                                    <strong>Special Offer:</strong> {{ $rate['promotions_details'][0] }}
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                        
                                        {{-- Rate Comments Section --}}
                                        @if(!empty($paxComments) || !empty($remarks))
                                        <div style="border-top: 1px solid #dee2e6; padding-top: 15px;">
                                            @if(!empty($paxComments))
                                            <div style="margin-bottom: 10px;">
                                                <div style="display: flex; gap: 10px;">
                                                    <i class="bi bi-info-circle" style="color: #0d6efd; margin-top: 2px;"></i>
                                                    <div style="font-size: 0.85rem; color: #495057;">
                                                        {{ $paxComments }}
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                            
                                            @if(!empty($remarks))
                                            <div>
                                                <div style="display: flex; gap: 10px;">
                                                    <i class="bi bi-chat-left-text" style="color: #6c757d; margin-top: 2px;"></i>
                                                    <div style="font-size: 0.85rem; color: #495057;">
                                                        {!! $remarks !!}
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            
                        </div>
                        
                        {{-- Price & Booking --}}
                        <div class="col-md-4 text-end">
                            <div class="text-decoration-line-through text-muted small">
                                @if(strtolower($currency) == "inr") ₹ @endif 
                                {{ number_format($originalPrice1) }} {{ $currency }}
                            </div>
                            
                            <div style="font-size: 1.6rem; font-weight: bold; color: #0d6efd; margin: 8px 0;">
                                @if(strtolower($currency) == "inr") ₹ @endif 
                                {{ number_format($price) }} 
                                <span style="font-size: 1rem; color: #666;">{{ $currency }}</span>
                            </div>
                            
                            @if($taxAmount > 0)
                                <div class="small text-muted">
                                    + @if(strtolower($currency) == "inr") ₹ @endif 
                                    {{ number_format($taxAmount, 2) }} taxes & fees
                                </div>
                            @else
                                <div class="small text-muted">Taxes included</div>
                            @endif
                            
                            <form  
                                @if(Auth::user()->agency_id !="") 
                                    action="{{ route('employeepayment.initiaterecheck') }}" 
                                @else 
                                    action="{{ route('payment.initiaterecheck') }}" 
                                @endif 
                                target="_blank" method="POST"
                                style="margin-top: 12px;"
                            >
                                @csrf
                                <input type="hidden" name="rate_key" value="{{ $rate['rate_key'] }}">
                                <input type="hidden" name="group_code" value="{{ $rate['group_code'] }}">
                                <input type="hidden" name="search_id" value="{{ $search_id }}">
                                <input type="hidden" name="room_code" value="{{ $rate['room_code'] }}">
                                <input type="hidden" name="client_nation" value="{{ $client }}">
                                <input type="hidden" name="dates" value="{{ $dates }}">
                                
                                <button type="submit" class="btn btn-primary" style="font-weight: 600; font-size: 0.95rem; padding: 10px 22px; border-radius: 12px;">
                                    <i class="bi bi-calendar-check-fill" style="margin-right: 6px;"></i> Book Now
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <style>
            .accordion-toggle[aria-expanded="true"] .bi-chevron-down {
                transform: rotate(180deg);
            }
            
            .rate-details-accordion .collapse.show {
                animation: fadeIn 0.3s ease-in;
            }
            
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            </style>
        @endif
    @endforeach
      
    <div id="nonBundleExtraDiv" class="bg-white shadow rounded-4 p-4 mb-5" style="width: auto; display: none;">
    <form  @if(Auth::user()->agency_id !="") action="{{ route('employeepayment.nonbundle-initiaterecheck') }}" @else action="{{ route('payment.nonbundle-initiaterecheck') }}"@endif target="_blank" method="POST" style="margin-top: 12px;">
        @csrf
        <div class="text-start">
            <h3> Select Rooms </h3>
            <div class="text-end mb-3" style="margin-top: -32px !important;">
               <button type="submit" class="btn btn-primary text-end" style="font-weight: 600; font-size: 0.95rem; padding: 10px 22px; border-radius: 12px;">
                <i class="bi bi-calendar-check-fill" style="margin-right: 6px;"></i> Book Now
            </div>    
        
        </div>
        </div>
        
        <br>
       <input type="hidden" id="room_count" value="{{ end($hotel['rates'])['no_of_rooms'] }}">
        
        @foreach($rates as $index => $rate)
            @if($Roomcount != $rate['no_of_rooms'])
                @php
                    $rooms = $rate['rooms'] ?? [];
                    $roomcount = count($rooms);
                    $inclusions = $rate['other_inclusions'] ?? [];
                    $price = $rate['price'] ?? 0;
                    $board = implode(', ', $rate['boarding_details'] ?? []);
                    $currency = $rate['currency'] ?? 'INR';
                    
                    // Refundability status
                   
                    $supportsCancellation = $rate['supports_cancellation'];
                    $supportsAmendment = $rate['supports_amendment'] ?? 0;
                    $paymentType = implode(', ', $rate['payment_type'] ?? []);
                    $panRequired = $rate['pan_required'] ?? 0;
                    $rateType = $rate['rate_type'] ?? '';
                    $childrenAges = $rooms[0]['children_ages'] ?? [];
                    $cancellationPolicy = $rate['cancellation_policy'] ?? [];
                    $hasPromotions = $rate['has_promotions'] ?? false;
                    $paxComments = $rate['rate_comments']['pax_comments'] ?? '';
                    $isNonRefundable = $rate['non_refundable'] ?? 0;
                    // Refund status text and styling
                    //print_r($rate['cancellation_policy']['cancel_by_date']);
                    if ($isNonRefundable == 1 ) {
                        $refundText = "Non-Refundable";
                        $refundClass = "badge-danger";
                        $refundIcon = "bi-x-circle-fill";
                    } elseif ($isNonRefundable == 0 && isset($rate['cancellation_policy']['cancel_by_date'])) {
                        $refundText = "Refundable";
                        $refundClass = "badge-success";
                        $refundIcon = "bi-check-circle-fill";
                    } else {
                        $refundText = "Partially Refundable";
                        $refundClass = "badge-warning";
                        $refundIcon = "bi-exclamation-triangle-fill";
                    }

                    // Promo Discount
                    $discountPercent = 0;
                    $promoText = $rate['promotions_details'][0] ?? '';
                    if (preg_match('/(\d+)\s?%/', $promoText, $matches)) {
                        $discountPercent = (int)$matches[1];
                    }

                    // Price Calculation
                    $val = $price;
                    if ($discountPercent > 0) {
                        $val = ceil($price / (1 - ($discountPercent / 100)));
                    }
                    
                    $originalPrice1 = ($val ?? 0);

                    // Tax & Surcharge
                    $taxAmount = 0;
                    $surchargeAmount = 0;
                    foreach(($rate['price_details']['surcharge_or_tax'] ?? []) as $surcharge) {
                        $surchargeAmount += $surcharge['amount'] ?? 0;
                        $taxAmount += $surcharge['amount'] ?? 0;
                    }
                    $taxAmount = ($taxAmount ?? 0);
                    $originalPrice = $price - $surchargeAmount;
                    $price = ($originalPrice ?? 0);

                //echo $price.'---';
                $val = 0 ;  $P_val = 0 ; $O_val = 0;
                $val1 = 0;
                if (isset($Com_Amt)) {
                    if ($type == "percentage") {
                        // Calculate percentage of original and discounted price
                        $val1 = ($originalPrice1 * $Com_Amt) / 100;
                        $val  = ($price * $Com_Amt) / 100;
                    } else {
                        $val = $Com_Amt;
                    }
                }
                
                $price = $price+$val;
                $originalPrice1 = $originalPrice1+$val1;

                if (isset($Age_Amt)) {
                    $originalPrice1 = ($originalPrice1 * $Age_Amt) / 100 + $originalPrice1;
                    $price = ($price * $Age_Amt) / 100 + $price;
                }
                
                @endphp

                <div style="border: 1px solid #dee2e6; border-radius: 20px; padding: 24px; margin-bottom: 24px; background: linear-gradient(135deg, #fdfdfd 0%, #f7f9fb 100%); box-shadow: 0 8px 24px rgba(0,0,0,0.05); transition: transform 0.2s ease;display:none;" class="non-bundle" id="non-bundle">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;">
                                <h6 style="font-size: 1.25rem; font-weight: 700; color: #212529; margin-bottom: 0;">
                                    <input type="checkbox" name="selected_rates[]" value="{{ $index }}" onchange="toggleInputs(this, {{ $index }})" style="transform: scale(1.5); cursor: pointer; accent-color: #007BFF; margin-right: 8px;">
                                    &nbsp;&nbsp;&nbsp;<i class="bi bi-building-fill-check" style="margin-right: 8px; color: #0d6efd;"></i>
                                    {{ $rooms[0]['description'] ?? 'Room' }}
                                </h6>
                                
                                {{-- Refund Status Badge --}}
                                <span class="badge {{ $refundClass }} " style="font-size: 0.8rem; padding: 6px 12px; font-weight: 500;margin-right: -52%;">
                                    <i class="bi {{ $refundIcon }} text-white" style="margin-right: 4px;"></i>
                                    {{ $refundText }}
                                </span>
                            </div>
                            
                            {{-- Room Count and Occupancy --}}
                            <div style="background: #f8f9fa; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #e9ecef;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div>
                                        <span style="font-weight: 600; color: #495057;">
                                            <i class="bi bi-door-closed" style="margin-right: 4px;"></i>
                                            No Of Rooms: {{ $rate['no_of_rooms'] }}
                                        </span>
                                    </div>
                                    <div>
                                        <span style="color: #6c757d;">
                                            <i class="bi bi-person-fill" style="margin-right: 2px;"></i>
                                            {{ $rate['rooms'][0]['no_of_adults'] ?? 0 }} Adults
                                        </span>
                                        @if(($rate['rooms'][0]['no_of_children'] ?? 0) > 0)
                                        <span style="margin-left: 15px; color: #6c757d;">
                                            <i class="bi bi-person-bounding-box" style="margin-right: 2px;"></i>
                                            {{ $rate['rooms'][0]['no_of_children'] }} Children
                                        </span>
                                        @endif
                                    </div>
                                </div>
                                
                                {{-- Children Ages --}}
                                @if(!empty($childrenAges))
                                <div style="margin-top: 5px; font-size: 0.85rem; color: #6c757d;">
                                    <i class="bi bi-info-circle" style="margin-right: 4px;"></i>
                                    Children ages: {{ implode(', ', $childrenAges) }}
                                </div>
                                @endif
                            </div>

                            {{-- Meal Plan --}}
                            <p style="font-size: 0.95rem; color: #444; margin-bottom: 8px;">
                                <i class="bi bi-egg-fried" style="margin-right: 4px; color: #fd7e14;"></i>
                                <strong>Meal Plan:</strong> {{ $board }}
                            </p>
                        

                            {{-- Quick Policy Info --}}
                            <div style="background: #e8f4fd;margin-top: 2%; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; border-left: 4px solid #0d6efd;">
                                <div style="display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.85rem;">
                                    <div>
                                        <i class="bi bi-x-circle" style="color: {{ $supportsCancellation ? '#28a745' : '#dc3545' }}; margin-right: 4px;"></i>
                                        <strong>Cancellation:</strong> {{ $supportsCancellation ? 'Yes' : 'No' }}
                                    </div>
                                    <div>
                                        <i class="bi bi-pencil-square" style="color: {{ $supportsAmendment ? '#28a745' : '#dc3545' }}; margin-right: 4px;"></i>
                                        <strong>Amendments:</strong> {{ $supportsAmendment ? 'Yes' : 'No' }}
                                    </div>
                                    <div>
                                        <i class="bi bi-credit-card" style="color: #6f42c1; margin-right: 4px;"></i>
                                        <strong>Payment:</strong> {{ $paymentType }}
                                    </div>
                                    @if($panRequired == 1 || $panRequired == "Yes")
                                    <div>
                                        <i class="bi bi-file-earmark-text" style="color: {{ $panRequired ? '#dc3545' : '#28a745' }}; margin-right: 4px;"></i>
                                        <strong>PAN:</strong> {{ $panRequired ? 'Required' : 'Not Required' }}
                                    </div>
                                    @endif
                                </div>
                            </div>

                            {{-- Inclusions --}}
                            @if(!empty($inclusions))
                                <div style="font-size: 0.9rem; color: #198754; margin-bottom: 10px;">
                                    <strong style="color: #212529; display: block; margin-bottom: 5px;">
                                        <i class="bi bi-check-circle" style="margin-right: 4px;"></i>
                                        Inclusions:
                                    </strong>
                                    @foreach($inclusions as $incl)
                                        <div style="display: inline-block; margin-bottom: 4px; margin-right: 8px;">
                                            <i class="bi bi-check-circle-fill" style="color: #198754; margin-right: 6px;"></i> {{ $incl }}
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            {{-- Pax Comments --}}
                            @if(!empty($paxComments))
                                <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 10px 14px; border-radius: 8px; margin-bottom: 10px;">
                                    <p style="font-size: 0.85rem; color: #856404; margin-bottom: 0;">
                                        <i class="bi bi-exclamation-triangle-fill" style="margin-right: 6px; color: #ffc107;"></i>
                                        <strong>Note:</strong> {{ $paxComments }}
                                    </p>
                                </div>
                            @endif

                            {{-- Cancellation Policy Preview --}}
                            @if(isset($cancellationPolicy['detailss']))
                            <div style="margin-bottom: 10px;">
                                <button type="button" class="btn btn-sm btn-outline-secondary" 
                                        style="font-size: 0.8rem; padding: 3px 10px;"
                                        onclick="toggleCancellationDetails(this)">
                                    <i class="bi bi-calendar-x" style="margin-right: 4px;"></i>
                                    Cancellation Policy
                                </button>
                                
                                <div class="cancellation-details" style="display: none; margin-top: 8px; font-size: 0.8rem; color: #6c757d; background: #f8f9fa; padding: 10px; border-radius: 6px;">
                                    @foreach($cancellationPolicy['details'] as $detail)
                                        <div style="margin-bottom: 3px;">
                                            From {{ date('M d, Y', strtotime($detail['from'])) }}: 
                                            <strong>{{ $detail['currency'] }} {{ $detail['flat_fee'] }}</strong>
                                        </div>
                                    @endforeach
                                    
                                    @if(!empty($cancellationPolicy['no_show_fee']))
                                        <div style="margin-top: 5px; color: #dc3545;">
                                            <i class="bi bi-exclamation-triangle"></i>
                                            No-show fee: {{ $cancellationPolicy['no_show_fee']['currency'] ?? '' }} {{ $cancellationPolicy['no_show_fee']['flat_fee'] ?? '' }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            @endif

                            {{-- Remarks --}}
                        
                            @if(!empty($rate['rate_comments']['remarks']))
                                <p style="font-size: 0.85rem; color: #6c757d; margin-bottom: 0; margin-top: 10px;">
                                    <i class="bi bi-info-circle-fill" style="margin-right: 6px; color: #0dcaf0;"></i> 
                                    <strong>Remarks:</strong> {!! $rate['rate_comments']['remarks'] !!}
                                </p>
                            @endif
                        </div>

                        <div class="col-md-4 text-end">
                            <div class="text-decoration-line-through text-muted small">@if(strtolower($currency) == "inr") ₹ @endif {{ number_format($originalPrice1) }}</div>
                            <div style="font-size: 1.6rem; font-weight: bold; color: #0d6efd; margin: 8px 0;">
                                @if(strtolower($currency) == "inr") ₹ @endif {{ number_format($price) }} <span style="font-size: 1rem; color: #666;">{{ $currency }}</span>
                            </div>

                            @if($taxAmount > 0)
                                <div class="small text-muted">+ @if(strtolower($currency) == "inr") ₹ @endif {{ number_format($taxAmount, 2) }} taxes & fees</div>
                            @else
                                <div class="small text-muted">Taxes included</div>
                            @endif
                            
                        
                            <div class="rate-inputs" id="rate-inputs-{{ $index }}">
                                <input type="hidden" name="rates[{{ $index }}][rate_key]" value="{{ $rate['rate_key'] }}" disabled>
                                <input type="hidden" name="group_code" value="{{ $rate['group_code'] }}" disabled>
                                <input type="hidden" name="room_code" value="{{ $rate['room_code'] }}" disabled>
                                <input type="hidden" name="search_id" value="{{ $search_id }}" disabled>
                                <input type="hidden" name="client_nation" value="{{ $client }}" disabled>
                                <input type="hidden" name="dates" value="{{ $dates }}" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                
                <script>
                function toggleCancellationDetails(button) {
                    var details = button.nextElementSibling;
                    if (details.style.display === 'none' || details.style.display === '') {
                        details.style.display = 'block';
                        button.innerHTML = '<i class="bi bi-calendar-x" style="margin-right: 4px;"></i> Hide Policy';
                    } else {
                        details.style.display = 'none';
                        button.innerHTML = '<i class="bi bi-calendar-x" style="margin-right: 4px;"></i> Cancellation Policy';
                    }
                }
                </script>
            @endif
        @endforeach
    </form>
</div>
</div>
</div>

<script>
   
   
   function toggleInputs(checkbox, index) {

      var roomCount = $('#room_count').val();
      const inputs = document.querySelectorAll(`#rate-inputs-${index} input`);
      inputs.forEach(input => input.disabled = !checkbox.checked);
       //alert(roomCount);
      // ✅ Limit to roomCount checkboxes
      const checkedBoxes = document.querySelectorAll('input[name="selected_rates[]"]:checked');
      if (checkedBoxes.length > roomCount) {
         checkbox.checked = false;
         inputs.forEach(input => input.disabled = true); // re-disable if unchecked
         alert(`You can only select ${roomCount} rooms only.`);
      }
   }
</script>

   <!-- Facilities -->
   <div class="bg-white shadow rounded-4 p-4 mb-5" style="width: 105%;">
      <h4 class="fw-semibold text-primary mb-3">Hotel Facilities</h4>
      <div class="row">
         @foreach($facilities as $f)
         <div class="col-md-4 mb-2">
            <i class="bi bi-check-circle-fill text-success me-1"></i>{{ trim($f) }}
         </div>
         @endforeach
      </div>
   </div>
   <!-- Map -->
   <div class="bg-white shadow rounded-4 p-4 mb-5" style="width: 105%;">
      <h4 class="fw-semibold text-primary mb-3">Location</h4>
      <div class="ratio ratio-16x9">
         <iframe
            src="https://maps.google.com/maps?q={{ $hotel['geolocation']['latitude'] }},{{ $hotel['geolocation']['longitude'] }}&hl=es&z=14&amp;output=embed"
            width="100%" height="300" style="border:0;" allowfullscreen loading="lazy"></iframe>
      </div>
   </div>
</div>
<script>
   $(document).ready(function () {
       $('#kt_app_sidebar_toggle').trigger('click');
   }); 
   
   document.addEventListener("DOMContentLoaded", function () {
    const bundleOption = document.getElementById("bundleOption");
    const nonBundleOption = document.getElementById("nonBundleOption");
    const bundleCards = document.querySelectorAll(".bundle-rate");
    const nonBundleCards = document.querySelectorAll(".non-bundle-rate");
    const nonBundleExtraDiv = document.getElementById("nonBundleExtraDiv"); // ✅ new div
   
    function toggleViews(view) {
        bundleCards.forEach(card => card.style.display = (view === "bundle") ? "block" : "none");
        nonBundleCards.forEach(card => card.style.display = (view === "non-bundle") ? "block" : "none");
   
        if (nonBundleExtraDiv) {
            nonBundleExtraDiv.style.display = (view === "non-bundle") ? "block" : "none";
        }
        if(view == "non-bundle"){
              $(".non-bundle").show();
        }else{
              $(".non-bundle").hide();
        }
    }
   
    if (bundleOption && nonBundleOption) {
        bundleOption.addEventListener("change", () => toggleViews("bundle"));
        nonBundleOption.addEventListener("change", () => toggleViews("non-bundle"));
    }
   });
   document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('#nonBundleExtraDiv form');

        form.addEventListener('submit', function (e) {
            const checkboxes = form.querySelectorAll('.rate-checkbox');
            checkboxes.forEach(checkbox => {
                const rateIndex = checkbox.dataset.index;
                const rateInputsDiv = form.querySelector(`.rate-inputs[data-index="${rateIndex}"]`);
                if (!checkbox.checked) {
                    // Remove all input fields in unchecked rate
                    if (rateInputsDiv) {
                        rateInputsDiv.remove();
                    }
                }
            });
        });
    });
</script>
@endsection
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>