@extends('admin.layouts.layout')
@include('admin.components.date-time-picker')
@section('content')
<div class="template_top">
    <div class="templatetop_bottom rounded-3 p-3">
        <h3 class="m-0">{{ isset($schedule) && $schedule->id ? 'Edit Appointment' : 'Create New Appointment' }}</h3>
        <small class="text-muted">Schedule & Property</small>
    </div>
</div>
<div class="tab-content">
    <div class="tab-pane fade show active" id="home">
        <div class="schudle_details" id="schedule-step1-wrapper">
            <input type="hidden" id="schedule_id" name="schedule_id" value="{{ $schedule->id ?? '' }}">
            
            {{-- Tenant Selection Section --}}
            @if(!session('tenant_id'))
            <div class="schudle_datetime_ctrl">
                <h3>Select Tenant <span class="text-danger">*</span></h3>
                <div class="white_box">
                    <div class="row">
                        <div class="col-lg-4 col-md-4">
                            <div class="form-group mb-0">
                                <label for="tenant_id" class="form-label">Tenant <span class="text-danger">*</span></label>
                                <select name="tenant_id" id="tenant_id" class="form-select js-select2" required>
                                    <option value="">Select Tenant</option>
                                                                        @foreach($tenants as $t)
                                        <option value="{{ $t->id }}" {{ ($currentTenant==$t->id)?'selected':'' }}>{{ $t->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @else
            <input type="hidden" name="tenant_id" id="tenant_id" value="{{ session('tenant_id') }}" />
            @endif
            
            {{-- Evaluation Types Section --}}
            <div class="schudle_datetime_ctrl">
                <h3>Evaluation Types <span class="text-danger">*</span></h3>
                <div class="white_box">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group mb-3">
                                <label for="service_ids" class="form-label">Select Evaluation Types <span class="text-danger">*</span></label>
                                <select name="service_ids[]" id="service_ids" class="form-select js-select2" multiple required style="min-height: 120px;">
                                    @foreach($services ?? [] as $service)
                                        <option value="{{ $service->id }}" 
                                            {{ in_array($service->id, $selectedServiceIds ?? []) ? 'selected' : '' }}
                                            data-description="{{ $service->description }}"
                                            data-short-name="{{ $service->short_name_of_service }}">
                                            {{ $service->service_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text">Select one or more evaluation types for this appointment</div>
                            </div>
                        </div>
                    </div>
                    <div id="selected-services-preview" class="mt-2">
                        {{-- Selected evaluation types will be displayed here --}}
                    </div>
                </div>
            </div>
            
            @php
                // Hydrate primary inspector (prefer is_primary=1) from existing schedule if present
                $__primaryInspectorId = '';
                $__primaryInspectorName = '';
                $__primaryInspectorAvatar = asset('images/no-profile.jpg');
                if(isset($schedule) && $schedule->id){
                    $attached = $schedule->scheduleInspectors()->with('inspector')->get();
                    if($attached->count()){
                        $primaryRow = $attached->firstWhere('is_primary', 1) ?: $attached->sortBy('id')->first();
                        if($primaryRow){
                            $__primaryInspectorId = $primaryRow->inspector_id;
                            if($primaryRow->inspector){
                                $__primaryInspectorName = trim(($primaryRow->inspector->first_name ?? '') . ' ' . ($primaryRow->inspector->last_name ?? '')) ?: 'Inspector';
                                $avatarData = $primaryRow->inspector->avatar ?? null;
                                if(is_array($avatarData) && !empty($avatarData['thumb'])){
                                    $__primaryInspectorAvatar = $avatarData['thumb'];
                                } elseif(is_array($avatarData) && !empty($avatarData['original'])) {
                                    $__primaryInspectorAvatar = $avatarData['original'];
                                }
                            }
                        }
                    }
                }
                // Preferred language removed from design
            @endphp
            <div class="schudle_datetime_ctrl">
                <h3>Schedule Date & Time</h3>
                <div class="white_box">
                    <div class="row">
                        <div class="col-lg-4 col-md-4">
                            <div class="form-group mb-3">
                                <label for="schedule-date" class="form-label">Schedule Date <span class="text-danger">*</span></label>
                                @php($__today = date('Y-m-d'))
                                @php(
                                    $__prefillDateIso = isset($schedule->scheduled_date)
                                        ? $schedule->scheduled_date->format('Y-m-d')
                                        : ($prefilledDate ?? '')
                                )
                                <input type="text" name="date" placeholder="MM-DD-YYYY" id="schedule-date" class="form-control"
                                    value="{{ $__prefillDateIso ? date('m-d-Y', strtotime($__prefillDateIso)) : '' }}"
                                    data-iso="{{ $__prefillDateIso }}"
                                    data-original-iso="{{ $__prefillDateIso }}"
                                    @if(!isset($schedule) || (isset($schedule->scheduled_date) && $schedule->scheduled_date->format('Y-m-d') >= $__today)) min="{{ $__today }}" @endif
                                    required>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Inspector & Time <span class="text-danger">*</span></label>
                                <div id="inspector-availability-box" class="border rounded p-3" style="min-height:100px;font-size:12px;background:#fafafa;">
                                    <div class="text-muted">Select date to load availability...</div>
                                </div>
                                <div id="selected-inspector-summary" class="mt-2 p-2 border rounded bg-light d-none" style="font-size:12px;">
                                    <span class="text-muted">No slot selected.</span>
                                </div>
                                
                                <input type="hidden" name="start_time" id="start_time_hidden" value="{{ $schedule->start_time ?? '' }}" required />
                                <input type="hidden" name="primary_inspector_id" id="primary_inspector_id_hidden" value="{{ $__primaryInspectorId }}" />
                                <input type="hidden" id="preloaded_inspector_name" value="{{ $__primaryInspectorName }}" />
                                <input type="hidden" id="preloaded_inspector_avatar" value="{{ $__primaryInspectorAvatar }}" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Preferred Language removed (not in design) --}}
            
            <div class="schudle_datetime_ctrl">
                <h3>Property Details</h3>
                <div class="white_box">
                    <div class="row">
                        <div class="col-lg-9 col-md-9">
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="address_auto_complete" class="form-label">Search Address <span class="text-danger">*</span></label>
                                        <input type="text" name="address_search" required id="address_auto_complete" class="form-control" placeholder="Search Address" autocomplete="street-address" value="{{ $property->search_location ?? '' }}">
                                    </div>
                                    <input type="hidden" name="latitude" id="lat_hidden" value="{{ $property->latitude ?? '' }}" />
                                    <input type="hidden" name="longitude" id="lng_hidden" value="{{ $property->longitude ?? '' }}" />
                                    <div id="schedule-prop-coords" data-lat="{{ $property->latitude ?? '' }}" data-lng="{{ $property->longitude ?? '' }}" class="d-none"></div>
                                </div>
                                <div class="col-lg-3 col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="address-line-1" class="form-label">Address Line #1 <span class="text-danger">*</span></label>
                                        <input type="text" name="address_line_1" id="address-line-1" class="form-control" placeholder="Address Line #1" autocomplete="address-line1" maxlength="255" value="{{ $property->address_line1 ?? '' }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3">
                                    <div class="form-group mb-3">
                                        <label for="address-line-2" class="form-label">Address Line #2</label>
                                        <input type="text" name="address_line_2" id="address-line-2" class="form-control" placeholder="Address Line #2" autocomplete="address-line2" maxlength="255" value="{{ $property->address_line2 ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="city_auto_complete" class="form-label">City</label>
                                        <input type="text" name="city" id="city_auto_complete" class="form-control" placeholder="City" autocomplete="address-level2" maxlength="100" readonly value="{{ $property->city ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="country_auto_complete" class="form-label">Country</label>
                                        <input type="text" name="country" id="country_auto_complete" class="form-control" placeholder="Country" autocomplete="country-name" maxlength="100" readonly value="{{ $property->country ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="state_auto_complete" class="form-label">State</label>
                                        <input type="text" name="state" id="state_auto_complete" class="form-control" placeholder="State" autocomplete="address-level1" maxlength="100" readonly value="{{ $property->state ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="zip_auto_complete" class="form-label">Postal Code <span class="text-danger">*</span></label>
                                        <input type="text" name="postal_code" id="zip_auto_complete" class="form-control" placeholder="Postal Code" autocomplete="postal-code" maxlength="20" required pattern="[0-9]{5}(-[0-9]{4})?|[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]" title="Enter valid postal code (e.g., 12345, 12345-6789, or K1A 0A6)" value="{{ $property->postal_code ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="square-feet" class="form-label">Square Feet</label>
                                        <input type="number" name="square_feet" id="square-feet" class="form-control" placeholder="Square Feet" min="0" step="1" value="{{ $property->square_feet ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="bedrooms" class="form-label">Bedrooms</label>
                                        <input type="number" name="bedrooms" id="bedrooms" class="form-control" placeholder="Bedrooms" min="0" max="50" step="1" value="{{ $property->bedrooms ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="bathrooms" class="form-label">Bathrooms</label>
                                        <input type="number" name="bathrooms" id="bathrooms" class="form-control" placeholder="Bathrooms" min="0" max="50" step="0.5" value="{{ $property->bathrooms ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group mb-3">
                                        <label for="inspection-note" class="form-label">Additional Notes</label>
                                        <textarea name="inspection_note" id="inspection-note" class="form-control" placeholder="Additional Notes" rows="3" maxlength="1000">{{ $property->inspection_note ?? '' }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <div class="schudle_map">
                                <div id="property-map" style="height:220px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="schudle_datetime_ctrl">
                <h3>Property Images</h3>
                <div class="white_box">
                    <label class="form-label">Attach Images</label>
                    <div class="multi-upload-area" id="property-images-uploader" style="position:relative;border:2px dashed #ced4da;border-radius:6px;padding:25px;text-align:center;cursor:pointer;min-height:140px;">
                        <div class="upload-placeholder m-0" id="property-images-placeholder">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
                            <p class="mt-2 mb-0">Browse / Drag & Drop</p>
                            <small class="text-muted d-block">You can select multiple images (JPEG / PNG up to 5MB each)</small>
                        </div>
                        <input type="file" id="property-images-input" accept="image/*" multiple style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10;" />
                    </div>
                    <div id="property-images-preview" class="d-flex flex-wrap gap-3 mt-3">
                        @if(isset($scheduleImages) && $scheduleImages->count())
                            @foreach($scheduleImages as $img)
                                @php($fileData = \App\Models\Masters\File::file($img))
                                @php($imgPath = $img->cdn->cdn_root . $img->location . '/' . $img->file_name)
                                <div class="property-image-thumb position-relative border rounded" data-file-path="{{ $imgPath }}" style="width:120px;height:110px;overflow:hidden;background:#f8f9fa;">
                                    <img src="{{ $fileData['original'] }}" alt="Image" style="object-fit:cover;width:100%;height:100%;" />
                                    <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1 p-1 btn-remove" title="Remove" style="line-height:1;">&times;</button>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div id="property-images-hidden-inputs">
                        @if(isset($scheduleImages) && $scheduleImages->count())
                            @foreach($scheduleImages as $img)
                                <input type="hidden" name="property_image_paths[]" value="{{ $img->cdn->cdn_root . $img->location . '/' . $img->file_name }}" />
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <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">
                        <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;"></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="whitebg_btn btn py-1">Add Customers</a>
                        </div>
                    </div>
                </div>
                <div class="service_table">
                    <div class="table-responsive">
                        <table class="table align-middle" id="customersTable">
                            <thead>
                                <tr>
                                    <th class="w-15">Customer Name</th>
                                    <th class="w-15">Customer Type</th>
                                    <th class="w-25">Property Access Permission Granted?</th>
                                    <th class="w-20">Email</th>
                                    <th class="w-20">Phone/Mobile</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="customersTbody">
                                @php($existingCustomers = isset($schedule) ? $schedule->scheduleCustomers()->with('customer')->get() : collect())
                                @forelse($existingCustomers as $row)
                                    @php($cust = $row->customer)
                                    @if($cust)
                                    <tr data-customer-id="{{ $cust->id }}" class="schedule-customer-row" data-customer-type="{{ $row->customer_type }}" data-assign-signe="{{ $row->assign_signe }}">
                                        <td><p>{{ $cust->first_name }} {{ $cust->last_name }}</p></td>
                                        <td>
                                            <div class="customer-type-wrapper">
                                                <select class="form-select form-select-sm customer-type-select">
                                                    <option value="">Select</option>
                                                    <option value="1" {{ $row->customer_type==1 ? 'selected' : '' }}>Buyer</option>
                                                    <option value="2" {{ $row->customer_type==2 ? 'selected' : '' }}>Seller</option>
                                                    <option value="3" {{ $row->customer_type==3 ? 'selected' : '' }}>Homeowner</option>
                                                    <option value="4" {{ $row->customer_type==4 ? 'selected' : '' }}>Building Owner</option>
                                                    <option value="5" {{ $row->customer_type==5 ? 'selected' : '' }}>Renter</option>
                                                    <option value="other" {{ !in_array($row->customer_type, [1,2,3,4,5,'',null]) ? 'selected' : '' }}>Other</option>
                                                </select>
                                                <input type="text" class="form-control form-control-sm mt-1 customer-type-other-input {{ !in_array($row->customer_type, [1,2,3,4,5,'',null]) ? '' : 'd-none' }}" placeholder="Specify type..." value="{{ !in_array($row->customer_type, [1,2,3,4,5,'',null]) ? $row->customer_type_other : '' }}">
                                            </div>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm customer-assign-signe-select">
                                                <option value="">Select</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 ?? ''))
                                            @php($mobile = \App\Helpers\Helper::formatPhone($cust->mobile ?? ''))
                                            @php($phoneDisplay = [])
                                            @php($dummy = null) {{-- ensure previous @php block closed correctly --}}
                                            @php($phoneDisplay = array_filter([
                                                $phone ? ('P: '.$phone) : null,
                                                $mobile ? ('M: '.$mobile) : null
                                            ]))
                                            {{ $phoneDisplay ? implode(' | ', $phoneDisplay) : 'N/A' }}
                                        </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') }}" 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>
                                        </td>
                                    </tr>
                                    @endif
                                @empty
                                    <tr class="no-customers-row"><td colspan="6" class="text-center text-muted py-3">There are no customers.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </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>
            {{-- Additional details removed --}}

            <div class="d-flex justify-content-end">
                <div class="contact_btns">
                    <a href="javascript:void(0);" id="btn-save-schedule" class="add_btn btn py-1"><img src="{{ asset('images/save.svg')}}" /> Save Appointment</a>
                </div>
            </div>
        </div> <!-- /.schudle_details -->
    </div> <!-- /.tab-pane -->
</div> <!-- /.tab-content -->
@push('page_script')
@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))

