@php
$headerOption = [
    'title' => 'Dashboard',
    'noCardView' => true
];
@endphp
@extends('admin.layouts.layout', $headerOption)

@push('page_css')
<link href="{{ asset('assets/css/dashboard.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{ asset('assets/css/schedule-modals.css') }}" />
<style>
/* Schedule Card Styles - Maroon Theme */
:root {
    --maroon-primary: #7F1C1C;
    --maroon-dark: #5c1414;
    --maroon-light: #f7cece;
}

.schedule-card {
    background: var(--maroon-primary);
    background: linear-gradient(135deg, var(--maroon-primary) 0%, var(--maroon-dark) 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(127, 28, 28, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.schedule-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
    pointer-events: none;
}

.schedule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(127, 28, 28, 0.3);
}

.schedule-card-header {
    padding: 24px 32px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.schedule-card-header-content {
    flex: 1;
}

.schedule-card-header h5 {
    padding: 0;
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.schedule-card-header p {
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--maroon-light);
}

.schedule-card-toggle {
    width: 16px;
    height: 16px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
}

.schedule-card-toggle.expanded {
    transform: rotate(137deg);
}

.schedule-card-body {
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.schedule-card-body.show {
    max-height: 5000px;
    padding: 0;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state p {
    margin: 0;
    font-size: 16px;
}

/* Loading State */
.loading-spinner {
    text-align: center;
    padding: 60px;
}

.spinner-border-maroon {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
    border-color: var(--maroon-primary);
    border-right-color: transparent;
}

/* Inline Schedule Details Styling */
.inline-schedule-details {
    background: #ffffff;
    padding: 0;
}

/* Top Section - Key Details */
.inline-top-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, var(--maroon-primary) 0%, var(--maroon-dark) 100%);
    margin-bottom: 0;
    border-radius: 0;
}

.inline-detail-card {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 8px;
    background: #f8f9fa;
    box-shadow: none;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 140px;
}

.inline-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.inline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #ffffff;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.inline-card-header .btn {
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 4px;
}

.inline-card-header .btn-warning {
    background-color: #fbbf24;
    border-color: #fbbf24;
    color: #000;
}

.inline-card-header .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.inline-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-card-header-icon {
    font-size: 16px;
    color: #6366f1;
}

.inline-card-header h4 {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.inline-card-content {
    padding: 18px;
    background: #f8f9fa;
}

.inline-detail-main {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0;
    line-height: 1.6;
}

.inline-detail-sub {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
    font-weight: 500;
}

.inline-property-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 0;
}

.inline-property-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    font-weight: 600;
    border: 1px solid #e5e7eb;
}

.inline-property-item i {
    color: #6366f1;
    font-size: 14px;
}

/* Main Content Grid */
.inline-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px;
    background: #ffffff;
}

.inline-left-column,
.inline-right-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Section Cards */
.inline-section-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
}

.inline-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.inline-section-header .btn,
.inline-section-header .dropdown-toggle {
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 4px;
}

.inline-section-header .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.inline-section-header .btn-success {
    background-color: #10b981;
    border-color: #10b981;
}

.inline-section-header .btn-warning {
    background-color: #fbbf24;
    border-color: #fbbf24;
    color: #000;
}

.inline-section-header .dropdown-menu {
    font-size: 13px;
    min-width: 160px;
}

.inline-section-header h3 {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-section-header h3 i {
    color: #6366f1;
    font-size: 14px;
}

.inline-section-content {
    padding: 18px;
    max-height: 400px;
    overflow-y: auto;
    background: #f8f9fa;
}

.inline-no-data {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 30px 20px;
    font-style: italic;
}

/* Person Cards */
.inline-person-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 14px;
    background: #ffffff;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
    align-items: center;
}

.inline-person-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.inline-person-actions {
    display: flex;
    gap: 6px;
}

.inline-person-actions .btn {
    padding: 4px 8px;
    font-size: 12px;
}

.inline-person-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

.inline-person-info {
    flex: 1;
}

.inline-person-name {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inline-person-contact {
    font-size: 12px;
    color: #718096;
    line-height: 1.6;
}

.inline-person-contact div {
    margin-bottom: 2px;
}

/* Service Items */
.inline-service-item {
    display: grid;
    grid-template-columns: 1fr auto 120px auto;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
}

.inline-service-item:hover {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.inline-service-item .btn {
    padding: 4px 10px;
    font-size: 12px;
}

.inline-service-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inline-service-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 0;
}

.inline-service-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.inline-service-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #3b82f6;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.inline-service-fee-type {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.inline-service-fee-type.variable {
    background: #10b981;
    color: white;
}

.inline-service-fee-type.fixed {
    background: #8b5cf6;
    color: white;
}

.inline-service-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
}

.inline-service-quantity label {
    margin: 0;
    font-weight: 500;
    color: #6b7280;
}

