@extends('admin.layouts.layout')
@include('admin.components.date-time-picker')
@section('content')
<div class="template_top">
    <div class="templatetop_bottom rounded-3">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a href="javascript:void(0);" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg')}}">
                    </div>
                    Date & Time, Properties and Services
                    <span class="line-hrozontal"></span>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="javascript:void(0);" class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg')}}">
                    </div>
                    Inspectors, Customers & Agents
                    <span class="line-hrozontal"></span>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="javascript:void(0);" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg')}}">
                    </div>
                    Fees, Review Order & Submit
                    <span class="line-hrozontal"></span>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <div class="schudle_details" id="schedule-step1-wrapper">
            <input type="hidden" id="schedule_id" name="schedule_id" value="{{ $schedule->id ?? '' }}">
            @php
                // Hydrate primary inspector (prefer is_primary=1) from existing schedule if present
                $__primaryInspectorId = '';
                $__primaryInspectorName = '';
                $__primaryInspectorAvatar = asset('images/no-profile.jpg');
                $lockedDisplayTime = '';
                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'];
                                }
                                // Compute locked display time (12h) if start_time available
                                if(!empty($schedule->start_time)) {
                                    $t = $schedule->start_time;
                                    if(preg_match('/^\d{2}:\d{2}$/',$t)) { $t .= ':00'; }
                                    if(preg_match('/^\d{2}:\d{2}:\d{2}$/',$t)) {
                                        [$h,$m] = explode(':',$t);
                                        $hInt = (int)$h; $ampm = $hInt>=12?'PM':'AM'; $hInt = $hInt % 12; if($hInt===0) $hInt=12; $lockedDisplayTime = $hInt.':'.$m.' '.$ampm;
                                    }
                                }
                            }
                        }
                    }
                }
            @endphp
            <div class="schudle_datetime_ctrl">
                <h3>Language</h3>
                <div class="white_box">
                    <div class="row">
                        <div class="col-lg-3 col-md-3">
                            <div class="form-group mb-3">
                                @php($prefLang = $schedule->preferred_language ?? '')
                                <label for="preferred-language" class="form-label">Preferred Language <span class="text-danger">*</span></label>
                                <select name="preferred_language" id="preferred-language" required class="form-select js-select2">
                                    <option value="">Select Language</option>
                                    @foreach($languages as $lang)
                                        <option value="{{ $lang->id }}" {{ (string)$prefLang === (string)$lang->id ? 'selected' : '' }}>{{ $lang->native_name ?: 'Language '.$lang->id }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="schudle_datetime_ctrl">
                <h3>Schedule Date & Time</h3>
                <div class="white_box">
                    <div class="row">
                        @if(!session('tenant_id'))                         
                        <div class="col-lg-4 col-md-4">
                            <div class="form-group mb-3">
                                <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>
                                    @php($currentTenant = $schedule->tenant_id ?? ($authTenantId ?? ''))
                                    @foreach($tenants as $t)
                                        <option value="{{ $t->id }}" {{ ($currentTenant==$t->id)?'selected':'' }}>{{ $t->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        @else
                            <input type="hidden" name="tenant_id" id="tenant_id" value="{{ session('tenant_id') }}" />
                        @endif
                        <div class="col-lg-3 col-md-3">
                            <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 }}"
                                    @if(!isset($schedule) || (isset($schedule->scheduled_date) && $schedule->scheduled_date->format('Y-m-d') >= $__today)) min="{{ $__today }}" @endif
                                    @if(isset($schedule) && isset($schedule->scheduled_date)) readonly @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-2" style="min-height:74px;font-size:12px;">
                                    <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>
            
            <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="year-built" class="form-label">Year Built</label>
                                        <input type="number" name="year_built" id="year-built" class="form-control" placeholder="Year Built" min="1800" max="{{ date('Y') + 5 }}" step="1" value="{{ $property->year_built ?? '' }}">
                                    </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">Inspection Note</label>
                                        <textarea name="inspection_note" id="inspection-note" class="form-control" placeholder="Inspection Note" 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">
                <h3>Additaional Details</h3>
                <div class="white_box">
                    <div class="row">
                        <div class="col-lg-3 col-md-3">
                            <div class="form-group mb-3">
                                @php($authUser = Auth::user())
                                @php($roles = $authUser? $authUser->roles->pluck('slug')->toArray(): [])
                                @php($isCustomerRole = in_array('customer',$roles))
                                @php($forceOwner = $isCustomerRole)
                                @php($enteredByVal = $forceOwner ? '4' : ($schedule->entered_by ?? ''))
                                <label for="entered-by-text" class="form-label">Entered By</label>
                                @if($forceOwner)
                                    <div class="form-control-plaintext" style="padding: .375rem .75rem; border:1px solid #ced4da; border-radius: .25rem; background:#e9ecef;">
                                        Property owner
                                    </div>
                                    <input type="hidden" name="entered_by_text" value="4" />
                                @else
                                    <select name="entered_by_text" id="entered-by-text" class="form-select js-select2">
                                        <option value="">Select Option</option>
                                        <option value="1" {{ $enteredByVal=='1' ? 'selected' : '' }}>Buyer</option>
                                        <option value="2" {{ $enteredByVal=='2' ? 'selected' : '' }}>Realtor</option>
                                        <option value="3" {{ $enteredByVal=='3' ? 'selected' : '' }}>Inspector/Office Admin</option>
                                        <option value="4" {{ $enteredByVal=='4' ? 'selected' : '' }}>Property owner</option>
                                    </select>
                                @endif
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <div class="form-group mb-3">
                                @php($heardVal = $schedule->referral_source ?? '')
                                @php($heardOptions = ['Realtor','Friend/Family','Google','Social Media'])
                                <label for="heard-about" class="form-label">Heard About Us</label>
                                <select name="heard_about" id="heard-about" class="form-select js-select2">
                                    <option value="">Select Option</option>
                                    @foreach($heardOptions as $opt)
                                        <option value="{{ $opt }}" {{ $heardVal===$opt ? 'selected' : '' }}>{{ $opt }}</option>
                                    @endforeach
                                    @if($heardVal && !in_array($heardVal,$heardOptions))
                                        <option value="{{ $heardVal }}" selected>{{ $heardVal }}</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <div class="form-group mb-3">
                                <label for="inspection-type" class="form-label">Inspection Type</label>
                                <select name="inspection_type" id="inspection-type" class="form-select js-select2">
                                    <option value="">Select Inspection Type</option>
                                    @foreach($inspectionTypes as $type)
                                        <option value="{{ $type->id }}" {{ isset($schedule->inspection_type_id) && $schedule->inspection_type_id==$type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <div class="form-group mb-3">
                                <label for="foundation-type" class="form-label">Foundation Type</label>
                                <select name="foundation_type" id="foundation-type" class="form-select js-select2">
                                    <option value="">Select Foundation Type</option>
                                    @foreach($foundationTypes as $type)
                                        <option value="{{ $type->id }}" {{ isset($schedule->foundation_type_id) && $schedule->foundation_type_id==$type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <div class="col-lg-3 col-md-3">
                            <label class="form-label">Is this home occupied?</label>
                            <div class="d-flex gap-3 mb-3">
                                <input type="radio" name="home_occupied" value="yes" {{ (isset($schedule->occupied_status) && $schedule->occupied_status=='yes') ? 'checked' : '' }}> Yes
                                <input type="radio" name="home_occupied" value="no" {{ (isset($schedule->occupied_status) && $schedule->occupied_status=='no') ? 'checked' : '' }}> No
                                <input type="radio" name="home_occupied" value="unsure" {{ (isset($schedule->occupied_status) && $schedule->occupied_status=='unsure') ? 'checked' : '' }}> Unsure
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <label class="form-label">Are the utilities on?</label>
                            <div class="d-flex gap-3 mb-3">
                                <input type="radio" name="utilities_on" value="yes" {{ (isset($schedule->utilities_status) && $schedule->utilities_status=='yes') ? 'checked' : '' }}> Yes
                                <input type="radio" name="utilities_on" value="no" {{ (isset($schedule->utilities_status) && $schedule->utilities_status=='no') ? 'checked' : '' }}> No
                                <input type="radio" name="utilities_on" value="unsure" {{ (isset($schedule->utilities_status) && $schedule->utilities_status=='unsure') ? 'checked' : '' }}> Unsure
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="schudle_datetime_ctrl">
                <div class="d-flex align-items-center justify-content-between mt-3 mb-3">
                    <h3>Services</h3>
                    <div class="contact_btns">
                        <a href="javascript:void(0);" class="import_exportbtn btn" id="add-service-btn">Add Services</a>
                    </div>
                </div>
                <div class="service_table">
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th style="width:20%">Service</th>
                                    <th style="width:38%">Description</th>
                                    <th style="width:8%">Duration</th>
                                    <th style="width:8%">Fee Type</th>
                                    <th style="width:10%" class="text-end">Fee</th>
                                    <th style="width:12%">Unit / Qty / Details</th>
                                    <th style="width:4%">Action</th>
                                </tr>
                            </thead>
                            <tbody id="selected-services-body">
                                @if(isset($schedule) && $schedule && $schedule->services->count())
                                    @foreach($schedule->services as $ss)
                                        <tr data-id="{{ $ss->service_id }}" data-base-duration="{{ $ss->service->duration ?? '' }}" data-fee-type="{{ $ss->service->fee_type }}">
                                            <td>{{ $ss->service->service_name ?? 'Service' }}<input type="hidden" name="service_ids[]" value="{{ $ss->service_id }}"></td>
                                            <td style="font-size:12px;">{{ Str::limit($ss->service->description ?? '',250) }}</td>
                                            <td class="service-duration-cell">{{ $ss->service?->duration ? $ss->service?->duration.' mins' : '' }}</td>
                                            <td>{{ $ss->service->fee_type ?? '' }}</td>
                                            <td class="text-end service-fee-cell">$ {{ number_format($ss->service_fee ?? ($ss->service->fee ?? $ss->service->base_fee ?? 0), 2) }}</td>
                                            <td class="unit-details-cell">
                                                                                                @php($units = null)
                                                @if($feeType === 'Multihouse')
                                                    @php($units = $ss->service->serviceFees()->whereNotNull('unit')->get())
                                                    @php($prefill = $units->first()?->unit)
                                                    <input type="text" class="form-control form-control-sm multihouse-unit-input" name="service_unit[{{ $ss->service_id }}]" value="{{ old('service_unit.'.$ss->service_id, $prefill) }}" placeholder="Unit label" style="min-width:110px;" />
                                                    <input type="hidden" name="service_quantity[{{ $ss->service_id }}]" value="1" />
                                                @elseif($feeType === 'Condo')
                                                    <input type="number" class="form-control form-control-sm" name="service_quantity[{{ $ss->service_id }}]" value="{{ $ss->quantity ?? 1 }}" min="1" style="max-width:90px;" />
                                                @elseif($feeType === 'Quotation')
                                                    <input type="number" class="form-control form-control-sm" name="service_quantity[{{ $ss->service_id }}]" value="{{ $ss->quantity ?? 1 }}" min="1" style="max-width:90px;" />
                                                @else
                                                    <input type="number" class="form-control form-control-sm" name="service_quantity[{{ $ss->service_id }}]" value="{{ $ss->quantity ?? 1 }}" min="1" style="max-width:90px;" />
                                                @endif
                                            </td>
                                            <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-service-btn" data-id="{{ $ss->service_id }}" title="Remove"><span style="pointer-events:none;">&times;</span></button></td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr id="no-services-row"><td colspan="7" class="text-center text-muted">No service added</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end">
                <div class="contact_btns">
                    <a href="javascript:void(0);" id="btn-next-schedule" class="whitebg_btn btn py-1">Next <img src="{{ asset('images/next.svg')}}" /></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"]');
  // Clean min-date enforcement (removed corrupted service-fee logic that caused early returns)
  (function enforceMinDate(){
      if(!dateInput) return;
      try {
          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);
          const curIso = uiToIso(dateInput.value);
          if(curIso && curIso < todayStr){
              dateInput.value = isoToUi(todayStr);
              dateInput.setAttribute('data-iso', todayStr);
          } else {
              const preIso = dateInput.getAttribute('data-iso');
              if(preIso && !/^\d{2}-\d{2}-\d{4}$/.test(dateInput.value)){
                  dateInput.value = isoToUi(preIso);
              } else if(!preIso && curIso){
                  dateInput.setAttribute('data-iso', curIso);
              }
          }
      } 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 primaryLocked = !!(inspectorHidden && inspectorHidden.value && startTimeInput && startTimeInput.value);
  if(!dateInput || !tenantInput || !availabilityBox) return;
    if(primaryLocked){
            // Show locked state and skip loading availability
            const nameLocked = document.getElementById('preloaded_inspector_name')?.value || 'Primary Inspector';
            let rawTimeLocked = (startTimeInput.value || '').trim();
            // If a full date-time string is present (e.g. '2025-11-17 14:00:00'), extract the time portion
            if(/\s/.test(rawTimeLocked)) {
                rawTimeLocked = rawTimeLocked.split(/\s+/).pop();
            }
            // Normalize time to display in 12h (HH:MM or HH:MM:SS)
            function to12h(t){
                if(!/^\d{2}:\d{2}(:\d{2})?$/.test(t)) return t || 'set';
                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;
            }
            const timeLockedDisplay = to12h(rawTimeLocked);
            // Include the selected (locked) date in local readable form
            const dateUi = dateInput?.value || '';
            const dateIso = uiToIso(dateUi);
            let dateDisplay = dateUi;
            if(dateIso){
                const dParts = dateIso.split('-');
                const dObj = new Date(parseInt(dParts[0],10), parseInt(dParts[1],10)-1, parseInt(dParts[2],10));
                dateDisplay = dObj.toLocaleDateString(undefined,{year:'numeric', month:'short', day:'numeric'});
            }
            availabilityBox.innerHTML = `<div class="text-muted" style="font-size:12px;">Primary inspector & time locked: <strong>${nameLocked}</strong> — <span>${dateDisplay}</span> at <span>${timeLockedDisplay}</span></div>`;
            return; // prevent further dynamic loading & selection
    }
  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;
      }
      let html = '<div style="font-size:12px;" class="mb-1 fw-semibold">Available Inspectors & Slots:</div>'; 
      html += '<div class="row g-2">';
      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 inputDateUi = document.getElementById('schedule-date').value;
          const inputDateIso = uiToIso(inputDateUi);
          // 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;
              });
          }
          html += '<div class="col-6 col-md-4">';
          html += '<div class="border rounded p-2 h-100" style="background:#fcfcfc;">';
          html += `<div class="d-flex align-items-center mb-2"><img src="${avatar}" style="width:32px;height:32px;object-fit:cover;border-radius:50%;" class="me-2" alt="${name}"><div style="font-size:12px;font-weight:600;">${name}</div></div>`;
          html += '<div class="d-flex flex-wrap gap-1">';
          rawSlots.forEach((raw, idx) => {
            const todayLocal = new Date();
            const todayStr = todayLocal.getFullYear() + '-' + String(todayLocal.getMonth() + 1).padStart(2,'0') + '-' + String(todayLocal.getDate()).padStart(2,'0');
            const isToday = inputDateIso === todayStr;
            const label = displaySlots[idx] || raw;
            if (isToday == true) {
                // For today, filter out slots that have already passed
                const nowH = todayLocal.getHours();
                const nowM = todayLocal.getMinutes();
                const [slotHStr, slotMStr] = raw.split(':');
                const slotH = parseInt(slotHStr, 10);
                const slotM = parseInt(slotMStr, 10);
                if (slotH < nowH || (slotH === nowH && slotM <= nowM)) {
                    // Slot time has already passed; skip rendering this slot
                    html +=  label + ' is not avaiable for today. <br>'; // No 
                }
            } else {
                 html += `<button type="button" class="btn btn-sm btn-outline-success availability-slot" data-slot="${raw}" data-inspector="${iid}" data-name="${name.replace(/"/g,'&quot;')}" data-avatar="${avatar}" title="${name} - ${label}">${label}</button>`;
            }
              
             
          });
          html += '</div>'; // slots wrap
          html += '</div></div>'; // card + col
      });
      html += '</div><div class="mt-1" style="font-size:11px;" class="text-muted">Click a slot to select inspector & time.</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 || '';
        const url = `{{ route('admin.schedule.inspector-availability') }}?scheduled_date=${encodeURIComponent(dateIso)}&tenant_id=${encodeURIComponent(tenantId)}${scheduleId?`&schedule_id=${encodeURIComponent(scheduleId)}`:''}`;
      fetch(url)
         .then(r=> r.json())
         .then(data => {
             renderAvailability(data.data || []);
             // 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>'; });
  }
  dateInput.addEventListener('change', () => {
      // Update data-iso attribute after picker change
      const iso = uiToIso(dateInput.value);
      if(iso){ dateInput.setAttribute('data-iso', iso); }
      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); }
          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); }
          clearTimeout(fetchTimer); fetchTimer = setTimeout(loadAvailability, 150);
      }
  }, 800);
  // Initial load on page ready if date prefilled (e.g., coming back from Step2/Step3)
  if(uiToIso(dateInput.value) && tenantInput.value){
      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);
  document.getElementById('btn-next-schedule')?.addEventListener('click', normalizeBeforeSubmit);
})();
</script>
<script>
// Service selection modal logic (enhanced to mirror Step 3 agreement modal behavior)
(function(){
    const modalId = 'serviceSelectModal';
    if(document.getElementById(modalId)) return; // avoid duplicates

    // Inject modal markup (appended directly to body like Step 3 pattern)
    const modalHtml = `\n<div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true" data-step1-service-modal="1">\n  <div class="modal-dialog modal-xl modal-dialog-scrollable">\n    <div class="modal-content">\n      <div class="modal-header">\n        <h5 class="modal-title mb-0">Select Service</h5>\n        <button type="button" class="btn btn-sm btn-light" data-close-service-modal="1" aria-label="Close">X</button>\n      </div>\n      <div class="modal-body p-0">\n        <div class="table-responsive">\n          <table class="table mb-0">\n            <thead>\n              <tr>\n                <th style="width:25px"></th>\n                <th style="width:30%">Service</th>\n                <th style="width:70%">Description</th>\n              </tr>\n            </thead>\n            <tbody id="service-list-body">\n              <tr><td colspan="3" class="text-center text-muted py-4">Loading...</td></tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n      <div class="modal-footer">\n        <button type="button" class="btn btn-primary" id="add-selected-services-btn">ADD SELECTED</button>\n      </div>\n    </div>\n  </div>\n</div>`;
    document.body.insertAdjacentHTML('beforeend', modalHtml);

    const modalEl = document.getElementById(modalId);
    const addBtn = document.getElementById('add-service-btn');
    const serviceBody = document.getElementById('service-list-body');
    const selectedBody = document.getElementById('selected-services-body');
    const noRow = document.getElementById('no-services-row');
    const addSelectedBtn = document.getElementById('add-selected-services-btn');
    const searchInput = document.getElementById('service-search-input');
    const searchBtn = document.getElementById('service-search-btn');

    const endpoint = "{{ route('admin.schedule.services.list') }}";
    let servicesCache = [];
    let selectedIds = new Set();

    // Seed selectedIds from existing rows (edit case)
    selectedBody?.querySelectorAll('tr[data-id]')?.forEach(tr=>{ const id=parseInt(tr.getAttribute('data-id'),10); if(!isNaN(id)) selectedIds.add(id); });

    // Dynamic Bootstrap loader (only if needed)
    function ensureBootstrap(cb){
        if(window.bootstrap && window.bootstrap.Modal){ return cb(); }
        if(document.getElementById('dynamic-bootstrap-bundle')){
            let tries = 0; const iv = setInterval(()=>{ if(window.bootstrap && window.bootstrap.Modal){ clearInterval(iv); cb(); } if(++tries>40){ clearInterval(iv); cb(); } },50);
            return;
        }
        const s=document.createElement('script'); s.id='dynamic-bootstrap-bundle'; s.src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'; s.onload=()=>cb(); document.head.appendChild(s);
    }

    // Backdrop + ESC/outside click fallback handling
    function fallbackShow(){
        if(modalEl._isShown) return; modalEl._isShown = true;
        modalEl.style.display='block';
        requestAnimationFrame(()=>{ modalEl.classList.add('show'); });
        modalEl.removeAttribute('aria-hidden');
        const bd = document.createElement('div');
        bd.className='modal-backdrop fade';
        document.body.appendChild(bd);
        requestAnimationFrame(()=> bd.classList.add('show'));
        modalEl._backdropEl = bd;
        modalEl._escHandler = (e)=>{ if(e.key==='Escape') fallbackHide(); };
        modalEl._clickHandler = (e)=>{ if(e.target===modalEl) fallbackHide(); };
        document.addEventListener('keydown', modalEl._escHandler);
        modalEl.addEventListener('mousedown', modalEl._clickHandler);
        document.body.classList.add('modal-open');
    }
    function fallbackHide(){
        if(!modalEl._isShown) return; modalEl._isShown=false;
        modalEl.classList.remove('show');
        modalEl.setAttribute('aria-hidden','true');
        const bd = modalEl._backdropEl; if(bd){ bd.classList.remove('show'); setTimeout(()=> bd.remove(),150); }
        setTimeout(()=>{ modalEl.style.display='none'; },150);
        document.removeEventListener('keydown', modalEl._escHandler||(()=>{}));
        modalEl.removeEventListener('mousedown', modalEl._clickHandler||(()=>{}));
        document.body.classList.remove('modal-open');
    }

    function showModal(){
        ensureBootstrap(()=>{
            try{
                if(window.bootstrap && window.bootstrap.Modal){
                    if(!modalEl._bsModalInstance){ modalEl._bsModalInstance = new window.bootstrap.Modal(modalEl); }
                    modalEl._bsModalInstance.show();
                } else if(window.jQuery && typeof jQuery.fn.modal==='function'){
                    jQuery(modalEl).modal('show');
                } else {
                    fallbackShow();
                }
            }catch{ fallbackShow(); }
        });
    }
    function hideModal(){
        try{
            if(modalEl._bsModalInstance){ modalEl._bsModalInstance.hide(); return; }
            if(window.jQuery && typeof jQuery.fn.modal==='function'){ jQuery(modalEl).modal('hide'); return; }
        }catch{ /* ignore */ }
        fallbackHide();
    }

    // Close button (X)
    modalEl.querySelector('[data-close-service-modal]')?.addEventListener('click', (e)=>{ e.preventDefault(); hideModal(); });

    // If Bootstrap events fire, sync Tiny fallback state removal
    ['hidden.bs.modal'].forEach(ev=> modalEl.addEventListener(ev, ()=>{ fallbackHide(); }));

    function money(v){
        if(v === null || v === undefined) return '$ 0';
        return '$ ' + (parseFloat(v)||0).toLocaleString(undefined,{minimumFractionDigits:0,maximumFractionDigits:2});
    }

    function feeValue(s){
        // Updated logic per fee type
        // For Condo & Multihouse we ignore any precomputed dynamic_fee to allow live recalculation
        if(!['Condo','Multihouse'].includes(s.fee_type)){
            if(typeof s.dynamic_fee !== 'undefined' && s.dynamic_fee !== null){
                return s.dynamic_fee;
            }
        }
        switch(s.fee_type){
            case 'Fixed':
                return s.fee || 0;
            case 'Variable':
                return (s.base_fee || 0);
            case 'Condo':
                // dynamic_fee should have been provided; fallback compute if condo_fees present
                const b = parseInt(document.querySelector('input[name="bedrooms"]')?.value||'0',10);
                const ba = parseInt(document.querySelector('input[name="bathrooms"]')?.value||'0',10);
                const bedFee = s.condo_fees ? (s.condo_fees['bedroom']||0) : 0;
                const bathFee = s.condo_fees ? (s.condo_fees['bathroom']||0) : 0;
                const totalFee = ((bedFee * b) + (bathFee * ba));
                return (totalFee + (s.base_fee||0));
            case 'Multihouse':
                // base until unit picked
                return (s.base_fee||0);
            case 'Quotation':
                return 0;
            default:
                return 0;
        }
    }

    function fetchServices(){
        const q = searchInput ? searchInput.value.trim() : '';
        const tenantIdEl = document.getElementById('tenant_id');
        const tId = tenantIdEl ? tenantIdEl.value : '';
        const sqftEl = document.getElementById('square-feet');
        const sqftVal = sqftEl && sqftEl.value ? parseInt(sqftEl.value,10) : '';
    const params = new URLSearchParams();
        if(q) params.append('search', q);
        if(tId) params.append('tenant_id', tId);
        if(sqftVal && !isNaN(sqftVal) && sqftVal > 0){ params.append('square_feet', sqftVal); }
    const prefLangEl = document.getElementById('preferred-language');
    if(prefLangEl && prefLangEl.value){ params.append('preferred_language', prefLangEl.value); }
        const url = params.toString() ? endpoint + '?' + params.toString() : endpoint;
    serviceBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">Loading...</td></tr>';
        fetch(url, {headers:{'X-Requested-With':'XMLHttpRequest'}})
            .then(r=>r.json())
            .then(json=>{
                if(!json.success){ throw new Error('Failed'); }
                servicesCache = json.data || [];
                // Annotate rows with dynamic fee badge if present
                renderServiceModalRows();
                // Update prices of already selected services if square feet changed
                updateSelectedServicePrices();
            })
            .catch(()=>{
                serviceBody.innerHTML = '<tr><td colspan="3" class="text-center text-danger py-4">Failed to load services</td></tr>';
            });
    }

    function renderServiceModalRows(){
        if(!servicesCache.length){
            serviceBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">No services found</td></tr>';
            return;
        }
        serviceBody.innerHTML = servicesCache.map(s=>{
            const alreadyRow = selectedBody?.querySelector(`tr[data-id="${s.id}"]`);
            const isSelected = selectedIds.has(s.id);
            const disabled = alreadyRow ? 'disabled' : '';
            const checked = (isSelected && alreadyRow) ? 'checked' : '';
            const addedBadge = alreadyRow ? ' <span class="badge bg-success ms-1" style="font-size:10px;">Added</span>' : '';
            const dynamicBadge = (typeof s.dynamic_fee !== 'undefined' && s.dynamic_fee !== null) ? ' <span class="badge bg-info ms-1" style="font-size:10px;">SqFt Price</span>' : '';
            return `<tr data-id="${s.id}">\n<td><input type="checkbox" class="service-pick" value="${s.id}" ${checked} ${disabled}></td>\n<td>${s.service_name||''}${addedBadge}${dynamicBadge}</td>\n<td style=\"font-size:12px;\">${(s.description||'').substring(0,250)}</td>\n</tr>`;
        }).join('');
    }

    function renderSelectedTable(){
    const selectedServices = servicesCache.filter(s=> selectedIds.has(s.id));
        // Show placeholder if none
        if(!selectedServices.length){
            if(noRow){ noRow.classList.remove('d-none'); } else {
                const tr = document.createElement('tr');
                tr.id='no-services-row';
                tr.innerHTML='<td colspan="7" class="text-center text-muted">No service added</td>';
                selectedBody.appendChild(tr);
            }
            return;
        }
        if(noRow) noRow.classList.add('d-none');
        // Build maps of existing input values so we never lose user edits
    const existingQty = {};
        selectedBody.querySelectorAll('tr[data-id]').forEach(tr=>{
            const id = parseInt(tr.getAttribute('data-id'),10);
            if(isNaN(id)) return;
            const qty = tr.querySelector(`input[name="service_quantity[${id}]"]`);
            if(qty) existingQty[id] = qty.value;
        });
        // Append rows only for newly selected services (do NOT recreate existing ones)
        selectedServices.forEach(s=>{
            if(selectedBody.querySelector(`tr[data-id="${s.id}"]`)) return; // keep existing row & its values
            const tr = document.createElement('tr');
            tr.setAttribute('data-id', s.id);
            tr.setAttribute('data-base-duration', s.duration || '');
            tr.setAttribute('data-fee-type', s.fee_type||'');
            if(s.condo_fees){ tr.dataset.condoFees = JSON.stringify(s.condo_fees); }
            if(s.multihouse_units){ tr.dataset.multihouseUnits = JSON.stringify(s.multihouse_units); }
            const qtyVal = existingQty[s.id] || '1';
            let extraCols = '';
            if(s.fee_type === 'Multihouse'){
                const units = Array.isArray(s.multihouse_units) ? s.multihouse_units : [];
                const prefill = units.length ? units[0].unit : '';
                extraCols = `<td class="unit-details-cell"><input type="text" class="form-control form-control-sm multihouse-unit-input" name="service_unit[${s.id}]" value="${prefill}" placeholder="Unit label" style="min-width:110px;"><input type="hidden" name="service_quantity[${s.id}]" value="1"></td>`;
            } else if(s.fee_type === 'Condo') {
                const qtyValSafe = qtyVal.replace(/[^0-9]/g,'') || '1';
                extraCols = `<td class="unit-details-cell"><input type="number" class="form-control form-control-sm" name="service_quantity[${s.id}]" value="${qtyValSafe}" min="1" style="max-width:90px;"></td>`;
            } else if(s.fee_type === 'Quotation') {
                const qtyValSafe = qtyVal.replace(/[^0-9]/g,'') || '1';
                extraCols = `<td class="unit-details-cell"><input type="number" class="form-control form-control-sm" name="service_quantity[${s.id}]" value="${qtyValSafe}" min="1" style="max-width:90px;"></td>`;
            } else {
                extraCols = `<td class="unit-details-cell"><input type="number" class="form-control form-control-sm" name="service_quantity[${s.id}]" value="${qtyVal}" min="1" style="max-width:90px;"></td>`;
            }
            const feeCellVal = money(feeValue(s));
            tr.innerHTML = `
                <td>${s.service_name||''}<input type="hidden" name="service_ids[]" value="${s.id}"></td>
                <td style="font-size:12px;">${(s.description||'').substring(0,250)}</td>
                <td class="service-duration-cell">${s.duration? s.duration+' mins':''}</td>
                <td>${s.fee_type||''}</td>
                <td class="text-end service-fee-cell">${feeCellVal}</td>
                ${extraCols}
                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-service-btn" data-id="${s.id}" title="Remove"><span style="pointer-events:none;">&times;</span></button></td>
            `;
            selectedBody.appendChild(tr);
            // Auto select first unit for multihouse to display combined fee immediately
            if(s.fee_type === 'Multihouse'){
                const inp = tr.querySelector('.multihouse-unit-input');
                if(inp && inp.value){ updateMultihouseRowFee(tr, s); }
            }
        });
        // After adding rows, recompute durations if sqft present
        recomputeDurations();
        recomputeCondoFees();
    }

    // Remove action handler
    selectedBody.addEventListener('click', function(e){
        const btn = e.target.closest('.remove-service-btn');
        if(!btn) return;
        const id = parseInt(btn.getAttribute('data-id'),10);

        function actuallyRemove(){
            selectedIds.delete(id);
            const row = selectedBody.querySelector('tr[data-id="'+id+'"]');
            if(row) row.remove();
            if(!selectedBody.querySelector('tr[data-id]')){
                if(noRow){ noRow.classList.remove('d-none'); } else {
                    const tr = document.createElement('tr');
                    tr.id='no-services-row';
                    tr.innerHTML='<td colspan="7" class="text-center text-muted">No service added</td>';
                    selectedBody.appendChild(tr);
                }
            }
        }

        // SweetAlert2 if available
        if(window.Swal && typeof Swal.fire === 'function'){
            Swal.fire({
                title: 'Remove this service?',
                text: 'This will remove the service from the schedule.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, remove',
                cancelButtonText: 'Cancel'
            }).then(result => { if(result.isConfirmed) actuallyRemove(); });
        } else {
            if(confirm('Remove this service from the schedule?')){ actuallyRemove(); }
        }
    });

    addBtn.addEventListener('click', ()=>{ fetchServices(); showModal(); });
    if (searchBtn) searchBtn.addEventListener('click', fetchServices);
    if (searchInput) searchInput.addEventListener('keyup', e=>{ if(e.key==='Enter') fetchServices(); });

    serviceBody.addEventListener('change', e=>{
        if(e.target.classList.contains('service-pick')){
            const id = parseInt(e.target.value,10);
            if(e.target.checked) selectedIds.add(id); else selectedIds.delete(id);
        }
    });

    addSelectedBtn.addEventListener('click', ()=>{ renderSelectedTable(); hideModal(); });

    // Update selected services' fee cells after a new dynamic fee fetch
    function updateSelectedServicePrices(){
        if(!servicesCache || !servicesCache.length) return;
        // Map by id for quick lookup
        const map = {};
        servicesCache.forEach(s=>{ map[s.id] = s; });
        selectedBody.querySelectorAll('tr[data-id]').forEach(tr=>{
            const id = parseInt(tr.getAttribute('data-id'),10);
            if(isNaN(id)) return;
            const svc = map[id];
            if(!svc) return;
            // Skip condo & multihouse; handled by specialized recalculations
            if(['Condo','Multihouse'].includes(svc.fee_type)) return;
            const feeCell = tr.querySelector('.service-fee-cell');
            if(!feeCell) return;
            feeCell.innerHTML = money(feeValue(svc));
        });
    }

    // Debounced listener for square feet changes to refetch services and update prices
    const sqftInput = document.getElementById('square-feet');
    let sqftDebounce = null;
    if(sqftInput){
        ['change','input'].forEach(ev=>{
            sqftInput.addEventListener(ev, ()=>{
                if(sqftDebounce) clearTimeout(sqftDebounce);
                sqftDebounce = setTimeout(()=>{ 
                    fetchServices(); 
                    recomputeDurations();
                }, 400);
            });
        });
    }

    // Duration scaling logic based on square feet.
    // Assumption: For every additional 500 sqft above a 1500 sqft baseline, increase base duration by 10% (rounded).
    // Below 1500 sqft, decrease by up to 15% linearly down to 500 sqft (floor at 70% of base).
    function scaleDuration(base, sqft){
        base = parseInt(base,10); if(isNaN(base) || base<=0) return base;
        sqft = parseInt(sqft,10); if(isNaN(sqft) || sqft<=0) return base;
        const baseline = 1500;
        if(sqft === baseline) return base;
        if(sqft > baseline){
            const extra = sqft - baseline;
            const steps = Math.floor(extra / 500);
            const factor = 1 + (steps * 0.10); // 10% per 500 sqft chunk
            return Math.round(base * factor);
        } else {
            // Reduce duration proportionally between 1500 and 500 (1000 span)
            if(sqft < 500){
                return Math.round(base * 0.70); // floor cap
            }
            const diff = baseline - sqft; // up to 1000
            const pct = diff / 1000; // 0..1
            const reduction = pct * 0.15; // max 15% reduction
            const factor = 1 - reduction;
            return Math.round(base * factor);
        }
    }

    function recomputeDurations(){
        const sqftValEl = document.getElementById('square-feet');
        const sqftVal = sqftValEl && sqftValEl.value ? parseInt(sqftValEl.value,10) : 0;
        if(!sqftVal) return; // no change without sqft
        selectedBody.querySelectorAll('tr[data-id]').forEach(tr=>{
            const base = tr.getAttribute('data-base-duration');
            if(!base) return;
            const cell = tr.querySelector('.service-duration-cell');
            if(!cell) return;
            const scaled = scaleDuration(base, sqftVal);
            if(scaled && !isNaN(scaled)){
                cell.textContent = scaled + ' mins';
            }
        });
    }

    // Condo fee recomputation using bedrooms & bathrooms inputs
    function recomputeCondoFees(){
        const b = parseInt(document.querySelector('input[name="bedrooms"]')?.value||'0',10);
        const ba = parseInt(document.querySelector('input[name="bathrooms"]')?.value||'0',10);
        selectedBody.querySelectorAll('tr[data-fee-type="Condo"]').forEach(tr=>{
            const svcId = parseInt(tr.getAttribute('data-id'),10);
            const svc = servicesCache.find(x=> x.id === svcId);
            if(!svc) return;
            const condoFees = svc.condo_fees || {};
            const bedFee = condoFees['bedroom'] || 0;
            const bathFee = condoFees['bathroom'] || 0;
            const baseFee = svc.base_fee || 0;
            const bInt = parseInt(b, 10) || 0;
            const baInt = parseInt(ba, 10) || 0;
            const bedFeeInt = parseInt(bedFee, 10) || 0;
            const bathFeeInt = parseInt(bathFee, 10) || 0;
            const baseFeeInt = parseInt(baseFee, 10) || 0;
            const total = (bedFeeInt * bInt) + (bathFeeInt * baInt) + baseFeeInt;
            const cell = tr.querySelector('.service-fee-cell');
            if(cell){ cell.innerHTML = '$ ' + total.toLocaleString(undefined,{maximumFractionDigits:2}); }
        });
    }

    function updateMultihouseRowFee(tr, svc){
        const inp = tr.querySelector('.multihouse-unit-input');
        if(!inp) return;
        const unit = (inp.value||'').trim();
        let unitFee = 0;
        if(unit && Array.isArray(svc.multihouse_units)){
            const match = svc.multihouse_units.find(u=> u.unit === unit);
            if(match) unitFee = parseFloat(match.fee)||0;
        }
        const base = parseFloat(svc.base_fee)||0;
        const total = base + unitFee;
        const cell = tr.querySelector('.service-fee-cell');
        if(cell){ cell.innerHTML = '$ ' + total.toLocaleString(undefined,{maximumFractionDigits:2}); }
    }

    // Event bindings for property fields
    const bedroomsInput = document.querySelector('input[name="bedrooms"]');
    const bathroomsInput = document.querySelector('input[name="bathrooms"]');
    [bedroomsInput, bathroomsInput].forEach(inp => { if(inp){ inp.addEventListener('input', recomputeCondoFees); } });
    // Delegate multihouse unit selection changes
    selectedBody.addEventListener('input', function(e){
        if(e.target.classList.contains('multihouse-unit-input')){
            const tr = e.target.closest('tr[data-id]');
            if(!tr) return;
            const id = parseInt(tr.getAttribute('data-id'),10);
            const svc = servicesCache.find(x=> x.id === id);
            if(svc){ updateMultihouseRowFee(tr, svc); }
        }
    });
})();
</script>
<script>
// Submit (Save / Next) logic
(function(){
    const saveBtn = document.getElementById('btn-save-schedule');
    const nextBtn = document.getElementById('btn-next-schedule');
    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','year_built','bedrooms','bathrooms','inspection_note','entered_by_text','heard_about','inspection_type','foundation_type','preferred_language','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
        const occ = document.querySelector('input[name="home_occupied"]:checked');
        const util = document.querySelector('input[name="utilities_on"]:checked');
        if(occ) fd.append('home_occupied', occ.value); if(util) fd.append('utilities_on', util.value);
        // Services
        document.querySelectorAll('input[name="service_ids[]"]').forEach(i=> fd.append('service_ids[]', i.value));
        // Quantity & report
    document.querySelectorAll('input[name^="service_quantity["]').forEach(i=> fd.append(i.name, i.value));
        // Multihouse unit selections
        // Multihouse unit selections (support both select legacy and new text input)
        document.querySelectorAll('select[name^="service_unit["]').forEach(i=> fd.append(i.name, i.value));
        document.querySelectorAll('input[type="text"][name^="service_unit["]').forEach(i=> fd.append(i.name, i.value));
        // Images
        document.querySelectorAll('input[name="property_image_paths[]"]').forEach(i=> fd.append('property_image_paths[]', i.value));
        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');
            // 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;
        }
        const lan = document.getElementById('preferred-language');
        if(lan && lan.hasAttribute('required') && !lan.value.trim()){
            if(window.toastr){ toastr.error('Preferred language is required'); } else { alert('Preferred language is required'); }
            lan.focus();
            return;
        }
        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; }
                if(goNext && json.redirect){ window.location.href = json.redirect; }
            } 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));
    if(nextBtn) nextBtn.addEventListener('click', ()=> submit(true));
})();

// 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%'
        });
    }
    
    // Initialize other dropdowns with standard configuration (single select, no tags)
    $('#entered-by-text, #inspection-type, #foundation-type, #preferred-language').select2({
        placeholder: "Select an option",
        allowClear: true,
        closeOnSelect: true,
        tags: false,
        width: '100%'
    });
    
    // Initialize "Heard About Us" dropdown with tags enabled for custom entries
    $('#heard-about').select2({
        placeholder: "Select or type custom option",
        allowClear: true,
        closeOnSelect: true,
        tags: true,
        width: '100%'
    });
});
</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; }
 </style>
@endpush
@endsection