@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 ? 'Complete' : 'In Progress' }})</p>
            </div>
            <div class="contact_btns">
                @if($schedule->status >= 3)
                    <button type="button" class="import_exportbtn btn py-1" data-bs-toggle="modal" data-bs-target="#invoiceModal">
                        <img src="{{ asset('images/create_invoice.svg') }}" /> Invoice
                    </button>
                @endif
                <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>
                
                <!-- Services Section -->
                <div class="detail_agreementbox p-3 mt-3">
                    <div class="agreement_title border_bottom1">
                        <h3>Services</h3>
                    </div>
                    <div class="mt-3">
                        @if($schedule->services->count())
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Service Name</th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th class="text-end">Fee</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($schedule->services as $service)
                                        @php($quantity = $service->quantity ?? 1)
                                            <tr>
                                                <td><strong>{{ $service->service->service_name ?? 'Unknown Service' }}</strong></td>
                                                <td>{{ $service->service->description ?? '—' }}</td>
                                                <td>{{ $quantity }}</td>
                                                <td class="text-end">${{ number_format($service->service_fee ?? ($service->service->fee ?? $service->service->base_fee ?? 0), 2) * $quantity }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="no_info noinfo_wbg">No services added yet.</div>
                        @endif
                    </div>
                </div>

                <!-- Fees Section -->
                <div class="detail_agreementbox p-3 mt-3">
                    <div class="agreement_title border_bottom1">
                        <h3>Fees Breakdown</h3>
                        <span class="add_agreementbtn border-0">Amount</span>
                    </div>
                    
                    <div class="total_feeslist">
                        <p>Base Services Total</p>
                        <p>$ {{ number_format($baseTotal, 2) }}</p>
                    </div>
                    
                    @if($discounts->count())
                        <div class="discount-section">
                            <div class="discount_title">
                                <h4>Discounts Applied</h4>
                            </div>
                            <div class="mt-2">
                                @foreach($discounts as $discount)
                                    <div class="row mb-2">
                                        <div class="col-lg-8 col-md-8">
                                            <strong>{{ $discount->title }}</strong>
                                        </div>
                                        <div class="col-lg-4 col-md-4 text-end">
                                            <span class="text-success">-$ {{ number_format($discount->amount, 2) }}</span>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="row">
                                    <div class="col-lg-8 col-md-8">
                                        <strong>Total Discounts:</strong>
                                    </div>
                                    <div class="col-lg-4 col-md-4 text-end">
                                        <strong class="text-success">-$ {{ number_format($discountSum, 2) }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    @endif
                    
                    @if($additionalFees->count())
                        <div class="additional-fee-section">
                            <div class="additional_title">
                                <h4>Additional Fees</h4>
                            </div>
                            <div class="mt-2">
                                @foreach($additionalFees as $fee)
                                    <div class="row mb-2">
                                        <div class="col-lg-8 col-md-8">
                                            <strong>{{ $fee->title }}</strong>
                                        </div>
                                        <div class="col-lg-4 col-md-4 text-end">
                                            <span class="text-warning">+$ {{ number_format($fee->amount, 2) }}</span>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="row">
                                    <div class="col-lg-8 col-md-8">
                                        <strong>Total Additional Fees:</strong>
                                    </div>
                                    <div class="col-lg-4 col-md-4 text-end">
                                        <strong class="text-warning">+$ {{ number_format($addFeeSum, 2) }}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                    @endif
                    
                    <div class="total_bg">
                        <h4>Final Total</h4>
                        <h4>$ {{ number_format($finalTotal, 2) }}</h4>
                    </div>
                </div>

                <!-- Inspection Note Section -->
                @if($property && $property->inspection_note)
                    <div class="detail_agreementbox p-3 mt-3">
                        <div class="agreement_title">
                            <h3>Inspection Note</h3>
                        </div>
                        <div class="mt-3">
                            <div class="bg-light p-3 rounded">
                                {!! nl2br(e($property->inspection_note)) !!}
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Invoice Note Section -->
                @if($schedule->invoice_note)
                    <div class="detail_agreementbox p-3 mt-3">
                        <div class="agreement_title">
                            <h3>Invoice Note</h3>
                        </div>
                        <div class="mt-3">
                            <div class="bg-light p-3 rounded">
                                {!! $schedule->invoice_note !!}
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Agreements Section -->
                @if($agreements->count())
                    <div class="detail_agreementbox p-3 mt-3">
                        <div class="agreement_title">
                            <h3>Agreements</h3>
                        </div>
                        <div class="mt-3">
                            <div class="accordion" id="agreementsAccordion">
                                @foreach($agreements as $index => $agreement)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{ $index }}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index }}" aria-expanded="false" aria-controls="collapse{{ $index }}">
                                                {{ $agreement->name }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ $index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $index }}" data-bs-parent="#agreementsAccordion">
                                            <div class="accordion-body">
                                                {!! $agreement->description_html !!}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </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>

                <!-- Configuration Section -->
                <div class="detail_agreementbox pb-4 mb-3">
                    <div class="agreement_title border-bottom">
                        <h3>Inspection Configuration</h3>
                    </div>
                    <div class="px-3 pt-3">
                        <p><strong>Insurance Carrier Payment:</strong></p>
                        <p class="text-muted mb-3">{{ ($schedule->insurance_carrier ?? 'no') === 'yes' ? 'Yes' : 'No' }}</p>
                        
                        <p><strong>Widget Visibility:</strong></p>
                        <p class="text-muted">{{ ($schedule->widget_visiable ?? 0) == 1 ? 'Yes' : 'No' }}</p>
                    </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>Agents</h5>
                                    <h4>
                                        @if(!empty($summaryData['agents']))
                                            {{ implode(', ', $summaryData['agents']) }}
                                        @else
                                            None
                                        @endif
                                    </h4>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <h5>Services</h5>
                                    <h4>
                                        @if(!empty($summaryData['services']))
                                            {{ implode(', ', $summaryData['services']) }}
                                        @else
                                            No services added.
                                        @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