.inline-service-quantity input {
    width: 60px;
    text-align: center;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.inline-service-quantity input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Report Section Styles */
.report-agreements-info {
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #6366f1;
}

.report-agreements-info p {
    font-size: 14px;
    color: #4b5563;
}

.report-service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.report-service-item:hover {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.report-service-name {
    font-size: 15px;
    font-weight: 500;
    color: #6366f1;
}

.report-service-actions {
    display: flex;
    gap: 8px;
}

.report-action-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.report-action-btn:nth-child(1) {
    color: #ef4444;
}

.report-action-btn:nth-child(1):hover {
    background: #fee2e2;
    color: #dc2626;
}

.report-action-btn:nth-child(2) {
    color: #10b981;
}

.report-action-btn:nth-child(2):hover {
    background: #d1fae5;
    color: #059669;
}

.report-action-btn:nth-child(3) {
    color: #3b82f6;
}

.report-action-btn:nth-child(3):hover {
    background: #dbeafe;
    color: #2563eb;
}

/* Invoice Section Styles */
.invoice-table-container {
    overflow-x: auto;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.invoice-table thead {
    background: #f8f9fa;
}

.invoice-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #4b5563;
    border-bottom: 2px solid #e5e7eb;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.invoice-table tbody tr {
    transition: background-color 0.2s ease;
}

.invoice-table tbody tr:hover {
    background: #f9fafb;
}

.invoice-number {
    font-weight: 600;
    color: #1f2937;
}

.invoice-customer {
    color: #4b5563;
}

.invoice-date {
    color: #6b7280;
    font-size: 13px;
}

.invoice-amount {
    font-weight: 600;
    color: #059669;
}

.invoice-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.invoice-status-badge.paid {
    background: #d1fae5;
    color: #065f46;
}

.invoice-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.invoice-status-badge.overdue {
    background: #fee2e2;
    color: #991b1b;
}

.invoice-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.invoice-action-icon {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.invoice-action-icon:hover {
    background: #f3f4f6;
    color: #3b82f6;
}

.invoice-pay-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.invoice-pay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.invoice-no-data {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 14px;
}

/* Inspector Cards */
.inline-inspector-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 14px;
    background: #ffffff;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
    align-items: center;
}

.inline-inspector-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.inline-delete-btn {
    padding: 4px 8px;
    font-size: 12px;
}

.inline-inspector-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #667eea;
}

.inline-inspector-name {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inline-inspector-contact {
    font-size: 12px;
    color: #718096;
    line-height: 1.6;
}

/* Agreement Items */
.inline-agreement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f7fafc;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #e2e8f0;
}

.inline-agreement-name {
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bottom Actions */
.inline-bottom-actions {
    padding: 24px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    background: #ffffff;
}

@media (max-width: 992px) {
    .inline-top-section,
    .inline-main-content {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

@section('content')
<div class="main_contentarea mt-2">
    <div class="container">
        <div class="dashboard_title mb-4">
            <h2>Welcome {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}</h2>
        </div>

        <!-- Schedules List -->
        <div class="schedules-list-section mt-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="mb-0">My Schedules</h3>
                <div class="d-flex gap-2">
                    <select class="form-select form-select-sm" id="scheduleStatusFilter" style="width: 200px;">
                        <option value="">All Schedules</option>
                        <option value="1">Step 1</option>
                        <option value="2">Step 2</option>
                        <option value="3">Completed</option>
                    </select>
                    {{-- Refresh button commented out
                    <button class="btn btn-sm btn-primary" onclick="loadSchedules()">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                    --}}
                </div>
            </div>

            <!-- Schedules Container -->
            <div id="schedulesContainer">
                <div class="loading-spinner">
                    <div class="spinner-border spinner-border-maroon" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include Schedule Details Modal Component -->
@include('admin.components.schedule-details-modal-script')

<!-- Include Simple Agent and Client Modals -->
@include('admin.components.simple-agent-modal')
@include('admin.components.simple-client-modal')

<!-- Report Template Selection Modal -->
<div class="modal fade" id="reportTemplateModal" tabindex="-1" aria-labelledby="reportTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <div class="d-flex align-items-center">
                    <i class="fas fa-file-alt me-2"></i>
                    <h5 class="modal-title mb-0" id="reportTemplateModalLabel">Select Report Template</h5>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="report-templates-loading" class="text-center py-4" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading templates...</span>
                    </div>
                    <p class="mt-2 text-muted">Loading available templates...</p>
                </div>
                
                <div id="report-templates-container">
                    <!-- Templates will be loaded here -->
                </div>
                
                <div id="report-templates-error" class="text-center py-4 text-danger" style="display: none;">
                    <i class="fas fa-exclamation-triangle fa-2x mb-2"></i>
                    <p>Error loading templates. Please try again.</p>
                </div>
                
                <div id="report-no-templates" class="text-center py-4 text-muted" style="display: none;">
                    <i class="fas fa-file-alt fa-2x mb-2"></i>
                    <p>No report templates found for this schedule.</p>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('page_script')
@php
    $placeApiKey = \Config::get('settings.address_auto_populate_key', '');
@endphp
<!-- Include Google Maps API -->
@if(!empty($placeApiKey))
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async"></script>
@endif
<script src="{{ asset('assets/js/schedule-modals-actions.js') }}"></script>
<script>
// Schedule Data Loading
let schedulesData = [];
let currentExpandedScheduleId = null; // Track which schedule is currently expanded

// Flag to prevent schedule details modal from opening in user dashboard
// This tells schedule-modals-crud.js to use loadScheduleData() instead of showScheduleDetailsModal()
window.isUserDashboard = true;

// Override showScheduleDetailsModal to prevent modal opening in user dashboard
// Instead, just refresh the images for the expanded schedule
window.showScheduleDetailsModal = function(scheduleId) {
    console.log('🚫 showScheduleDetailsModal called in user dashboard - preventing modal open');
    console.log('   Instead, refreshing images for schedule:', scheduleId);
    
    // Just refresh the images without opening any modal
    if (scheduleId) {
        refreshScheduleImages(scheduleId);
    }
    
    // Return a resolved promise to maintain compatibility
    return Promise.resolve();
};

document.addEventListener('DOMContentLoaded', function() {
    console.log('User Dashboard Loaded');
    console.log('✅ Set window.isUserDashboard = true');
    console.log('✅ Overridden showScheduleDetailsModal function');
    loadSchedules();

    const statusFilter = document.getElementById('scheduleStatusFilter');
    if (statusFilter) {
        statusFilter.addEventListener('change', filterSchedules);
    }
});

// Alias for compatibility with schedule-modals-actions.js
// This function is called after image uploads from schedule-modals-crud.js
window.loadScheduleData = function(scheduleId) {
    console.log('🔔 loadScheduleData called');
    console.log('  - Passed scheduleId:', scheduleId);
    console.log('  - currentExpandedScheduleId:', currentExpandedScheduleId);
    
    // Determine which schedule to refresh
    const targetScheduleId = scheduleId || currentExpandedScheduleId || window.currentScheduleId;
    
    console.log('  - Target schedule ID:', targetScheduleId);
    
    // If there's a target schedule, just refresh its images instead of reloading everything
    if (targetScheduleId) {
        console.log('🎯 Refreshing images for schedule:', targetScheduleId);
        refreshScheduleImages(targetScheduleId);
    } else {
        console.log('🔄 Reloading all schedules (no target schedule found)');
        loadSchedules();
    }
};

// Function to refresh images for a specific schedule without collapsing the card
window.refreshScheduleImages = function(scheduleId) {
    console.log('');
    console.log('═══════════════════════════════════════════════════════════');
    console.log('🔄 REFRESHING IMAGES FOR SCHEDULE:', scheduleId);
    console.log('═══════════════════════════════════════════════════════════');
    
    // Use the same API endpoint as loadSchedules to ensure consistent data format
    let url = '{{ route("admin.schedule.user-schedules") }}';
    const params = new URLSearchParams();
    
    @php
        try {
            $userRole = \App\Helpers\Helper::getLoggedInUserRole();
        } catch (\Exception $e) {
            $userRole = null;
        }
    @endphp
    
    @if(!empty($userRole) && $userRole === 'Customer')
    params.append('customer_filter', 'my_schedules');
    @elseif(!empty($userRole) && $userRole === 'Agent')
    params.append('agent_filter', 'my_schedules');
    @elseif(!empty($userRole) && $userRole === 'Inspector')
    params.append('inspector_filter', '{{ auth()->id() }}');
    @endif

    params.append('ajax', '1');
    const fullUrl = url + '?' + params.toString();
    
    // Fetch all schedules and find the one we need
    fetch(fullUrl, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('✅ Schedules data fetched for image refresh');
        
        if (data.success && data.data) {
            const schedules = data.data.data || data.data;
            const updatedSchedule = schedules.find(s => s.id == scheduleId);
            
            if (updatedSchedule) {
                console.log('📋 Found updated schedule:', updatedSchedule);
                console.log('📸 Updated images array:', updatedSchedule.images);
                
                // Update the schedule in schedulesData array
                const scheduleIndex = schedulesData.findIndex(s => s.id == scheduleId);
                if (scheduleIndex !== -1) {
                    schedulesData[scheduleIndex] = updatedSchedule;
                    console.log('✅ Updated schedulesData array');
                }
                
                // Reload the images in the slider
                if (updatedSchedule.images && updatedSchedule.images.length > 0) {
                    console.log('🎨 Calling loadScheduleImages with', updatedSchedule.images.length, 'images');
                    loadScheduleImages(scheduleId, updatedSchedule.images);
                    console.log('✅ Slider updated with new images');
                } else {
                    console.log('⚠️ No images found, showing placeholder');
                    // Show no images placeholder
                    const sliderContainer = document.getElementById(`scheduleImageSlider_${scheduleId}`);
                    if (sliderContainer) {
                        sliderContainer.innerHTML = `
                            <div class="text-muted d-flex align-items-center justify-content-center" style="height:100%;">
                                <i class="fas fa-images fa-3x"></i>
                                <p class="mt-2">No images uploaded</p>
                            </div>
                        `;
                    }
                }
            } else {
                console.error('❌ Schedule not found in API response');
            }
        } else {
            console.error('❌ Invalid API response:', data);
        }
    })
    .catch(error => {
        console.error('❌ Error refreshing images:', error);
    });
};

function loadSchedules() {
    const container = document.getElementById('schedulesContainer');
    container.innerHTML = '<div class="loading-spinner"><div class="spinner-border spinner-border-maroon" role="status"><span class="visually-hidden">Loading...</span></div></div>';

    let url = '{{ route("admin.schedule.user-schedules") }}';
    const params = new URLSearchParams();
    
    @php
        try {
            $userRole = \App\Helpers\Helper::getLoggedInUserRole();
        } catch (\Exception $e) {
            $userRole = null;
        }
    @endphp
    
    @if(!empty($userRole) && $userRole === 'Customer')
    params.append('customer_filter', 'my_schedules');
    @elseif(!empty($userRole) && $userRole === 'Agent')
    params.append('agent_filter', 'my_schedules');
    @elseif(!empty($userRole) && $userRole === 'Inspector')
    params.append('inspector_filter', '{{ auth()->id() }}');
    @endif

    params.append('ajax', '1');
    const fullUrl = url + '?' + params.toString();

    fetch(fullUrl, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('📦 API Response:', data);
        if (data.success && data.data) {
            schedulesData = data.data.data || data.data;
            console.log('📋 Schedules loaded:', schedulesData.length);
            console.log('🔍 First schedule sample:', schedulesData[0]);
            if (schedulesData[0]) {
                console.log('📸 Images in first schedule:', schedulesData[0].images);
            }
            renderSchedules(schedulesData);
        } else {
            showEmptyState();
        }
    })
    .catch(error => {
        console.error('Error loading schedules:', error);
        showErrorState(error.message);
    });
}

function renderSchedules(schedules) {
    const container = document.getElementById('schedulesContainer');
    
    if (!schedules || schedules.length === 0) {
        showEmptyState();
        return;
    }

    console.log('🎨 Rendering', schedules.length, 'schedule cards');
    container.innerHTML = schedules.map(schedule => createScheduleCard(schedule)).join('');
    
    // Re-expand the previously expanded schedule if it exists
    if (currentExpandedScheduleId) {
        console.log('🔄 Re-expanding schedule:', currentExpandedScheduleId);
        const toggle = document.getElementById(`toggle-${currentExpandedScheduleId}`);
        const body = document.getElementById(`body-${currentExpandedScheduleId}`);
        
        if (toggle && body) {
            toggle.classList.add('expanded');
            body.classList.add('show');
        }
    }
}

function createScheduleCard(schedule) {
    const scheduleId = schedule.id;
    const scheduleDate = formatDateMMDDYYYY(schedule.scheduled_date) || 'N/A';
    const scheduleTime = formatTime12Hour(schedule.start_time || schedule.adjusted_time) || 'N/A';
    
    let propertyAddress = 'Address not available';
    if (schedule.property) {
        if (schedule.property.full_address) {
            propertyAddress = schedule.property.full_address;
        } else if (schedule.property.address_line1) {
            propertyAddress = schedule.property.address_line1;
        }
    }

    // Build the inline schedule details content
    const inlineDetailsHTML = buildInlineScheduleDetails(schedule);

    return `
        <div class="schedule-card" data-schedule-id="${scheduleId}">
            <div class="schedule-card-header" onclick="toggleScheduleCard(${scheduleId})">
                <div class="schedule-card-header-content">
                    <h5>Schedule ID: #${scheduleId} - ${scheduleDate} ${scheduleTime}</h5>
                    <p>${propertyAddress}</p>
                </div>
                <div class="schedule-card-toggle" id="toggle-${scheduleId}"></div>
            </div>
            <div class="schedule-card-body" id="body-${scheduleId}">
                ${inlineDetailsHTML}
            </div>
        </div>
    `;
}

function formatTime12Hour(time) {
    if (!time || time === 'N/A') return 'N/A';
    
    // Handle different time formats
    let hours, minutes;
    
    // If time includes seconds (HH:MM:SS)
    if (time.includes(':')) {
        const parts = time.split(':');
        hours = parseInt(parts[0], 10);
        minutes = parts[1];
    } else {
        return time; // Return as-is if format is unexpected
    }
    
    // Convert to 12-hour format
    const period = hours >= 12 ? 'PM' : 'AM';
    const displayHours = hours % 12 || 12; // Convert 0 to 12 for midnight
    
    return `${displayHours.toString().padStart(2, '0')}:${minutes} ${period}`;
}

function formatDateMMDDYYYY(date) {
    if (!date || date === 'N/A') return 'N/A';
    
    // Create a Date object from the input
    let dateObj;
    
    // Handle ISO format (e.g., "2025-11-12T00:00:00.000000Z")
    if (date.includes('T')) {
        dateObj = new Date(date);
    }
    // Handle YYYY-MM-DD format
    else if (date.includes('-')) {
        const parts = date.split('-');
        if (parts[0].length === 4) {
            // YYYY-MM-DD format
            dateObj = new Date(date);
        } else if (parts[2].length === 4) {
            // DD-MM-YYYY format
            dateObj = new Date(parts[2], parts[1] - 1, parts[0]);
        }
    }
    
    // If we successfully created a date object, format it
    if (dateObj && !isNaN(dateObj.getTime())) {
        const month = String(dateObj.getMonth() + 1).padStart(2, '0');
        const day = String(dateObj.getDate()).padStart(2, '0');
        const year = dateObj.getFullYear();
        return `${month}-${day}-${year}`;
    }
    
    return date; // Return as-is if format is unexpected
}

function buildInlineScheduleDetails(schedule) {
    const property = schedule.property || {};
    const scheduleDate = formatDateMMDDYYYY(schedule.scheduled_date) || 'N/A';
    const scheduleTime = formatTime12Hour(schedule.start_time || schedule.adjusted_time) || 'N/A';
    const propertyAddress = property.full_address || property.address_line1 || 'No address provided';
    
    // Get status badge
    let statusBadge = '';
    if (schedule.status == 1) statusBadge = '<span class="badge bg-info">Step 1</span>';
    else if (schedule.status == 2) statusBadge = '<span class="badge bg-warning text-dark">Step 2</span>';
    else if (schedule.status == 3) statusBadge = '<span class="badge bg-success">Completed</span>';
    else if (schedule.is_cancelled) statusBadge = '<span class="badge bg-danger">Cancelled</span>';
    
    // Build sections with full functionality
    const inspectorsHTML = buildInspectorsSection(schedule.schedule_inspectors || [], schedule.id);
    const customersHTML = buildCustomersSection(schedule.schedule_customers || [], schedule.id);
    const agentsHTML = buildAgentsSection(schedule.schedule_agents || [], schedule.id);
    const servicesHTML = buildServicesSection(schedule.services || [], schedule.id);
    const agreementsHTML = buildAgreementsSection(schedule.agreements || [], schedule.id);
    
    return `
        <div class="inline-schedule-details">
            <!-- Top Section: Key Details -->
            <div class="inline-top-section">
                <div class="inline-detail-card">
                    <div class="inline-card-header">
                        <div class="inline-header-left">
                            <i class="fas fa-calendar-alt inline-card-header-icon"></i>
                            <h4>INSPECTION DATE & TIME</h4>
                        </div>
                        {{-- Reschedule button commented out - users don't need to edit schedule
                        <button class="btn btn-sm btn-warning" onclick="reschedule(${schedule.id})">
                            <i class="fas fa-clock"></i> RESCHEDULE
                        </button>
                        --}}
                    </div>
                    <div class="inline-card-content">
                        <div class="inline-detail-main">${scheduleDate} ${scheduleTime}</div>
                        <div class="mt-2">${statusBadge}</div>
                    </div>
                </div>
                
                <div class="inline-detail-card">
                    <div class="inline-card-header">
                        <div class="inline-header-left">
                            <i class="fas fa-map-marker-alt inline-card-header-icon"></i>
                            <h4>PROPERTY LOCATION</h4>
                        </div>
                        {{-- Edit button commented out - users don't need to edit address
                        <button class="btn btn-sm btn-primary" onclick="editLocation(${schedule.id})">
                            <i class="fas fa-edit"></i> EDIT
                        </button>
                        --}}
                    </div>
                    <div class="inline-card-content">
                        <div class="inline-detail-main">${propertyAddress}</div>
                        <div class="inline-detail-sub">
                            ${property.city ? property.city + ', ' : ''}${property.state || ''} ${property.postal_code || ''}
                        </div>
                    </div>
                </div>
                
                <div class="inline-detail-card">
                    <div class="inline-card-header">
                        <div class="inline-header-left">
                            <i class="fas fa-home inline-card-header-icon"></i>
                            <h4>PROPERTY DETAILS</h4>
                        </div>
                        {{-- Edit button commented out - users don't need to edit property details
                        <button class="btn btn-sm btn-primary" onclick="editPropertyDetails(${schedule.id})">
                            <i class="fas fa-edit"></i> EDIT
                        </button>
                        --}}
                    </div>
                    <div class="inline-card-content">
                        <div class="inline-property-details">
                            <div class="inline-property-item">
                                <i class="fas fa-expand-arrows-alt"></i>
                                <span>${property.square_feet || 'N/A'} sq ft</span>
                            </div>
                            <div class="inline-property-item">
                                <i class="fas fa-calendar"></i>
                                <span>Built ${property.year_built || 'N/A'}</span>
                            </div>
                            <div class="inline-property-item">
                                <i class="fas fa-bed"></i>
                                <span>${property.bedrooms || 'N/A'} Bedrooms</span>
                            </div>
                            <div class="inline-property-item">
                                <i class="fas fa-bath"></i>
                                <span>${property.bathrooms || 'N/A'} Bathrooms</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Main Content Grid -->
            <div class="inline-main-content">
                <div class="inline-left-column">
                    <!-- Agreements Section -->
                    <div class="inline-section-card">
                        <div class="inline-section-header">
                            <h3><i class="fas fa-file-contract"></i> AGREEMENTS</h3>
                            {{-- Add Agreement button commented out - users don't need to add agreements
                            <button class="btn btn-sm btn-primary" onclick="openAgreementSelectModal(${schedule.id})">
                                <i class="fas fa-plus"></i> Add Agreement
                            </button>
                            --}}
                        </div>
                        <div class="inline-section-content">
                            ${agreementsHTML}
                        </div>
                    </div>
                    
                    {{-- Services Section - Commented out
                    <div class="inline-section-card">
                        <div class="inline-section-header">
                            <h3><i class="fas fa-cogs"></i> SERVICES & PRICING</h3>
                        </div>
                        <div class="inline-section-content" id="services-list-${schedule.id}">
                            ${servicesHTML}
                        </div>
                    </div>
                    --}}
                    
                    <!-- Customers Section -->
                    <div class="inline-section-card">
                        <div class="inline-section-header">
                            <h3><i class="fas fa-users"></i> CLIENTS</h3>
                            <button class="btn btn-sm btn-primary" onclick="createNewClient(${schedule.id})">
                                <i class="fas fa-plus"></i> Add Client
                            </button>
                        </div>
                        <div class="inline-section-content">
                            ${customersHTML}
                        </div>
                    </div>
                </div>
                
                <div class="inline-right-column">
                    <!-- Agents Section -->
                    <div class="inline-section-card">
                        <div class="inline-section-header">
                            <h3><i class="fas fa-handshake"></i> AGENTS</h3>
                            <button class="btn btn-sm btn-primary" onclick="createNewAgent(${schedule.id})">
                                <i class="fas fa-plus"></i> Add Agent
                            </button>
                        </div>
                        <div class="inline-section-content">
                            ${agentsHTML}
                        </div>
                    </div>
                    
                    <!-- Inspectors Section -->
                    <div class="inline-section-card">
                        <div class="inline-section-header">
                            <h3><i class="fas fa-clipboard-check"></i> ASSIGN INSPECTOR</h3>
                        </div>
                        <div class="inline-section-content">
                            ${inspectorsHTML}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- View Image & Map Section -->
            <div class="inline-section-card" style="margin: 20px;">
                <div class="inline-section-header">
                    <h3><i class="fas fa-images"></i> VIEW IMAGE & MAP</h3>
                    <button class="btn btn-sm btn-warning" onclick="uploadPropertyImages(${schedule.id})">
                        <i class="fas fa-upload"></i> UPLOAD IMAGES
                    </button>
                </div>
                <div class="inline-section-content">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="schedule-image-slider position-relative d-flex align-items-center justify-content-center" 
                                 id="scheduleImageSlider_${schedule.id}" 
                                 style="height:300px; background:#f8f9fa; overflow:hidden; border-radius:8px;">
                                <div class="text-muted d-flex align-items-center justify-content-center" style="height:100%;">
                                    <span>📷 No images available</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="schedule-map" style="height:300px; background:#f3f4f6; position:relative; border-radius:8px;">
                                <div id="schedule-map-${schedule.id}" style="width:100%;height:100%;min-height:300px; border-radius:8px;"></div>
                            </div>
                            <div class="property-address-display mt-2">
                                <small class="text-muted">${propertyAddress}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Report Section - Only show if templates exist -->
            ${(schedule.templates_count && schedule.templates_count > 0) ? `
            <div class="inline-section-card" style="margin: 20px;">
                <div class="inline-section-header">
                    <h3><i class="fas fa-file-alt"></i> REPORT</h3>
                </div>
                <div class="inline-section-content">
                    <div class="report-agreements-info mb-3">
                        <p class="text-muted mb-0">All of the agreements below will need to be signed</p>
                    </div>
                    <div id="report-templates-list-${schedule.id}">
                        <div class="text-center text-muted py-3">
                            <i class="fas fa-spinner fa-spin"></i> Loading templates...
                        </div>
                    </div>
                </div>
            </div>
            ` : ''}
            
            <!-- Invoice Section -->
            <div class="inline-section-card" style="margin: 20px;">
                <div class="inline-section-header" style="justify-content: space-between;">
                    <h3><i class="fas fa-file-invoice"></i> INVOICE NOTE</h3>
                    <button class="invoice-pay-button" onclick="payInvoice(${schedule.id})">
                        <i class="fas fa-credit-card me-2"></i>PAY
                    </button>
                </div>
                <div class="inline-section-content">
                    <div id="invoice-list-${schedule.id}">
                        ${buildInvoiceList(schedule.invoices || [], schedule.id)}
                    </div>
                </div>
            </div>
            
            {{-- Invoice Note Section - Commented out (users don't need to manage invoice notes)
            <div class="inline-section-card" style="margin: 20px;">
                <div class="inline-section-header">
                    <h3><i class="fas fa-sticky-note"></i> Invoice Note</h3>
                    <button class="btn btn-sm btn-primary" onclick="editScheduleNote(${schedule.id})" title="Edit Note">
                        <i class="fas fa-edit"></i> Edit Note
                    </button>
                </div>
                <div class="inline-section-content">
                    <div class="note-content" id="noteContent-${schedule.id}">
                        ${schedule.notes && schedule.notes.trim() ? 
                            `<div class="note-text">${schedule.notes}</div>` : 
                            '<div class="inline-no-data">No note added yet.</div>'
                        }
                    </div>
                </div>
            </div>
            --}}
        </div>
    `;
    
    // Initialize images and map after HTML is added to DOM
    // Use setTimeout to ensure DOM elements are rendered
    setTimeout(() => {
        console.log('🖼️ Initializing images for schedule:', schedule.id);
        console.log('📸 Images data:', schedule.images);
        console.log('🗺️ Property address:', propertyAddress);
        
        // Load images if available
        if (schedule.images && schedule.images.length > 0) {
            console.log('✅ Loading', schedule.images.length, 'images for schedule', schedule.id);
            loadScheduleImages(schedule.id, schedule.images);
        } else {
            console.log('⚠️ No images found for schedule', schedule.id);
        }
        
        // Initialize map if property address is available
        if (propertyAddress && propertyAddress !== 'N/A') {
            console.log('✅ Initializing map for schedule', schedule.id);
            initializeScheduleMap(schedule.id, propertyAddress);
        } else {
            console.log('⚠️ No valid address for map initialization');
        }
    }, 100);
}

function buildInspectorsSection(inspectors, scheduleId) {
    if (!inspectors || inspectors.length === 0) {
        return '<div class="inline-no-data">No inspectors assigned</div>';
    }
    
    return inspectors.map(si => {
        if (!si.inspector) return '';
        const inspector = si.inspector;
        const name = `${inspector.first_name || ''} ${inspector.last_name || ''}`.trim() || 'Unknown';
        const phone = inspector.phone || 'N/A';
        const email = inspector.email || 'N/A';
        const avatarUrl = inspector.avatar?.thumb || '/images/default-avatar.png';
        const initial = name.charAt(0).toUpperCase();
        
        return `
            <div class="inline-inspector-card">
                <div class="inline-inspector-avatar">
                    <img src="${avatarUrl}" alt="${name}" onerror="this.outerHTML='<div class=\\'inline-person-avatar\\'>${initial}</div>'">
                </div>
                <div class="inline-inspector-info">
                    <div class="inline-inspector-name">
                        <i class="fas fa-user-check text-success"></i>${name}
                    </div>
                    <div class="inline-inspector-contact">
                        <div><i class="fas fa-phone text-success me-1"></i>${phone}</div>
                        <div><i class="fas fa-envelope text-info me-1"></i>${email}</div>
                    </div>
                </div>
                {{-- Remove button commented out - users don't need to remove inspectors
                <button class="btn btn-sm btn-danger inline-delete-btn" onclick="removeInspector(${scheduleId}, ${si.id})" title="Remove Inspector">
                    <i class="fas fa-trash"></i>
                </button>
                --}}
            </div>
        `;
    }).join('');
}

function buildCustomersSection(customers, scheduleId) {
    if (!customers || customers.length === 0) {
        return '<div class="inline-no-data">No clients assigned</div>';
    }
    
    return customers.map(sc => {
        if (!sc.customer) return '';
        const customer = sc.customer;
        const name = `${customer.first_name || ''} ${customer.last_name || ''}`.trim() || 'Unknown';
        const phone = customer.phone || 'N/A';
        const email = customer.email || 'N/A';
        const initial = name.charAt(0).toUpperCase();
        const customerType = sc.customer_type == 1 ? 'Buyer' : sc.customer_type == 2 ? 'Seller' : '';
        
        return `
            <div class="inline-person-card">
                <div class="inline-person-avatar">${initial}</div>
                <div class="inline-person-info">
                    <div class="inline-person-name">
                        <i class="fas fa-user text-primary"></i>${name}
                        ${customerType ? `<span class="badge bg-secondary" style="font-size:9px">${customerType}</span>` : ''}
                    </div>
                    <div class="inline-person-contact">
                        <div><i class="fas fa-phone text-success me-1"></i>${phone}</div>
                        <div><i class="fas fa-envelope text-info me-1"></i>${email}</div>
                    </div>
                </div>
                {{-- Edit and Delete buttons commented out - users don't need to edit/remove clients
                <div class="inline-person-actions">
                    <button class="btn btn-sm btn-primary" onclick="editClient(${scheduleId}, ${customer.id})" title="Edit Client">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="removeClient(${scheduleId}, ${sc.id})" title="Remove Client">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                --}}
            </div>
        `;
    }).join('');
}

function buildAgentsSection(agents, scheduleId) {
    if (!agents || agents.length === 0) {
        return '<div class="inline-no-data">No agents assigned</div>';
    }
    
    return agents.map(sa => {
        if (!sa.agent) return '';
        const agent = sa.agent;
        const name = `${agent.first_name || ''} ${agent.last_name || ''}`.trim() || 'Unknown';
        const phone = agent.phone || 'N/A';
        const email = agent.email || 'N/A';
        const initial = name.charAt(0).toUpperCase();
        const agentType = sa.agent_type == 1 ? 'Buyer' : sa.agent_type == 2 ? 'Seller' : '';
        
        return `
            <div class="inline-person-card">
                <div class="inline-person-avatar">${initial}</div>
                <div class="inline-person-info">
                    <div class="inline-person-name">
                        <i class="fas fa-user-tie text-info"></i>${name}
                        ${agentType ? `<span class="badge bg-secondary" style="font-size:9px">${agentType}</span>` : ''}
                    </div>
                    <div class="inline-person-contact">
                        <div><i class="fas fa-phone text-success me-1"></i>${phone}</div>
                        <div><i class="fas fa-envelope text-info me-1"></i>${email}</div>
                    </div>
                </div>
                {{-- Edit and Delete buttons commented out - users don't need to edit/remove agents
                <div class="inline-person-actions">
                    <button class="btn btn-sm btn-primary" onclick="editAgent(${scheduleId}, ${agent.id})" title="Edit Agent">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="removeAgent(${scheduleId}, ${sa.id})" title="Remove Agent">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                --}}
            </div>
        `;
    }).join('');
}

function buildServicesSection(services, scheduleId) {
    if (!services || services.length === 0) {
        return '<div class="inline-no-data">No services selected</div>';
    }
    
    const servicesHTML = services.map(ss => {
        if (!ss.service) return '';
        const service = ss.service;
        const serviceName = service.service_name || 'Unknown Service';
        
        // Get fee from schedule_services (service_fee) or fallback to service.fee
        const fee = parseFloat(ss.service_fee || service.fee || 0);
        const quantity = parseInt(ss.quantity || 1);
        
        // Duration from service (in minutes)
        const duration = service.duration || 0;
        const durationText = duration > 0 ? `${duration} mins` : 'N/A';
        
        // Fee type from service (Variable or Fixed)
        const feeType = service.fee_type || 'fixed';
        const feeTypeClass = feeType.toLowerCase() === 'variable' ? 'variable' : 'fixed';
        const feeTypeLabel = feeType.toLowerCase() === 'variable' ? `Variable: $${fee.toFixed(2)}` : `Fixed: $${fee.toFixed(2)}`;
        
        return `
            <div class="inline-service-item" data-service-id="${ss.id}">
                <div class="inline-service-info">
                    <div class="inline-service-name">${serviceName}</div>
                    <div class="inline-service-meta">
                        <span class="inline-service-duration">
                            ${durationText}
                        </span>
                        <span class="inline-service-fee-type ${feeTypeClass}">
                            ${feeTypeLabel}
                        </span>
                    </div>
                </div>
                <div class="inline-service-quantity">
                    <label>Qty:</label>
                    <input type="number" 
                           value="${quantity}" 
                           min="1"
                           data-schedule-service-id="${ss.id}"
                           onchange="updateServiceQuantity(${scheduleId}, ${ss.id}, this.value)">
                </div>
                <button class="btn btn-sm btn-danger" onclick="removeService(${scheduleId}, ${ss.id})" title="Remove Service">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
    }).join('');
    
    return servicesHTML;
}

function buildReportServicesList(services, scheduleId) {
    if (!services || services.length === 0) {
        return '<div class="inline-no-data">No services available for reports</div>';
    }
    
    const servicesHTML = services.map(ss => {
        if (!ss.service) return '';
        const service = ss.service;
        const serviceName = service.service_name || 'Unknown Service';
        
        return `
            <div class="report-service-item">
                <div class="report-service-name">
                    ${serviceName}
                </div>
                <div class="report-service-actions">
                    <button class="report-action-btn" onclick="viewReportPreview(${scheduleId}, ${ss.id})" title="Preview Report">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="report-action-btn" onclick="downloadReport(${scheduleId}, ${ss.id})" title="Download Report">
                        <i class="fas fa-download"></i>
                    </button>
                    <!-- <button class="report-action-btn" onclick="shareReport(${scheduleId}, ${ss.id})" title="Share Report">
                        <i class="fas fa-share-alt"></i>
                    </button> -->
                </div>
            </div>
        `;
    }).join('');
    
    return servicesHTML;
}

function loadScheduleTemplates(scheduleId) {
    const container = document.getElementById(`report-templates-list-${scheduleId}`);
    if (!container) {
        console.error('Template container not found for schedule:', scheduleId);
        return;
    }

    // Fetch templates from API
    fetch(`/schedule/${scheduleId}/templates`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('Templates loaded:', data);
        
        if (data.status === 200 && data.data && data.data.length > 0) {
            container.innerHTML = buildReportTemplatesList(data.data, scheduleId);
        } else {
            container.innerHTML = '<div class="inline-no-data">No report templates found</div>';
        }
    })
    .catch(error => {
        console.error('Error loading templates:', error);
        container.innerHTML = '<div class="inline-no-data text-danger">Failed to load templates</div>';
    });
}

function buildReportTemplatesList(templates, scheduleId) {
    if (!templates || templates.length === 0) {
        return '<div class="inline-no-data">No report templates available</div>';
    }
    
    return templates.map(template => {
        const templateName = template.name || 'Untitled Template';
        const templateId = template.id;
        
        return `
            <div class="report-service-item">
                <div class="report-service-name">
                    ${templateName}
                </div>
                <div class="report-service-actions">
                    <button class="report-action-btn" onclick="viewReportWithTemplate(${scheduleId}, ${templateId})" title="Preview Report">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="report-action-btn" onclick="downloadReportWithTemplate(${scheduleId}, ${templateId})" title="Download Report">
                        <i class="fas fa-download"></i>
                    </button>
                </div>
            </div>
        `;
    }).join('');
}

function buildInvoiceList(invoices, scheduleId) {
    if (!invoices || invoices.length === 0) {
        return '<div class="invoice-no-data"><i class="fas fa-file-invoice fa-2x mb-3"></i><p>No invoices found for this schedule.</p></div>';
    }
    
    const invoiceRows = invoices.map((invoice, index) => {
        const invoiceNumber = invoice.invoice_number || `INV-${invoice.id}`;
        const customerName = invoice.customer_name || 'N/A';
        const date = invoice.invoice_date ? formatDateMMDDYYYY(invoice.invoice_date) : 'N/A';
        const totalAmount = invoice.total_amount ? `$ ${parseFloat(invoice.total_amount).toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0})}` : '$ 0';
        
        // Determine status and badge class
        let status = 'pending';
        let statusClass = 'pending';
        let statusText = 'Pending';
        
        if (invoice.payment_status === 'paid' || invoice.is_paid === 1) {
            status = 'paid';
            statusClass = 'paid';
            statusText = 'Paid';
        } else if (invoice.is_overdue === 1 || invoice.payment_status === 'overdue') {
            status = 'overdue';
            statusClass = 'overdue';
            statusText = 'Overdue';
        }
        
        return `
            <tr>
                <td>${index + 1}</td>
                <td class="invoice-number">${invoiceNumber}</td>
                <td class="invoice-customer">${customerName}</td>
                <td class="invoice-date">${date}</td>
                <td class="invoice-amount">${totalAmount}</td>
                <td>
                    <span class="invoice-status-badge ${statusClass}">${statusText}</span>
                </td>
                <td>
                    <div class="invoice-actions">
                        <button class="invoice-action-icon" onclick="viewInvoice(${invoice.id})" title="View Invoice">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="invoice-action-icon" onclick="downloadInvoice(${invoice.id})" title="Download Invoice">
                            <i class="fas fa-download"></i>
                        </button>
                        <button class="invoice-action-icon" onclick="emailInvoice(${invoice.id})" title="Email Invoice">
                            <i class="fas fa-envelope"></i>
                        </button>
                    </div>
                </td>
            </tr>
        `;
    }).join('');
    
    return `
        <div class="invoice-table-container">
            <table class="invoice-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Invoice No</th>
                        <th>Customer</th>
                        <th>Date</th>
                        <th>Total Amount</th>
                        <th>Status</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${invoiceRows}
                </tbody>
            </table>
        </div>
    `;
}

function buildAgreementsSection(agreements, scheduleId) {
    if (!agreements || agreements.length === 0) {
        return '<div class="inline-no-data">No agreements added yet.</div>';
    }
    
    return agreements.map(item => {
        const agreementName = item.agreement_name || 'Unknown Agreement';
        
        return `
            <div class="inline-service-item">
                <div class="inline-service-info">
                    <div class="inline-service-name">
                        <i class="fas fa-file-contract text-info me-2"></i>${agreementName}
                    </div>
                </div>
                <button class="btn btn-sm btn-danger" onclick="removeAgreement(${scheduleId}, ${item.id})" title="Remove Agreement">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
    }).join('');
}

