@extends('layouts.master')
@section('content')

<section class="contact_page_wrapper" style="padding: 60px 0; background-color: #f8fafc;">
    <div class="container">
        
        <div class="row text-center" style="margin-bottom: 40px;">
            <div class="col-md-12">
                <h2 style="font-weight: 700; color: #1e293b; font-size: 32px;">Contact Our Branch Hotels</h2>
                <p style="color: #64748b; font-size: 16px;">Select any of our verified properties to view their live location and official contact details.</p>
            </div>
        </div>

        <div class="row">
            
            <div class="col-md-5" style="margin-bottom: 30px;">
                <div style="background: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;">
                    
                    <div class="form-group" style="margin-bottom: 25px;">
                        <label for="publicHotelSelect" style="font-weight: 600; color: #334155; margin-bottom: 8px; display: block; font-size: 14px;">
                            <i class="fa fa-building text-primary" style="color: #0ea5e9;"></i> Choose a Hotel Branch:
                        </label>
                        <select id="publicHotelSelect" class="form-control" onchange="syncContactMap()" style="height: 48px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 15px; padding: 10px 15px; box-shadow: none;">
                            @if($hotels->isEmpty())
                                <option value="">No active branches available</option>
                            @else
                                @foreach($hotels as $index => $hotel)
                                    <option value="{{ $hotel->id }}" 
                                            data-map="{{ $hotel->map_url }}"
                                            data-address="{{ $hotel->address }}, {{ $hotel->city }}, {{ $hotel->state }}"
                                            {{ $index == 0 ? 'selected' : '' }}>
                                        {{ $hotel->hotel_name }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    @if(!$hotels->isEmpty())
                        <div id="hotelInfoCard" style="margin-top: 20px;">
                            <h4 id="activeHotelName" style="font-weight: 700; color: #0ea5e9; margin-bottom: 15px; font-size: 18px;">
                                {{ $hotels->first()->hotel_name }}
                            </h4>
                            <hr style="border-top: 1px solid #f1f5f9; margin: 15px 0;">
                            
                            <div style="display: flex; gap: 12px; margin-bottom: 15px; align-items: flex-start;">
                                <div style="background: #ef4444; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <div>
                                    <strong style="display: block; color: #475569; font-size: 12px; text-transform: uppercase;">Address</strong>
                                    <span id="activeHotelAddress" style="color: #1e293b; font-size: 14px; line-height: 1.5;">
                                        {{ $hotels->first()->address }}, {{ $hotels->first()->city }}, {{ $hotels->first()->state }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @else
                        <div style="text-align: center; color: #94a3b8; padding: 20px 0;">
                            <i class="fa fa-info-circle" style="font-size: 28px; display: block; margin-bottom: 8px;"></i>
                            Branch network logs empty.
                        </div>
                    @endif

                </div>
            </div>

            <div class="col-md-7" style="margin-bottom: 30px;">
                <div style="border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; background: #ffffff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); padding: 10px;">
                    
                    @if(!$hotels->isEmpty() && !empty($hotels->first()->map_url))
                        <iframe 
                            id="publicLiveMap" 
                            src="{{ $hotels->first()->map_url }}" 
                            width="100%" 
                            height="400" 
                            style="border:0; display: block; border-radius: 8px;" 
                            allowfullscreen="" 
                            loading="lazy">
                        </iframe>
                    @else
                        <div id="mapPlaceholder" style="width: 100%; height: 400px; background: #f1f5f9; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; border: 1px dashed #cbd5e1; color: #64748b;">
                            <i class="fa fa-map-o" style="font-size: 40px; margin-bottom: 10px; color: #94a3b8;"></i>
                            <span id="placeholderText">No location map configured for this branch.</span>
                        </div>
                    @endif

                </div>
            </div>

        </div>

    </div>
</section>

<script>
function syncContactMap() {
    const select = document.getElementById('publicHotelSelect');
    if(!select || select.value === "") return;

    const selectedOption = select.options[select.selectedIndex];

    // Read custom metadata attributes from markup nodes
    const mapUrl = selectedOption.getAttribute('data-map');
    const fullAddress = selectedOption.getAttribute('data-address');
    const hotelName = selectedOption.text;

    // Cache structural elements pointers
    const mapIframe = document.getElementById('publicLiveMap');
    const nameContainer = document.getElementById('activeHotelName');
    const addressContainer = document.getElementById('activeHotelAddress');

    // Update Text Data Attributes Instantly
    if(nameContainer) nameContainer.innerText = hotelName;
    if(addressContainer) addressContainer.innerText = fullAddress;

    // Update Frame Source Document Link Or Trigger Dynamic Fallbacks Toggle
    if (mapUrl && mapUrl.trim() !== "") {
        // Safe Check: Agar user ne data filter me `<iframe src="...">` galti se bhej diya ho code blocks sahit
        let cleanUrl = mapUrl;
        if (mapUrl.includes('<iframe')) {
            const match = mapUrl.match(/src="([^"]+)"/);
            cleanUrl = match ? match[1] : mapUrl;
        }

        if (mapIframe) {
            mapIframe.src = cleanUrl;
            mapIframe.style.display = "block";
            
            // Hidden placeholder engine resets if active framework toggled back
            const placeholder = document.getElementById('mapPlaceholder');
            if (placeholder) placeholder.style.display = "none";
        } else {
            // Agar pehli baar load hote waqt iframe nahi tha par ab map URL mila, page reload framework safe handle
            location.reload();
        }
    } else {
        // If target node data is completely null
        if (mapIframe) mapIframe.style.display = "none";
        
        const placeholder = document.getElementById('mapPlaceholder');
        if (placeholder) {
            placeholder.style.display = "flex";
            document.getElementById('placeholderText').innerText = "No map configurations defined for " + hotelName;
        }
    }
}
</script>

@endsection