<script src="{{ asset('assets/js/address-autocomplete.js') }}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async&callback=initAddressAutocomplete"></script>
<script>
    const today = moment().startOf('day');
    $('#schedule-date').bootstrapMaterialDatePicker({
        format: 'MM-DD-YYYY',
        clearButton: true,
        weekStart: 1,
        time: false,
        minDate: today,
    });
(function(){
    const input = document.getElementById('property-images-input');
    const previewWrap = document.getElementById('property-images-preview');
    const hiddenWrap = document.getElementById('property-images-hidden-inputs');
    const uploader = document.getElementById('property-images-uploader');
    const uploadUrl = "{{ route('admin.schedule.uploadPropertyImage') }}";
    const MAX_FILES = 20;
    const scheduleId = document.getElementById('schedule_id')?.value || '';
    function makeThumbSkeleton(id){
        const div = document.createElement('div');
        div.className = 'property-image-thumb position-relative border rounded';
        div.style.width = '120px';
        div.style.height = '110px';
        div.style.overflow = 'hidden';
        div.style.background = '#f8f9fa';
        div.setAttribute('data-temp-id', id);
        div.innerHTML = `\n            <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center" style="font-size:11px;padding:5px;">
                <div class="spinner-border text-secondary mb-2" role="status" style="width:1.5rem;height:1.5rem;"></div>
                <span>Uploading...</span>
            </div>
            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1 p-1 btn-remove" title="Remove" style="line-height:1;display:none;">&times;</button>
        `;
        return div;
    }

    function showError(msg){
        if(window.toastr){ toastr.error(msg); } else { alert(msg); }
    }

    function createHidden(path){
        const inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = 'property_image_paths[]';
        inp.value = path;
        hiddenWrap.appendChild(inp);
        return inp;
    }

    function handleFiles(files){
        if(!files || !files.length) return;
        const existing = previewWrap.querySelectorAll('.property-image-thumb').length;
        if(existing + files.length > MAX_FILES){
            showError('Maximum '+MAX_FILES+' images allowed.');
            return;
        }
        [...files].forEach(file => {
            if(!file.type.match(/^image\//)) return showError('Invalid file type: '+file.name);
            if(file.size > 5*1024*1024) return showError('File too large (>5MB): '+file.name);

            const tempId = 'temp_'+Math.random().toString(36).slice(2);
            const skeleton = makeThumbSkeleton(tempId);
            previewWrap.appendChild(skeleton);

            const fd = new FormData();
            fd.append('_token', '{{ csrf_token() }}');
            fd.append('file', file);
            if(scheduleId) fd.append('schedule_id', scheduleId);

            fetch(uploadUrl, { method: 'POST', body: fd })
                .then(async r => {
                    if(!r.ok) throw await r.json().catch(()=>({message:'Upload failed'}));
                    return r.json();
                })
                .then(data => {
                    if(!data.success || !data.url){ throw {message:'Upload failed'}; }
                    skeleton.innerHTML = `
                        <img src="${data.url}" alt="Image" style="object-fit:cover;width:100%;height:100%;">
                        <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1 p-1 btn-remove" title="Remove" style="line-height:1;">&times;</button>
                    `;
                    const hidden = createHidden(data.path);
                    const btn = skeleton.querySelector('.btn-remove');
                    btn.addEventListener('click', () => {
                        skeleton.remove();
                        hidden.remove();
                    });
                })
                .catch(err => {
                    skeleton.remove();
                    const m = err && err.message ? err.message : 'Upload error';
                    showError(m);
                });
        });
    }

    if(input){
        input.addEventListener('change', e => handleFiles(e.target.files));
    }

    // Delegate removal for already loaded images (with data-file-path)
    previewWrap.addEventListener('click', function(e){
        const btn = e.target.closest('.btn-remove');
        if(!btn) return;
        const thumb = btn.closest('.property-image-thumb');
        if(!thumb) return;
        const filePath = thumb.getAttribute('data-file-path');
        thumb.remove();
        if(filePath){
            // remove matching hidden input
            const hidden = [...hiddenWrap.querySelectorAll('input[name="property_image_paths[]"]')].find(i=> i.value.endsWith('/'+filePath.split('/').pop()));
            if(hidden) hidden.remove();
        }
    });

    // Drag & drop support
    ['dragenter','dragover'].forEach(evt => uploader.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); uploader.classList.add('dragging'); }));
    ['dragleave','drop'].forEach(evt => uploader.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); uploader.classList.remove('dragging'); }));
    uploader.addEventListener('drop', e => { handleFiles(e.dataTransfer.files); });
})();
// Map center with stored coordinates (using data attributes to avoid Blade -> JS parsing issues)
document.addEventListener('DOMContentLoaded', function(){
    const coordEl = document.getElementById('schedule-prop-coords');
    if(!coordEl) return;
    const latStr = coordEl.getAttribute('data-lat');
    const lngStr = coordEl.getAttribute('data-lng');
    if(latStr && lngStr && typeof initAddressAutocomplete==='function'){
        setTimeout(function(){
            if(window.__propertyMap){
                const pos = {lat: parseFloat(latStr), lng: parseFloat(lngStr)};
                window.__propertyMap.setCenter(pos);
                if(window.__propertyMarker){ window.__propertyMarker.setPosition(pos); }
                const latHidden = document.getElementById('lat_hidden');
                const lngHidden = document.getElementById('lng_hidden');
                if(latHidden) latHidden.value = latStr;
                if(lngHidden) lngHidden.value = lngStr;
            }
        }, 600);
    }
});
</script>
<script>
// Inspector availability fetch & slot rendering
(function(){
  // --- Date format helpers (UI MM-DD-YYYY <-> ISO YYYY-MM-DD) ---
  function uiToIso(val){
      if(!val) return '';
      val = val.trim();
      if(/^\d{4}-\d{2}-\d{2}$/.test(val)) return val; // already ISO
      if(/^\d{2}-\d{2}-\d{4}$/.test(val)){
          const [mm,dd,yyyy] = val.split('-');
          return `${yyyy}-${mm}-${dd}`;
      }
      return '';
  }
  function isoToUi(val){
      if(!val) return '';
      val = val.trim();
      if(/^\d{4}-\d{2}-\d{2}$/.test(val)){
          const [yyyy,mm,dd] = val.split('-');
          return `${mm}-${dd}-${yyyy}`;
      }
      return val;
  }
  function todayIso(){
      const n = new Date();
      return n.getFullYear()+'-'+String(n.getMonth()+1).padStart(2,'0')+'-'+String(n.getDate()).padStart(2,'0');
  }
  const dateInput = document.querySelector('input[name="date"]');
    // Enforce min date client-side in case browser (or cached HTML) missed attribute
    try {
            if(dateInput){
            // Use local date instead of UTC to avoid off-by-one issues (was using toISOString UTC)
            const now = new Date();
            const todayStr = now.getFullYear()+'-'+String(now.getMonth()+1).padStart(2,'0')+'-'+String(now.getDate()).padStart(2,'0');
                    if(!dateInput.getAttribute('min')){ dateInput.setAttribute('min', todayStr); }
                    // Normalize existing UI value to ISO for comparison
                    const curIso = uiToIso(dateInput.value);
                    if(curIso && curIso < todayStr){
                            // If a past date somehow present (e.g. editing an old schedule), leave it so user can view
                            // but prevent changing back to another past date by locking min.
                            // We only auto-correct if creating new (no schedule_id hidden value)
                            const schedId = document.getElementById('schedule_id')?.value;
                            if(!schedId){
                                dateInput.value = isoToUi(todayStr);
                                dateInput.setAttribute('data-iso', todayStr);
                            }
                    }
                    // If data-iso attribute exists (prefill) ensure value matches UI format
                    const preIso = dateInput.getAttribute('data-iso');
                    if(preIso && !/^\d{2}-\d{2}-\d{4}$/.test(dateInput.value)){
                        dateInput.value = isoToUi(preIso);
                    } else if(!preIso){
                        // set if derived
                        const derivedIso = uiToIso(dateInput.value);
                        if(derivedIso) dateInput.setAttribute('data-iso', derivedIso);
                    }
            }
    } catch(e) { /* silent */ }
  const tenantInput = document.querySelector('input[name="tenant_id"], select[name="tenant_id"]');
  const startTimeInput = document.getElementById('start_time_hidden');
  const inspectorHidden = document.getElementById('primary_inspector_id_hidden');
  const availabilityBox = document.getElementById('inspector-availability-box');
  const summaryBox = document.getElementById('selected-inspector-summary');
  const originalDateIso = dateInput?.getAttribute('data-original-iso') || '';
  const originalInspectorId = inspectorHidden?.value || '';
  const originalTime = startTimeInput?.value || '';
  
  // Track if date has been changed from original (for rescheduling)
  let isRescheduling = false;
  
  // Helper to format time in 12h format
  function to12h(t){
      if(!t) return '';
      t = t.trim();
      if(/\s/.test(t)) { t = t.split(/\s+/).pop(); }
      if(!/^\d{2}:\d{2}(:\d{2})?$/.test(t)) return t || '';
      const parts = t.split(':');
      let h = parseInt(parts[0],10); const m = parts[1];
      const ampm = h >= 12 ? 'PM' : 'AM';
      h = h % 12; if(h === 0) h = 12;
      return h + ':' + m + ' ' + ampm;
  }
  
  // Function to clear inspector selection when rescheduling
  function clearInspectorSelection() {
      if(startTimeInput) startTimeInput.value = '';
      if(inspectorHidden) inspectorHidden.value = '';
      if(summaryBox) {
          summaryBox.innerHTML = '<span class="text-warning"><i class="fas fa-exclamation-triangle me-1"></i>Please select a new inspector and time slot.</span>';
          summaryBox.classList.remove('d-none');
          summaryBox.classList.remove('bg-light');
          summaryBox.classList.add('bg-warning-subtle');
      }
  }
  
  // Function to check if date was changed from original
  function checkDateChanged() {
      const currentIso = uiToIso(dateInput?.value || '');
      return originalDateIso && currentIso && currentIso !== originalDateIso;
  }
  
  if(!dateInput || !tenantInput || !availabilityBox) return;
  function renderAvailability(list){
      if(!Array.isArray(list) || !list.length){
          availabilityBox.innerHTML = '<div class="text-danger" style="font-size:12px;">No available slots for selected date.</div>';
          return;
      }
      
      // Add custom styles
      let html = `
      <style>
          .inspector-card { 
              background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
              border: 1px solid #e0e0e0;
              border-radius: 10px;
              padding: 12px;
              margin-bottom: 10px;
              transition: box-shadow 0.2s;
          }
          .inspector-card:hover {
              box-shadow: 0 2px 8px rgba(0,0,0,0.1);
          }
          .inspector-header {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              padding-bottom: 8px;
              border-bottom: 1px solid #eee;
          }
          .inspector-avatar {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              object-fit: cover;
              border: 2px solid #384048;
              margin-right: 10px;
          }
          .inspector-name {
              font-size: 13px;
              font-weight: 600;
              color: #384048;
          }
          .inspector-working-hours {
              font-size: 10px;
              color: #6c757d;
          }
          .slots-container {
              display: flex;
              flex-wrap: wrap;
              gap: 6px;
              max-height: 120px;
              overflow-y: auto;
          }
          .availability-slot {
              font-size: 11px !important;
              padding: 4px 10px !important;
              border-radius: 15px !important;
              border: 1px solid #28a745 !important;
              background: #fff !important;
              color: #28a745 !important;
              transition: all 0.2s !important;
              white-space: nowrap;
          }
          .availability-slot:hover {
              background: #28a745 !important;
              color: #fff !important;
              transform: scale(1.05);
          }
          .availability-slot.active {
              background: #384048 !important;
              border-color: #384048 !important;
              color: #fff !important;
              box-shadow: 0 2px 6px rgba(56, 64, 72, 0.3);
          }
          .slot-passed {
              font-size: 10px;
              padding: 3px 8px;
              border-radius: 10px;
              background: #e9ecef;
              color: #6c757d;
              text-decoration: line-through;
              display: inline-block;
          }
          .availability-scroll {
              max-height: 350px;
              overflow-y: auto;
              padding-right: 5px;
          }
      </style>
      `;
      
      // Show reschedule notice if date was changed
      if(isRescheduling) {
          html += '<div class="alert alert-info py-1 px-2 mb-2" style="font-size:11px;"><i class="fas fa-info-circle me-1"></i>Date changed. Please select a new inspector and time slot below.</div>';
      }
      
      html += '<div class="mb-2" style="font-size:13px; font-weight:600; color:#384048;"><i class="fas fa-users me-1"></i> Available Inspectors & Slots</div>';
      html += '<div class="availability-scroll">';
      html += '<div class="row g-2">';
      
      // NOTE: The backend already filters out passed slots based on tenant's timezone
      // All slots returned are valid and available - no client-side filtering needed
      
      list.forEach(item => {
          const iid = item.inspector_id;
          const name = item.name || ('Inspector #' + iid);
          const avatar = item.avatar || "{{ asset('images/no-profile.jpg') }}";
          const rawSlots = Array.isArray(item.available_slots_raw) ? item.available_slots_raw : (item.available_slots_raw ? [item.available_slots_raw] : []);
          const workingHours = item.working_hours ? `${item.working_hours.start} - ${item.working_hours.end}` : '';
          
          // Display labels: prefer 12h formatted array item.available_slots when raw provided; else derive basic label
          let displaySlots = [];
          if(rawSlots.length && Array.isArray(item.available_slots) && item.available_slots.length === rawSlots.length){
              displaySlots = item.available_slots; // already formatted 12h
          } else {
              // Fallback: format raw to 12h
              displaySlots = rawSlots.map(rs => {
                  if(!/^\d{2}:\d{2}(:\d{2})?$/.test(rs)) return rs;
                  const [hStr,mStr] = rs.split(':');
                  let h = parseInt(hStr,10);
                  const ampm = h >= 12 ? 'PM' : 'AM';
                  h = h % 12; if(h===0) h=12;
                  return h + ':' + mStr + ' ' + ampm;
              });
          }
          
          // All slots from backend are already filtered - count them directly
          const availableCount = rawSlots.length;
          
          html += '<div class="col-12 col-md-6">';
          html += '<div class="inspector-card">';
          html += `<div class="inspector-header">
                      <img src="${avatar}" class="inspector-avatar" alt="${name}" onerror="this.src='{{ asset('images/no-profile.jpg') }}'">
                      <div>
                          <div class="inspector-name">${name}</div>
                          ${workingHours ? `<div class="inspector-working-hours"><i class="fas fa-clock me-1"></i>${workingHours}</div>` : ''}
                          <div class="inspector-working-hours"><i class="fas fa-check-circle me-1 text-success"></i>${availableCount} slots available</div>
                      </div>
                  </div>`;
          html += '<div class="slots-container">';
          
          // All slots from backend are already valid (passed slots filtered by server using tenant timezone)
          rawSlots.forEach((raw, idx) => {
              const label = displaySlots[idx] || raw;
              html += `<button type="button" class="btn availability-slot" data-slot="${raw}" data-inspector="${iid}" data-name="${name.replace(/"/g,'&quot;')}" data-avatar="${avatar}" title="Select ${label}">${label}</button>`;
          });
          
          html += '</div>'; // slots-container
          html += '</div></div>'; // inspector-card + col
      });
      
      html += '</div></div>'; // row + availability-scroll
      html += '<div class="mt-2 text-center" style="font-size:11px; color:#6c757d;"><i class="fas fa-hand-pointer me-1"></i>Click a time slot to select</div>';
      availabilityBox.innerHTML = html;
      
      availabilityBox.querySelectorAll('.availability-slot').forEach(btn => {
          btn.addEventListener('click', () => {
              const slot = btn.getAttribute('data-slot');
              const inspectorId = btn.getAttribute('data-inspector');
              if(startTimeInput){ startTimeInput.value = slot; }
              if(inspectorHidden){ inspectorHidden.value = inspectorId; }
              availabilityBox.querySelectorAll('.availability-slot').forEach(b=> b.classList.remove('active'));
              btn.classList.add('active');
              updateSelectedSummary(btn);
          });
      });
  }
  let fetchTimer = null;
  function injectPreviouslySelectedIfMissing(){
      const prevSlot = startTimeInput?.value;
      const prevInspectorId = inspectorHidden?.value;
      if(!prevSlot || !prevInspectorId) return;
      const existingBtn = availabilityBox.querySelector(`.availability-slot[data-slot="${prevSlot}"][data-inspector="${prevInspectorId}"]`);
      if(existingBtn) return;
      const name = document.getElementById('preloaded_inspector_name')?.value || 'Selected Inspector';
    const avatar = document.getElementById('preloaded_inspector_avatar')?.value || "{{ asset('images/no-profile.jpg') }}";
      const label = prevSlot === '09:00:00' ? '9:00' : (prevSlot === '14:00:00' ? '14:00' : prevSlot);
      const wrapper = document.createElement('div');
      wrapper.className = 'row g-2';
      availabilityBox.insertBefore(wrapper, availabilityBox.firstChild);
      updateSelectedSummary(null);
  }
  function updateSelectedSummary(sourceBtn){
      const summary = document.getElementById('selected-inspector-summary');
      if(!summary) return;
      let slotVal = startTimeInput?.value || '';
      let inspectorId = inspectorHidden?.value || '';
      let name = '';
      let avatar = '';
      if(sourceBtn){
          slotVal = sourceBtn.getAttribute('data-slot') || slotVal;
          inspectorId = sourceBtn.getAttribute('data-inspector') || inspectorId;
          name = sourceBtn.getAttribute('data-name') || '';
          avatar = sourceBtn.getAttribute('data-avatar') || '';
      } else {
          name = document.getElementById('preloaded_inspector_name')?.value || '';
          avatar = document.getElementById('preloaded_inspector_avatar')?.value || '';
      }
        if (!slotVal || !inspectorId) {
          summary.classList.add('d-none');
          summary.innerHTML = '<span class="text-muted">No slot selected.</span>';
          return;
      }
      summary.classList.remove('d-none');
        // Display only time (strip any date if accidentally stored or passed)
        let rawSlot = slotVal;
        // If slot contains a space (e.g., '2025-10-23 14:00:00'), split and take last part
        if(/\s/.test(rawSlot)) {
            rawSlot = rawSlot.trim().split(/\s+/).pop();
        }
        // Normalize common forms (HH:MM or HH:MM:SS)
        const normalizedSlot = rawSlot.match(/^\d{2}:\d{2}(:\d{2})?$/) ? rawSlot : slotVal;
        const displayLabel = normalizedSlot === '09:00:00' || normalizedSlot === '09:00' ? '9:00' : (normalizedSlot === '14:00:00' || normalizedSlot === '14:00' ? '14:00' : normalizedSlot.replace(/:00$/, ''));
    const defaultAvatar = "{{ asset('images/no-profile.jpg') }}";
    const finalAvatar = (avatar && avatar.trim()) ? avatar : defaultAvatar;
    const safeName = (name || ('Inspector #'+inspectorId)).replace(/`/g,'`');
    summary.innerHTML = `<div class="d-flex align-items-center"><img src="${finalAvatar}" style="width:30px;height:30px;object-fit:cover;border-radius:50%;" class="me-2" alt="${safeName}"><div><div style="font-weight:600;">${safeName}</div><div class="text-muted">Selected Time: ${displayLabel}</div></div></div>`;
  }
    function loadAvailability(){
            const dateUi = dateInput.value; const tenantId = tenantInput.value;
            const dateIso = uiToIso(dateUi);
            if(!dateIso || !tenantId){ return; }
      availabilityBox.innerHTML = '<span class="text-muted" style="font-size:12px;">Loading availability...</span>';
    const scheduleId = document.getElementById('schedule_id')?.value || '';
    
    // Get selected evaluation type IDs for dynamic duration calculation
    const serviceSelect = document.getElementById('service_ids');
    const serviceIds = serviceSelect ? Array.from(serviceSelect.selectedOptions).map(opt => opt.value) : [];

    // Build URL with evaluation type IDs
    let url = `{{ route('admin.schedule.inspector-availability-dynamic') }}?scheduled_date=${encodeURIComponent(dateIso)}&tenant_id=${encodeURIComponent(tenantId)}`;
    if (scheduleId) url += `&schedule_id=${encodeURIComponent(scheduleId)}`;
    serviceIds.forEach(id => { url += `&service_ids[]=${encodeURIComponent(id)}`; });
    
      fetch(url)
         .then(r=> r.json())
         .then(data => {
             // Show appointment duration and timezone info
             const duration = data.duration || 60;
             const timezone = data.timezone || 'UTC';
             const currentTime = data.current_time || '';
             let durationHtml = `<div class="mb-2 d-flex justify-content-between align-items-center" style="font-size:11px;">`;
             durationHtml += `<span class="text-info"><i class="fas fa-clock me-1"></i>Appointment duration: ${duration} minutes</span>`;
             durationHtml += `<span class="text-muted"><i class="fas fa-globe me-1"></i>Timezone: ${timezone}${currentTime ? ' ('+currentTime+')' : ''}</span>`;
             durationHtml += `</div>`;
             
             if (data.data && data.data.length > 0) {
                 renderAvailabilityDynamic(data.data, durationHtml);
             } else {
                 availabilityBox.innerHTML = durationHtml + '<div class="text-danger" style="font-size:12px;">No available slots for selected date.</div>';
             }
             
             // Auto-select previously stored slot if present
             const prevSlot = startTimeInput?.value;
             const prevInspectorId = inspectorHidden?.value;
             if(prevSlot){
                 // Build alternative forms (HH:MM vs HH:MM:SS)
                 const altSlots = [];
                 if(/^\d{2}:\d{2}$/.test(prevSlot)){ altSlots.push(prevSlot, prevSlot+':00'); }
                 else if(/^\d{2}:\d{2}:\d{2}$/.test(prevSlot)){ altSlots.push(prevSlot, prevSlot.slice(0,5)); }
                 else { altSlots.push(prevSlot); }
                 let matchBtn = null;
                 for(const s of altSlots){
                     const baseSel = `.availability-slot[data-slot="${s}"]`;
                     const fullSel = prevInspectorId ? baseSel + `[data-inspector="${prevInspectorId}"]` : baseSel;
                     matchBtn = availabilityBox.querySelector(fullSel) || availabilityBox.querySelector(baseSel);
                     if(matchBtn) break;
                 }
                 if(matchBtn){
                     matchBtn.click();
                 } else {
                     injectPreviouslySelectedIfMissing();
                 }
             }
         })
         .catch(()=>{ availabilityBox.innerHTML = '<div class="text-danger" style="font-size:12px;">Failed to load availability.</div>'; });
  }
  
  // Render availability from dynamic endpoint
  function renderAvailabilityDynamic(inspectors, durationHtml) {
      if (!Array.isArray(inspectors) || !inspectors.length) {
          availabilityBox.innerHTML = durationHtml + '<div class="text-danger" style="font-size:12px;">No available slots for selected date.</div>';
          return;
      }
      
      let html = durationHtml;
      html += '<div class="inspector-availability-list">';
      
      inspectors.forEach(insp => {
          const name = insp.name || 'Inspector';
          const avatar = insp.avatar || "{{ asset('images/no-profile.jpg') }}";
          const inspectorId = insp.inspector_id;
          const workingHours = insp.working_hours ? `${insp.working_hours.start} - ${insp.working_hours.end}` : '';
          const slots = insp.available_slots || [];
          const slotsRaw = insp.available_slots_raw || [];
          
          html += `<div class="inspector-card mb-2 p-2 border rounded" style="font-size:12px;">`;
          html += `<div class="d-flex align-items-center mb-2">`;
          html += `<img src="${avatar}" style="width:32px;height:32px;object-fit:cover;border-radius:50%;" class="me-2" alt="${name}">`;
          html += `<div><strong>${name}</strong>`;
          if (workingHours) html += `<br><span class="text-muted" style="font-size:10px;">Working: ${workingHours}</span>`;
          html += `</div></div>`;
          
          if (slots.length > 0) {
              html += `<div class="d-flex flex-wrap gap-1">`;
              slots.forEach((slot, idx) => {
                  const rawSlot = slotsRaw[idx] || slot;
                  html += `<button type="button" class="btn btn-sm btn-outline-primary availability-slot" 
                      data-inspector="${inspectorId}" 
                      data-slot="${rawSlot}" 
                      data-avatar="${avatar}" 
                      data-name="${name}"
                      style="font-size:11px;padding:2px 8px;">${slot}</button>`;
              });
              html += `</div>`;
          } else {
              html += `<span class="text-muted">No available slots</span>`;
          }
          
          html += `</div>`;
      });
      
      html += '</div>';
      availabilityBox.innerHTML = html;
      
      // Attach click handlers for slots
      availabilityBox.querySelectorAll('.availability-slot').forEach(btn => {
          btn.addEventListener('click', function() {
              // Remove selected class from all slots
              availabilityBox.querySelectorAll('.availability-slot').forEach(b => {
                  b.classList.remove('btn-primary');
                  b.classList.add('btn-outline-primary');
              });
              // Add selected class to clicked slot
              this.classList.remove('btn-outline-primary');
              this.classList.add('btn-primary');
              
              // Update hidden fields
              const inspectorId = this.dataset.inspector;
              const slot = this.dataset.slot;
              const avatar = this.dataset.avatar;
              const name = this.dataset.name;
              
              if (inspectorHidden) inspectorHidden.value = inspectorId;
              if (startTimeInput) startTimeInput.value = slot;
              
              // Update summary
              updateSummaryBox(inspectorId, slot, avatar, name);
          });
      });
  }
  dateInput.addEventListener('change', () => {
      // Update data-iso attribute after picker change
      const iso = uiToIso(dateInput.value);
      if(iso){ dateInput.setAttribute('data-iso', iso); }
      // Clear inspector selection when date changes (for rescheduling)
      if(checkDateChanged()) {
          isRescheduling = true;
          clearInspectorSelection();
      }
      clearTimeout(fetchTimer); fetchTimer = setTimeout(loadAvailability, 250);
  });
  // Extra bindings in case plugin doesn't fire native change consistently
  if(window.jQuery){
      jQuery('#schedule-date').on('keyup blur', function(){
          const iso = uiToIso(this.value);
          if(iso){ this.setAttribute('data-iso', iso); }
          // Clear inspector selection when date changes (for rescheduling)
          if(checkDateChanged()) {
              isRescheduling = true;
              clearInspectorSelection();
          }
          clearTimeout(fetchTimer); fetchTimer = setTimeout(loadAvailability, 250);
      });
  }
  // Fallback: poll for value change if user picks via datepicker widget
  let lastDateVal = dateInput.value;
  setInterval(function(){
      const currentVal = dateInput.value;
      if(currentVal !== lastDateVal){
          lastDateVal = currentVal;
          const iso = uiToIso(currentVal);
          if(iso){ dateInput.setAttribute('data-iso', iso); }
          // Clear inspector selection when date changes (for rescheduling)
          if(checkDateChanged()) {
              isRescheduling = true;
              clearInspectorSelection();
          }
          clearTimeout(fetchTimer); fetchTimer = setTimeout(loadAvailability, 150);
      }
  }, 800);
  // Initial load on page ready if date prefilled (e.g., coming back from Step2/Step3 or editing)
  if(uiToIso(dateInput.value) && tenantInput.value){
      // Show current selection summary if editing an existing schedule
      const preloadedName = document.getElementById('preloaded_inspector_name')?.value;
      const preloadedTime = startTimeInput?.value;
      if(preloadedName && preloadedTime && summaryBox){
          const timeDisplay = to12h(preloadedTime);
          summaryBox.innerHTML = `<strong>Current:</strong> ${preloadedName} at ${timeDisplay} <span class="text-muted ms-2">(Change date to reschedule)</span>`;
          summaryBox.classList.remove('d-none');
      }
      setTimeout(loadAvailability, 200);
  }

  // Convert date back to ISO before form submission (Save / Next buttons)
  function normalizeBeforeSubmit(){
      if(!dateInput) return;
      const iso = uiToIso(dateInput.value);
      if(iso){ dateInput.value = iso; }
  }
    document.getElementById('btn-save-schedule')?.addEventListener('click', normalizeBeforeSubmit);
})();
</script>
<script>
// Submit (Save / Next) logic
(function(){
    const saveBtn = document.getElementById('btn-save-schedule');
    const nextBtn = null; // next button removed
    const wrapper = document.getElementById('schedule-step1-wrapper');
    const scheduleIdInput = document.getElementById('schedule_id');
    const addressSearchInput = document.getElementById('address_auto_complete');
    const addressLine1Input = document.getElementById('address-line-1');

    // Auto-fill address fields from autocomplete selection
    if(addressSearchInput && addressLine1Input){
        // Fallback: if user manually types and leaves the search field, copy to Address Line #1 if empty
        addressSearchInput.addEventListener('blur', function(){
            if(!addressLine1Input.value.trim() && this.value.trim()){
                addressLine1Input.value = this.value.trim();
            }
        });
        
        // Enhanced autocomplete handler with detailed address components
        document.addEventListener('address:autocomplete:selected', function(e){
            if(!e.detail) return;
            
            // Fill Address Line #1 with street address (street number + route)
            if(e.detail.street_address && addressLine1Input){
                addressLine1Input.value = e.detail.street_address;
            }
            
            // Fill other address fields from the detail
            const cityEl = document.getElementById('city_auto_complete');
            const stateEl = document.getElementById('state_auto_complete');
            const countryEl = document.getElementById('country_auto_complete');
            const postalEl = document.getElementById('zip_auto_complete');
            
            if(cityEl && e.detail.city) cityEl.value = e.detail.city;
            if(stateEl && e.detail.state) stateEl.value = e.detail.state;
            if(countryEl && e.detail.country) countryEl.value = e.detail.country;
            if(postalEl && e.detail.postal_code) postalEl.value = e.detail.postal_code;
        });
    }

    function gatherData(){
        const fd = new FormData();
        function toIso(val){
            if(!val) return '';
            val = val.trim();
            if(/^\d{4}-\d{2}-\d{2}$/.test(val)) return val;            // already ISO
            if(/^\d{2}-\d{2}-\d{4}$/.test(val)){                       // MM-DD-YYYY -> YYYY-MM-DD
                const [mm,dd,yyyy] = val.split('-');
                return `${yyyy}-${mm}-${dd}`;
            }
            // Try Date parse fallback
            const d = new Date(val);
            if(!isNaN(d.getTime())){
                const ym = d.getFullYear();
                const m = String(d.getMonth()+1).padStart(2,'0');
                const day = String(d.getDate()).padStart(2,'0');
                return `${ym}-${m}-${day}`;
            }
            return val;
        }
        const fields = [
            'schedule_id','date','time','tenant_id','address_search','address_line_1','address_line_2','city','country','state','postal_code','square_feet','bedrooms','bathrooms','inspection_note','latitude','longitude','primary_inspector_id'
        ];
        fields.forEach(id=>{
            const el = document.getElementById(id.replace(/-/g,'_')) || document.getElementById(id) || document.querySelector('[name="'+id+'"]');
            if(el && el.value !== undefined){
                if(id === 'date'){ fd.append(id, toIso(el.value)); }
                else fd.append(id, el.value);
            }
        });
        // Force ISO for scheduled_date from #schedule-date
        const schedVal = document.getElementById('schedule-date')?.value || '';
        fd.append('scheduled_date', toIso(schedVal));
    fd.append('start_time', document.getElementById('start_time_hidden')?.value || '');
        // Radios
        // Additional details removed
        
        // Evaluation Types (multi-select)
        const serviceSelect = document.getElementById('service_ids');
        if (serviceSelect) {
            Array.from(serviceSelect.selectedOptions).forEach(opt => {
                fd.append('service_ids[]', opt.value);
            });
        }
        
        // Images
        document.querySelectorAll('input[name="property_image_paths[]"]').forEach(i=> fd.append('property_image_paths[]', i.value));
        // Customers
        const customerRows = document.querySelectorAll('#customersTbody tr.schedule-customer-row[data-customer-id]');
        let cIndex = 0;
        customerRows.forEach(row => {
            const cid = row.getAttribute('data-customer-id');
            if(!cid) return;
            // get selects (allow user edits)
            const typeSel = row.querySelector('.customer-type-select');
            const typeOtherInput = row.querySelector('.customer-type-other-input');
            const signeSel = row.querySelector('.customer-assign-signe-select');
            let cType = typeSel ? typeSel.value : (row.getAttribute('data-customer-type')||'');
            const cTypeOther = typeOtherInput ? typeOtherInput.value.trim() : '';
            const assignSigne = signeSel ? signeSel.value : (row.getAttribute('data-assign-signe')||'');
            fd.append(`customers[${cIndex}][customer_id]`, cid);
            if(cType) fd.append(`customers[${cIndex}][customer_type]`, cType);
            if(cType === 'other' && cTypeOther) fd.append(`customers[${cIndex}][customer_type_other]`, cTypeOther);
            if(assignSigne) fd.append(`customers[${cIndex}][assign_signe]`, assignSigne);
            cIndex++;
        });
        return fd;
    }

    function submit(goNext){
        // Basic client validation
    const tenantEl = document.getElementById('tenant_id');
    const dateEl = document.getElementById('schedule-date');
    // Removed legacy time dropdown; use hidden start_time populated by slot buttons
    const startTimeHidden = document.getElementById('start_time_hidden');
        if(tenantEl && tenantEl.hasAttribute('required') && !tenantEl.value){
            if(window.toastr) toastr.error('Tenant is required'); else alert('Tenant is required');
            tenantEl.focus();
            return;
        }
        if(dateEl && dateEl.hasAttribute('required') && !dateEl.value){
            if(window.toastr) toastr.error('Schedule date is required'); else alert('Schedule date is required');
            dateEl.focus();
            return;
        }
        // Require a selected slot (start_time)
        if(startTimeHidden && startTimeHidden.hasAttribute('required') && !startTimeHidden.value){
            if(window.toastr) toastr.error('Please select an inspector time slot'); else alert('Please select an inspector time slot');
            return;
        }
        // Require at least one evaluation type
        const serviceSelect = document.getElementById('service_ids');
        if(serviceSelect && serviceSelect.selectedOptions.length === 0){
            if(window.toastr) toastr.error('Please select at least one evaluation type'); else alert('Please select at least one evaluation type');
            // Focus availability box for visibility
            const availBox = document.getElementById('inspector-availability-box');
            if(availBox) availBox.scrollIntoView({behavior:'smooth', block:'center'});
            return;
        }
        // Address Line #1 required check
        const addr1 = document.getElementById('address-line-1');
        if(addr1 && addr1.hasAttribute('required') && !addr1.value.trim()){
            if(window.toastr){ toastr.error('Address Line #1 is required'); } else { alert('Address Line #1 is required'); }
            addr1.focus();
            return;
        }
        const adds = document.getElementById('address_auto_complete');
        if(adds && adds.hasAttribute('required') && !adds.value.trim()){
            if(window.toastr){ toastr.error('Address search is required'); } else { alert('Address search is required'); }
            adds.focus();
            return;
        }
        const postalCode = document.getElementById('zip_auto_complete');
        if(postalCode && postalCode.hasAttribute('required') && !postalCode.value.trim()){
            if(window.toastr){ toastr.error('Postal Code is required'); } else { alert('Postal Code is required'); }
            postalCode.focus();
            return;
        }
        // Preferred language removed from design; validation skipped
        const fd = gatherData();
        if(goNext) fd.append('go_next','1');
        const btn = goNext ? nextBtn : saveBtn;
        const originalHtml = btn.innerHTML;
        btn.classList.add('disabled');
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';    
        // jQuery AJAX version
        if(window.__step1Req && window.__step1Req.readyState !== 4){
            window.__step1Req.abort();
        }
        window.__step1Req = $.ajax({
            url: "{{ route('admin.schedule.step1.store') }}",
            type: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(json){
            if(json.success){
                if(window.toastr){ toastr.success(json.message); }
                if(json.schedule_id){ scheduleIdInput.value = json.schedule_id; }
                // Always redirect to list after successful save in single-step flow
                window.location.href = "{{ route('admin.schedule.list') }}";
            } else {
                if(window.toastr){ toastr.error(json.message || 'Failed to save'); }
            }
            },
            error: function(xhr){
            let msg = 'Error saving schedule';
            if(xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors){
                msg = Object.values(xhr.responseJSON.errors).map(a=>a.join ? a.join(', ') : a).join('; ');
            } else if(xhr.responseJSON && xhr.responseJSON.message){
                msg = xhr.responseJSON.message;
            }
            if(window.toastr){ toastr.error(msg); } else { alert(msg); }
            },
            complete: function(){
            btn.classList.remove('disabled');
            btn.innerHTML = originalHtml;
            }
        });
    }
    if(saveBtn) saveBtn.addEventListener('click', ()=> submit(false));
})();

// Customer modal & search logic (EXACT style from Step2 adapted for Step1 pre-schedule)
(function(){
  const searchInput = document.getElementById('customerSearchInput');
  const searchBtn   = document.getElementById('customerSearchBtn');
  const searchBox   = document.getElementById('customerSearchResults');
  const tbody       = document.getElementById('customersTbody');
  const addBtn      = document.getElementById('btnAddCustomer');
  const modalEl     = document.getElementById('customerCreateModal');
  const modalBody   = document.getElementById('customerCreateModalBody');
  const scheduleId  = document.getElementById('schedule_id')?.value || '';
  const tenantId    = document.getElementById('tenant_id')?.value || '';
  const searchEndpoint = "{{ route('admin.schedule.customers.search') }}"; // existing lightweight endpoint
  const createEndpoint = "{{ route('customers.create') }}"; // resource create (supports from_modal)
  let bsModal = null, modalAutocompleteInstance = null, modalObserver = null;

  // Init / relocate modal
  if(window.bootstrap?.Modal){ bsModal = new bootstrap.Modal(modalEl); }
  if(modalEl && modalEl.parentElement !== document.body){ document.body.appendChild(modalEl); }

  // SEARCH
  function hideSearch(){ searchBox.classList.add('d-none'); searchBox.innerHTML=''; }
  function performSearch(){
    const q=(searchInput?.value||'').trim(); if(!q){ hideSearch(); return; }
    searchBox.innerHTML='<div class="p-2 small text-muted">Searching...</div>'; searchBox.classList.remove('d-none');
    fetch(`${searchEndpoint}?q=${encodeURIComponent(q)}&schedule_id=${encodeURIComponent(scheduleId)}`,{headers:{'X-Requested-With':'XMLHttpRequest'}})
      .then(r=>r.json())
      .then(json=>{
        const list=json?.data||[]; if(!list.length){ searchBox.innerHTML='<div class="p-2 small text-muted">No matches.</div>'; return; }
        searchBox.innerHTML=list.map(c=>{
          const name=((c.first_name||'')+' '+(c.last_name||'')).trim()||'(No 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}</strong><br/><small>${c.email||''}${c.phone? ' | '+c.phone:''}${c.mobile? ' | Mobile: '+c.mobile:''}</small>
          </div>`;
        }).join('');
        bindSearchClicks();
      })
      .catch(()=>{ searchBox.innerHTML='<div class="p-2 small text-danger">Error.</div>'; });
  }
  function bindSearchClicks(){ 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){} hideSearch(); if(searchInput) searchInput.value=''; }); }); }
  document.addEventListener('click', e=>{ if(searchBox && !searchBox.contains(e.target) && e.target!==searchInput){ hideSearch(); } });
  if(searchInput){ let t=null; searchInput.addEventListener('keyup', e=>{ clearTimeout(t); if(e.key==='Enter'){ performSearch(); return; } t=setTimeout(performSearch,400); }); }
  if(searchBtn) searchBtn.addEventListener('click', performSearch);

  // ROW HELPERS
  function refreshEmptyMsg(){ if(!tbody) return; const has=tbody.querySelector('tr[data-customer-id]'); const msg=tbody.querySelector('tr.no-customers-row'); if(!has && !msg){ 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(has && msg){ msg.remove(); } }
  function formatPhone(phone){ if(!phone) return ''; const d=phone.replace(/\D/g,''); if(d.length===10) return `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`; if(d.length===11 && d[0]==='1'){ const p=d.slice(1); return `(${p.slice(0,3)}) ${p.slice(3,6)}-${p.slice(6)}`;} return phone; }
  function phoneDisplay(p,m){ const arr=[]; if(p) arr.push('P: '+formatPhone(p)); if(m) arr.push('M: '+formatPhone(m)); return arr.length? arr.join(' | '):'N/A'; }
  function appendCustomerRow(c){ if(!tbody||!c) return; if(tbody.querySelector(`tr[data-customer-id='${c.id}']`)){ updateCustomerRow(c); return; }
    const tr=document.createElement('tr'); tr.setAttribute('data-customer-id', c.id); tr.className='schedule-customer-row';
    tr.innerHTML=`<td><p>${(c.first_name||'')+' '+(c.last_name||'')}</p></td>
      <td><div class='customer-type-wrapper'><select class='form-select form-select-sm customer-type-select'><option value=''>Select</option><option value='1'>Buyer</option><option value='2'>Seller</option><option value='3'>Homeowner</option><option value='4'>Building Owner</option><option value='5'>Renter</option><option value='other'>Other</option></select><input type='text' class='form-control form-control-sm mt-1 customer-type-other-input d-none' placeholder='Specify type...'></div></td>
      <td><select class='form-select form-select-sm customer-assign-signe-select'><option value=''>Select</option><option value='1'>Yes</option><option value='2'>No</option></select></td>
      <td><a href='mailto:${c.email||''}'>${c.email||''}</a></td>
      <td>${phoneDisplay(c.phone||'', c.mobile||'')}</td>
      <td><div class='d-flex gap-2'><a href='javascript:void(0);' class='customer-edit' data-id='${c.id}'><img src='{{ asset('images/edit.svg') }}' /></a><a href='javascript:void(0);' class='customer-delete text-danger' data-id='${c.id}'><img src='{{ asset('images/delete.svg') }}' /></a></div></td>`;
    const newName=((c.first_name||'')+' '+(c.last_name||'')).trim().toLowerCase(); let inserted=false; const rows=[...tbody.querySelectorAll('tr[data-customer-id]')];
    for(const row of rows){ const existing=(row.querySelector('td p')?.textContent||'').trim().toLowerCase(); if(newName.localeCompare(existing)<0){ tbody.insertBefore(tr,row); inserted=true; break; } }
    if(!inserted) tbody.appendChild(tr); bindEditLinks(tr); bindDeleteLinks(tr); refreshEmptyMsg(); }
    function updateCustomerRow(c){ const row=tbody?.querySelector(`tr[data-customer-id='${c.id}']`); if(!row) return; row.children[0].innerHTML=`<p>${(c.first_name||'')+' '+(c.last_name||'')}</p>`; row.children[3].innerHTML=`<a href='mailto:${c.email||''}'>${c.email||''}</a>`; row.children[4].innerHTML=phoneDisplay(c.phone||'', c.mobile||''); }
  tbody?.addEventListener('click', e=>{ const del=e.target.closest('.customer-delete'); if(!del) return; const id=del.getAttribute('data-id'); const row=tbody.querySelector(`tr[data-customer-id='${id}']`); if(row) row.remove(); refreshEmptyMsg(); });

  // MODAL UTILITIES
  function cleanupModalAutocomplete(){ if(modalAutocompleteInstance){ try{ google.maps.event.clearInstanceListeners(modalAutocompleteInstance);}catch(e){} modalAutocompleteInstance=null; } if(modalObserver){ modalObserver.disconnect(); modalObserver=null; } document.querySelectorAll('.pac-container').forEach(pc=> pc.parentNode&&pc.parentNode.removeChild(pc)); }
  modalEl?.addEventListener('hidden.bs.modal', cleanupModalAutocomplete); modalEl?.addEventListener('hide.bs.modal', cleanupModalAutocomplete);
  function initializeModalAddressAutocomplete(retryCount = 0) {
      const addressInput = modalBody?.querySelector('#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;
            }
        }
        
        // Ensure the browser doesn't auto-complete and interfere with Places UI
        try { addressInput.setAttribute('autocomplete','off'); } catch(e){}

        // If Google Places isn't available yet, inject the script and retry
        if (typeof google === 'undefined' || !google.maps || !google.maps.places) {
            console.log('Google Maps API not ready; injecting script then retrying...');
            if(!document.getElementById('gmaps-places-modal-loader')){
                const s=document.createElement('script');
                s.id='gmaps-places-modal-loader';
                s.src='https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&loading=async';
                s.async=true; s.defer=true;
                s.onload=()=>{ setTimeout(() => initializeModalAddressAutocomplete(retryCount), 300); };
                document.head.appendChild(s);
            } else {
                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');
        
        // Helper to safely extract address components
        function getAddressComponent(place, type, key){
            if(!place || !place.address_components) return '';
            const comp = (place.address_components||[]).find(c => Array.isArray(c.types) && c.types.indexOf(type) !== -1);
            return comp ? (comp[key] || '') : '';
        }

        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 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;
            console.log('Modal place_changed fired with components:', place.address_components);

            // Grab DOM elements within modal
            let stateEl = modalBody?.querySelector('#state_auto_complete');
            let zipEl = modalBody?.querySelector('#zip_auto_complete');
            let latEl = modalBody?.querySelector('#lat_hidden');
            let lngEl = modalBody?.querySelector('#lng_hidden');
            // If fields are missing in the modal form, create lightweight hidden inputs so values persist on submit
            const formEl = modalBody?.querySelector('form');
            if(formEl){
                if(!stateEl){ stateEl = document.createElement('input'); stateEl.type='hidden'; stateEl.id='state_auto_complete'; stateEl.name='state'; formEl.appendChild(stateEl); }
                if(!zipEl){ zipEl = document.createElement('input'); zipEl.type='hidden'; zipEl.id='zip_auto_complete'; zipEl.name='postal_code'; formEl.appendChild(zipEl); }
                if(!latEl){ latEl = document.createElement('input'); latEl.type='hidden'; latEl.id='lat_hidden'; latEl.name='latitude'; formEl.appendChild(latEl); }
                if(!lngEl){ lngEl = document.createElement('input'); lngEl.type='hidden'; lngEl.id='lng_hidden'; lngEl.name='longitude'; formEl.appendChild(lngEl); }
            }

            // 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 = "";
            }
            console.log('Modal fields populated:', {state: stateFull, postal: postalCode, lat: latEl?.value, lng: lngEl?.value});
        });
    }
  function formatPhoneMask(value){ let digits=value.replace(/\D/g,''); if(digits.length>10) digits=digits.slice(0,10); let out=''; if(digits.length>0) out+='('+digits.slice(0,3); if(digits.length>=4) out+=') '+digits.slice(3,6); if(digits.length>=7) out+='-'+digits.slice(6); return out; }
  function initModalPhones(){ modalBody.querySelectorAll('.mobile_number_format, .phone_number_format').forEach(inp=>{ if(inp.value) inp.value=formatPhoneMask(inp.value); const clone=inp.cloneNode(true); inp.parentNode.replaceChild(clone, inp); clone.addEventListener('input', e=>{ e.target.value=formatPhoneMask(e.target.value); }); clone.addEventListener('blur', e=>{ const d=e.target.value.replace(/\D/g,''); if(d.length && d.length<10) e.target.classList.add('is-invalid'); else e.target.classList.remove('is-invalid'); }); }); }
  function initModalPickers(){ $(modalBody).find('.datetimepicker').bootstrapMaterialDatePicker({format:'MM-DD-YYYY HH:mm', clearButton:true, weekStart:1}); $(modalBody).find('.datepicker').bootstrapMaterialDatePicker({format:'MM-DD-YYYY', clearButton:true, weekStart:1, time:false}); $(modalBody).find('.timepicker').bootstrapMaterialDatePicker({format:'HH:mm', clearButton:true, date:false}); }
    // Legacy initializer retained for backward compatibility but unused
    function initModalAddress(){ /* no-op; using initializeModalAddressAutocomplete */ }
  function clearModalErrors(){ if(!modalBody) return; modalBody.querySelectorAll('.is-invalid').forEach(e=> e.classList.remove('is-invalid')); modalBody.querySelectorAll('.invalid-feedback, .alert-danger').forEach(e=> e.remove()); }
  function showModalErrors(resp){ clearModalErrors(); if(resp.errors){ renderFieldErrors(resp.errors); } else if(resp.message){ showErrorAlert(resp.message); } else { showErrorAlert('Validation failed'); } modalBody.scrollTop=0; }
    function renderFieldErrors(errors){ if(!modalBody) return; if(errors.general){ const alert=document.createElement('div'); alert.className='alert alert-danger alert-dismissible fade show'; alert.innerHTML=`${errors.general}<button type='button' class='btn-close' data-bs-dismiss='alert'></button>`; modalBody.insertBefore(alert, modalBody.firstChild); }
        Object.keys(errors).forEach(f=>{ if(f==='general') return; const field=modalBody.querySelector(`[name='${f}']`); if(field){ field.classList.add('is-invalid'); const div=document.createElement('div'); div.className='invalid-feedback'; div.textContent=Array.isArray(errors[f])? errors[f][0]: errors[f]; field.parentNode.insertBefore(div, field.nextSibling); field.addEventListener('input', function handler(){ field.classList.remove('is-invalid'); if(div.parentNode) div.parentNode.removeChild(div); field.removeEventListener('input', handler); }); } }); }
  function showErrorAlert(msg){ if(!modalBody){ alert(msg); return; } const alert=document.createElement('div'); alert.className='alert alert-danger alert-dismissible fade show'; alert.innerHTML=`${msg}<button type='button' class='btn-close' data-bs-dismiss='alert'></button>`; modalBody.insertBefore(alert, modalBody.firstChild); setTimeout(()=>{ alert.remove(); },5000); }
  function showSuccess(msg){ const div=document.createElement('div'); div.className='alert alert-success alert-dismissible fade show position-fixed'; div.style.cssText='top:20px;right:20px;z-index:9999;max-width:400px;'; div.innerHTML=`<i class='fas fa-check-circle me-2'></i>${msg}<button type='button' class='btn-close' data-bs-dismiss='alert'></button>`; document.body.appendChild(div); setTimeout(()=>{ if(div.parentNode){ div.classList.remove('show'); setTimeout(()=> div.remove(),150);} },3000); }
  function bindCustomerForm(){ 
    const form=modalBody.querySelector('form'); 
    if(!form) return; setTimeout(() => {
            initializeModalAddressAutocomplete();
        }, 100); initModalPhones(); initModalPickers(); form.addEventListener('submit', function(e){ e.preventDefault(); const fd=new FormData(form); clearModalErrors(); const btn=form.querySelector('button[type="submit"]'); const original=btn? btn.innerHTML:''; if(btn){ btn.disabled=true; btn.innerHTML='<i class="fas fa-spinner fa-spin me-2"></i>Saving...'; }
      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 resp=>{ const json=await resp.json(); if(btn){ btn.disabled=false; btn.innerHTML=original; } if(resp.ok && json.success){ if(form.querySelector('input[name=_method][value=PUT]')){ updateCustomerRow(json.data); showSuccess('Customer updated'); } else { appendCustomerRow(json.data); showSuccess('Customer added'); } if(bsModal) bsModal.hide(); else modalEl.classList.remove('show'); } else { showModalErrors(json); } })
        .catch(()=>{ if(btn){ btn.disabled=false; btn.innerHTML=original; } showErrorAlert('Network error'); });
    }); }
  function openModal(){ if(bsModal){ bsModal.show(); return; } if(!document.querySelector('.modal-backdrop')){ const backdrop=document.createElement('div'); backdrop.className='modal-backdrop fade show'; document.body.appendChild(backdrop); } document.body.classList.add('modal-open'); modalEl.classList.add('show'); modalEl.style.display='block'; modalEl.removeAttribute('aria-hidden'); modalEl.setAttribute('aria-modal','true'); modalEl.scrollTop=0; }
  function loadCreateForm(){
     cleanupModalAutocomplete(); 
     var tenant_id = document.getElementById('tenant_id')?.value || '';
     const url=`${createEndpoint}?from_modal=1&schedule_id=${encodeURIComponent(scheduleId)}&tenant_id=${encodeURIComponent(tenant_id)}`;
      fetch(url,{headers:{'X-Requested-With':'XMLHttpRequest'}}).then(r=>r.text()).then(html=>{ if(html.indexOf('<form')===-1){ modalBody.innerHTML='<div class="p-3 text-danger">Failed to load form.</div>'; return; } modalBody.innerHTML=html; bindCustomerForm(); }).catch(()=>{ modalBody.innerHTML='<div class="p-3 text-danger">Error loading form.</div>'; }); }
  function loadEditForm(id){ 
    cleanupModalAutocomplete(); 
    var tenant_id = document.getElementById('tenant_id')?.value || '';
    fetch(`/customers/${id}/edit?from_modal=1&tenant_id=${encodeURIComponent(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 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=tbody.querySelector(`tr[data-customer-id='${id}']`); if(row) row.remove(); refreshEmptyMsg(); }; 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=()=>trigger(); document.head.appendChild(s); } else trigger(); function trigger(){ if(window.Swal){ Swal.fire({title:'Delete Customer?', text:'Remove from this list?', icon:'warning', showCancelButton:true, confirmButtonColor:'#d33', confirmButtonText:'Yes, delete'}).then(r=>{ if(r.isConfirmed) doRemove(); }); } else { if(confirm('Remove this customer?')) doRemove(); } } }); }); }
  if(addBtn) addBtn.addEventListener('click', ()=>{ openModal(); loadCreateForm(); });
  bindEditLinks(); bindDeleteLinks(); refreshEmptyMsg();
  
  // Handle customer type "Other" option toggle
  function bindCustomerTypeOtherToggle(scope=document) {
    scope.querySelectorAll('.customer-type-select').forEach(sel => {
      if(sel.dataset.otherBound) return;
      sel.dataset.otherBound = '1';
      sel.addEventListener('change', function() {
        const wrapper = this.closest('.customer-type-wrapper');
        const otherInput = wrapper?.querySelector('.customer-type-other-input');
        if(otherInput) {
          if(this.value === 'other') {
            otherInput.classList.remove('d-none');
            otherInput.focus();
          } else {
            otherInput.classList.add('d-none');
            otherInput.value = '';
          }
        }
      });
    });
  }
  bindCustomerTypeOtherToggle();
  
  // Re-bind when new rows added
  const originalAppendCustomerRow = appendCustomerRow;
  appendCustomerRow = function(c) {
    originalAppendCustomerRow(c);
    bindCustomerTypeOtherToggle(tbody);
  };
  
  window.__step1TestOpenCustomerModal = ()=>{ openModal(); loadCreateForm(); };
  setTimeout(()=>{ if(!window.bootstrap?.Modal && !document.getElementById('dynamic-bootstrap-bundle-step1')){ const s=document.createElement('script'); s.id='dynamic-bootstrap-bundle-step1'; 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); }catch(e){} }; document.head.appendChild(s); } }, 800);
})();