function toggleScheduleCard(scheduleId) {
    console.log('🔘 Toggle clicked for schedule:', scheduleId);
    
    const toggle = document.getElementById(`toggle-${scheduleId}`);
    const body = document.getElementById(`body-${scheduleId}`);
    
    if (!toggle || !body) {
        console.error('❌ Toggle or body not found for schedule:', scheduleId);
        return;
    }
    
    // Close all other expanded cards
    document.querySelectorAll('.schedule-card-toggle.expanded').forEach(el => {
        if (el.id !== `toggle-${scheduleId}`) {
            el.classList.remove('expanded');
            const otherId = el.id.replace('toggle-', '');
            const otherBody = document.getElementById(`body-${otherId}`);
            if (otherBody) {
                otherBody.classList.remove('show');
            }
        }
    });
    
    // Toggle current card
    const isExpanding = !toggle.classList.contains('expanded');
    console.log('🔄 Is expanding:', isExpanding);
    toggle.classList.toggle('expanded');
    body.classList.toggle('show');
    
    // Track the expanded schedule
    if (isExpanding) {
        currentExpandedScheduleId = scheduleId;
        window.currentScheduleId = scheduleId; // Set global for image upload modal
        console.log('✅ Expanded schedule:', scheduleId);
        console.log('✅ Set window.currentScheduleId:', scheduleId);
        
        // Find the schedule data and initialize images/map
        const schedule = schedulesData.find(s => s.id == scheduleId);
        if (schedule) {
            console.log('📋 Found schedule data:', schedule);
            console.log('📸 Schedule images:', schedule.images);
            
            // Initialize images and map after a short delay to ensure DOM is ready
            setTimeout(() => {
                const propertyAddress = schedule.property?.full_address || 
                                       schedule.property?.search_location || 
                                       [schedule.property?.address_line1, schedule.property?.city, schedule.property?.state, schedule.property?.postal_code]
                                           .filter(Boolean).join(', ') || 'N/A';
                
                console.log('🗺️ Property address:', propertyAddress);
                
                if (schedule.images && schedule.images.length > 0) {
                    console.log('✅ Calling loadScheduleImages with', schedule.images.length, 'images');
                    loadScheduleImages(scheduleId, schedule.images);
                } else {
                    console.log('⚠️ No images to load for schedule', scheduleId);
                }
                
                if (propertyAddress && propertyAddress !== 'N/A') {
                    console.log('✅ Calling initializeScheduleMap');
                    initializeScheduleMap(scheduleId, propertyAddress);
                } else {
                    console.log('⚠️ No valid address for map');
                }
                
                // Load templates if section exists
                if (schedule.templates_count && schedule.templates_count > 0) {
                    console.log('📄 Loading templates for schedule', scheduleId);
                    loadScheduleTemplates(scheduleId);
                }
            }, 150);
        } else {
            console.error('❌ Schedule data not found in schedulesData');
        }
    } else {
        currentExpandedScheduleId = null;
        window.currentScheduleId = null; // Clear global
        console.log('⬇️ Collapsed schedule');
        console.log('✅ Cleared window.currentScheduleId');
    }
}

