{{--
    Schedule Details Modal Component - Complete System
    
    This component includes all necessary JavaScript for the schedule details modal system:
    - Main modal display (schedule-details-modal.js)
    - Action modals: reschedule, edit location, edit property (schedule-modals-actions.js)
    - CRUD modals: services, clients, agents, inspectors (schedule-modals-crud.js)
    
    Usage:
    @include('components.schedule-details-modal-script')
    
    Then anywhere in your code, call:
    showScheduleDetailsModal(scheduleId);
    
    Available functions:
    - showScheduleDetailsModal(scheduleId)
    - reschedule(scheduleId)
    - editLocation(scheduleId)
    - editPropertyDetails(scheduleId)
    - addService(scheduleId)
    - addInspector(scheduleId)
    - createNewClient(scheduleId)
    - chooseExistingClient(scheduleId)
    - createNewAgent(scheduleId)
    - chooseExistingAgent(scheduleId)
    - And many more...
--}}

<!-- Schedule Details Modal CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/schedule-modals.css') }}">

<!-- Schedule Details Modal JavaScript Files -->
<script src="{{ asset('assets/js/schedule-details-modal.js') }}"></script>
<script src="{{ asset('assets/js/schedule-modals-actions.js') }}"></script>
<script src="{{ asset('assets/js/schedule-modals-crud.js') }}"></script>

<!-- Additional Helper Functions and Initializers -->
<script>
/**
 * These are simplified wrapper functions that call the main JS file functions
 * Most logic is now in the separate JS files for better organization
 */

// Wrapper functions for backwards compatibility with existing calendar code
window.reschedule = window.reschedule || function(scheduleId) {
    if (typeof window.showRescheduleModal === 'function') {
        window.showRescheduleModal(scheduleId, window.currentScheduleData);
    }
};

window.editLocation = window.editLocation || function(scheduleId) {
    if (typeof window.showPropertyLocationModal === 'function') {
        const propertyData = window.currentScheduleData?.property || null;
        window.showPropertyLocationModal(scheduleId, propertyData);
    }
};

window.editPropertyDetails = window.editPropertyDetails || function(scheduleId) {
    if (typeof window.showPropertyDetailsModal === 'function') {
        const propertyData = window.currentScheduleData?.property || null;
        window.showPropertyDetailsModal(scheduleId, propertyData);
    }
};

// Initialize map for schedule (if Google Maps is available)
window.initializeScheduleMap = function(scheduleId, property) {
    const mapContainer = document.getElementById(`schedule-map-${scheduleId}`);
    if (!mapContainer) {
        console.log('Map container not found for schedule:', scheduleId);
        return;
    }
    
    // Check if we have coordinates
    const coordsDiv = document.querySelector('.schedule-prop-coords');
    if (!coordsDiv) {
        console.log('No coordinates div found');
        return;
    }
    
    const lat = parseFloat(coordsDiv.dataset.lat);
    const lng = parseFloat(coordsDiv.dataset.lng);
    const fullAddress = coordsDiv.dataset.fullAddress;
    
    // Check if Google Maps is available
    if (typeof google === 'undefined' || !google.maps) {
        console.log('Google Maps not loaded yet');
        mapContainer.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100"><span class="text-muted">Map loading...</span></div>';
        return;
    }
    
    // If we have valid coordinates, show map
    if (!isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0) {
        const position = { lat: lat, lng: lng };
        const map = new google.maps.Map(mapContainer, {
            zoom: 15,
            center: position,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        
        new google.maps.Marker({
            position: position,
            map: map,
            title: fullAddress || 'Property Location'
        });
    } else {
        // No valid coordinates, show message
        mapContainer.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100"><span class="text-muted">No location data available</span></div>';
    }
};

// Global click handler to close modals when clicking overlay
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('schedule-modal-overlay')) {
        console.log('Clicked on modal overlay, closing modal');
        if (typeof window.closeScheduleModal === 'function') {
            window.closeScheduleModal();
        }
    }
});

console.log('✅ Schedule Details Modal component loaded');
</script>