@if($schedule->status >= 3)
    <!-- Invoice Modal - Mobile Design -->
    <div class="modal fade" id="invoiceModal" tabindex="-1" aria-labelledby="invoiceModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen-sm-down modal-lg">
            <div class="modal-content invoice-mobile-modal">
                <!-- Green Header -->
                <div class="invoice-mobile-header">
                    <button type="button" class="invoice-back-btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <h1 class="invoice-mobile-title">Invoice</h1>
                </div>

                <div class="modal-body invoice-mobile-body">
                    <!-- Invoice ID and Date Card -->
                    <div class="invoice-card">
                        <div class="invoice-card-row">
                            <div class="invoice-card-col">
                                <div class="invoice-label">Invoice ID</div>
                                <div class="invoice-value">
                                    {{ $invoice->invoice_number ?? 'INV-' . str_pad($schedule->id ?? 0, 4, '0', STR_PAD_LEFT) }}
                                </div>
                            </div>
                            <div class="invoice-card-col">
                                <div class="invoice-label">Invoice Date</div>
                                <div class="invoice-value">
                                    {{ isset($schedule->date_time)
                                        ? \Carbon\Carbon::parse($schedule->date_time)->format('M d, Y')
                                        : now()->format('M d, Y') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Property Address Card -->
                    <div class="invoice-card">
                        <div class="invoice-label">Property Address</div>
                        <div class="invoice-property-address">
                            {{ $summaryData['property'] ?? 'N/A' }}
                        </div>
                    </div>

                    <!-- Invoice Note Card -->
                    <div class="invoice-card d-none">
                        <div class="invoice-note-header">
                            <span class="invoice-label">Invoice Note</span>
                            <!-- Edit invoice note functionality to be implemented -->
                            <button type="button" class="invoice-edit-btn" disabled>
                                <i class="fas fa-edit"></i>
                            </button>
                        </div>
                        <div class="invoice-note-text">
                            {!! $schedule->invoice_note ?? 'Thank you for your business and trust!' !!}
                        </div>
                    </div>

                    <!-- Client Information Card -->
                    <div class="invoice-card">
                        <div class="invoice-client-header">
                            <span class="invoice-section-title">Client Information</span>
                            <!-- Send email functionality to be implemented -->
                            <button type="button" class="invoice-send-email-btn d-none">Send an Email</button>
                        </div>
                        <div class="invoice-contacts">
                            @if (!empty($customers) && $customers->isNotEmpty())
                                @foreach ($customers as $customer)
                                    <div class="invoice-contact-item">
                                        <div class="invoice-client-name">
                                            {{ trim(($customer->first_name ?? '') . ' ' . ($customer->last_name ?? '')) ?: 'Customer' }}
                                        </div>
                                        <div class="invoice-contact-type">Customer</div>
                                        @if ($customer->email || $customer->phone)
                                            <div class="invoice-contact-details">
                                                @if ($customer->email)
                                                    <div>{{ $customer->email }}</div>
                                                @endif
                                                @if ($customer->phone)
                                                    <div>{{ $customer->phone }}</div>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            @endif

                            @if (!empty($agents) && $agents->isNotEmpty())
                                @foreach ($agents as $agent)
                                    <div class="invoice-contact-item">
                                        <div class="invoice-client-name">
                                            {{ trim(($agent->first_name ?? '') . ' ' . ($agent->last_name ?? '')) ?: 'Agent' }}
                                        </div>
                                        <div class="invoice-contact-type">Agent</div>
                                        @if ($agent->email || $agent->phone)
                                            <div class="invoice-contact-details">
                                                @if ($agent->email)
                                                    <div>{{ $agent->email }}</div>
                                                @endif
                                                @if ($agent->phone)
                                                    <div>{{ $agent->phone }}</div>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            @endif

                            @if ((empty($customers) || $customers->isEmpty()) && (empty($agents) || $agents->isEmpty()))
                                <div class="invoice-contact-item">
                                    <div class="invoice-client-name">No contact information available</div>
                                    <div class="invoice-contact-type">N/A</div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Invoice Status Card -->
                    <div class="invoice-card">
                        <div class="invoice-label">Invoice Status</div>
                        <div class="invoice-status">
                            {{ isset($invoice->status) ? ucfirst($invoice->status) : 'Unpaid' }}
                        </div>
                    </div>

                    <!-- Invoice Details Card -->
                    <div class="invoice-card">
                        <div class="invoice-details-header">
                            <span class="invoice-section-title">Invoice Details</span>
                            <!-- Edit fees functionality to be implemented -->
                            <button type="button" class="invoice-edit-fees-btn d-none">Edit Fees</button>
                        </div>

                        <div class="invoice-items">
                            @if(isset($schedule->services) && $schedule->services->isNotEmpty())
                                @foreach($schedule->services as $service)