function filterSchedules() {
    const statusFilter = document.getElementById('scheduleStatusFilter').value;
    
    if (!statusFilter) {
        renderSchedules(schedulesData);
        return;
    }

    const filtered = schedulesData.filter(schedule => schedule.status == statusFilter);
    renderSchedules(filtered);
}

function showEmptyState() {
    const container = document.getElementById('schedulesContainer');
    container.innerHTML = '<div class="empty-state"><i class="fas fa-calendar-times"></i><p>No schedules found</p></div>';
}

function showErrorState(errorMsg = '') {
    const container = document.getElementById('schedulesContainer');
    container.innerHTML = `<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>Error loading schedules${errorMsg ? ': ' + errorMsg : ''}.</p><button class="btn btn-sm btn-primary mt-3" onclick="loadSchedules()"><i class="fas fa-sync-alt me-1"></i> Retry</button></div>`;
}

// Reschedule function
function reschedule(scheduleId) {
    console.log('Reschedule called for schedule ID:', scheduleId);
    
    // Find the schedule in schedulesData
    const schedule = schedulesData.find(s => s.id == scheduleId);
    
    if (schedule) {
        console.log('Found schedule data:', schedule);
        
        // Normalize the time format from HH:MM:SS to HH:MM for comparison
        let scheduleToPass = { ...schedule };
        if (scheduleToPass.start_time) {
            // Extract HH:MM from HH:MM:SS format
            scheduleToPass.start_time = scheduleToPass.start_time.substring(0, 5);
        }
        if (scheduleToPass.adjusted_time) {
            scheduleToPass.adjusted_time = scheduleToPass.adjusted_time.substring(0, 5);
        }
        
        console.log('Normalized time:', scheduleToPass.start_time || scheduleToPass.adjusted_time);
        
        // Call the global reschedule modal function from schedule-modals-actions.js
        if (typeof showRescheduleModal === 'function') {
            showRescheduleModal(scheduleId, scheduleToPass);
        } else {
            console.error('showRescheduleModal function not found');
            alert('Reschedule functionality is not available. Please refresh the page.');
        }
    } else {
        console.error('Schedule not found in schedulesData');
        alert('Schedule data not found. Please refresh the page.');
    }
}