// Initialize Select2 for Schedule Step 1 dropdowns with appropriate configurations
$(document).ready(function() {
    // Initialize tenant dropdown only if it's a select element (not hidden input)
    if ($('#tenant_id').is('select')) {
        $('#tenant_id').select2({
            placeholder: "Select an option",
            allowClear: true,
            closeOnSelect: true,
            tags: false,
            width: '100%'
        });
        
        // Load evaluation types when tenant changes
        $('#tenant_id').on('change', function() {
            loadServicesForTenant($(this).val());
        });
    }
    
    // Initialize other dropdowns with standard configuration (single select, no tags)
    // Property type select
    $('#property-type').select2({
        placeholder: "Select Property Type",
        allowClear: true,
        width: '100%'
    });
    
    // Initialize evaluation types dropdown with multi-select
    $('#service_ids').select2({
        placeholder: "Select evaluation types...",
        allowClear: true,
        closeOnSelect: false,
        width: '100%'
    });
    
    // Update evaluation types preview when selection changes and reload availability
    $('#service_ids').on('change', function() {
        updateServicesPreview();
        // Reload availability with new evaluation type durations
        const dateInput = document.getElementById('schedule-date');
        const tenantInput = document.querySelector('input[name="tenant_id"], select[name="tenant_id"]');
        if (dateInput && dateInput.value && tenantInput && tenantInput.value) {
            // Trigger availability reload after short delay
            setTimeout(function() {
                const event = new Event('change');
                dateInput.dispatchEvent(event);
            }, 100);
        }
    });
    
    // Initial evaluation types preview update
    updateServicesPreview();
});

