@extends('admin.layouts.layout')

@section('content')
@php
    // Global null-safe initialization to prevent "Undefined variable $existingCustomers" in compiled views
    $authUser = \Auth::user();
    $isCustomerContext = false; // logged-in user is a customer
    $isAgentContext = false;    // logged-in user is an agent
    $customerUserId = null;     // store id if customer
    $agentUserId = null;        // store id if agent
    try {
        if($authUser){
            // Examine attached roles without modifying existing logic
            $roleSlugs = $authUser->roles()->pluck('slug')->map(fn($s)=> strtolower($s))->all();
            if(in_array('customer',$roleSlugs,true)) { $isCustomerContext = true; $customerUserId = $authUser->id; }
            if(in_array('agent',$roleSlugs,true)) { $isAgentContext = true; $agentUserId = $authUser->id; }
        }
    } catch (\Throwable $e) { /* fail-safe: leave flags false */ }
    // Provide small JS-exposed flags (no logic change, purely for conditional UI hide)
    $ctxFlags = [
        'isCustomerContext' => $isCustomerContext,
        'isAgentContext' => $isAgentContext,
        'customerUserId' => $customerUserId,
        'agentUserId' => $agentUserId,
    ];
    if(!isset($existingCustomers)){
        $existingCustomers = collect();
        if(isset($schedule)){
            try {
                if($schedule->relationLoaded('scheduleCustomers')){
                    $existingCustomers = $schedule->scheduleCustomers->load('customer');
                } else {
                    $existingCustomers = $schedule->scheduleCustomers()->with('customer')->get();
                }
            } catch (\Throwable $e) {
                $existingCustomers = collect(); // fail safe
            }
        }
    }