// Load and display schedule images
function loadScheduleImages(scheduleId, images) {
    console.log('🔧 loadScheduleImages called:', { scheduleId, imageCount: images?.length || 0, images });
    
    const sliderContainer = document.getElementById(`scheduleImageSlider_${scheduleId}`);
    if (!sliderContainer) {
        console.error('❌ Slider container not found:', `scheduleImageSlider_${scheduleId}`);
        return;
    }
    
    console.log('✅ Slider container found');
    
    if (!images || images.length === 0) {
        console.log('⚠️ No images to display, showing placeholder');
        sliderContainer.innerHTML = `
            <div class="text-muted d-flex align-items-center justify-content-center" style="height:100%;">
                <span>📷 No images available</span>
            </div>
        `;
        return;
    }
    
    console.log('🎨 Building slider HTML for', images.length, 'images');
    
    // Create image slider with navigation
    let sliderHTML = `
        <div class="image-slider-wrapper position-relative w-100 h-100">
            <div class="slider-images-container d-flex align-items-center justify-content-center" style="height:100%; position:relative;">
    `;
    
    images.forEach((img, index) => {
        const imageUrl = img.url || img.original || img.thumb || '';
        console.log(`  Image ${index + 1}:`, { url: imageUrl, original_name: img.original_name });
        
        sliderHTML += `
            <img src="${imageUrl}" 
                 alt="${img.original_name || 'Property Image'}" 
                 class="slider-image ${index === 0 ? 'active' : ''}" 
                 style="display: ${index === 0 ? 'block' : 'none'}; max-width:100%; max-height:100%; object-fit:contain; border-radius:8px;"
                 data-index="${index}"
                 onerror="console.error('Failed to load image:', '${imageUrl}'); this.style.display='none';">
        `;
    });
    
    sliderHTML += `</div>`;
    
    // Add navigation arrows if more than one image
    if (images.length > 1) {
        sliderHTML += `
            <button class="slider-nav slider-prev" onclick="changeSlide(${scheduleId}, -1)" style="position:absolute; left:10px; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); color:white; border:none; border-radius:50%; width:40px; height:40px; cursor:pointer; z-index:10;">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="slider-nav slider-next" onclick="changeSlide(${scheduleId}, 1)" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); color:white; border:none; border-radius:50%; width:40px; height:40px; cursor:pointer; z-index:10;">
                <i class="fas fa-chevron-right"></i>
            </button>
            <div class="slider-counter" style="position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.7); color:white; padding:5px 10px; border-radius:5px; font-size:12px;">
                <span id="currentSlide_${scheduleId}">1</span> / ${images.length}
            </div>
        `;
    }
    
    sliderHTML += `</div>`;
    
    sliderContainer.innerHTML = sliderHTML;
}

