@extends('layouts.app')
@section('content')
<style>
    .accordion-toggle[aria-expanded="true"] .bi-chevron-down {
        transform: rotate(180deg);
    }

    .accordion-toggle .bi-chevron-down {
        transition: transform 0.3s ease;
    }

    .accordion-toggle {
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .accordion-toggle:hover {
        background-color: #eef2f7 !important;
        border-color: #c7d2dc !important;
    }

    .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);
        }
    }

    .blink-badge {
        animation: pulse 1.2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.08);
        }

        100% {
            transform: scale(1);
        }
    }
</style>
<!-- pr -->
<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="{{ $hotel['main_image'] ?: 'https://via.placeholder.com/800x400' }}"
                        class="rounded-3 border mb-2" style="width: 300px; height: 200px; object-fit: cover;">
                    <!-- Thumbnail Images -->
                    @if (!empty($hotel['images']) && count($hotel['images']) > 1)
                    @php
                    $thumbnailImages = array_slice($hotel['images'], 1, 4);
                    $hasMoreImages = count($hotel['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($hotel['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> Country: {{ $hotel['country_name'] ?? 'N/A' }}</p>
                        <p class="mb-1">
                            <i class="bi bi-building"></i>
                            <strong> Property Type:</strong> {{ ucfirst($hotel['kind'] ?? 'Hotel') }}
                        </p>

                        @if (!empty($hotel['check_in_time']))
                        <p class="mb-1">
                            <i class="bi bi-box-arrow-in-right"></i>
                            <strong> Check-in:</strong>
                            {{ date('g:i A', strtotime($hotel['check_in_time'])) }}
                        </p>
                        @endif

                        @if (!empty($hotel['check_out_time']))
                        <p class="mb-1">
                            <i class="bi bi-box-arrow-left"></i>
                            <strong> Check-out:</strong>
                            {{ date('g:i A', strtotime($hotel['check_out_time'])) }}
                        </p>
                        @endif

                    </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 ($hotel['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
                $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'])
                @php
                $rooms = $rate['rooms'] ?? [];
                $refund = $rate['refund_status'] ?? [];
                // Generate unique ID for accordion
                $accordionId = 'rateDetails' . uniqid();
                @endphp

                {{-- ROOM RATE CARD --}}
                <div class="room-rate-card bundle-rate" style="display: 'block';">
                    <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="{{ $refund['badge_class'] ?? 'badge bg-secondary' }}"
                                style="font-size: 0.8rem; padding: 6px 12px; font-weight: 500; margin-right: -52%;">

                                <i class="bi {{ $refund['icon'] ?? '' }} text-white"
                                    style="margin-right: 4px;"></i>

                                {{ $refund['text'] ?? 'N/A' }}
                            </span>
                        </div>

                        <div style="position: absolute; top: 54px; right: 24px;">
                            <span class="badge text-bg-secondary"
                                style="font-size: 0.7rem; padding: 5px 10px; font-weight: 500;">
                                <i class="bi bi-hdd-network-fill" style="margin-right: 4px;"></i>
                                {{ strtoupper($rate['supplier'] ?? 'N/A') }}
                                (ID: {{ $rate['supplier_id'] ?? '-' }})
                                @if (!empty($rate['supplier_hotel_code']))
                                | Code: {{ $rate['supplier_hotel_code'] }}
                                @endif
                            </span>
                        </div>

                        <div class="row align-items-start">
                            <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>
                                    {{ $rooms[0]['description'] ?? 'Room' }}
                                </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> {{ $rate['board'] }}
                                </p>

                                {{-- Breakfast Plan --}}
                                @if ($rate['has_breakfast'] ?? false)
                                <p class="text-success small mb-2"> <i
                                        class="bi bi-cup-hot-fill"></i>Breakfast Included</p>
                                @endif
                                {{-- Inclusions --}}
                                @if (!empty($rate['inclusions']))
                                <div class="row"
                                    style="font-size: 0.9rem; color: #198754; margin-bottom: 10px;">
                                    @foreach ($rate['inclusions'] as $incl)
                                    <div class="col-6 col-md-4 col-lg-3 mb-2">
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-check-circle-fill me-2"
                                                style="color: #198754;"></i>
                                            {{ $incl }}
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                @endif

                                {{-- Rate Details & Policies Accordion (Bootstrap collapse, always starts closed) --}}
                                <div class="rate-details-accordion" style="margin-top: 15px;">
                                    <button class="accordion-toggle d-flex justify-content-between align-items-center"
                                        type="button"
                                        onclick="toggleRateAccordion(this, '{{ $accordionId }}')"
                                        aria-expanded="false"
                                        aria-controls="{{ $accordionId }}"
                                        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><i class="bi bi-info-circle me-2" style="color:#0d6efd;"></i>Rate Details & Policies</span>
                                        <i class="bi bi-chevron-down"></i>
                                    </button>

                                    <div class="collapse" id="{{ $accordionId }}">
                                        <div
                                            style="background: #f8f9fa; border-radius: 10px; padding: 15px; margin-top: 10px; border: 1px solid #e9ecef;">
                                            <div class="row g-3" style="margin-bottom:15px;">

                                                {{-- Cancellation --}}
                                                <div class="col-md-6">
                                                    <div class="border rounded p-3 h-100 bg-white">

                                                        <div class="small text-muted mb-1">
                                                            <i
                                                                class="bi bi-shield-check text-success me-1"></i>Cancellation
                                                        </div>

                                                        <div
                                                            class="fw-bold {{ $rate['supports_cancellation'] ? 'text-success' : 'text-danger' }}">
                                                            {{ $rate['supports_cancellation'] ? 'Allowed' : 'Not Allowed' }}
                                                        </div>

                                                        @php
                                                        $cancel = $rate['cancellation_policy'] ?? [];
                                                        $freeDate =
                                                        $cancel['free_cancellation_before'] ?? null;
                                                        $policies = $cancel['policies'] ?? [];
                                                        $chargeAmount = null;

                                                        foreach ($policies as $p) {
                                                        if (($p['amount_show'] ?? 0) > 0) {
                                                        $chargeAmount = $p['amount_show'];
                                                        break;
                                                        }
                                                        }
                                                        @endphp

                                                        @if ($freeDate)
                                                        <div class="small text-success">
                                                            <span class="badge bg-success mt-1"> Free
                                                                cancellation before
                                                                {{ \Carbon\Carbon::parse($freeDate)->format('d M Y, H:i') }} UTC+0
                                                            </span>
                                                        </div>
                                                        @endif

                                                        @if ($chargeAmount)
                                                        <div class="small text-danger">
                                                            After that {{ $rate['currency'] }}
                                                            {{ $chargeAmount }} charge
                                                        </div>
                                                        @endif

                                                    </div>
                                                </div>

                                                {{-- Amendment --}}
                                                <div class="col-md-6">
                                                    <div class="border rounded p-3 h-100 bg-white">
                                                        <div class="small text-muted mb-1">
                                                            <i
                                                                class="bi bi-pencil-square text-primary me-1"></i>
                                                            Amendments
                                                        </div>

                                                        <div
                                                            class="fw-bold {{ $rate['supports_amendment'] ?? 0 ? 'text-success' : 'text-danger' }}">
                                                            {{ $rate['supports_amendment'] ?? 0 ? 'Allowed' : 'Not Allowed' }}
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Payment --}}
                                                <div class="col-md-6">
                                                    <div class="border rounded p-3 h-100 bg-white">
                                                        <div class="small text-muted mb-1">
                                                            <i
                                                                class="bi bi-credit-card text-warning me-1"></i>Payment
                                                            Type
                                                        </div>

                                                        <div class="fw-bold text-dark">
                                                            {{ !empty($rate['payment_type']) ? ucfirst($rate['payment_type']) : 'Flexible' }}
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Residency --}}
                                                <div class="col-md-6">
                                                    <div class="border rounded p-3 h-100 bg-white">
                                                        <div class="small text-muted mb-1">
                                                            <i
                                                                class="bi bi-globe2 text-info me-1"></i>Residency
                                                            Rule
                                                        </div>

                                                        <div
                                                            class="fw-bold {{ $rate['any_residency'] ?? false ? 'text-success' : 'text-danger' }}">
                                                            {{ $rate['any_residency'] ?? false ? 'Open for all guests' : 'Restriction applies' }}
                                                        </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['promo_text']))
                                            <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['promo_text'] }}
                                                    </div>
                                                </div>
                                            </div>
                                            @endif

                                            {{-- Rate Comments Section --}}
                                            @if (!empty($rate['paxComments']) || !empty($rate['remarks']))
                                            <div style="border-top: 1px solid #dee2e6; padding-top: 15px;">
                                                @if (!empty($rate['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;">
                                                            {{ $rate['paxComments'] }}
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif

                                                @if (!empty($rate['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;">
                                                            @php
                                                            $notes = explode(
                                                            '.',
                                                            strip_tags($rate['remarks']),
                                                            );
                                                            @endphp

                                                            <ul class="mb-0 ps-3 small text-muted">
                                                                @foreach ($notes as $note)
                                                                @if (trim($note))
                                                                <li>{{ trim($note) }}</li>
                                                                @endif
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>


                            </div>

                            {{-- Price & Booking --}}
                            <div
                                class="col-md-4 text-end d-flex flex-column justify-content-start align-items-end"
                                style="margin-top: 85px;">
                                @if ($rate['original_price'] > $rate['price'])
                                    <div class="text-decoration-line-through text-muted small">
                                        @if (strtolower($rate['currency']) == 'inr')
                                        ₹
                                        @endif
                                        {{ number_format($rate['original_price'] ?? 0, 2) }} {{ $rate['currency'] }}
                                    </div>
                                @endif
                                <div
                                    style="font-size: 1.6rem; font-weight: bold; color: #0d6efd; margin: 8px 0;">
                                    @if (strtolower($rate['currency']) == 'inr')
                                    ₹
                                    @endif
                                    {{ number_format($rate['price'] ?? 0, 2) }}
                                    <span style="font-size: 1rem; color: #666;">{{ $rate['currency'] }}</span>
                                </div>

                                @if ($rate['tax_amount'] > 0)
                                <div class="small text-muted">
                                    + @if (strtolower($rate['currency']) == 'inr')
                                    ₹
                                    @endif
                                    {{ number_format($rate['tax_amount'] ?? 0, 2) }} taxes & fees
                                </div>
                                @endif

                                <form action="{{ route('b2b.hotels.paymentrecheck') }}" target="_blank"
                                    method="POST" style="margin-top: 12px;">
                                    @csrf
                                    <input type="hidden" name="rate_key" value="{{ $rate['rate_key'] }}">
                                    <input type="hidden" name="reviewHash"
                                        value="{{ $reviewHash ?? null }}">
                                    <input type="hidden" name="group_code"
                                        value="{{ $rate['group_code'] }}">
                                    <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 }}">
                                    {{-- Hidden — not a UI change, but required so paymentrecheck hits the SAME supplier this rate came from --}}
                                    <input type="hidden" name="supplier" value="{{ $rate['supplier'] ?? '' }}">
                                    <input type="hidden" name="supplier_id" value="{{ $rate['supplier_id'] ?? '' }}">
                                    <input type="hidden" name="hotel_master_id" value="{{ $rate['hotel_master_id'] ?? '' }}">
                                    <input type="hidden" name="hotel_code" value="{{ $rate['supplier_hotel_code'] ?? '' }}">
                                    <input type="hidden" name="search_id" value="{{ $rate['supplier_search_id'] ?? '' }}">
                                    @if (($rate['allotment'] ?? 0) > 0)
                                    <div class="mb-2">
                                        <span class="badge bg-danger blink-badge">Only
                                            {{ $rate['allotment'] }} rooms left</span>
                                    </div>
                                    @endif
                                    <button type="submit" class="btn btn-primary shadow-sm"
                                        style="
                                                        font-weight:700;
                                                        font-size:1rem;
                                                        padding:12px 28px;
                                                        border-radius:14px;
                                                        min-width:180px;
                                                        transition:0.3s ease;
                                                        ">

                                        <i class="bi bi-calendar-check-fill me-2"></i>
                                        Book Now

                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                @endif
                @endforeach

            </div>

            <!-- Facilities -->
            <div class="bg-white shadow rounded-4 p-4 mb-5">
                <h4 class="fw-semibold text-primary mb-3">Hotel Facilities</h4>
                <div class="row">
                    @foreach ($hotel['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>

            <!-- metapolicy -->
            @if(!empty($hotel['policies']) || !empty($hotel['metapolicy']))
            <div class="bg-white shadow rounded-4 p-4 mb-5">
                <h4 class="fw-semibold text-primary mb-4">
                    Important Hotel Information
                </h4>

                <div class="row">
                    @foreach($hotel['policies'] as $policy)
                    <div class="col-md-6 mb-3">
                        <div class="border rounded-3 p-3 h-100">
                            <h6 class="fw-bold text-{{ $policy['color'] }} mb-2">
                                <i class="bi {{ $policy['icon'] }} me-2"></i>{{ $policy['title'] }}
                            </h6>
                            <ul class="mb-0 small">
                                @foreach($policy['items'] as $item)
                                <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endforeach
                </div>

                @if(!empty($hotel['metapolicy']))
                <div class="alert alert-warning mt-3">
                    {!! $hotel['metapolicy'] !!}
                </div>
                @endif
            </div>
            @endif

            <!-- Map -->
            <div class="bg-white shadow rounded-4 p-4 mb-5">
                <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>
    </div>
    @section('scripts')

    <script>
        function toggleRateAccordion(btn, targetId) {
            const target = document.getElementById(targetId);
            if (!target) return;

            const isOpen = target.classList.contains('show');

            if (isOpen) {
                target.classList.remove('show');
                btn.setAttribute('aria-expanded', 'false');
            } else {
                target.classList.add('show');
                btn.setAttribute('aria-expanded', 'true');
            }
        }
    </script>
    <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>
    <script>
        $(document).ready(function() {
            $('#kt_app_sidebar_toggle').trigger('click');
        });

        document.addEventListener("DOMContentLoaded", function() {
            const bundleOption = document.getElementById("bundleOption");
            const bundleCards = document.querySelectorAll(".bundle-rate");

            function toggleViews(view) {
                bundleCards.forEach(card => card.style.display = (view === "bundle") ? "block" : "none");
            }
        });
    </script>
    @endsection
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    @endsection