@extends('admin.layouts.layout')

@section('content')

<div class="template_top">
    <div class="templatetop_bottom rounded-3">
        <div class="d-flex justify-content-between align-items-center p-3">
            <div>
                <h3 class="mb-0">Schedule Details</h3>
                <p class="text-muted mb-0">(Appointment ID: {{ $schedule->appointment_id }}, Status: {{ $schedule->status == 3 ? 'Booked' : 'In Progress' }})</p>
            </div>
            <div class="contact_btns">
                <a href="{{ route('admin.schedule.print', ['id'=>$schedule->id]) }}" target="_blank" class="import_exportbtn btn py-1">
                    <img src="{{ asset('images/print.svg') }}" /> Print
                </a>
                @if($schedule->status < 3)
                    <a href="{{ route('admin.schedule.step1', ['id'=>$schedule->id]) }}" class="add_btn btn py-1">
                        <img src="{{ asset('images/edit.svg') }}" /> Edit
                    </a>
                @endif
                <a href="{{ route('admin.schedule.list') }}" class="filter_btn btn w-auto py-1">
                    <img src="{{ asset('images/prev.svg') }}" /> Back to List
                </a>
            </div>
        </div>
    </div>
</div>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" role="tabpanel">
        <div class="row">
            <div class="col-lg-8 col-md-8">
                <div class="schudle_banner position-relative d-flex align-items-center justify-content-center" id="scheduleImagesWrapper" data-img-count="{{ count($scheduleImageUrls ?? []) }}" style="height:300px; background:#f8f9fa; overflow:hidden;">
                    @php $imgs = $scheduleImageUrls ?? []; @endphp
                    @if(!empty($imgs))
                        <img id="scheduleMainImage" src="{{ $imgs[0] }}" style="max-width:100%; max-height:100%; object-fit:contain;" />
                        @if(count($imgs) > 1)
                            <button type="button" id="imgPrevBtn" class="btn btn-sm btn-dark position-absolute top-50 start-0 translate-middle-y ms-2" style="opacity:0.7;">&#9664;</button>
                            <button type="button" id="imgNextBtn" class="btn btn-sm btn-dark position-absolute top-50 end-0 translate-middle-y me-2" style="opacity:0.7;">&#9654;</button>
                        @endif
                    @else
                        <div class="text-muted">No images available</div>
                    @endif
                </div>
            </div>

            <div class="col-lg-4 col-md-4">
                <!-- Map Section -->
                <div class="schudle_map mb-3" style="height:300px; background:#f3f4f6; position:relative;">
                    <div id="schedule-view-map" style="width:100%;height:100%;min-height:300px">
                        <div class="d-flex align-items-center justify-content-center h-100 text-muted small">
                            <span class="spinner-border spinner-border-sm me-2"></span>Loading map...
                        </div>
                    </div>
                    <div id="schedule-view-coords" class="d-none"
                            data-lat="{{ $property->latitude ?? '' }}"
                            data-lng="{{ $property->longitude ?? '' }}"
                            data-full-address="{{ e(collect([
                                $property->address_line1 ?? null,
                                $property->city ?? null,
                                $property->state ?? null,
                                $property->postal_code ?? null,
                                $property->country ?? null
                            ])->filter()->implode(', ')) }}">
                    </div>
                </div>

                <!-- Summary Section -->
                <div class="detail_agreementbox py-0 px-3">
                    <div class="customer_deatails appoinment_review">
                        <ul>
                            <li>
                                <div>
                                    <h5>Date/Time</h5>
                                    <h4>{{ \App\Helpers\Helper::showDate($summaryData['date_time']) ?: '—' }}</h4>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <h5>Property Details</h5>
                                    <h4>{{ $summaryData['property'] }}</h4>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <h5>Customers</h5>
                                    <h4>
                                        @if(!empty($summaryData['customers']))
                                            {{ implode(', ', $summaryData['customers']) }}
                                        @else
                                            None
                                        @endif
                                    </h4>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <h5>Inspectors</h5>
                                    <h4>
                                        @if(!empty($summaryData['inspectors']))
                                            {{ implode(', ', $summaryData['inspectors']) }}
                                        @else
                                            None
                                        @endif
                                    </h4>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_script')