// Change slide in image slider
function changeSlide(scheduleId, direction) {
    const container = document.getElementById(`scheduleImageSlider_${scheduleId}`);
    if (!container) return;
    
    const images = container.querySelectorAll('.slider-image');
    if (images.length === 0) return;
    
    let currentIndex = 0;
    images.forEach((img, index) => {
        if (img.style.display === 'block') {
            currentIndex = index;
            img.style.display = 'none';
            img.classList.remove('active');
        }
    });
    
    let newIndex = currentIndex + direction;
    if (newIndex >= images.length) newIndex = 0;
    if (newIndex < 0) newIndex = images.length - 1;
    
    images[newIndex].style.display = 'block';
    images[newIndex].classList.add('active');
    
    const counterEl = document.getElementById(`currentSlide_${scheduleId}`);
    if (counterEl) {
        counterEl.textContent = newIndex + 1;
    }
}

// Initialize Google Maps for schedule property
function initializeScheduleMap(scheduleId, address) {
    if (!address) {
        console.warn('No address provided for map initialization');
        return;
    }
    
    const mapContainer = document.getElementById(`schedule-map-${scheduleId}`);
    if (!mapContainer) {
        console.warn('Map container not found for schedule:', scheduleId);
        return;
    }
    
    // Check if Google Maps is loaded
    if (typeof google === 'undefined' || !google.maps) {
        console.warn('Google Maps not loaded');
        mapContainer.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted"><i class="fas fa-map-marked-alt fa-3x"></i></div>';
        return;
    }
    
    // Create geocoder
    const geocoder = new google.maps.Geocoder();
    
    // Geocode the address
    geocoder.geocode({ address: address }, function(results, status) {
        if (status === 'OK' && results[0]) {
            const location = results[0].geometry.location;
            
            // Create map
            const map = new google.maps.Map(mapContainer, {
                center: location,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                streetViewControl: true,
                fullscreenControl: true
            });
            
            // Add marker
            const marker = new google.maps.Marker({
                map: map,
                position: location,
                title: address,
                animation: google.maps.Animation.DROP
            });
            
            // Add info window
            const infoWindow = new google.maps.InfoWindow({
                content: `<div style="padding:5px;"><strong>Property Location</strong><br/>${address}</div>`
            });
            
            marker.addListener('click', function() {
                infoWindow.open(map, marker);
            });
        } else {
            console.error('Geocoding failed:', status);
            mapContainer.innerHTML = `
                <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted p-3">
                    <i class="fas fa-map-marked-alt fa-2x mb-2"></i>
                    <small>Unable to load map</small>
                </div>
            `;
        }
    });
}