// Load evaluation types for a specific tenant
function loadServicesForTenant(tenantId) {
    if (!tenantId) {
        $('#service_ids').html('').trigger('change');
        updateServicesPreview();
        return;
    }
    
    $('#service_ids').prop('disabled', true);
    
    fetch(`{{ route('services.get-by-tenant') }}?tenant_id=${encodeURIComponent(tenantId)}`, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        let options = '';
        if (data.status && data.data) {
            data.data.forEach(service => {
                options += `<option value="${service.id}" data-description="${service.description || ''}">${service.name}</option>`;
            });
        }
        $('#service_ids').html(options).prop('disabled', false).trigger('change');
        updateServicesPreview();
    })
    .catch(error => {
        console.error('Error loading services:', error);
        $('#service_ids').prop('disabled', false);
    });
}

// Update services preview section
function updateServicesPreview() {
    const selected = $('#service_ids').select2('data');
    const preview = $('#selected-services-preview');
    
    if (!selected || selected.length === 0) {
        preview.html('<p class="text-muted mb-0">No services selected</p>');
        return;
    }
    
    let html = '<div class="table-responsive"><table class="table table-sm table-bordered mb-0">';
    html += '<thead><tr><th>Service Name</th></tr></thead><tbody>';
    selected.forEach(item => {
        html += `<tr><td>${item.text}</td></tr>`;
    });
    html += '</tbody></table></div>';
    preview.html(html);
}
</script>
@endpush
@push('page_css')
<style>
    #property-images-uploader.dragging { background:#f1f5f9; }
    .property-image-thumb button.btn-remove { font-weight:bold; }
    .property-image-thumb:hover button.btn-remove { display:block !important; }
    
    /* Services multi-select styling */
    #service_ids + .select2-container .select2-selection--multiple {
        /* min-height: 100px !important; */
        max-height: 200px;
        overflow-y: auto;
    }
 </style>
@endpush
@endsection