@endphp
            <div class="template_top">
                <div class="templatetop_bottom rounded-3">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">
                                <div class="tick_markcircle">
                                    <img src="{{ asset('images/tick_white.svg')}}" alt="Tick">
                                </div>
                                Date & Time, Properties and Services
                                <span class="line-hrozontal"></span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="javascript:void(0);" class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="true">
                                <div class="tick_markcircle">
                                    <img src="{{ asset('images/tick_white.svg')}}" alt="Tick">
                                </div>
                                Inspectors, Customers & Agents
                                <span class="line-hrozontal"></span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a href="javascript:void(0);" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">
                                <div class="tick_markcircle">
                                    <img src="{{ asset('images/tick_white.svg')}}" alt="Tick">
                                </div>
                                Fees, Review Order & Submit
                                <span class="line-hrozontal"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="schudle_details">
            <input type="hidden" id="schedule_id" value="{{ $schedule->id }}" />
            {{-- Inspectors selection restored --}}
          
            <div class="schudle_datetime_ctrl">
                <div class="d-flex align-items-center justify-content-between mt-3 p-2" style="background:#f8f9fa; border:1px solid #e2e6ea; border-radius:4px;">
                    <h3 class="mb-0" style="font-size:18px;">Inspectors</h3>
                </div>
                <div class="mt-2">
                    @php
                        $existingInspectorIds = $schedule->scheduleInspectors()->pluck('inspector_id')->toArray();
                        // Filter out already assigned inspectors so user only sees additional options
                        $filteredInspectors = $inspectors->filter(fn($i)=> !in_array($i->id, $existingInspectorIds));
                        // Removed temporary dd() debug dump to allow page rendering
                    @endphp
                    @if($filteredInspectors->isNotEmpty())
                        <div class="d-flex flex-wrap gap-3">
                            @foreach($filteredInspectors as $insp)
                                @php
                                    $fullName = trim(($insp->first_name ?? '') . ' ' . ($insp->last_name ?? '')) ?: $insp->email;
                                    $avatar = $insp->avatar['thumb'] ?? ($insp->avatar['original'] ?? asset('images/default-avatar.png'));
                                @endphp
                                <label class="d-flex align-items-center gap-2 border rounded px-2 py-1" style="cursor:pointer; min-width:220px;">
                                    <input type="checkbox" name="inspector_ids[]" value="{{ $insp->id }}" />
                                    <img src="{{ $avatar }}" alt="{{ $fullName }}" style="width:40px;height:40px;object-fit:cover;border-radius:50%;border:1px solid #ddd;" />
                                    <span class="fw-medium" style="font-size:14px;">{{ $fullName }}</span>
                                </label>
                            @endforeach
                        </div>
                    @else
                        @if(!empty($existingInspectorIds))
                            <div class="text-muted small">Primary inspector already selected in Step 1.</div>
                        @else
                            <div class="text-muted small">No inspectors available for selected date/time.</div>
                        @endif
                    @endif
                </div>
            </div>
            @php
                // Collect inspectors with dynamic is_primary flag
                $additionalInspectors = collect();

                if(isset($schedule) && $schedule->relationLoaded('scheduleInspectors')){
                    $additionalInspectors = $schedule->scheduleInspectors
                        ->filter(fn($si)=> $si->is_primary == 0)
                        ->map(function($si){
                            $insp = $si->inspector;
                            if($insp){
                                $insp->is_primary = 0; // mark additional
                            }
                            return $insp;
                        })
                        ->filter();
                } elseif(isset($schedule)) {
                    // Fallback lazy load if relation not eager loaded
                    try {
                        $additionalInspectors = $schedule->scheduleInspectors()
                            ->where('is_primary', 0)
                            ->with('inspector')
                            ->get()
                            ->map(function($si){
                                $insp = $si->inspector;
                                if($insp){
                                    $insp->is_primary = 0; // mark additional
                                }
                                return $insp;
                            })
                            ->filter();
                    } catch(\Throwable $e) {
                        $additionalInspectors = collect();
                    }
                }

                // Load primary inspector and attach flag
                $primaryInspector = null;
                try {
                    $primaryInspectorRow = $schedule->scheduleInspectors()
                        ->where('is_primary', 1)
                        ->with('inspector')
                        ->first();
                    if($primaryInspectorRow && $primaryInspectorRow->inspector){
                        $primaryInspector = $primaryInspectorRow->inspector;
                        $primaryInspector->is_primary = 1; // mark primary
                    }
                } catch (\Throwable $e) {
                    $primaryInspector = null;
                }

                // Prepend primary (with is_primary = 1) ahead of additional (is_primary = 0)
                $additionalInspectors = $primaryInspector
                    ? $additionalInspectors->prepend($primaryInspector)
                    : $additionalInspectors;
            @endphp
            @if($additionalInspectors->isNotEmpty())
                <div class="schudle_datetime_ctrl mt-3">
                    <div class="d-flex align-items-center justify-content-between p-2" style="background:#f8f9fa; border:1px solid #e2e6ea; border-radius:4px;">
                        <h3 class="mb-0" style="font-size:16px;">Already Added Additional Inspectors</h3>
                    </div>
                    <div class="mt-2 d-flex flex-wrap gap-2">
                        @foreach($additionalInspectors as $ai)
                            @php
                                $aiName = trim(($ai->first_name ?? '') . ' ' . ($ai->last_name ?? '')) ?: ($ai->email ?? 'Inspector #'.$ai->id);
                                $aiAvatar = ($ai->avatar['thumb'] ?? ($ai->avatar['original'] ?? asset('images/default-avatar.png')));
                            @endphp
                            <div class="d-flex align-items-center gap-2 border rounded px-2 py-1 bg-light" style="min-width:200px;">
                                <img src="{{ $aiAvatar }}" alt="{{ $aiName }}" style="width:34px;height:34px;object-fit:cover;border-radius:50%;border:1px solid #ddd;" />
                                <span style="font-size:13px;" class="fw-medium">{{ $aiName }}</span>
                                @if(isset($ai->is_primary) && $ai->is_primary == 0)
                                    <button type="button" style="margin-left:35px;" class="btn btn-sm btn-outline-danger remove-additional-inspector" data-inspector-id="{{ $ai->id }}" data-schedule-id="{{ $schedule->id }}" title="Revert / Remove">&times;</button>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <div class="schudle_datetime_ctrl">
                <div class="d-flex align-items-center justify-content-between mt-3 p-2 customer_title">
                    <h3>Customers</h3>
                    <div class="d-flex align-items-center gap-2 ms-auto">
                        @unless($isCustomerContext)
                            <div class="search_box py-1">
                                <div class="position-relative">
                                    <input type="text" 
                                           id="customerSearchInput" 
                                           class="form-control" 
                                           placeholder="Search Customer To Add">
                                    <div id="customerSearchResults" 
                                         class="shadow border bg-white position-absolute w-100 d-none" 
                                         style="z-index:1055; max-height:250px; overflow:auto; top:100%; left:0;">
                                        <!-- Dynamic results -->
                                    </div>
                                </div>
                                <button class="btn btn_search" id="customerSearchBtn" type="button">
                                    <img src="{{ asset('images/search.svg') }}" alt="Search Icon">
                                </button>
                            </div>
                            <div class="contact_btns">
                                <a href="javascript:void(0);" 
                                   id="btnAddCustomer" 
                                   class="import_exportbtn btn py-1">
                                    Add Customers
                                </a>
                            </div>
                        @endunless
                    </div>
                </div>

                <div class="service_table">
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th class="w-15">Customer Name</th>
                                    <th class="w-15">Customer Type</th>
                                    <th class="w-25">Agreement Signee Permissions</th>
                                    <th class="w-20">Email</th>
                                    <th class="w-20">Phone/Mobile</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="customersTbody">
                                @php
                                    // Null-safe eager customer collection (controller did not pass $existingCustomers)
                                    $existingCustomers = collect();
                                    if(isset($schedule)){
                                        // If relation already loaded we avoid extra query; else lazy load with customer
                                        if($schedule->relationLoaded('scheduleCustomers')){
                                            $existingCustomers = $schedule->scheduleCustomers->load('customer');
                                        } else {
                                            $existingCustomers = $schedule->scheduleCustomers()->with('customer')->get();
                                        }
                                    }
                                @endphp
                                @php
                                    // When customer context: filter collection to only logged-in customer (if present)
                                    if($isCustomerContext && $customerUserId){
                                        $existingCustomers = $existingCustomers->filter(function($row) use ($customerUserId){
                                            return (int)$row->customer_id === (int)$customerUserId;
                                        });
                                    }
                                @endphp
                                @forelse($existingCustomers as $row)
                                    @php $cust = $row->customer; @endphp
                                    @if($cust)
                                        <tr data-customer-id="{{ $cust->id }}">
                                            <td>
                                                <p>{{ $cust->first_name }} {{ $cust->last_name }}</p>
                                            </td>
                                            <td>
                                                <select class="form-select">
                                                    <option value="">Select An Option</option>
                                                    <option value="Buyer" {{ $row->customer_type==1 ? 'selected' : '' }}>Buyer</option>
                                                    <option value="Seller" {{ $row->customer_type==2 ? 'selected' : '' }}>Seller</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-select">
                                                    <option value="">Select An Option</option>
                                                    <option value="1" {{ $row->assign_signe==1 ? 'selected' : '' }}>Yes</option>
                                                    <option value="2" {{ $row->assign_signe==2 ? 'selected' : '' }}>No</option>
                                                </select>
                                            </td>
                                            <td>
                                                <a href="mailto:{{ $cust->email }}">{{ $cust->email }}</a>
                                            </td>
                                            <td>
                                                @php
                                                    $phone = \App\Helpers\Helper::formatPhone($cust->phone ?? '');
                                                    $mobile = \App\Helpers\Helper::formatPhone($cust->mobile ?? '');
                                                    $phoneDisplay = [];
                                                    if ($phone) $phoneDisplay[] = "P: " . $phone;
                                                    if ($mobile) $phoneDisplay[] = "M: " . $mobile;
                                                @endphp
                                                {{ implode(' | ', $phoneDisplay) ?: 'N/A' }}
                                            </td>
                                            <td>
                                                @unless($isCustomerContext)
                                                    <div class="d-flex gap-2">
                                                        <a href="javascript:void(0);" 
                                                           class="customer-edit" 
                                                           data-id="{{ $cust->id }}">
                                                            <img src="{{ asset('images/edit.svg') }}" alt="Edit">
                                                        </a>
                                                        <a href="javascript:void(0);" 
                                                           class="customer-delete text-danger" 
                                                           data-id="{{ $cust->id }}">
                                                            <img src="{{ asset('images/delete.svg') }}" alt="Delete">
                                                        </a>
                                                    </div>
                                                @endunless
                                            </td>
                                        </tr>
                                    @endif
                                @empty
                                    @if($isCustomerContext && $authUser)
                                        <tr data-customer-id="{{ $authUser->id }}">
                                            <td><p>{{ $authUser->first_name }} {{ $authUser->last_name }}</p></td>
                                            <td>
                                                <select class="form-select">
                                                    <option value="">Select An Option</option>
                                                    <option value="Buyer">Buyer</option>
                                                    <option value="Seller">Seller</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-select">
                                                    <option value="">Select An Option</option>
                                                    <option value="1">Yes</option>
                                                    <option value="2">No</option>
                                                </select>
                                            </td>
                                            <td><a href="mailto:{{ $authUser->email }}">{{ $authUser->email }}</a></td>
                                            <td>
                                                @php
                                                    $phone = \App\Helpers\Helper::formatPhone($authUser->phone ?? '');
                                                    $mobile = \App\Helpers\Helper::formatPhone($authUser->mobile ?? '');
                                                    $phoneDisplay = [];
                                                    if ($phone) $phoneDisplay[] = "P: " . $phone;
                                                    if ($mobile) $phoneDisplay[] = "M: " . $mobile;
                                                @endphp
                                                {{ implode(' | ', $phoneDisplay) ?: 'N/A' }}
                                            </td>
                                            <td>
                                                <div class="d-flex gap-2">
                                                    <!-- Hide edit/delete to preserve no-change requirement in logic -->
                                                </div>
                                            </td>
                                        </tr>
                                    @else
                                        <tr class="no-customers-row">
                                            <td colspan="6" class="text-center text-muted py-3">There are no customers.</td>
                                        </tr>
                                    @endif
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- Agent Create Modal -->
                <div class="modal fade" id="agentCreateModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Agent</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-0" id="agentCreateModalBody">
                                <div class="p-3 text-center text-muted">Loading...</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Customer Create Modal -->
                <div class="modal fade" id="customerCreateModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Customer</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-0" id="customerCreateModalBody">
                                <div class="p-3 text-center text-muted">Loading...</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="schudle_datetime_ctrl">
                <div class="d-flex align-items-center justify-content-between mt-3 p-2 agent_title">
                    <h3>Agents</h3>
                    <div class="d-flex align-items-center gap-2 ms-auto">
                        @unless($isAgentContext)
                            <div class="search_box py-1">
                                <input type="text" class="form-control" placeholder="Search Agent To Add">
                                <button class="btn btn_search">
                                    <img src="{{ asset('images/search.svg')}}" alt="Search Icon">
                                </button>
                            </div>
                            <div class="contact_btns">
                                <a href="javascript:void(0);" 
                                   id="btnAddAgent" 
                                   class="whitebg_btn btn py-1">Add Agents</a>
                            </div>
                        @endunless
                    </div>
                </div>

                <div class="service_table">
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th class="w-15">Agent Name</th>
                                    <th class="w-15">Agent Type</th>
                                    <th class="w-20">Email</th>
                                    <th class="w-15">Phone/Mobile</th>
                                    <th class="w-25">Notes</th>
                                    <th class="w-10">Action</th>
                                </tr>
                            </thead>
                            <tbody id="agentsTbody">
                                @php 
                                    $existingAgents = $schedule->scheduleAgents()->with('agent')->get(); 
                                    if($isAgentContext && $agentUserId){
                                        $existingAgents = $existingAgents->filter(function($row) use ($agentUserId){
                                            return (int)$row->agent_id === (int)$agentUserId;
                                        });
                                    }
                                @endphp
                                @forelse($existingAgents as $row)
                                    @php $ag = $row->agent; @endphp
                                    @if($ag)
                                    <tr data-agent-id="{{ $ag->id }}">
                                        <td><p>{{ $ag->first_name }} {{ $ag->last_name }}</p></td>
                                        <td>
                                            <select class="form-select">
                                                <option value="">Select Type</option>
                                                <option value="Buyer" {{ $row->agent_type==1 ? 'selected':'' }}>Buyer</option>
                                                <option value="Seller" {{ $row->agent_type==2 ? 'selected':'' }}>Seller</option>
                                            </select>
                                        </td>
                                        <td><a href="mailto:{{ $ag->email }}">{{ $ag->email }}</a></td>
                                        <td>
                                            @php
                                                $phone = \App\Helpers\Helper::formatPhone($ag->phone ?? '');
                                                $mobile = \App\Helpers\Helper::formatPhone($ag->mobile ?? '');
                                                $phoneDisplay = [];
                                                if ($phone) $phoneDisplay[] = "P: " . $phone;
                                                if ($mobile) $phoneDisplay[] = "M: " . $mobile;
                                            @endphp
                                            {{ implode(' | ', $phoneDisplay) ?: 'N/A' }}
                                        </td>
                                        <td>{{ Str::limit($ag->note,50) }}</td>
                                        <td>
                                            @unless($isAgentContext)
                                                <div class="d-flex gap-2">
                                                    <a href="javascript:void(0);" class="agent-edit" data-id="{{ $ag->id }}"><img src="{{ asset('images/edit.svg')}}"/></a>
                                                    <a href="javascript:void(0);" class="agent-delete text-danger" data-id="{{ $ag->id }}"><img src="{{ asset('images/delete.svg')}}"/></a>
                                                </div>
                                            @endunless
                                        </td>
                                    </tr>
                                    @endif
                                @empty
                                    @if($isAgentContext && $authUser)
                                        <tr data-agent-id="{{ $authUser->id }}">
                                            <td><p>{{ $authUser->first_name }} {{ $authUser->last_name }}</p></td>
                                            <td>
                                                <select class="form-select">
                                                    <option value="">Select Type</option>
                                                    <option value="Buyer">Buyer</option>
                                                    <option value="Seller">Seller</option>
                                                </select>
                                            </td>
                                            <td><a href="mailto:{{ $authUser->email }}">{{ $authUser->email }}</a></td>
                                            <td>
                                                @php
                                                    $phone = \App\Helpers\Helper::formatPhone($authUser->phone ?? '');
                                                    $mobile = \App\Helpers\Helper::formatPhone($authUser->mobile ?? '');
                                                    $phoneDisplay = [];
                                                    if ($phone) $phoneDisplay[] = "P: " . $phone;
                                                    if ($mobile) $phoneDisplay[] = "M: " . $mobile;
                                                @endphp
                                                {{ implode(' | ', $phoneDisplay) ?: 'N/A' }}
                                            </td>
                                            <td>{{ Str::limit($authUser->note,50) }}</td>
                                            <td><div class="d-flex gap-2"><!-- actions hidden in agent self context --></div></td>
                                        </tr>
                                    @else
                                        <tr class="no-agents-row">
                                            <td colspan="6" class="text-center text-muted py-3">There are no agents.</td>
                                        </tr>
                                    @endif
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <div class="contact_btns">
                        <a href="javascript:void(0);" 
                           id="btnStep2Save" 
                           class="add_btn btn py-1">
                            <img src="{{ asset('images/save.svg') }}" alt="Save">
                            Save
                        </a>
                        <a href="{{ route('admin.schedule.step1', ['id'=>$schedule->id]) }}" 
                           class="filter_btn btn py-1">
                            <img src="{{ asset('images/prev.svg') }}" alt="Previous">
                            Prev
                        </a>
                        <a href="javascript:void(0);" 
                           id="btnStep2Next" 
                           class="whitebg_btn btn py-1">
                            Next 
                            <img src="{{ asset('images/next.svg') }}" alt="Next">
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>    
@endsection
@push('page_script')
<script src="{{ asset('assets/js/schedule_step2.js') }}?v=1"></script>