// Phone Number Formatting Functions
function formatPhoneNumber(value) {
    // Remove all non-digit characters
    const cleaned = value.replace(/\D/g, '');
    
    // Handle different lengths
    if (cleaned.length === 0) return '';
    if (cleaned.length <= 3) return cleaned;
    if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
    if (cleaned.length <= 10) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
    
    // For numbers longer than 10 digits, format first 10
    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
}

window.initializePhoneFormatting = function() {
    document.querySelectorAll('.mobile_number_format, .phone_number_format').forEach(function (input) {
        // Format existing value on page load
        if (input.value) {
            input.value = formatPhoneNumber(input.value);
        }
        
        input.addEventListener('input', function (e) {
            e.target.value = formatPhoneNumber(e.target.value);
        });

        input.addEventListener('blur', function (e) {
            // Optional: remove incomplete inputs on blur
            if (e.target.value.replace(/\D/g, '').length < 10 && e.target.value.length > 0) {
                e.target.classList.add('is-invalid');
            } else {
                e.target.classList.remove('is-invalid');
            }
        });
    });
};

// Initialize Modal Address Autocomplete (for Agent/Customer modals)
window.initModalAddressAutocomplete = function() {
    console.log('Initializing modal address autocomplete');
    
    const input = document.getElementById("address_auto_complete");
    if (!input) {
        console.log('Address input not found');
        return;
    }

    // Wait for Google Maps API to be ready
    const initAutocomplete = () => {
        if (typeof google === 'undefined' || !google.maps || !google.maps.places) {
            console.log('Google Maps or Places API not ready, waiting...');
            setTimeout(initAutocomplete, 500);
            return;
        }

        console.log('Google Maps ready, setting up autocomplete');

        // Initialize map for modal
        let map = null;
        let marker = null;
        const mapEl = document.getElementById('property-map');
        if (mapEl) {
            console.log('Initializing map');
            map = new google.maps.Map(mapEl, {
                center: { lat: 37.0902, lng: -95.7129 },
                zoom: 4,
                mapTypeControl: false,
                streetViewControl: false,
                fullscreenControl: false
            });
            console.log('Map initialized successfully');
        }

        // Initialize autocomplete
        let autocomplete;
        try {
            autocomplete = new google.maps.places.Autocomplete(input, {
                types: ["geocode"],
                fields: ["address_components", "geometry", "formatted_address"]
            });
            console.log('Autocomplete created successfully');
            
            // Fix positioning and CSS issues for modal
            setTimeout(() => {
                const pacContainers = document.querySelectorAll('.pac-container');
                pacContainers.forEach(container => {
                    container.style.zIndex = '20000'; // Higher than modal z-index
                    container.style.position = 'absolute';
                });
            }, 100);
            
        } catch (error) {
            console.error('Error creating autocomplete:', error);
            return;
        }

        autocomplete.addListener("place_changed", () => {
            const place = autocomplete.getPlace();
            if (!place || !place.address_components) {
                console.log('No place data received');
                return;
            }

            console.log('Place selected:', place);

            // Get DOM elements
            const cityEl = document.getElementById("city_auto_complete");
            const stateEl = document.getElementById("state_auto_complete");
            const countryEl = document.getElementById("country_auto_complete");
            const zipEl = document.getElementById("zip_auto_complete");
            const latEl = document.getElementById("lat_hidden");
            const lngEl = document.getElementById("lng_hidden");
            const addressLine1El = document.getElementById("address-line-1");

            // Helper function to extract address components
            function getAddressComponent(place, type, key) {
                const c = (place.address_components || []).find(x => (x.types || []).includes(type));
                return c ? c[key] : "";
            }

            // Extract components
            const city = getAddressComponent(place, "locality", "long_name") || 
                         getAddressComponent(place, "administrative_area_level_3", "long_name") || "";
            const stateFull = getAddressComponent(place, "administrative_area_level_1", "long_name");
            const country = getAddressComponent(place, "country", "long_name");
            const countryCode = getAddressComponent(place, "country", "short_name");
            const postalCode = getAddressComponent(place, "postal_code", "short_name");
            const postalSuffix = getAddressComponent(place, "postal_code_suffix", "short_name");
            
            // Extract street address components for Address Line #1
            const streetNumber = getAddressComponent(place, "street_number", "long_name");
            const route = getAddressComponent(place, "route", "long_name");
            const streetAddress = [streetNumber, route].filter(Boolean).join(" ");
            
            // Set full address from formatted_address
            input.value = place.formatted_address || input.value;

            // Fill Address Line #1 with street address
            if (addressLine1El && streetAddress) {
                addressLine1El.value = streetAddress;
            }

            // Fill city, state, country
            if (cityEl) cityEl.value = city;
            if (stateEl) stateEl.value = stateFull || "";
            if (countryEl) countryEl.value = country || "";

            // Fill ZIP
            if (zipEl) {
                zipEl.value = (countryCode === "US" && postalSuffix) ?
                    `${postalCode}-${postalSuffix}` :
                    (postalCode || "");
            }

            // Fill lat/lng and update map/marker
            if (place.geometry && place.geometry.location) {
                const lat = place.geometry.location.lat();
                const lng = place.geometry.location.lng();
                
                console.log('Setting coordinates:', lat, lng);
                
                if (latEl) latEl.value = lat;
                if (lngEl) lngEl.value = lng;

                if (map) {
                    const position = { lat, lng };
                    map.setCenter(position);
                    map.setZoom(15);
                    
                    if (!marker) {
                        marker = new google.maps.Marker({
                            position,
                            map,
                            draggable: true
                        });

                        marker.addListener('dragend', (e) => {
                            const newPos = e.latLng;
                            if (latEl) latEl.value = newPos.lat();
                            if (lngEl) lngEl.value = newPos.lng();
                        });
                    } else {
                        marker.setPosition(position);
                    }
                }
            } else {
                if (latEl) latEl.value = "";
                if (lngEl) lngEl.value = "";
            }

            console.log('Address autocomplete completed');
        });

        // Initial restore if lat/lng already filled
        const initLatEl = document.getElementById('lat_hidden');
        const initLngEl = document.getElementById('lng_hidden');
        if (map && initLatEl && initLngEl && initLatEl.value && initLngEl.value) {
            const initPos = { lat: parseFloat(initLatEl.value), lng: parseFloat(initLngEl.value) };
            if (!isNaN(initPos.lat) && !isNaN(initPos.lng)) {
                map.setCenter(initPos);
                map.setZoom(15);
                if (!marker) {
                    marker = new google.maps.Marker({ 
                        position: initPos, 
                        map, 
                        draggable: true 
                    });
                    marker.addListener('dragend', (e) => {
                        const newPos = e.latLng;
                        if (initLatEl) initLatEl.value = newPos.lat();
                        if (initLngEl) initLngEl.value = newPos.lng();
                    });
                } else {
                    marker.setPosition(initPos);
                }
            }
        }
    };

    initAutocomplete();
};

// Simple modal functions for user dashboard
function createNewClient(scheduleId) {
    console.log('📝 Creating new client for schedule:', scheduleId);
    if (typeof showSimpleClientModal === 'function') {
        showSimpleClientModal(scheduleId);
    } else {
        console.error('showSimpleClientModal function not found');
    }
}

function createNewAgent(scheduleId) {
    console.log('📝 Creating new agent for schedule:', scheduleId);
    if (typeof showSimpleAgentModal === 'function') {
        showSimpleAgentModal(scheduleId);
    } else {
        console.error('showSimpleAgentModal function not found');
    }
}

function chooseExistingClient(scheduleId) {
    console.log('📝 Choosing existing client for schedule:', scheduleId);
    // This will use the existing modal from schedule-modals-crud.js
    if (typeof showChooseClientModal === 'function') {
        showChooseClientModal(scheduleId);
    } else {
        alert('Choose client functionality is not available');
    }
}