@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))
<script>
// Schedule View Map initialization
window.initScheduleViewMap = function () {
    try {
        const coordEl = document.getElementById('schedule-view-coords');
        const mapEl = document.getElementById('schedule-view-map');
        
        if (!coordEl || !mapEl) {
            console.error('[ScheduleViewMap] Missing required elements');
            if (mapEl) {
                mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Map elements not found</div>';
            }
            return;
        }
        
        const latStr = coordEl.dataset.lat || coordEl.getAttribute('data-lat') || '';
        const lngStr = coordEl.dataset.lng || coordEl.getAttribute('data-lng') || '';
        const fullAddr = coordEl.dataset.fullAddress || coordEl.getAttribute('data-full-address') || '';
        
        const hasNum = v => v !== '' && !isNaN(parseFloat(v));

        function render(pos) {
            // Check if Google Maps is available
            if (!window.google || !window.google.maps) {
                console.error('[ScheduleViewMap] Google Maps API not loaded');
                mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Google Maps not available</div>';
                return;
            }
            
            try {
                const mapInstance = new google.maps.Map(mapEl, {
                    center: pos,
                    zoom: 14,
                    mapTypeControl: false,
                    fullscreenControl: false
                });
                const marker = new google.maps.Marker({ position: pos, map: mapInstance });
                
                setTimeout(() => {
                    try {
                        google.maps.event.trigger(mapInstance, 'resize');
                        mapInstance.setCenter(pos);
                    } catch (_e) {
                        console.warn('[ScheduleViewMap] Resize failed:', _e);
                    }
                }, 400);
            } catch (e) {
                console.error('[ScheduleViewMap] Map rendering failed:', e);
                mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Map rendering failed</div>';
            }
        }

        if (hasNum(latStr) && hasNum(lngStr)) {
            render({ lat: parseFloat(latStr), lng: parseFloat(lngStr) });
            return;
        }
        
        if (!fullAddr) {
            console.warn('[ScheduleViewMap] No coords and no full address – using default center fallback');
            render({ lat: 37.0902, lng: -95.7129 });
            return;
        }
        
        mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small"><span class="spinner-border spinner-border-sm me-2"></span>Locating...</div>';
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode({ address: fullAddr }, (results, status) => {
            if (status === 'OK' && results[0]) {
                const gLoc = results[0].geometry.location;
                render({ lat: gLoc.lat(), lng: gLoc.lng() });
            } else {
                mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small">No location found</div>';
                console.warn('[ScheduleViewMap] Geocode failed', status, fullAddr, results);
                try { render({ lat: 37.0902, lng: -95.7129 }); } catch (_e) {}
            }
        });
    } catch (e) {
        console.error('[ScheduleViewMap] Error', e);
    }
};

// Map initialization tracker
window.scheduleMapInitialized = false;

// Separate DOM ready handler for image carousel
document.addEventListener('DOMContentLoaded', function () {
    // Image carousel
    let images = [];
    try {
        images = JSON.parse('{!! addslashes(json_encode($scheduleImageUrls ?? [])) !!}') || [];
    } catch (e) {
        images = [];
    }
    if (!Array.isArray(images)) images = [];
    
    let idx = 0;
    const mainImg = document.getElementById('scheduleMainImage');

    function showIdx() {
        if (mainImg && images.length && images[idx]) {
            mainImg.src = images[idx];
        }
    }

    const prevBtn = document.getElementById('imgPrevBtn');
    const nextBtn = document.getElementById('imgNextBtn');

    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            if (images.length < 2) return;
            idx = (idx - 1 + images.length) % images.length;
            showIdx();
        });
    }
    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            if (images.length < 2) return;
            idx = (idx + 1) % images.length;
            showIdx();
        });
    }
    showIdx();
});