@php $placeApiKey = \Config::get('settings.address_auto_populate_key'); @endphp
<!-- Include the common address autocomplete script -->
<script src="{{ asset('assets/js/address-autocomplete.js') }}"></script>

<!-- Load Google Maps API with Places library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async&callback=initGoogleMaps">
</script>
<script>
// Additional Inspector revert/remove handling
document.addEventListener('DOMContentLoaded', function(){
    function bindAdditionalInspectorRemoval(){
        document.querySelectorAll('.remove-additional-inspector').forEach(btn => {
            if(btn.dataset.bound) return; btn.dataset.bound='1';
            btn.addEventListener('click', function(){
                const inspectorId = this.getAttribute('data-inspector-id');
                const scheduleId = this.getAttribute('data-schedule-id');
                if(!inspectorId || !scheduleId) return;
                const doAjax = () => {
                    const url = "{{ route('admin.schedule.inspectors.revert', ['scheduleId'=>'__SID__','inspectorId'=>'__IID__']) }}".replace('__SID__', scheduleId).replace('__IID__', inspectorId);
                    fetch(url, {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','X-Requested-With':'XMLHttpRequest'}})
                        .then(r=> r.json())
                        .then(json => {
                            if(json.success){
                                if(window.toastr) toastr.success('Inspector reverted');
                                window.location.reload();
                            } else {
                                if(window.toastr) toastr.error(json.message || 'Failed to revert inspector');
                            }
                        })
                        .catch(()=> { if(window.toastr) toastr.error('Request failed'); });
                };
                if(window.Swal){
                    Swal.fire({
                        title: 'Remove inspector?',
                        text: 'This will detach and revert the inspector mapping.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, revert',
                        cancelButtonText: 'Cancel'
                    }).then(r => { if(r.isConfirmed) doAjax(); });
                } else {
                    if(confirm('Remove this inspector?')) doAjax();
                }
            });
        });
    }
    bindAdditionalInspectorRemoval();
});
</script>

<script>
// Google Maps API callback function
function initGoogleMaps() {
    console.log('Google Maps API loaded successfully');
    // Set a flag to indicate the API is ready
    window.googleMapsReady = true;
    // The API is now ready, modal initialization will happen when modal opens
}

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

// Function to scroll modal to top when errors are displayed
function scrollModalToTop(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        // Scroll the modal dialog to the top
        const modalBody = modal.querySelector('.modal-body');
        if (modalBody) {
            modalBody.scrollTop = 0;
        }
        
        // Also scroll the entire modal to top if it has scroll
        modal.scrollTop = 0;
        
        // If modal has a specific scrollable area, scroll that too
        const modalDialog = modal.querySelector('.modal-dialog');
        if (modalDialog) {
            modalDialog.scrollTop = 0;
        }
    }
}



document.addEventListener('DOMContentLoaded', function() {
    // Early exit adjustments: if context hides buttons, JS selectors below may be null; guard usage
    // Replaced Blade echo variants to avoid linter mis-parsing; plain PHP echo produces valid JS object literal
    const ctx = null;
    if(ctx.isCustomerContext){
        // Remove search/add related event binding by short-circuiting if elements absent
        const custSearch = document.getElementById('customerSearchInput');
        if(!custSearch){ console.log('Customer context active: search/add controls hidden.'); }
    }
    if(ctx.isAgentContext){
        const agentSearch = document.querySelector('.agent_title input.form-control');
        if(!agentSearch){ console.log('Agent context active: search/add controls hidden.'); }
    }
    const addBtn = document.getElementById('btnAddCustomer');
    const modalEl = document.getElementById('customerCreateModal');
    const modalBody = document.getElementById('customerCreateModalBody');
    
    // Add event listeners for modal cleanup
    modalEl.addEventListener('hidden.bs.modal', cleanupModalAutocomplete);
    modalEl.addEventListener('hide.bs.modal', cleanupModalAutocomplete);
    let bsModal = null;
    
    if (window.bootstrap && window.bootstrap.Modal) { 
        bsModal = new bootstrap.Modal(modalEl); 
    }
    
    // Fallback: append modal to body to avoid nesting issues
    if (modalEl && modalEl.parentElement !== document.body) {
        document.body.appendChild(modalEl);
    }

    function loadCustomerForm() {
        // Clean up any existing autocomplete before loading new content
        cleanupModalAutocomplete();
        
        const scheduleId = document.getElementById('schedule_id').value;
        const url = "{{ route('customers.create') }}?from_modal=1&schedule_id=" + scheduleId + "&schedule_tenant_id={{ $schedule->tenant_id }}";
        
        fetch(url, { 
            headers: { 'X-Requested-With': 'XMLHttpRequest' } 
        })
        .then(r => r.text())
        .then(html => {
            // Extract only inner form fields if full page returned
            if (html.indexOf('<form') === -1) {
                modalBody.innerHTML = '<div class="p-3 text-danger">Failed to load form.</div>';
                return;
            }
            modalBody.innerHTML = html;
            // Ensure tenant id hidden matches schedule tenant if provided via meta attr
            bindCustomerForm();
        })
        .catch(() => { 
            modalBody.innerHTML = '<div class="p-3 text-danger">Error loading form.</div>'; 
        });
    }

    // Clean up autocomplete when modal is hidden
    function cleanupModalAutocomplete() {
        if (modalAutocompleteInstance) {
            try {
                google.maps.event.clearInstanceListeners(modalAutocompleteInstance);
                modalAutocompleteInstance = null;
            } catch (e) {
                console.log('Error cleaning up autocomplete:', e);
            }
        }
        
        if (modalObserver) {
            modalObserver.disconnect();
            modalObserver = null;
        }
        
        // Remove any pac-containers that might be left behind
        const pacContainers = document.querySelectorAll('.pac-container');
        pacContainers.forEach(container => {
            if (container.parentNode) {
                container.parentNode.removeChild(container);
            }
        });
    }

    // Initialize phone number formatting for modal form inputs
    function initializeModalPhoneFormatting() {
        const phoneInputs = modalBody.querySelectorAll('.mobile_number_format, .phone_number_format');
        phoneInputs.forEach(function (input) {
            // Format existing value if any
            if (input.value) {
                input.value = formatPhoneNumber(input.value);
            }
            
            // Remove existing event listeners to prevent duplicates
            const newInput = input.cloneNode(true);
            input.parentNode.replaceChild(newInput, input);
            
            // Add event listeners to the new input
            newInput.addEventListener('input', function (e) {
                e.target.value = formatPhoneNumber(e.target.value);
            });

            newInput.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 date pickers for modal form inputs
    function initializeModalDatePickers() {
        // Initialize datetime pickers
        $(modalBody).find('.datetimepicker').bootstrapMaterialDatePicker({
            format: 'MM-DD-YYYY HH:mm',
            clearButton: true,
            weekStart: 1
        });

        // Initialize date pickers
        $(modalBody).find('.datepicker').bootstrapMaterialDatePicker({
            format: 'MM-DD-YYYY',
            clearButton: true,
            weekStart: 1,
            time: false
        });

        // Initialize time pickers
        $(modalBody).find('.timepicker').bootstrapMaterialDatePicker({
            format: 'HH:mm',
            clearButton: true,
            date: false
        });
    }

    function bindCustomerForm() {
        const form = modalBody.querySelector('form');
        if (!form) return;
        
        // Initialize address autocomplete for the modal with a small delay to ensure DOM is ready
        setTimeout(() => {
            initializeModalAddressAutocomplete();
        }, 100);
        
        // Initialize phone number formatting for modal form inputs
        initializeModalPhoneFormatting();
        
        // Initialize date pickers for modal form inputs
        initializeModalDatePickers();
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const fd = new FormData(form);
            
            // Show loading state
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn ? submitBtn.innerHTML : '';
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
            }
            
            // Clear any existing validation errors
            clearModalValidationErrors();
            
            fetch(form.action, { 
                method: 'POST', 
                body: fd, 
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
                } 
            })
            .then(async response => {
                const json = await response.json();
                
                // Reset button state
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                }
                
                if (response.ok && json.success) {
                    // Success handling
                    if (form.querySelector('input[name=_method][value=PUT]')) {
                        updateCustomerRow(json.data);
                        showSuccessAlert('Customer updated successfully');
                    } else {
                        appendCustomerRow(json.data);
                        showSuccessAlert('Customer added successfully');
                    }
                    if (bsModal) bsModal.hide();
                } else {
                    // Handle validation errors or other errors
                    showFormErrors(json);
                }
            })
            .catch(error => { 
                console.error('Error saving customer:', error);
                
                // Reset button state
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                }
                
                showErrorAlert('Network error occurred. Please check your connection and try again.');
            });
        });
    }
    
    // Store autocomplete instance to clean up properly
    let modalAutocompleteInstance = null;
    let modalObserver = null;
    
    function initializeModalAddressAutocomplete(retryCount = 0) {
        const addressInput = document.getElementById('address_auto_complete');
        if (!addressInput) {
            if (retryCount < 10) {
                console.log(`Address input not found in modal, retrying... (${retryCount + 1}/10)`);
                setTimeout(() => initializeModalAddressAutocomplete(retryCount + 1), 200);
                return;
            } else {
                console.log('Address input not found in modal after 10 retries, giving up');
                return;
            }
        }
        
        if (!window.googleMapsReady || typeof google === 'undefined' || !google.maps || !google.maps.places) {
            console.log('Google Maps API not ready yet, retrying...');
            // Google Maps API not ready yet, try again after a short delay
            setTimeout(() => initializeModalAddressAutocomplete(retryCount), 500);
            return;
        }
        
        // Clean up previous autocomplete instance if it exists
        if (modalAutocompleteInstance) {
            try {
                google.maps.event.clearInstanceListeners(modalAutocompleteInstance);
                modalAutocompleteInstance = null;
            } catch (e) {
                console.log('Error cleaning up previous autocomplete instance:', e);
            }
        }
        
        // Clean up previous observer
        if (modalObserver) {
            modalObserver.disconnect();
            modalObserver = null;
        }
        
        // Remove any existing pac-containers to prevent duplicates
        const existingPacContainers = document.querySelectorAll('.pac-container');
        existingPacContainers.forEach(container => {
            if (container.parentNode) {
                container.parentNode.removeChild(container);
            }
        });
        
        console.log('Initializing address autocomplete for modal');
        
        modalAutocompleteInstance = new google.maps.places.Autocomplete(addressInput, {
            types: ["geocode"],
            fields: ["address_components", "geometry", "formatted_address"]
        });
        
        // Fix dropdown positioning for modal
        const fixDropdownPosition = () => {
            const pacContainer = document.querySelector('.pac-container');
            if (pacContainer) {
                // Move dropdown to be a child of the input's parent container for proper positioning
                const inputParent = addressInput.closest('.col-md-8');
                if (inputParent && pacContainer.parentNode !== inputParent) {
                    inputParent.style.position = 'relative';
                    inputParent.appendChild(pacContainer);
                }
                
                // Get the address input position and dimensions
                const inputRect = addressInput.getBoundingClientRect();
                const modalBody = document.getElementById('customerCreateModalBody');
                const modalRect = modalBody.getBoundingClientRect();
                
                // Force positioning with individual style assignments
                pacContainer.style.setProperty('z-index', '1060', 'important');
                pacContainer.style.setProperty('position', 'absolute', 'important');
                pacContainer.style.setProperty('top', '100%', 'important');
                pacContainer.style.setProperty('left', '0', 'important');
                pacContainer.style.setProperty('right', '0', 'important');
                pacContainer.style.setProperty('width', '100%', 'important');
                pacContainer.style.setProperty('max-width', 'none', 'important');
                pacContainer.style.setProperty('box-shadow', '0 4px 6px rgba(0, 0, 0, 0.1)', 'important');
                pacContainer.style.setProperty('border', '1px solid #dee2e6', 'important');
                pacContainer.style.setProperty('border-radius', '0.375rem', 'important');
                pacContainer.style.setProperty('background', 'white', 'important');
                pacContainer.style.setProperty('max-height', '300px', 'important');
                pacContainer.style.setProperty('overflow-y', 'auto', 'important');
                pacContainer.style.setProperty('transform', 'none', 'important');
                pacContainer.style.setProperty('margin', '0', 'important');
                pacContainer.style.setProperty('padding', '0', 'important');
                
                // Ensure dropdown stays within modal bounds
                const dropdownHeight = Math.min(pacContainer.scrollHeight, 300);
                const spaceBelow = modalRect.bottom - inputRect.bottom;
                
                if (spaceBelow < dropdownHeight && inputRect.top > dropdownHeight) {
                    // Show above input if not enough space below
                    pacContainer.style.setProperty('top', 'auto', 'important');
                    pacContainer.style.setProperty('bottom', '100%', 'important');
                }
            }
        };
        
        // Use MutationObserver to catch dropdown creation immediately
        modalObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach((node) => {
                        if (node.nodeType === Node.ELEMENT_NODE && node.classList && node.classList.contains('pac-container')) {
                            console.log('Pac-container detected, fixing position immediately');
                            setTimeout(fixDropdownPosition, 10);
                        }
                    });
                }
            });
        });
        
        // Start observing the document body for new pac-container elements
        modalObserver.observe(document.body, {
            childList: true,
            subtree: true
        });
        
        // Fix positioning when dropdown appears
        setTimeout(fixDropdownPosition, 100);
        
        // Also fix when user starts typing (dropdown might appear later)
        addressInput.addEventListener('input', () => {
            setTimeout(fixDropdownPosition, 10);
        });
        
        // Fix when dropdown is shown
        addressInput.addEventListener('focus', () => {
            setTimeout(fixDropdownPosition, 10);
        });

        modalAutocompleteInstance.addListener("place_changed", () => {
            const place = modalAutocompleteInstance.getPlace();
            if (!place || !place.address_components) return;

            // Grab DOM elements
            const stateEl = document.getElementById("state_auto_complete");
            const zipEl = document.getElementById("zip_auto_complete");
            const latEl = document.getElementById("lat_hidden");
            const lngEl = document.getElementById("lng_hidden");

            // Extract components
            const stateFull = getAddressComponent(place, "administrative_area_level_1", "long_name");
            const postalCode = getAddressComponent(place, "postal_code", "short_name");
            const postalSuffix = getAddressComponent(place, "postal_code_suffix", "short_name");
            const countryCode = getAddressComponent(place, "country", "short_name");
            
            // Set full address from formatted_address
            addressInput.value = place.formatted_address || addressInput.value;
            
            // Fill state
            if (stateEl) stateEl.value = stateFull || "";

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

            // Fill lat/lng
            if (place.geometry && place.geometry.location) {
                const lat = place.geometry.location.lat();
                const lng = place.geometry.location.lng();
                if (latEl) latEl.value = lat;
                if (lngEl) lngEl.value = lng;
            } else {
                if (latEl) latEl.value = "";
                if (lngEl) lngEl.value = "";
            }
        });
    }
    

    function showFormErrors(resp) {
        // Clear any existing errors first
        clearModalValidationErrors();
        
        if (resp.errors) {
            // Display field-specific validation errors
            displayModalValidationErrors(resp.errors);
        } else if (resp.message) {
            // Display general error message
            showErrorAlert(resp.message);
        } else {
            // Fallback error message
            showErrorAlert('Validation failed. Please check your input and try again.');
        }
        
        // Scroll modal to top to show errors
        scrollModalToTop('customerCreateModal');
    }
    
    function clearModalValidationErrors() {
        const modalBody = document.getElementById('customerCreateModalBody');
        if (!modalBody) return;
        
        // Remove existing error styling and messages
        modalBody.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        modalBody.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
        modalBody.querySelectorAll('.alert-danger').forEach(el => {
            el.remove();
        });
    }
    
    function displayModalValidationErrors(errors) {
        const modalBody = document.getElementById('customerCreateModalBody');
        if (!modalBody) return;
        
        // Display general error message at top of form if present
        if (errors.general) {
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show';
            alertDiv.innerHTML = `
                ${errors.general}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            modalBody.insertBefore(alertDiv, modalBody.firstChild);
        }
        
        // Display field-specific errors
        Object.keys(errors).forEach(fieldName => {
            if (fieldName === 'general') return;
            
            const fieldInput = modalBody.querySelector(`[name="${fieldName}"]`);
            if (fieldInput) {
                // Add error styling
                fieldInput.classList.add('is-invalid');
                
                // Create error message element
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback';
                errorDiv.textContent = Array.isArray(errors[fieldName]) 
                    ? errors[fieldName][0] 
                    : errors[fieldName];
                
                // Insert error message after the field
                if (fieldInput.parentNode) {
                    fieldInput.parentNode.insertBefore(errorDiv, fieldInput.nextSibling);
                }
                
                // Remove error styling when user starts typing
                fieldInput.addEventListener('input', function removeErrorOnInput() {
                    fieldInput.classList.remove('is-invalid');
                    if (errorDiv.parentNode) {
                        errorDiv.parentNode.removeChild(errorDiv);
                    }
                    fieldInput.removeEventListener('input', removeErrorOnInput);
                });
            }
        });
        
        // Scroll to first error field
        const firstErrorField = modalBody.querySelector('.is-invalid');
        if (firstErrorField) {
            firstErrorField.focus();
            firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
    
    function showErrorAlert(message) {
        const modalBody = document.getElementById('customerCreateModalBody');
        if (!modalBody) {
            alert(message);
            return;
        }
        
        // Create error alert
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-danger alert-dismissible fade show';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        modalBody.insertBefore(alertDiv, modalBody.firstChild);
        
        // Auto-dismiss after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }
    
    function showSuccessAlert(message) {
        // Create success toast/notification that appears at the top of the page
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-success alert-dismissible fade show position-fixed';
        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
        alertDiv.innerHTML = `
            <i class="fas fa-check-circle me-2"></i>${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(alertDiv);
        
        // Auto-dismiss after 3 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.classList.remove('show');
                setTimeout(() => alertDiv.remove(), 150);
            }
        }, 3000);
    }

    // --- Customer Search Logic ---
    const searchInput = document.getElementById('customerSearchInput');
    const searchBtn = document.getElementById('customerSearchBtn');
    const searchBox = document.getElementById('customerSearchResults');
    let searchTimer = null;

    function performCustomerSearch() {
        const q = (searchInput.value || '').trim();
        if (!q) { hideSearchResults(); return; }
        searchBox.innerHTML = '<div class="p-2 small text-muted">Searching...</div>';
        searchBox.classList.remove('d-none');
        const scheduleId = "{{ $schedule->id ?? '' }}";
        fetch(`{{ route('admin.schedule.customers.search') }}?q=${encodeURIComponent(q)}&schedule_id=${encodeURIComponent(scheduleId)}`, { headers:{'X-Requested-With':'XMLHttpRequest'} })
            .then(r=>r.json())
            .then(json=>{
                if (!json || !json.data || !json.data.length) {
                    searchBox.innerHTML = '<div class="p-2 small text-muted">No matches.</div>';
                    return;
                }
                const items = json.data.map(c=>{
                    const name = (c.first_name||'') + ' ' + (c.last_name||'');
                    return `<div class=\"px-2 py-1 customer-search-item hover-bg cursor-pointer\" data-id=\"${c.id}\" data-json='${JSON.stringify({id:c.id,first_name:c.first_name,last_name:c.last_name,email:c.email,phone:c.phone,mobile:c.mobile}).replace(/"/g,'&quot;')}'>
                        <strong>${name.trim() || '(No name)'} </strong><br/>
                        <small>${c.email || ''} ${c.phone ? ' | '+c.phone : ''} ${c.mobile ? ' | Mobile: '+c.mobile : ''}</small>
                    </div>`;
                }).join('');
                searchBox.innerHTML = items;
                bindSearchResultClicks();
            }).catch(()=>{ searchBox.innerHTML='<div class="p-2 small text-danger">Error.</div>'; });
    }

    function bindSearchResultClicks() {
        searchBox.querySelectorAll('.customer-search-item').forEach(el=>{
            if (el.dataset.bound) return; el.dataset.bound='1';
            el.addEventListener('click', function(){
                try {
                    const raw = this.getAttribute('data-json').replace(/&quot;/g,'"');
                    const data = JSON.parse(raw);
                    appendCustomerRow(data);
                } catch(e) {}
                hideSearchResults();
                searchInput.value='';
            });
        });
    }

    function hideSearchResults() { searchBox.classList.add('d-none'); searchBox.innerHTML=''; }
    document.addEventListener('click', function(e){ if (!searchBox.contains(e.target) && e.target!==searchInput) { hideSearchResults(); } });
    if (searchInput) {
        searchInput.addEventListener('keyup', function(e){
            clearTimeout(searchTimer);
            if (e.key==='Enter') { performCustomerSearch(); return; }
            searchTimer = setTimeout(performCustomerSearch, 400);
        });
    }
    if (searchBtn) { searchBtn.addEventListener('click', performCustomerSearch); }

    function refreshEmptyCustomersMessage() {
        const tbody = document.querySelector('.customer_title').parentElement.querySelector('tbody');
        if (!tbody) return;
        const existingMsg = tbody.querySelector('tr.no-customers-row');
        const hasDataRow = tbody.querySelector('tr:not(.no-customers-row)');
        if (!hasDataRow) {
            if (!existingMsg) {
                const tr = document.createElement('tr');
                tr.className = 'no-customers-row';
                tr.innerHTML = '<td colspan="6" class="text-center text-muted py-3">There are no customers.</td>';
                tbody.appendChild(tr);
            }
        } else if (existingMsg) {
            existingMsg.remove();
        }
    }

    function appendCustomerRow(cust) {
        if (!cust) return; 
        const tbody = document.querySelector('.customer_title').parentElement.querySelector('tbody');
        if (!tbody) return;
        const existing = document.querySelector(`tr[data-customer-id='${cust.id}']`);
        if (existing) { updateCustomerRow(cust); return; }
        const tr = document.createElement('tr');
        tr.setAttribute('data-customer-id', cust.id);
        
        // Format phone numbers using the same logic as Helper::formatPhone
        function formatPhone(phone) {
            if (!phone) return '';
            const cleaned = phone.replace(/\D/g, '');
            if (cleaned.length === 10) {
                return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
            } else if (cleaned.length === 11 && cleaned[0] === '1') {
                const phone = cleaned.slice(1);
                return `(${phone.slice(0, 3)}) ${phone.slice(3, 6)}-${phone.slice(6)}`;
            }
            return phone;
        }
        
        // Format phone display with both phone and mobile
        function formatPhoneDisplay(phone, mobile) {
            const phoneDisplay = [];
            if (phone) phoneDisplay.push('P: ' + formatPhone(phone));
            if (mobile) phoneDisplay.push('M: ' + formatPhone(mobile));
            return phoneDisplay.length > 0 ? phoneDisplay.join(' | ') : 'N/A';
        }
        
        tr.innerHTML = `
            <td><p>${cust.first_name ?? ''} ${cust.last_name ?? ''}</p></td>
            <td><select class=\"form-select\"><option value="">Select An Option</option><option value=\"Buyer\">Buyer</option><option value=\"Seller\">Seller</option></select></td>
            <td><select class=\"form-select\"><option value="">Select An Option</option><option value=\"1\">Yes</option><option value=\"2\">No</option></select></td>
            <td><a href=\"mailto:${cust.email}\">${cust.email||''}</a></td>
            <td>${formatPhoneDisplay(cust.phone || '', cust.mobile || '')}</td>
            <td><div class=\"d-flex gap-2\">
                <a href=\"javascript:void(0);\" class=\"customer-edit\" data-id=\"${cust.id}\"><img src=\"{{ asset('images/edit.svg')}}\"/></a>
                <a href=\"javascript:void(0);\" class=\"customer-delete text-danger\" data-id=\"${cust.id}\"><img src=\"{{ asset('images/delete.svg')}}\"/></a>
            </div></td>`;
        // Insert alphabetically (A-Z) by full name instead of always prepending
        const newName = ((cust.first_name || '') + ' ' + (cust.last_name || '')).trim().toLowerCase();
        let inserted = false;
        const rows = Array.from(tbody.querySelectorAll('tr[data-customer-id]'));
        for (const row of rows) {
            const existingName = (row.querySelector('td p')?.textContent || '').trim().toLowerCase();
            if (newName.localeCompare(existingName) < 0) {
                tbody.insertBefore(tr, row);
                inserted = true;
                break;
            }
        }
        if (!inserted) tbody.appendChild(tr);
        bindEditLinks(tr);
        bindDeleteLinks(tr);
        refreshEmptyCustomersMessage();
    }

    function updateCustomerRow(cust) {
        if (!cust) return;
        const row = document.querySelector(`tr[data-customer-id='${cust.id}']`);
        if (!row) { appendCustomerRow(cust); return; }
        
        // Format phone numbers using the same logic as Helper::formatPhone
        function formatPhone(phone) {
            if (!phone) return '';
            const cleaned = phone.replace(/\D/g, '');
            if (cleaned.length === 10) {
                return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
            } else if (cleaned.length === 11 && cleaned[0] === '1') {
                const phone = cleaned.slice(1);
                return `(${phone.slice(0, 3)}) ${phone.slice(3, 6)}-${phone.slice(6)}`;
            }
            return phone;
        }
        
        // Format phone display with both phone and mobile
        function formatPhoneDisplay(phone, mobile) {
            const phoneDisplay = [];
            if (phone) phoneDisplay.push('P: ' + formatPhone(phone));
            if (mobile) phoneDisplay.push('M: ' + formatPhone(mobile));
            return phoneDisplay.length > 0 ? phoneDisplay.join(' | ') : 'N/A';
        }
        
        row.children[0].innerHTML = `<p>${cust.first_name ?? ''} ${cust.last_name ?? ''}</p>`;
        row.children[3].innerHTML = `<a href=\"mailto:${cust.email}\">${cust.email}</a>`;
        row.children[4].innerHTML = formatPhoneDisplay(cust.phone || '', cust.mobile || '');
    }

    function bindEditLinks(scope=document) {
        scope.querySelectorAll('.customer-edit').forEach(a=>{
            if (a.dataset.bound) return; a.dataset.bound='1';
            a.addEventListener('click', function(){
                const id = this.getAttribute('data-id');
                openModal();
                loadEditForm(id);
            });
        });
    }

    function bindDeleteLinks(scope=document) {
        scope.querySelectorAll('.customer-delete').forEach(a=>{
            if (a.dataset.bound) return; a.dataset.bound='1';
            a.addEventListener('click', function(){
                const id = this.getAttribute('data-id');
                const doRemove = () => {
                    const row = document.querySelector(`tr[data-customer-id='${id}']`);
                    if (row) { row.remove(); refreshEmptyCustomersMessage(); }
                };
                // Lazy load SweetAlert2 if not present
                if (!window.Swal && !document.getElementById('swal2-cdn')) {
                    const s = document.createElement('script');
                    s.id = 'swal2-cdn';
                    s.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
                    s.onload = () => triggerSwal();
                    document.head.appendChild(s);
                } else {
                    triggerSwal();
                }
                function triggerSwal(){
                    if (window.Swal && Swal.fire) {
                        Swal.fire({
                            title: 'Delete Customer?',
                            text: 'This will remove the customer from this list.',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            confirmButtonText: 'Yes, delete',
                        }).then(res=>{ if(res.isConfirmed) doRemove(); });
                    } else {
                        if (confirm('Remove this customer from the list?')) doRemove();
                    }
                }
            });
        });
    }

    function loadEditForm(id) {
        // Clean up any existing autocomplete before loading new content
        cleanupModalAutocomplete();
        
        fetch(`/customers/${id}/edit?from_modal=1&schedule_tenant_id={{ $schedule->tenant_id }}` , { headers:{'X-Requested-With':'XMLHttpRequest'} })
            .then(r=>r.text())
            .then(html=>{ modalBody.innerHTML = html; bindCustomerForm(); })
            .catch(()=>{ modalBody.innerHTML='<div class="p-3 text-danger">Error loading customer.</div>'; });
    }

    function manualShowModal() {
        // create backdrop
        let backdrop = document.createElement('div');
        backdrop.className = 'modal-backdrop fade show';
        document.body.appendChild(backdrop);
        modalEl.classList.add('show');
        modalEl.style.display='block';
        modalEl.removeAttribute('aria-hidden');
        modalEl.setAttribute('aria-modal','true');
        modalEl.scrollTop = 0;
    }

    function openModal() {
        if (bsModal) { bsModal.show(); return; }
        if (window.bootstrap && window.bootstrap.Modal) {
            bsModal = new bootstrap.Modal(modalEl);
            bsModal.show();
            return;
        }
        // attempt dynamic load of bootstrap bundle if not present
        if (!document.getElementById('dynamic-bootstrap-bundle')) {
            const s = document.createElement('script');
            s.id = 'dynamic-bootstrap-bundle';
            s.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
            s.onload = () => { try { bsModal = new bootstrap.Modal(modalEl); bsModal.show(); } catch(e){ manualShowModal(); } };
            document.head.appendChild(s);
            // fallback after timeout
            setTimeout(()=>{ if (!bsModal) manualShowModal(); }, 1200);
        } else {
            manualShowModal();
        }
    }

    if (addBtn) {
        addBtn.addEventListener('click', function(){
            openModal();
            loadCustomerForm();
        });
    }
    bindEditLinks();
    bindDeleteLinks();
    refreshEmptyCustomersMessage();
    // Initial alphabetical sort of existing customer rows
    (function sortInitialCustomers(){
        const tbody = document.querySelector('.customer_title').parentElement.querySelector('tbody');
        if (!tbody) return;
        const rows = Array.from(tbody.querySelectorAll('tr[data-customer-id]'));
        if (rows.length < 2) return;
        rows.sort((a,b)=>{
            const an = (a.querySelector('td p')?.textContent || '').trim().toLowerCase();
            const bn = (b.querySelector('td p')?.textContent || '').trim().toLowerCase();
            return an.localeCompare(bn);
        }).forEach(r=>tbody.appendChild(r));
    })();


    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');
            }
        });
    });

    // --- USA Phone Number Format Mask ( (000) 000-0000 ) ---
    function formatPhoneNumber(value) {
        let digits = value.replace(/\D/g, ''); // remove all non-digits
        if (digits.length > 10) digits = digits.slice(0, 10);

        let formatted = '';
        if (digits.length > 0) {
            formatted += '(' + digits.substring(0, 3);
        }
        if (digits.length >= 4) {
            formatted += ') ' + digits.substring(3, 6);
        }
        if (digits.length >= 7) {
            formatted += '-' + digits.substring(6, 10);
        }

        return formatted;
    }

});
// --- Agent dynamic behaviors (added separately to avoid touching existing customer logic) ---
document.addEventListener('DOMContentLoaded', function() {
    const agentAddBtn = document.getElementById('btnAddAgent');
    const agentSearchInput = document.querySelector('.agent_title input.form-control');
    const agentSearchBtn = document.querySelector('.agent_title button.btn_search');
    const agentTableBody = document.querySelector('.agent_title').parentElement.querySelector('tbody');
    const agentModalEl = document.getElementById('agentCreateModal');
    const agentModalBody = document.getElementById('agentCreateModalBody');
    let agentBsModal = null;
    
    // Store agent autocomplete instance to clean up properly
    let agentAutocompleteInstance = null;
    let agentObserver = null;

    function initializeAgentAddressAutocomplete(retryCount = 0) {
        const addressInput = agentModalBody ? agentModalBody.querySelector('#address_auto_complete') : null;
        if (!addressInput) {
            if (retryCount < 10) {
                console.log(`Agent address input not found in modal, retrying... (${retryCount + 1}/10)`);
                setTimeout(() => initializeAgentAddressAutocomplete(retryCount + 1), 200);
                return;
            } else {
                console.log('Agent address input not found in modal after 10 retries, giving up');
                return;
            }
        }
        
        if (!window.googleMapsReady || typeof google === 'undefined' || !google.maps || !google.maps.places) {
            console.log('Google Maps API not ready yet, retrying...');
            // Google Maps API not ready yet, try again after a short delay
            setTimeout(() => initializeAgentAddressAutocomplete(retryCount), 500);
            return;
        }
        
        // Clean up previous autocomplete instance if it exists
        if (agentAutocompleteInstance) {
            try {
                google.maps.event.clearInstanceListeners(agentAutocompleteInstance);
                agentAutocompleteInstance = null;
            } catch (e) {
                console.log('Error cleaning up previous agent autocomplete instance:', e);
            }
        }
        
        // Clean up previous observer
        if (agentObserver) {
            agentObserver.disconnect();
            agentObserver = null;
        }
        
        // Remove any existing pac-containers to prevent duplicates
        const existingPacContainers = document.querySelectorAll('.pac-container');
        existingPacContainers.forEach(container => {
            if (container.parentNode) {
                container.parentNode.removeChild(container);
            }
        });
        
        console.log('Initializing address autocomplete for agent modal');
        
        agentAutocompleteInstance = new google.maps.places.Autocomplete(addressInput, {
            types: ["geocode"],
            fields: ["address_components", "geometry", "formatted_address"]
        });
        
        // Fix dropdown positioning for modal
        const fixDropdownPosition = () => {
            const pacContainer = document.querySelector('.pac-container');
            if (pacContainer) {
                // Move dropdown to be a child of the input's parent container for proper positioning
                const inputParent = addressInput.closest('.col-md-8');
                if (inputParent && pacContainer.parentNode !== inputParent) {
                    inputParent.style.position = 'relative';
                    inputParent.appendChild(pacContainer);
                }
                
                // Get the address input position and dimensions
                const inputRect = addressInput.getBoundingClientRect();
                const modalRect = agentModalBody.getBoundingClientRect();
                
                // Force positioning with individual style assignments
                pacContainer.style.setProperty('z-index', '1060', 'important');
                pacContainer.style.setProperty('position', 'absolute', 'important');
                pacContainer.style.setProperty('top', '100%', 'important');
                pacContainer.style.setProperty('left', '0', 'important');
                pacContainer.style.setProperty('right', '0', 'important');
                pacContainer.style.setProperty('width', '100%', 'important');
                pacContainer.style.setProperty('max-width', 'none', 'important');
                pacContainer.style.setProperty('box-shadow', '0 4px 6px rgba(0, 0, 0, 0.1)', 'important');
                pacContainer.style.setProperty('border', '1px solid #dee2e6', 'important');
                pacContainer.style.setProperty('border-radius', '0.375rem', 'important');
                pacContainer.style.setProperty('background', 'white', 'important');
                pacContainer.style.setProperty('max-height', '300px', 'important');
                pacContainer.style.setProperty('overflow-y', 'auto', 'important');
                pacContainer.style.setProperty('transform', 'none', 'important');
                pacContainer.style.setProperty('margin', '0', 'important');
                pacContainer.style.setProperty('padding', '0', 'important');
                
                // Ensure dropdown stays within modal bounds
                const dropdownHeight = Math.min(pacContainer.scrollHeight, 300);
                const spaceBelow = modalRect.bottom - inputRect.bottom;
                
                if (spaceBelow < dropdownHeight && inputRect.top > dropdownHeight) {
                    // Show above input if not enough space below
                    pacContainer.style.setProperty('top', 'auto', 'important');
                    pacContainer.style.setProperty('bottom', '100%', 'important');
                }
            }
        };
        
        // Use MutationObserver to catch dropdown creation immediately
        agentObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach((node) => {
                        if (node.nodeType === Node.ELEMENT_NODE && node.classList && node.classList.contains('pac-container')) {
                            console.log('Agent pac-container detected, fixing position immediately');
                            setTimeout(fixDropdownPosition, 10);
                        }
                    });
                }
            });
        });
        
        // Start observing the document body for new pac-container elements
        agentObserver.observe(document.body, {
            childList: true,
            subtree: true
        });
        
        // Fix positioning when dropdown appears
        setTimeout(fixDropdownPosition, 100);
        
        // Also fix when user starts typing (dropdown might appear later)
        addressInput.addEventListener('input', () => {
            setTimeout(fixDropdownPosition, 10);
        });
        
        // Fix when dropdown is shown
        addressInput.addEventListener('focus', () => {
            setTimeout(fixDropdownPosition, 10);
        });

        agentAutocompleteInstance.addListener("place_changed", () => {
            const place = agentAutocompleteInstance.getPlace();
            if (!place || !place.address_components) return;

            // Grab DOM elements for agent form (same IDs as customer form, but scope to agent modal)
            const stateEl = agentModalBody.querySelector("#state_auto_complete");
            const zipEl = agentModalBody.querySelector("#zip_auto_complete");
            const latEl = agentModalBody.querySelector("#lat_hidden");
            const lngEl = agentModalBody.querySelector("#lng_hidden");

            // Extract components
            const stateFull = getAddressComponent(place, "administrative_area_level_1", "long_name");
            const postalCode = getAddressComponent(place, "postal_code", "short_name");
            const postalSuffix = getAddressComponent(place, "postal_code_suffix", "short_name");
            const countryCode = getAddressComponent(place, "country", "short_name");
            
            // Set full address from formatted_address
            addressInput.value = place.formatted_address || addressInput.value;
            
            // Fill state
            if (stateEl) stateEl.value = stateFull || "";

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

            // Fill lat/lng
            if (place.geometry && place.geometry.location) {
                const lat = place.geometry.location.lat();
                const lng = place.geometry.location.lng();
                if (latEl) latEl.value = lat;
                if (lngEl) lngEl.value = lng;
            } else {
                if (latEl) latEl.value = "";
                if (lngEl) lngEl.value = "";
            }
        });
    }

    // Clean up agent autocomplete when modal is hidden
    function cleanupAgentAutocomplete() {
        if (agentAutocompleteInstance) {
            try {
                google.maps.event.clearInstanceListeners(agentAutocompleteInstance);
                agentAutocompleteInstance = null;
            } catch (e) {
                console.log('Error cleaning up agent autocomplete:', e);
            }
        }
        
        if (agentObserver) {
            agentObserver.disconnect();
            agentObserver = null;
        }
        
        // Remove any pac-containers that might be left behind
        const pacContainers = document.querySelectorAll('.pac-container');
        pacContainers.forEach(container => {
            if (container.parentNode) {
                container.parentNode.removeChild(container);
            }
        });
    }
    
    if (window.bootstrap && window.bootstrap.Modal) { 
        agentBsModal = new bootstrap.Modal(agentModalEl); 
    }
    
    if (agentModalEl && agentModalEl.parentElement !== document.body) { 
        document.body.appendChild(agentModalEl); 
    }
    
    // Add event listeners for agent modal cleanup
    agentModalEl.addEventListener('hidden.bs.modal', cleanupAgentAutocomplete);
    agentModalEl.addEventListener('hide.bs.modal', cleanupAgentAutocomplete);

    function openAgentModal() {
        if (agentBsModal) { 
            agentBsModal.show(); 
            return; 
        }
        
        if (window.bootstrap && window.bootstrap.Modal) {
            agentBsModal = new bootstrap.Modal(agentModalEl); 
            agentBsModal.show(); 
            return;
        }
        
        agentModalEl.classList.add('show'); 
        agentModalEl.style.display = 'block';
    }
    function loadAgentForm() {
        // Clean up any existing autocomplete before loading new content
        cleanupAgentAutocomplete();
        
        const scheduleId = document.getElementById('schedule_id').value;
        const url = "/agents/create?from_modal=1&schedule_id=" + scheduleId + "&schedule_tenant_id={{ $schedule->tenant_id }}";
        
        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.text())
        .then(html => {
            if (html.indexOf('<form') === -1) {
                agentModalBody.innerHTML = '<div class="p-3 text-danger">Failed to load form.</div>';
                return;
            }
            agentModalBody.innerHTML = html;
            bindAgentForm();
        })
        .catch(() => {
            agentModalBody.innerHTML = '<div class="p-3 text-danger">Error loading form.</div>';
        });
    }
    function loadAgentEditForm(id) {
        // Clean up any existing autocomplete before loading new content
        cleanupAgentAutocomplete();
        
        const url = `/agents/${id}/edit?from_modal=1&schedule_tenant_id={{ $schedule->tenant_id }}`;
        
        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.text())
        .then(html => {
            agentModalBody.innerHTML = html;
            bindAgentForm();
        })
        .catch(() => {
            agentModalBody.innerHTML = '<div class="p-3 text-danger">Error loading agent.</div>';
        });
    }
    function closeAgentModal() {
        try { 
            if (agentBsModal) { 
                agentBsModal.hide(); 
                return; 
            } 
        } catch(e) {}
        
        // Fallback manual hide
        agentModalEl.classList.remove('show');
        agentModalEl.style.display = 'none';
        agentModalEl.setAttribute('aria-hidden', 'true');
        
        // Remove any stray backdrops
        document.querySelectorAll('.modal-backdrop').forEach(b => b.remove());
        document.body.classList.remove('modal-open');
    }

    // Initialize phone number formatting for agent modal form inputs
    function initializeAgentPhoneFormatting() {
        const phoneInputs = agentModalBody.querySelectorAll('.mobile_number_format, .phone_number_format');
        phoneInputs.forEach(function (input) {
            // Format existing value if any
            if (input.value) {
                input.value = formatPhoneNumber(input.value);
            }
            
            // Remove existing event listeners to prevent duplicates
            const newInput = input.cloneNode(true);
            input.parentNode.replaceChild(newInput, input);
            
            // Add event listeners to the new input
            newInput.addEventListener('input', function (e) {
                e.target.value = formatPhoneNumber(e.target.value);
            });

            newInput.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 date pickers for agent modal form inputs
    function initializeAgentDatePickers() {
        // Initialize datetime pickers
        $(agentModalBody).find('.datetimepicker').bootstrapMaterialDatePicker({
            format: 'MM-DD-YYYY HH:mm',
            clearButton: true,
            weekStart: 1
        });

        // Initialize date pickers
        $(agentModalBody).find('.datepicker').bootstrapMaterialDatePicker({
            format: 'MM-DD-YYYY',
            clearButton: true,
            weekStart: 1,
            time: false
        });

        // Initialize time pickers
        $(agentModalBody).find('.timepicker').bootstrapMaterialDatePicker({
            format: 'HH:mm',
            clearButton: true,
            date: false
        });
    }

    // Initialize sponsor field for agent modal form inputs
    function initializeAgentSponsorField() {
        const sponsorSelect = agentModalBody.querySelector('#sponsorSelect');
        const tenantIdInput = agentModalBody.querySelector('input[name="tenant_id"]');
        
        if (!sponsorSelect || !tenantIdInput || !tenantIdInput.value) {
            return;
        }
        
        const tenantId = tenantIdInput.value;
        
        // Show loading state
        sponsorSelect.innerHTML = '<option value="">Loading inspectors...</option>';
        sponsorSelect.disabled = true;
        
        // Make AJAX call to get inspectors for this tenant
        fetch(`{{ route('agents.inspectors-by-tenant') }}?tenant_id=${tenantId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            let options = '<option value="">Choose...</option>';
            
            if (data.status && data.data && data.data.length > 0) {
                data.data.forEach(inspector => {
                    options += `<option value="${inspector.id}">${inspector.name}</option>`;
                });
            }
            
            sponsorSelect.innerHTML = options;
            sponsorSelect.disabled = false;
            
            // For edit mode, restore the selected sponsor if available
            const currentSponsorId = sponsorSelect.getAttribute('data-selected-sponsor');
            if (currentSponsorId) {
                // Set a short delay to ensure options are loaded
                setTimeout(() => {
                    sponsorSelect.value = currentSponsorId;
                }, 100);
            }
        })
        .catch(error => {
            console.error('Error loading inspectors:', error);
            sponsorSelect.innerHTML = '<option value="">Error loading inspectors</option>';
            sponsorSelect.disabled = false;
        });
    }

    function bindAgentForm() {
        const form = agentModalBody.querySelector('form');
        if (!form) return;
        
        // Initialize address autocomplete for the agent modal with a small delay to ensure DOM is ready
        setTimeout(() => {
            initializeAgentAddressAutocomplete();
        }, 100);
        
        // Initialize phone number formatting for agent modal form inputs
        initializeAgentPhoneFormatting();
        
        // Initialize date pickers for agent modal form inputs
        initializeAgentDatePickers();
        
        // Initialize sponsor field for agent modal form inputs
        initializeAgentSponsorField();
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const fd = new FormData(form);
            
            // Show loading state
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn ? submitBtn.innerHTML : '';
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
            }
            
            // Clear any existing validation errors
            clearAgentValidationErrors();
            
            fetch(form.action, {
                method: 'POST',
                body: fd,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}'
                }
            })
            .then(async response => {
                const json = await response.json();
                
                // Reset button state
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                }
                
                if (response.ok && json.success) {
                    // Success handling
                    if (form.querySelector('input[name=_method][value=PUT]')) {
                        updateAgentRow(json.data);
                        showAgentSuccessAlert('Agent updated successfully');
                    } else {
                        appendAgentRow(json.data);
                        showAgentSuccessAlert('Agent added successfully');
                    }
                    
                    // Close the modal properly
                    closeAgentModal();
                } else {
                    // Handle validation errors
                    showAgentFormErrors(json);
                }
            })
            .catch(error => { 
                console.error('Error saving agent:', error);
                
                // Reset button state
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                }
                
                showAgentErrorAlert('Network error occurred. Please check your connection and try again.');
            });
        });
    }

    function showAgentSuccessAlert(message) {
        // Create success toast/notification that appears at the top of the page
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-success alert-dismissible fade show position-fixed';
        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
        alertDiv.innerHTML = `
            <i class="fas fa-check-circle me-2"></i>${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(alertDiv);
        
        // Auto-dismiss after 3 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.parentNode.removeChild(alertDiv);
            }
        }, 3000);
    }

    function showAgentFormErrors(resp) {
        // Clear any existing errors first
        clearAgentValidationErrors();
        
        if (resp.errors) {
            // Display field-specific validation errors
            displayAgentValidationErrors(resp.errors);
        } else if (resp.message) {
            // Display general error message
            showAgentErrorAlert(resp.message);
        } else {
            // Fallback error message
            showAgentErrorAlert('Validation failed. Please check your input and try again.');
        }
        
        // Scroll modal to top to show errors
        scrollModalToTop('agentCreateModal');
    }
    
    function clearAgentValidationErrors() {
        const modalBody = document.getElementById('agentCreateModalBody');
        if (!modalBody) return;
        
        // Remove existing error styling and messages
        modalBody.querySelectorAll('.is-invalid').forEach(el => {
            el.classList.remove('is-invalid');
        });
        modalBody.querySelectorAll('.invalid-feedback').forEach(el => {
            el.remove();
        });
        modalBody.querySelectorAll('.alert-danger').forEach(el => {
            el.remove();
        });
    }
    
    function displayAgentValidationErrors(errors) {
        const modalBody = document.getElementById('agentCreateModalBody');
        if (!modalBody) return;
        
        // Display general error message at top of form if present
        if (errors.general) {
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show';
            alertDiv.innerHTML = `
                ${errors.general}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            modalBody.insertBefore(alertDiv, modalBody.firstChild);
        }
        
        // Display field-specific errors
        Object.keys(errors).forEach(fieldName => {
            if (fieldName === 'general') return;
            
            const fieldInput = modalBody.querySelector(`[name="${fieldName}"]`);
            if (fieldInput) {
                // Add error styling
                fieldInput.classList.add('is-invalid');
                
                // Create error message element
                const errorDiv = document.createElement('div');
                errorDiv.className = 'invalid-feedback';
                errorDiv.textContent = Array.isArray(errors[fieldName]) 
                    ? errors[fieldName][0] 
                    : errors[fieldName];
                
                // Insert error message after the field
                if (fieldInput.parentNode) {
                    fieldInput.parentNode.insertBefore(errorDiv, fieldInput.nextSibling);
                }
                
                // Remove error styling when user starts typing
                fieldInput.addEventListener('input', function removeErrorOnInput() {
                    fieldInput.classList.remove('is-invalid');
                    if (errorDiv.parentNode) {
                        errorDiv.parentNode.removeChild(errorDiv);
                    }
                    fieldInput.removeEventListener('input', removeErrorOnInput);
                });
            }
        });
        
        // Scroll to first error field
        const firstErrorField = modalBody.querySelector('.is-invalid');
        if (firstErrorField) {
            firstErrorField.focus();
            firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
    
    function showAgentErrorAlert(message) {
        const modalBody = document.getElementById('agentCreateModalBody');
        if (!modalBody) {
            alert(message);
            return;
        }
        
        // Create error alert
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-danger alert-dismissible fade show';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        modalBody.insertBefore(alertDiv, modalBody.firstChild);
        
        // Auto-dismiss after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    }

    // Format phone numbers using the same logic as Helper::formatPhone
    function formatAgentPhone(phone) {
        if (!phone) return '';
        const cleaned = phone.replace(/\D/g, '');
        if (cleaned.length === 10) {
            return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
        } else if (cleaned.length === 11 && cleaned[0] === '1') {
            const phone = cleaned.slice(1);
            return `(${phone.slice(0, 3)}) ${phone.slice(3, 6)}-${phone.slice(6)}`;
        }
        return phone;
    }
    
    // Format phone display with both phone and mobile
    function formatAgentPhoneDisplay(phone, mobile) {
        const phoneDisplay = [];
        if (phone) phoneDisplay.push('P: ' + formatAgentPhone(phone));
        if (mobile) phoneDisplay.push('M: ' + formatAgentPhone(mobile));
        return phoneDisplay.length > 0 ? phoneDisplay.join(' | ') : 'N/A';
    }
    function appendAgentRow(a) {
        if (!a) return;
        
        const exist = document.querySelector(`tr[data-agent-id='${a.id}']`);
        if (exist) {
            updateAgentRow(a);
            return;
        }
        
        const tr = document.createElement('tr');
        tr.setAttribute('data-agent-id', a.id);
        tr.innerHTML = `
            <td><p>${a.first_name || ''} ${a.last_name || ''}</p></td>
            <td>
                <select class="form-select">
                    <option value="">Select Type</option>
                    <option>Buyer</option>
                    <option>Seller</option>
                </select>
            </td>
            <td><a href="mailto:${a.email || ''}">${a.email || ''}</a></td>
            <td>${formatAgentPhoneDisplay(a.phone || '', a.mobile || '')}</td>
            <td>${(a.note || '').substring(0, 50)}</td>
            <td>
                <div class="d-flex gap-2">
                    <a href="javascript:void(0);" class="agent-edit" data-id="${a.id}">
                        <img src="{{ asset('images/edit.svg') }}" alt="Edit">
                    </a>
                    <a href="javascript:void(0);" class="agent-delete text-danger" data-id="${a.id}">
                        <img src="{{ asset('images/delete.svg') }}" alt="Delete">
                    </a>
                </div>
            </td>
        `;
        
        // Insert alphabetically by full name for agents
        const newName = ((a.first_name || '') + ' ' + (a.last_name || '')).trim().toLowerCase();
        let inserted = false;
        const rows = Array.from(agentTableBody.querySelectorAll('tr[data-agent-id]'));
        for (const row of rows) {
            const existingName = (row.querySelector('td p')?.textContent || '').trim().toLowerCase();
            if (newName.localeCompare(existingName) < 0) {
                agentTableBody.insertBefore(tr, row);
                inserted = true;
                break;
            }
        }
        if (!inserted) agentTableBody.appendChild(tr);
        bindAgentEditLinks(tr);
        bindAgentDeleteLinks(tr);
        refreshEmptyAgentsMessage();
    }
    function updateAgentRow(a) {
        const row = document.querySelector(`tr[data-agent-id='${a.id}']`);
        if (!row) {
            appendAgentRow(a);
            return;
        }
        
        row.children[0].innerHTML = `<p>${a.first_name || ''} ${a.last_name || ''}</p>`;
        row.children[2].innerHTML = `<a href="mailto:${a.email || ''}">${a.email || ''}</a>`;
        row.children[3].innerHTML = formatAgentPhoneDisplay(a.phone || '', a.mobile || '');
        row.children[4].innerHTML = (a.note || '').substring(0, 50);
    }
    function bindAgentEditLinks(scope = document) {
        scope.querySelectorAll('.agent-edit').forEach(a => {
            if (a.dataset.bound) return;
            a.dataset.bound = '1';
            a.addEventListener('click', function() {
                openAgentModal();
                loadAgentEditForm(this.getAttribute('data-id'));
            });
        });
    }
    function bindAgentDeleteLinks(scope = document) {
        scope.querySelectorAll('.agent-delete').forEach(a => {
            if (a.dataset.bound) return;
            a.dataset.bound = '1';
            a.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                const doRemove = () => {
                    const row = document.querySelector(`tr[data-agent-id='${id}']`);
                    if (row) { row.remove(); refreshEmptyAgentsMessage(); }
                };
                if (!window.Swal && !document.getElementById('swal2-cdn')) {
                    const s = document.createElement('script');
                    s.id = 'swal2-cdn';
                    s.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
                    s.onload = () => triggerSwal();
                    document.head.appendChild(s);
                } else {
                    triggerSwal();
                }
                function triggerSwal(){
                    if (window.Swal && Swal.fire) {
                        Swal.fire({
                            title: 'Delete Agent?',
                            text: 'This will remove the agent from this list.',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            confirmButtonText: 'Yes, delete',
                        }).then(res=>{ if(res.isConfirmed) doRemove(); });
                    } else {
                        if (confirm('Remove this agent from the list?')) doRemove();
                    }
                }
            });
        });
    }
    function refreshEmptyAgentsMessage() {
        const existing = agentTableBody.querySelector('tr.no-agents-row');
        const hasData = agentTableBody.querySelector('tr:not(.no-agents-row)');
        
        if (!hasData) {
            if (!existing) {
                const tr = document.createElement('tr');
                tr.className = 'no-agents-row';
                tr.innerHTML = '<td colspan="6" class="text-center text-muted py-3">There are no agents.</td>';
                agentTableBody.appendChild(tr);
            }
        } else if (existing) {
            existing.remove();
        }
    }
    let agentSearchTimer = null;
    
    function performAgentSearch() {
        const q = (agentSearchInput.value || '').trim();
        if (!q) {
            /* no query */
            return;
        }
        
        fetch(`{{ route('admin.schedule.agents.search') }}?q=${encodeURIComponent(q)}&schedule_id={{ $schedule->id }}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(json => {
            if (!json || !json.data) return;
            // Simple overlay dropdown reuse not implemented; directly add first result? We'll list in small popup
            showAgentSearchResults(json.data);
        })
        .catch(() => {});
    }
    // Lightweight dropdown similar pattern
    let agentSearchBox = document.getElementById('agentSearchResults');
    if (!agentSearchBox) {
        agentSearchBox = document.createElement('div');
        agentSearchBox.id = 'agentSearchResults';
        agentSearchBox.className = 'shadow border bg-white position-absolute w-100 d-none';
        agentSearchBox.style.zIndex = '1055';
        agentSearchBox.style.maxHeight = '250px';
        agentSearchBox.style.overflow = 'auto';
        
        if (agentSearchInput && agentSearchInput.parentElement) {
            agentSearchInput.parentElement.style.position = 'relative';
            agentSearchInput.parentElement.appendChild(agentSearchBox);
        }
    }
    function showAgentSearchResults(list) {
        if (!list.length) {
            agentSearchBox.innerHTML = '<div class="p-2 small text-muted">No matches.</div>';
            agentSearchBox.classList.remove('d-none');
            return;
        }
        
        agentSearchBox.innerHTML = list.map(a => {
            const name = (a.first_name || '') + ' ' + (a.last_name || '');
            return `<div class="px-2 py-1 agent-search-item hover-bg cursor-pointer" 
                        data-id="${a.id}" 
                        data-json='${JSON.stringify({
                            id: a.id,
                            first_name: a.first_name,
                            last_name: a.last_name,
                            email: a.email,
                            phone: a.phone,
                            note: a.note
                        }).replace(/"/g, '&quot;')}'>
                    <strong>${name.trim() || '(No name)'}</strong><br/>
                    <small>${a.email || ''} ${a.phone ? ' | ' + a.phone : ''}</small>
                </div>`;
        }).join('');
        
        agentSearchBox.classList.remove('d-none');
        bindAgentSearchClicks();
    }
    function bindAgentSearchClicks() {
        agentSearchBox.querySelectorAll('.agent-search-item').forEach(el => {
            if (el.dataset.bound) return;
            el.dataset.bound = '1';
            el.addEventListener('click', function() {
                try {
                    const raw = this.getAttribute('data-json').replace(/&quot;/g, '"');
                    const data = JSON.parse(raw);
                    appendAgentRow(data);
                } catch(e) {}
                agentSearchBox.classList.add('d-none');
                agentSearchInput.value = '';
            });
        });
    }
    document.addEventListener('click', function(e) {
        if (agentSearchBox && !agentSearchBox.contains(e.target) && e.target !== agentSearchInput) {
            agentSearchBox.classList.add('d-none');
        }
    });
    
    if (agentSearchInput) {
        agentSearchInput.addEventListener('keyup', function(e) {
            clearTimeout(agentSearchTimer);
            if (e.key === 'Enter') {
                performAgentSearch();
                return;
            }
            agentSearchTimer = setTimeout(performAgentSearch, 400);
        });
    }
    
    if (agentSearchBtn) {
        agentSearchBtn.addEventListener('click', performAgentSearch);
    }
    
    if (agentAddBtn) {
        agentAddBtn.addEventListener('click', function() {
            openAgentModal();
            loadAgentForm();
        });
    }
    
    bindAgentEditLinks();
    bindAgentDeleteLinks();
    refreshEmptyAgentsMessage();
});

</script>
@endpush
@push('page_css')
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">
<style>
/* Enhanced Modal Validation Styling */
.modal .alert {
    margin-bottom: 1rem;
    border-radius: 0.375rem;
}

.modal .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.modal .form-control.is-invalid,
.modal .form-select.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4m0-1.4-1.4 1.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.modal .form-control.is-invalid:focus,
.modal .form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Loading button styling */
.modal .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.modal .btn .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success toast positioning */
.alert.position-fixed {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Form validation focus enhancement */
.modal .form-control:focus,
.modal .form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
</style>
@endpush