function chooseExistingAgent(scheduleId) {
    console.log('📝 Choosing existing agent for schedule:', scheduleId);
    // This will use the existing modal from schedule-modals-crud.js
    if (typeof showChooseAgentModal === 'function') {
        showChooseAgentModal(scheduleId);
    } else {
        alert('Choose agent functionality is not available');
    }
}

// Service management placeholder functions
function addService(scheduleId) {
    console.log('📝 Adding service to schedule:', scheduleId);
    alert('Add Service functionality will be implemented. Schedule ID: ' + scheduleId);
    // TODO: Implement service selection modal
}

function removeService(scheduleId, serviceId) {
    console.log('🗑️ Removing service:', serviceId, 'from schedule:', scheduleId);
    if (confirm('Are you sure you want to remove this service?')) {
        // TODO: Implement AJAX call to remove service
        alert('Remove service functionality will be implemented');
    }
}

function updateServiceQuantity(scheduleId, scheduleServiceId, newQuantity) {
    console.log('📊 Updating service quantity:', { scheduleId, scheduleServiceId, newQuantity });
    
    const quantity = parseInt(newQuantity);
    if (isNaN(quantity) || quantity < 1) {
        alert('Please enter a valid quantity (minimum 1)');
        return;
    }
    
    // Show loading state
    const serviceItem = document.querySelector(`[data-service-id="${scheduleServiceId}"]`);
    if (serviceItem) {
        serviceItem.style.opacity = '0.6';
        serviceItem.style.pointerEvents = 'none';
    }
    
    fetch(`/schedule/${scheduleId}/service/${scheduleServiceId}/update-quantity`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        body: JSON.stringify({ quantity: quantity })
    })
    .then(response => response.json())
    .then(data => {
        console.log('✅ Quantity update response:', data);
        
        if (data.success) {
            // Refresh the schedule to show updated data
            loadSchedules();
            
            // Show success message
            showToast('Success', 'Service quantity updated successfully', 'success');
        } else {
            alert(data.message || 'Failed to update quantity');
            // Reset input to original value
            if (serviceItem) {
                const input = serviceItem.querySelector('input[type="number"]');
                if (input && data.original_quantity) {
                    input.value = data.original_quantity;
                }
            }
        }
    })
    .catch(error => {
        console.error('❌ Error updating quantity:', error);
        alert('An error occurred while updating the quantity');
    })
    .finally(() => {
        if (serviceItem) {
            serviceItem.style.opacity = '1';
            serviceItem.style.pointerEvents = 'auto';
        }
    });
}

function showToast(title, message, type) {
    // Simple toast notification (you can enhance this with a library like Toastr)
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const toast = document.createElement('div');
    toast.className = `alert ${alertClass} position-fixed top-0 end-0 m-3`;
    toast.style.zIndex = '9999';
    toast.innerHTML = `<strong>${title}:</strong> ${message}`;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// Report handling functions
function viewReportPreview(scheduleId, scheduleServiceId) {
    console.log('👁️ Viewing report preview for schedule:', scheduleId, 'service:', scheduleServiceId);
    
    // Fetch templates for this schedule
    fetch(`/schedule/${scheduleId}/templates`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('Templates response:', data);
        
        if (data.status === 200 && data.data && data.data.length > 0) {
            // Use the first template directly (no modal needed in dashboard)
            const template = data.data[0];
            const reportUrl = `/schedule/view-report/${scheduleId}?template_id=${template.id}`;
            window.open(reportUrl, '_blank');
        } else {
            alert('No report templates found for this schedule');
        }
    })
    .catch(error => {
        console.error('Error fetching templates:', error);
        alert('Failed to load report templates');
    });
}

function downloadReport(scheduleId, scheduleServiceId) {
    console.log('📥 Downloading report for schedule:', scheduleId, 'service:', scheduleServiceId);
    
    // Fetch templates first
    fetch(`/schedule/${scheduleId}/templates`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 200 && data.data && data.data.length > 0) {
            // Use the first template directly (no modal needed in dashboard)
            const template = data.data[0];
            const pdfUrl = `/report-pdf/generate-pdf-get/${scheduleId}?template_id=${template.id}`;
            window.open(pdfUrl, '_blank');
        } else {
            alert('No report templates found for this schedule');
        }
    })
    .catch(error => {
        console.error('Error fetching templates:', error);
        alert('Failed to load report templates');
    });
}

// Direct template view/download functions (used when template is already known)
function viewReportWithTemplate(scheduleId, templateId) {
    console.log('👁️ Viewing report for schedule:', scheduleId, 'template:', templateId);
    
    // Encrypt parameters before generating URL
    fetch('/schedule/encrypt-report-params', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            schedule_id: scheduleId,
            template_id: templateId
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Encryption response:', data);
        
        // Check if we have the encrypted data
        if (data && data.data && data.data.encrypted) {
            const reportUrl = `/schedule/view-report/${data.data.encrypted}`;
            console.log('Opening report URL:', reportUrl);
            window.open(reportUrl, '_blank');
        } else {
            console.error('Failed to encrypt report parameters:', data);
            alert('Failed to generate secure report link. Please try again.');
        }
    })
    .catch(error => {
        console.error('Error encrypting report parameters:', error);
        alert('Failed to generate secure report link. Please try again.');
    });
}

function downloadReportWithTemplate(scheduleId, templateId) {
    console.log('📥 Downloading report for schedule:', scheduleId, 'template:', templateId);
    
    // Encrypt parameters before generating URL
    fetch('/schedule/encrypt-report-params', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            schedule_id: scheduleId,
            template_id: templateId
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Encryption response:', data);
        
        // Check if we have the encrypted data
        if (data && data.data && data.data.encrypted) {
            const pdfUrl = `/report-pdf/generate-pdf-get/${data.data.encrypted}`;
            console.log('Opening PDF URL:', pdfUrl);
            window.open(pdfUrl, '_blank');
        } else {
            console.error('Failed to encrypt report parameters:', data);
            alert('Failed to generate secure download link. Please try again.');
        }
    })
    .catch(error => {
        console.error('Error encrypting report parameters:', error);
        alert('Failed to generate secure download link. Please try again.');
    });
}

function shareReport(scheduleId, scheduleServiceId) {
    console.log('📤 Sharing report for schedule:', scheduleId, 'service:', scheduleServiceId);
    alert('Share report functionality will be implemented. Schedule ID: ' + scheduleId);
    // TODO: Implement share functionality
}

// Invoice action functions
function viewInvoice(invoiceId) {
    console.log('👁️ Viewing invoice:', invoiceId);
    // Open invoice view page in new tab
    window.open(`/invoice/${invoiceId}`, '_blank');
}

function downloadInvoice(invoiceId) {
    console.log('📥 Downloading invoice:', invoiceId);
    // Download invoice PDF
    window.open(`/invoice/${invoiceId}/download`, '_blank');
}

function emailInvoice(invoiceId) {
    console.log('📧 Emailing invoice:', invoiceId);
    
    if (confirm('Send this invoice to the customer via email?')) {
        fetch(`/invoice/${invoiceId}/email`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Invoice sent successfully!');
            } else {
                alert('Failed to send invoice: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error sending invoice:', error);
            alert('Failed to send invoice');
        });
    }
}

function payInvoice(scheduleId) {
    console.log('💳 Initiating payment for schedule:', scheduleId);
    // Redirect to payment page or open payment modal
    window.location.href = `/schedule/${scheduleId}/payment`;
}

function showReportTemplateModal(scheduleId, templates, action = 'view') {
    const modal = new bootstrap.Modal(document.getElementById('reportTemplateModal'));
    const container = document.getElementById('report-templates-container');
    
    let html = '<div class="list-group">';
    
    templates.forEach(template => {
        html += `
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" 
               onclick="openReportTemplate(${scheduleId}, ${template.id}, '${action}'); return false;">
                <div class="d-flex align-items-center">
                    <i class="fas fa-file-alt fa-lg me-3 text-primary"></i>
                    <div>
                        <h6 class="mb-0">${template.name || 'Untitled Template'}</h6>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-muted"></i>
            </a>
        `;
    });
    
    html += '</div>';
    container.innerHTML = html;
    
    modal.show();
}

function openReportTemplate(scheduleId, templateId, action = 'view') {
    // Close modal
    const modalElement = document.getElementById('reportTemplateModal');
    const modal = bootstrap.Modal.getInstance(modalElement);
    if (modal) {
        modal.hide();
    }
    
    // Open report based on action
    if (action === 'download') {
        // Use PDF generation route
        const pdfUrl = `/report-pdf/generate-pdf-get/${scheduleId}?template_id=${templateId}`;
        window.open(pdfUrl, '_blank');
    } else {
        const reportUrl = `/schedule/view-report/${scheduleId}?template_id=${templateId}`;
        window.open(reportUrl, '_blank');
    }
}

</script>
@endpush