function applyDiscountCode() {
    const couponField = document.querySelector('.invoice-coupon-field');
    const couponCode = couponField.value.trim();
    if (couponCode) {
        // Discount code functionality to be implemented
    }
}

// Print invoice functionality
function printInvoice() {
    const invoiceContent = document.querySelector('.invoice-container').innerHTML;
    const originalContent = document.body.innerHTML;
    
    document.body.innerHTML = `
        <html>
        <head>
            <title>Invoice Print</title>
            <style>
                body { font-family: Arial, sans-serif; margin: 20px; }
                .invoice-container { max-width: 800px; margin: 0 auto; }
                .invoice-header { text-align: center; margin-bottom: 30px; }
                .invoice-title { font-size: 24px; font-weight: bold; }
                .invoice-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
                .invoice-info-card { padding: 15px; border: 1px solid #ddd; }
                .invoice-services, .invoice-additional-fees, .invoice-discounts { margin-bottom: 20px; }
                .services-header, .fees-header, .discounts-header { font-weight: bold; margin-bottom: 10px; }
                .service-item, .fee-item, .discount-item { display: flex; justify-content: space-between; padding: 5px 0; }
                .invoice-total-section { margin-top: 30px; text-align: right; }
                .total-line { display: flex; justify-content: space-between; padding: 5px 0; }
                .final-total { font-weight: bold; font-size: 18px; border-top: 2px solid #333; }
                @media print {
                    body { margin: 0; }
                    .invoice-container { box-shadow: none; }
                }
            </style>
        </head>
        <body>
            <div class="invoice-container">
                ${invoiceContent}
            </div>
        </body>
        </html>
    `;
    
    window.print();
    document.body.innerHTML = originalContent;
    
    // Reinitialize any necessary functionality
    location.reload();
}

// Bootstrap modal will handle click outside automatically
// No need for custom event listener
</script>
@endpush

@push('page_script')
@if(!empty($placeApiKey))
<script>
// Load Google Maps script dynamically with better error handling
function loadGoogleMaps() {
    return new Promise((resolve, reject) => {
        // Check if already loaded
        if (window.google && window.google.maps) {
            resolve();
            return;
        }

        const script = document.createElement('script');
        script.async = true;
        script.defer = true;
        script.src = 'https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places';
        
        script.onload = function() {
            // Wait a bit for the API to initialize
            setTimeout(() => {
                if (window.google && window.google.maps) {
                    resolve();
                } else {
                    console.error('[ScheduleViewMap] Google Maps API not available after load');
                    reject(new Error('Google Maps API not available'));
                }
            }, 100);
        };
        
        script.onerror = function(error) {
            console.error('[ScheduleViewMap] Google Maps script failed to load:', error);
            reject(error);
        };
        
        document.head.appendChild(script);
    });
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    loadGoogleMaps()
        .then(() => {
            if (!window.scheduleMapInitialized && window.initScheduleViewMap) {
                window.initScheduleViewMap();
                window.scheduleMapInitialized = true;
            }
        })
        .catch((error) => {
            console.error('[ScheduleViewMap] Failed to load Google Maps:', error);
            const mapEl = document.getElementById('schedule-view-map');
            if (mapEl) {
                mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small"><i class="fas fa-exclamation-triangle me-2"></i>Failed to load Google Maps<br><small class="d-block mt-1">Please check your internet connection</small></div>';
            }
        });
});
</script>
@else
<script>
console.error('[ScheduleViewMap] Google Maps API key not configured!');
document.addEventListener('DOMContentLoaded', function() {
    const mapEl = document.getElementById('schedule-view-map');
    if (mapEl) {
        mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Google Maps API key not configured</div>';
    }
});
</script>
@endif
@endpush