@extends('admin.layouts.layout')
@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" 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 active" 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="details_title">
            <div>
                <h3>Fees, Review Order & Submit</h3>
                @php
                    $datetime = '';
                    if($schedule->scheduled_date && $schedule->start_time){
                        $dt = is_string($schedule->start_time) ? $schedule->start_time : ($schedule->start_time?->format('H:i:s'));
                        $d = $schedule->scheduled_date instanceof \Illuminate\Support\Carbon ? $schedule->scheduled_date->format('Y-m-d') : $schedule->scheduled_date;
                        $datetime = $d.' '.$dt;
                    }
                @endphp
                <p>(Appointment ID: {{ $schedule->appointment_id }}, Appointment Date: {{ \App\Helpers\Helper::showDate($datetime) }})</p>
            </div>
            <div class="contact_btns">
                <a href="{{ route('admin.schedule.print', ['id'=>$schedule->id]) }}" target="_blank" class="import_exportbtn btn py-1">
                    <img src="{{ asset('images/print.svg') }}" /> Print
                </a>
                <button type="button" id="btn-submit-step3" class="add_btn btn py-1">
                    <img src="{{ asset('images/save.svg') }}" />  Submit without Payment
                </button>
                <!-- <a href="javascript:void(0);" class="add_btn btn py-1">
                    <img src="{{ asset('images/save.svg') }}" /> Submit without Payment
                </a>
                <a href="javascript:void(0);" class="import_exportbtn btn py-1">
                    <img src="{{ asset('images/save_pay.svg') }}" /> Submit with Payment
                </a> -->
                <a href="{{ route('admin.schedule.step2', ['id'=>$schedule->id]) }}" class="filter_btn btn w-auto py-1">
                    <img src="{{ asset('images/prev.svg') }}" /> Prev
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8 col-md-8">
                <div class="schudle_banner position-relative d-flex align-items-center justify-content-center" id="scheduleImagesWrapper" data-img-count="{{ count($scheduleImageUrls ?? []) }}" style="height:300px; background:#f8f9fa; overflow:hidden;">
                    @php $imgs = $scheduleImageUrls ?? []; @endphp
                    @if(!empty($imgs))
                        <img id="scheduleMainImage" src="{{ $imgs[0] }}" style="max-width:100%; max-height:100%; object-fit:contain;" />
                        <button type="button" id="imgPrevBtn" class="btn btn-sm btn-dark position-absolute top-50 start-0 translate-middle-y ms-2" style="opacity:0.7;">&#9664;</button>
                        <button type="button" id="imgNextBtn" class="btn btn-sm btn-dark position-absolute top-50 end-0 translate-middle-y me-2" style="opacity:0.7;">&#9654;</button>
                    @else
                        <div class="text-muted">No images available</div>
                    @endif
                </div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="schudle_map" style="height:300px; background:#f3f4f6; position:relative;">
                    <div id="step3-map" style="width:100%;height:100%;min-height:300px"></div>
                    <div id="step3-prop-coords" class="d-none"
                            data-lat="{{ $property->latitude ?? '' }}"
                            data-lng="{{ $property->longitude ?? '' }}"
                            data-full-address="{{ e(collect([
                                $property->address_line1 ?? null,
                                $property->city ?? null,
                                $property->state ?? null,
                                $property->postal_code ?? null,
                                $property->country ?? null
                            ])->filter()->implode(', ')) }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8 col-md-8">
                <div class="detail_agreementbox p-2">
                    <div class="contact_btns text-right">
                        <a href="javascript:void(0);" id="add-discount-btn" class="whitebg_btn btn py-1" data-client-discount-mode="1">Add Discount</a>
                        <a href="javascript:void(0);" id="add-additional-fee-btn" class="filter_btn btn py-1 w-auto">Add Additional Fees</a>
                    </div>
                    <div class="agreement_title border_bottom1">
                        <h3>Fees</h3>
                        <a href="#" class="add_agreementbtn border-0">Amount</a>
                    </div>
                    @php
                        // Total derived from persisted schedule_services.service_fee * quantity
                        $__feesTotal = isset($feesTotal) ? $feesTotal : 0;
                        $__persistedLineItems = [];
                        if(isset($schedule) && $schedule->relationLoaded('services')){
                            foreach($schedule->services as $ss){
                                $lineFee = $ss->service_fee ?? ($ss->service->fee ?? $ss->service->base_fee ?? 0);
                                $qty = (int)($ss->quantity ?? 1);
                                $__persistedLineItems[] = [
                                    'id' => $ss->id,
                                    'service_id' => $ss->service_id,
                                    'name' => $ss->service->service_name ?? ('Service #'.$ss->service_id),
                                    'fee' => (float)$lineFee,
                                    'quantity' => $qty,
                                    'total' => (float)$lineFee * $qty,
                                ];
                            }
                        }
                    @endphp
                    <div class="total_feeslist">
                        <p>Fees Total </p>
                        <p>$ {{ number_format($__feesTotal, 2) }}</p>
                    </div>
                    
                    <form id="step3FinalForm" action="{{ route('admin.schedule.step3.store', ['id'=>$schedule->id]) }}" method="POST">
                        @csrf
                        <input type="hidden" name="total_fee" id="total_fee_field" value="{{ number_format($__feesTotal,2,'.','') }}" />
                        <input type="hidden" name="insurance_carrier" id="insurance_carrier_field" value="{{ old('insurance_carrier', $schedule->insurance_carrier) }}" />
                        <input type="hidden" name="widget_visiable" id="widget_visiable_field" value="{{ old('widget_visiable', $schedule->widget_visiable) }}" />
                        <div class="fees_discount" id="feesCalcWrapper" data-base-fees="{{ number_format($__feesTotal,2,'.','') }}">
                        <div class="discount-section {{ $existingDiscounts->count() ? '' : 'd-none' }}">
                            <div class="discount_title">
                                <h4>Discounts</h4>
                            </div>
                            <div class="discount_content">
                                @if($existingDiscounts->count())
                                    @foreach($existingDiscounts as $d)
                                        <div class="row discount-item-row mt-2">
                                            <div class="col-lg-6 col-md-6 mob-mb-3">
                                                <input type="text" class="form-control discount-title" placeholder="Discount Title" value="{{ $d->title }}" />
                                            </div>
                                            <div class="col-lg-3 col-md-3">
                                                <div class="d-flex gap-3 align-items-center">
                                                    <input type="text" class="form-control discount-amount" placeholder="$0.00" value="{{ number_format($d->amount,2) }}" />
                                                    <a href="javascript:void(0);" class="discount-delete" title="Remove"><img src="{{ asset('images/delete.svg') }}" /></a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="additional-fee-section {{ $existingAdditionalFees->count() ? '' : 'd-none' }}">
                            <div class="additional_title">
                                <h4>Additional Fees</h4>
                            </div>
                            <div class="discount_content">
                                @if($existingAdditionalFees->count())
                                    @foreach($existingAdditionalFees as $af)
                                        <div class="row additional-fee-item-row mt-2">
                                            <div class="col-lg-6 col-md-6 mob-mb-3">
                                                <input type="text" class="form-control additional-fee-title" placeholder="Fee Title" value="{{ $af->title }}" />
                                            </div>
                                            <div class="col-lg-3 col-md-3">
                                                <div class="d-flex gap-3 align-items-center">
                                                    <input type="number" step="0.01" min="0" class="form-control additional-fee-amount" placeholder="$0.00" value="{{ number_format($af->amount,2) }}" />
                                                    <a href="javascript:void(0);" class="additional-fee-delete" title="Remove"><img src="{{ asset('images/delete.svg') }}" /></a>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row additional-fee-item-row">
                                        <div class="col-lg-6 col-md-6 mob-mb-3">
                                            <input type="text" class="form-control additional-fee-title" placeholder="Fee Title" />
                                        </div>
                                        <div class="col-lg-3 col-md-3">
                                            <div class="d-flex gap-3 align-items-center">
                                                <input type="number" step="0.01" min="0" class="form-control additional-fee-amount" placeholder="$0.00" />
                                                <a href="javascript:void(0);" class="additional-fee-delete" title="Remove"><img src="{{ asset('images/delete.svg') }}" /></a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="sub_totalbg" data-line-items='@json($__persistedLineItems)'>
                            <h4>Sub Total</h4>
                            <h4 id="subTotalDisplay">$ {{ number_format($__feesTotal,2) }}</h4>
                        </div>
                        <div class="total_bg">
                            <h4>Total</h4>
                            <h4 id="grandTotalDisplay">$ {{ number_format($__feesTotal,2) }}</h4>
                        </div>
                        </div>
                    </form>
                </div>

                <div class="detail_agreementbox p-2">
                    <div class="agreement_title ps-0 d-flex justify-content-between align-items-center">
                        <h3>Invoice Note</h3>
                    </div>
                    <div>
                        <textarea id="invoice_note" name="invoice_note" class="form-control invoice-note-editor richtext" rows="6" placeholder="Enter invoice note...">{{ old('invoice_note', $schedule->invoice_note ?? '') }}</textarea>
                        <div class="d-flex justify-content-end mt-1">
                            <small class="text-muted" id="invoiceNoteCharCounter"></small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-4">
                <div class="detail_agreementbox pb-4">
                    <div class="agreement_title border-bottom">
                        <h3>Inspection Configuration</h3>
                    </div>
                    <div class="px-3 pt-2">
                        <p>Do you want the insurance carrier to make payments?</p>
                        <div class="d-flex align-items-center gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="insurance_carrier" id="radioDefault1AB" value="yes" @if(($schedule->insurance_carrier ?? 'no')==='yes') checked @endif>
                                <label class="form-check-label" for="radioDefault1AB">Yes</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="insurance_carrier" id="radioDefault2AB" value="no" @if(($schedule->insurance_carrier ?? 'no')!=='yes') checked @endif>
                                <label class="form-check-label" for="radioDefault2AB">No</label>
                            </div>
                        </div>
                    </div>
                    <div class="px-3 pt-2">
                        <p>Do you want appliance widgets visible on agent/client login?</p>
                        <div class="d-flex align-items-center gap-3">
                            <div class="form-check">
                                <input class="form-check-input" value="yes" type="radio" name="widget_visiable" id="radioDefault1C" @if(($schedule->widget_visiable ?? 'no')==='yes' || ($schedule->widget_visiable ?? 0)==1) checked @endif>
                                <label class="form-check-label" for="radioDefault1C">Yes</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="widget_visiable" id="radioDefault2C" value="no" @if(($schedule->widget_visiable ?? 'no')!=='yes' && ($schedule->widget_visiable ?? 0)!=1) checked @endif>
                                <label class="form-check-label" for="radioDefault2C">No</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="detail_agreementbox py-0 px-3">
                    <div class="customer_deatails appoinment_review">
                        <ul>
                            <li>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5>Date/Time</h5>
                                        <h4>{{ \App\Helpers\Helper::showDate($summaryData['date_time']) ?? '—' }}</h4>
                                    </div>
                                    <a href="{{ route('admin.schedule.step1', ['id'=>$schedule->id]) }}"><img src="{{ asset('images/edit.svg') }}" /></a>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5>Property Details</h5>
                                        <h4>{{ $summaryData['property'] ?? 'No property details found.' }}</h4>
                                    </div>
                                    <a href="{{ route('admin.schedule.step1', ['id'=>$schedule->id]) }}"><img src="{{ asset('images/edit.svg') }}" /></a>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5>Customers</h5>
                                        <h4>
                                            @if(!empty($summaryData['customers']))
                                                {{ implode(', ', $summaryData['customers']) }}
                                            @else
                                                None
                                            @endif
                                        </h4>
                                    </div>
                                    <a href="{{ route('admin.schedule.step2', ['id'=>$schedule->id]) }}"><img src="{{ asset('images/edit.svg') }}" /></a>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5>Agents</h5>
                                        <h4>
                                            @if(!empty($summaryData['agents']))
                                                {{ implode(', ', $summaryData['agents']) }}
                                            @else
                                                None
                                            @endif
                                        </h4>
                                    </div>
                                    <a href="{{ route('admin.schedule.step2', ['id'=>$schedule->id]) }}"><img src="{{ asset('images/edit.svg') }}" /></a>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5>Services</h5>
                                        <h4>
                                            @if(!empty($summaryData['services']))
                                                {{ implode(', ', $summaryData['services']) }}
                                            @else
                                                No services added.
                                            @endif
                                        </h4>
                                    </div>
                                    <a href="{{ route('admin.schedule.step1', ['id'=>$schedule->id]) }}"><img src="{{ asset('images/edit.svg') }}" /></a>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5>Inspectors</h5>
                                        <h4>
                                            @if(!empty($summaryData['inspectors']))
                                                {{ implode(', ', $summaryData['inspectors']) }}
                                            @else
                                                None
                                            @endif
                                        </h4>
                                    </div>
                                    <a href="{{ route('admin.schedule.step1', ['id'=>$schedule->id]) }}"><img src="{{ asset('images/edit.svg') }}" /></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="detail_agreementbox" id="schedule-agreements-box"
            data-schedule-id="{{ $schedule->id }}"
            data-list-url="{{ route('admin.schedule.agreements.list',['id'=>$schedule->id]) }}"
            data-store-url="{{ route('admin.schedule.agreements.store',['id'=>$schedule->id]) }}"
            data-show-url-template="{{ route('admin.schedule.agreements.show',['scheduleAgreementId'=>'__ID__']) }}"
            data-update-url-template="{{ route('admin.schedule.agreements.update',['scheduleAgreementId'=>'__ID__']) }}"
            data-delete-url-template="{{ route('admin.schedule.agreements.delete',['scheduleAgreementId'=>'__ID__']) }}"
        >
            <div class="d-flex align-items-center justify-content-between px-3 py-3">
                <h3 class="agreementtitle mb-0">Agreements</h3>
                <div class="contact_btns">
                    <a href="javascript:void(0);" id="btn-open-agreement-modal" class="import_exportbtn btn py-1">Add Agreements</a>
                </div>
            </div>
            <div class="agreement_list px-3 pb-3" id="schedule-agreements-list">
                @if(isset($scheduleAgreements) && $scheduleAgreements->count())
                    <ul class="list-group">
                        @foreach($scheduleAgreements as $ag)
                            <li class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ $ag->id }}">
                                <span>{{ $ag->name }}</span>
                                <span class="d-flex gap-2">
                                    <button type="button" class="btn btn-sm btn-light border btn-edit-agreement" data-id="{{ $ag->id }}" title="Edit" aria-label="Edit">
                                        <img src="{{ asset('images/edit.svg') }}" alt="Edit" style="width:16px;height:16px;" />
                                    </button>
                                    @if($ag->service_id == 0)
                                        <button type="button" class="btn btn-sm btn-light border btn-del-agreement" data-id="{{ $ag->id }}" title="Delete" aria-label="Delete">
                                            <img src="{{ asset('images/delete.svg') }}" alt="Delete" style="width:16px;height:16px;" />
                                        </button>
                                    @endif
                                </span>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="no_info noinfo_wbg">There are no agreements added yet.</div>
                @endif
            </div>
        </div>
        {{-- Agreements Selection Modal --}}
        <div class="modal fade" id="agreementSelectModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mb-0">Select Agreements</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead>
                                    <tr>
                                        <th style="width:35px"></th>
                                        <th>Name</th>
                                        <th style="width:120px">State</th>
                                    </tr>
                                </thead>
                                <tbody id="agreement-select-body">
                                    <tr><td colspan="3" class="text-center text-muted py-4">Loading...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btn-add-selected-agreements">Add Selected</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- Agreement Edit Modal --}}
        <div class="modal fade" id="agreementEditModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mb-0">Edit Agreement</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="agreement-edit-form">
                            <input type="hidden" id="edit_agreement_row_id" />
                            <div class="mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" id="edit_agreement_name" class="form-control" disabled />
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Description (HTML)</label>
                                <textarea id="edit_agreement_description" class="form-control" rows="10" placeholder="Agreement HTML..."></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btn-save-agreement-edit">Save Changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>    
@endsection

@push('page_script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js"></script>
<script>
// Client Discount Picker Modal (non-destructive addition)
(function(){
    const endpoint = "{{ route('admin.schedule.client-discounts.list',['id'=>$schedule->id]) }}";
    const addBtn = document.getElementById('add-discount-btn');
    if(!addBtn) return;
    const modalId = 'clientDiscountModal';
    if(!document.getElementById(modalId)){
        document.body.insertAdjacentHTML('beforeend', `\n<div class="modal fade" id="${modalId}" tabindex="-1" aria-hidden="true">\n  <div class="modal-dialog modal-md">\n    <div class="modal-content">\n      <div class="modal-header">\n        <h5 class="modal-title mb-0">Select Discount</h5>\n        <button type="button" class="btn btn-sm btn-light" data-dismiss-client-discount>×</button>\n      </div>\n      <div class="modal-body">\n        <div id="client-discount-loader" class="text-center text-muted py-3">Loading...</div>\n        <div class="d-none" id="client-discount-select-wrap">\n          <div class="mb-3">\n            <label class="form-label">Discount</label>\n            <select id="client-discount-select" class="form-select">\n              <option value="">Select</option>\n            </select>\n          </div>\n          <div id="client-discount-meta" class="small text-muted"></div>\n        </div>\n      </div>\n      <div class="modal-footer">\n        <button type="button" class="btn btn-primary" data-dismiss-client-discount>Close</button>\n        <button type="button" class="btn btn-primary" id="apply-client-discount-btn" disabled>Apply</button>\n      </div>\n    </div>\n  </div>\n</div>`);
    }
    const modalEl = document.getElementById(modalId);
    const selectWrap = modalEl.querySelector('#client-discount-select-wrap');
    const selectEl = modalEl.querySelector('#client-discount-select');
    const loaderEl = modalEl.querySelector('#client-discount-loader');
    const applyBtn = modalEl.querySelector('#apply-client-discount-btn');
    const metaEl = modalEl.querySelector('#client-discount-meta');
    let cache = [];
    function ensureBootstrap(cb){
        if(window.bootstrap && window.bootstrap.Modal) return cb();
        if(document.getElementById('dynamic-bootstrap-bundle')){ let t=0; const iv=setInterval(()=>{ if(window.bootstrap&&window.bootstrap.Modal){clearInterval(iv);cb();} if(++t>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);
    }

    tinymce.init({
        selector: 'textarea.richtext',
        menubar: false,
        height: 400,
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'help', 'wordcount'
        ],
        toolbar: 'undo redo | formatselect | bold italic underline strikethrough | ' +
                'alignleft aligncenter alignright alignjustify | ' +
                'bullist numlist | blockquote | link image | ' +
                'table | forecolor backcolor | removeformat | help',
        content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; }',
        setup: function(editor) {
            // Add custom buttons for variables and questions
            editor.ui.registry.addButton('insertvariable', {
                text: 'Insert Variable',
                onAction: function() {
                    editor.insertContent('$VARIABLE$');
                }
            });
            
            editor.ui.registry.addButton('insertquestion', {
                text: 'Insert Question',
                onAction: function() {
                    editor.insertContent('$QUESTION$');
                }
            });
        }
    });
    function showModal(){ ensureBootstrap(()=>{ try{ if(!modalEl._bs){ modalEl._bs=new window.bootstrap.Modal(modalEl);} modalEl._bs.show(); }catch{ modalEl.style.display='block'; modalEl.classList.add('show'); } }); }
    function hideModal(){ try{ modalEl._bs?.hide(); }catch{ modalEl.classList.remove('show'); modalEl.style.display='none'; } }
    modalEl.querySelectorAll('[data-dismiss-client-discount]').forEach(btn=> btn.addEventListener('click', hideModal));
    function fetchDiscounts(){
        loaderEl.classList.remove('d-none'); selectWrap.classList.add('d-none'); applyBtn.disabled = true; selectEl.innerHTML='<option value="">Select</option>';
        fetch(endpoint,{headers:{'X-Requested-With':'XMLHttpRequest'}})
            .then(r=>r.json())
            .then(j=>{ if(!j.success) throw new Error(); cache = j.data||[]; cache.forEach(d=>{ const opt=document.createElement('option'); opt.value=d.id; opt.textContent=d.title + ' ('+ (d.discount_type==='Percentage'? d.amount+'%':'$'+d.amount.toFixed(2)) +')'; opt.dataset.type=d.discount_type; opt.dataset.amount=d.amount; selectEl.appendChild(opt); }); loaderEl.classList.add('d-none'); selectWrap.classList.remove('d-none'); })
            .catch(()=>{ loaderEl.textContent='Failed to load'; });
    }
    selectEl?.addEventListener('change', ()=>{ const opt=selectEl.options[selectEl.selectedIndex]; if(!opt?.value){ applyBtn.disabled=true; metaEl.textContent=''; return; } applyBtn.disabled=false; metaEl.textContent = 'Type: '+opt.dataset.type+' | Raw Amount: '+opt.dataset.amount; });
    function addDiscountRow(title, amount){
        const section = document.querySelector('.discount-section');
        const content = section?.querySelector('.discount_content');
        if(!section || !content) return;
        if(section.classList.contains('d-none')) section.classList.remove('d-none');
        // Remove any empty placeholder rows (title empty & amount empty/0)
        content.querySelectorAll('.discount-item-row').forEach(r=>{
            const tVal = (r.querySelector('.discount-title')?.value||'').trim();
            const aVal = (r.querySelector('.discount-amount')?.value||'').trim();
            if(!tVal && (!aVal || parseFloat(aVal)==0)) r.remove();
        });
        // If duplicate title exists, update its amount instead of adding new row
        const existing = Array.from(content.querySelectorAll('.discount-item-row')).find(r=> (r.querySelector('.discount-title')?.value||'').trim().toLowerCase() === title.trim().toLowerCase());
        if(existing){
            const amtInput = existing.querySelector('.discount-amount');
            if(amtInput) amtInput.value = amount.toFixed(2);
        } else {
            const div = document.createElement('div');
            div.className='row discount-item-row mt-2';
            div.innerHTML = `
                <div class="col-lg-6 col-md-6 mob-mb-3">
                    <input type="text" class="form-control discount-title" value="${title.replace(/"/g,'&quot;')}" />
                </div>
                <div class="col-lg-3 col-md-3">
                    <div class="d-flex gap-3 align-items-center">
                        <input type="text" class="form-control discount-amount" value="${amount.toFixed(2)}" />
                        <a href="javascript:void(0);" class="discount-delete" title="Remove"><img src="{{ asset('images/delete.svg') }}" /></a>
                    </div>
                </div>`;
            content.appendChild(div);
        }
        // Recalculate via existing helper
        window.recalcScheduleTotals && window.recalcScheduleTotals();
    }
    applyBtn?.addEventListener('click', ()=>{
        const opt=selectEl.options[selectEl.selectedIndex]; if(!opt?.value) return; const type=opt.dataset.type; const raw=parseFloat(opt.dataset.amount)||0; const base=parseFloat(document.getElementById('feesCalcWrapper').dataset.baseFees)||0; let calc=0; if(type==='Percentage'){ calc = base * (raw/100.0); } else { calc = raw; } addDiscountRow(opt.textContent.split(' (')[0], calc); hideModal(); });
    addBtn.addEventListener('click', (e)=>{ e.preventDefault(); fetchDiscounts(); showModal(); });
})();
</script>
@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))
<script>
// Step3 Map initialization
window.initStep3Map = function () {
    try {
        const coordEl = document.getElementById('step3-prop-coords');
        const mapEl = document.getElementById('step3-map');
        if (!coordEl || !mapEl) {
            return console.warn('[Step3Map] Missing elements');
        }
        const latStr = coordEl.dataset.lat || coordEl.getAttribute('data-lat') || '';
        const lngStr = coordEl.dataset.lng || coordEl.getAttribute('data-lng') || '';
        const fullAddr = coordEl.dataset.fullAddress || coordEl.getAttribute('data-full-address') || '';
        console.log('[Step3Map] Raw values', { latStr, lngStr, fullAddr });
        const hasNum = v => v !== '' && !isNaN(parseFloat(v));

        function render(pos) {
            const mapInstance = new google.maps.Map(mapEl, {
                center: pos,
                zoom: 14,
                mapTypeControl: false,
                fullscreenControl: false
            });
            const marker = new google.maps.Marker({ position: pos, map: mapInstance });
            window.__propertyMap = mapInstance;
            window.__propertyMarker = marker;
            window.__step3Map = mapInstance;
            window.__step3Marker = marker;
            setTimeout(() => {
                try {
                    google.maps.event.trigger(mapInstance, 'resize');
                    mapInstance.setCenter(pos);
                } catch (_e) {}
            }, 400);
        }

        if (hasNum(latStr) && hasNum(lngStr)) {
            console.log('[Step3Map] Using stored coordinates');
            render({ lat: parseFloat(latStr), lng: parseFloat(lngStr) });
            return;
        }
        if (!fullAddr) {
            console.warn('[Step3Map] No coords and no full address – using default center fallback');
            render({ lat: 37.0902, lng: -95.7129 });
            return;
        }
        mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small"><span class="spinner-border spinner-border-sm me-2"></span>Locating...</div>';
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode({ address: fullAddr }, (results, status) => {
            if (status === 'OK' && results[0]) {
                const gLoc = results[0].geometry.location;
                render({ lat: gLoc.lat(), lng: gLoc.lng() });
            } else {
                mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small">No location found</div>';
                console.warn('[Step3Map] Geocode failed', status, fullAddr, results);
                try { render({ lat: 37.0902, lng: -95.7129 }); } catch (_e) {}
            }
        });
    } catch (e) {
        console.error('[Step3Map] Error', e);
    }
};

document.addEventListener('DOMContentLoaded', function () {
    // Image carousel
    let images = [];
    try {
        images = JSON.parse('{!! addslashes(json_encode($scheduleImageUrls ?? [])) !!}') || [];
    } catch (e) {
        images = [];
    }
    if (!Array.isArray(images)) images = [];
    let idx = 0;
    const mainImg = document.getElementById('scheduleMainImage');

    function showIdx() {
        if (mainImg && images.length && images[idx]) {
            mainImg.src = images[idx];
        }
    }

    const prevBtn = document.getElementById('imgPrevBtn');
    const nextBtn = document.getElementById('imgNextBtn');

    function updateNavState() {
        const disable = images.length < 2;
        if (prevBtn) prevBtn.disabled = disable;
        if (nextBtn) nextBtn.disabled = disable;
    }

    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            if (images.length < 2) return;
            idx = (idx - 1 + images.length) % images.length;
            showIdx();
        });
    }
    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            if (images.length < 2) return;
            idx = (idx + 1) % images.length;
            showIdx();
        });
    }
    updateNavState();
    showIdx();

    if (window.google && window.google.maps) {
        console.log('[Step3Map] Google already loaded, init shortly');
        setTimeout(() => window.initStep3Map(), 50);
    }

    setTimeout(() => {
        const mapEl = document.getElementById('step3-map');
        if (!mapEl) return;
        if (!window.__step3Map && !window.__propertyMap) {
            console.warn('[Step3Map] Map not ready after timeout, retrying');
            if (window.google && window.google.maps) {
                try { window.initStep3Map(); } catch (e) { console.error('[Step3Map] Retry failed', e); }
            } else {
                mapEl.innerHTML = '<div class="d-flex align-items-center justify-content-center h-100 text-muted small">Map script failed to load</div>';
            }
        }
    }, 6000);

    // --- Dynamic Discounts ---
    (function(){
        const addBtn = document.getElementById('add-discount-btn');
        const section = document.querySelector('.discount-section');
        if(!addBtn || !section) return; // safety
        const content = section.querySelector('.discount_content');
        if(!content) return;
        // Show section by removing Bootstrap utility class instead of only inline style
        function ensureVisible(){
            section.classList.remove('d-none');
            section.style.removeProperty('display');
        }
        function hideIfEmpty(){
            if(!content.querySelector('.discount-item-row')) {
                section.classList.add('d-none');
            }
        }

        function newRow(){
            const div = document.createElement('div');
            div.className='row discount-item-row mt-2';
            div.innerHTML = `
                <div class="col-lg-6 col-md-6 mob-mb-3">
                    <input type="text" class="form-control discount-title" placeholder="Discount Title" />
                </div>
                <div class="col-lg-3 col-md-3">
                    <div class="d-flex gap-3 align-items-center">
                        <input type="number" step="0.01" min="0" class="form-control discount-amount" placeholder="$0.00" />
                        <a href="javascript:void(0);" class="discount-delete" title="Remove"><img src="{{ asset('images/delete.svg') }}" /></a>
                    </div>
                </div>`;
            return div;
        }

        addBtn.addEventListener('click', function(e){
            e.preventDefault();
            // If client discount modal integration active, skip auto blank row (modal script will handle)
            if(addBtn.getAttribute('data-client-discount-mode') === '1') return;
            const alreadyVisible = !section.classList.contains('d-none');
            ensureVisible();
            // If this is the first time (section was hidden) and there's already a template row, don't add duplicate
            if(!alreadyVisible && content.querySelector('.discount-item-row')) return;
            content.appendChild(newRow());
            window.recalcScheduleTotals && window.recalcScheduleTotals();
        });

        content.addEventListener('click', function(e){
            const del = e.target.closest('.discount-delete');
            if(!del) return;
            e.preventDefault();
            const row = del.closest('.discount-item-row');
            if(row) row.remove();
            hideIfEmpty();
            window.recalcScheduleTotals && window.recalcScheduleTotals();
        });
        content.addEventListener('input', function(e){
            if(e.target.classList.contains('discount-amount')){
                window.recalcScheduleTotals && window.recalcScheduleTotals();
            }
        });
    })();

    // --- Dynamic Additional Fees ---
    (function(){
        const addBtn = document.getElementById('add-additional-fee-btn');
        const section = document.querySelector('.additional-fee-section');
        if(!addBtn || !section) return;
        const content = section.querySelector('.discount_content');
        if(!content) return;
        function ensureVisible(){
            section.classList.remove('d-none');
            section.style.removeProperty('display');
        }
        function hideIfEmpty(){
            if(!content.querySelector('.additional-fee-item-row')) {
                section.classList.add('d-none');
            }
        }
        function newRow(){
            const div = document.createElement('div');
            div.className='row additional-fee-item-row mt-2';
            div.innerHTML = `
                <div class="col-lg-6 col-md-6 mob-mb-3">
                    <input type="text" class="form-control additional-fee-title" placeholder="Fee Title" />
                </div>
                <div class="col-lg-3 col-md-3">
                    <div class="d-flex gap-3 align-items-center">
                        <input type="number" step="0.01" min="0" class="form-control additional-fee-amount" placeholder="0.00" />
                        <a href="javascript:void(0);" class="additional-fee-delete" title="Remove"><img src="{{ asset('images/delete.svg') }}" /></a>
                    </div>
                </div>`;
            return div;
        }

        addBtn.addEventListener('click', function(e){
            e.preventDefault();
            const alreadyVisible = !section.classList.contains('d-none');
            ensureVisible();
            if(!alreadyVisible && content.querySelector('.additional-fee-item-row')) return;
            content.appendChild(newRow());
            window.recalcScheduleTotals && window.recalcScheduleTotals();
        });

        content.addEventListener('click', function(e){
            const del = e.target.closest('.additional-fee-delete');
            if(!del) return;
            e.preventDefault();
            const row = del.closest('.additional-fee-item-row');
            if(row) row.remove();
            hideIfEmpty();
            window.recalcScheduleTotals && window.recalcScheduleTotals();
        });
        content.addEventListener('input', function(e){
            if(e.target.classList.contains('additional-fee-amount')){
                window.recalcScheduleTotals && window.recalcScheduleTotals();
            }
        });
    })();

    // --- Totals Recalculation ---
    window.recalcScheduleTotals = function(){
        const wrapper = document.getElementById('feesCalcWrapper');
        if(!wrapper) return;
        const base = parseFloat(wrapper.getAttribute('data-base-fees')||'0') || 0;
        let discountTotal = 0;
        document.querySelectorAll('.discount-amount').forEach(inp => {
            const v = (inp.value||'').replace(/[^0-9.\-]/g,'');
            const num = parseFloat(v);
            if(!isNaN(num)) discountTotal += num;
        });
        let addFeeTotal = 0;
        document.querySelectorAll('.additional-fee-amount').forEach(inp => {
            const v = (inp.value||'').replace(/[^0-9.\-]/g,'');
            const num = parseFloat(v);
            if(!isNaN(num)) addFeeTotal += num;
        });
        // Discounts subtract, additional fees add
        let subTotal = base - discountTotal + addFeeTotal;
        if(subTotal < 0) subTotal = 0; // no negative subtotal
        // Taxes placeholder (0 for now)
        const tax = 0;
        const grand = subTotal + tax;
        const fmt = n => '$ ' + n.toFixed(2);
        const subEl = document.getElementById('subTotalDisplay');
        const taxEl = document.getElementById('taxDisplay');
        const grandEl = document.getElementById('grandTotalDisplay');
        if(subEl) subEl.textContent = fmt(subTotal);
        if(taxEl) taxEl.textContent = fmt(tax);
    if(grandEl) grandEl.textContent = fmt(grand);
    const totalField = document.getElementById('total_fee_field');
    if(totalField){ totalField.value = grand.toFixed(2); }
    };
    // Initial baseline
    window.recalcScheduleTotals();
    // Invoice note counter
    const note = document.getElementById('invoice_note');
    const counter = document.getElementById('invoiceNoteCharCounter');
    if(note && counter){
        const updateCounter = ()=>{ counter.textContent = (note.value.length)+' chars'; };
        note.addEventListener('input', updateCounter);
        updateCounter();
    }

    /* ------------------ Agreements CRUD ------------------ */
    (function(){
    const agreementsBox = document.getElementById('schedule-agreements-box');
    const scheduleId = agreementsBox?.getAttribute('data-schedule-id');
    if(!scheduleId) return;
    const listUrl = agreementsBox.getAttribute('data-list-url');
    const storeUrl = agreementsBox.getAttribute('data-store-url');
    const showTpl = agreementsBox.getAttribute('data-show-url-template');
    const updateTpl = agreementsBox.getAttribute('data-update-url-template');
    const deleteTpl = agreementsBox.getAttribute('data-delete-url-template');
    const listWrap = document.getElementById('schedule-agreements-list');
        const openBtn = document.getElementById('btn-open-agreement-modal');
    const selectModalEl = document.getElementById('agreementSelectModal');
    const editModalEl = document.getElementById('agreementEditModal');
    // Ensure modals are direct children of body like step2 pattern to avoid nested styling issues
    if(selectModalEl && selectModalEl.parentElement !== document.body){ document.body.appendChild(selectModalEl); }
    if(editModalEl && editModalEl.parentElement !== document.body){ document.body.appendChild(editModalEl); }
        const selectBody = document.getElementById('agreement-select-body');
        const addSelectedBtn = document.getElementById('btn-add-selected-agreements');
        const saveEditBtn = document.getElementById('btn-save-agreement-edit');
        const editName = document.getElementById('edit_agreement_name');
        const editDesc = document.getElementById('edit_agreement_description');
        const editId = document.getElementById('edit_agreement_row_id');

        // Bootstrap modal helpers (fallback if BS not loaded)
        function showModal(el){
            try {
                if(window.bootstrap && window.bootstrap.Modal){
                    if(!el._bsModalInstance){ el._bsModalInstance = new window.bootstrap.Modal(el); }
                    el._bsModalInstance.show();
                    return;
                }
                if(window.jQuery && window.jQuery.fn.modal){ window.jQuery(el).modal('show'); return; }
            } catch(e){}
            // Dynamically load Bootstrap JS once if absent
            if(!window.bootstrap && !document.getElementById('dynamic-bootstrap-bundle-step3')){
                const s = document.createElement('script');
                s.id = 'dynamic-bootstrap-bundle-step3';
                s.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
                s.onload = ()=>{ try { if(window.bootstrap && window.bootstrap.Modal){ el._bsModalInstance = new window.bootstrap.Modal(el); el._bsModalInstance.show(); return; } } catch(_e){} manualShow(el); };
                document.head.appendChild(s);
                // fallback after timeout
                setTimeout(()=>{ if(!el._bsModalInstance) manualShow(el); }, 1500);
                return;
            }
            manualShow(el);
        }
        function manualShow(el){
            // manual fallback
            let backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            document.body.appendChild(backdrop);
            el.classList.add('show');
            el.style.display='block';
            el.removeAttribute('aria-hidden');
            el.setAttribute('aria-modal','true');
            document.body.classList.add('modal-open');
        }
        function hideModal(el){
            try {
                if(el._bsModalInstance){ el._bsModalInstance.hide(); return; }
                if(window.jQuery && window.jQuery.fn.modal){ window.jQuery(el).modal('hide'); return; }
            }catch(e){}
            el.classList.remove('show');
            el.style.display='none';
            el.setAttribute('aria-hidden','true');
            document.querySelectorAll('.modal-backdrop').forEach(b=>b.remove());
            document.body.classList.remove('modal-open');
        }

        function toastOk(msg){ if(window.toastr) toastr.success(msg); }
        function toastErr(msg){ if(window.toastr) toastr.error(msg); else console.error(msg); }

        function renderAgreementsList(items){
            if(!listWrap) return;
            if(!items.length){
                listWrap.innerHTML = '<div class="no_info noinfo_wbg">There are no agreements added yet.</div>';
                return;
            }
            const ul = document.createElement('ul');
            ul.className='list-group';
            ul.innerHTML = items.map(r=>`
                <li class="list-group-item d-flex justify-content-between align-items-center" data-id="${r.id}">
                    <span>${r.name}</span>
                    <span class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-light border btn-edit-agreement" data-id="${r.id}" title="Edit" aria-label="Edit"><img src="{{ asset('images/edit.svg') }}" alt="Edit" style="width:16px;height:16px;" /></button>
                        ${ (r.service_id == 0) ? `<button type="button" class="btn btn-sm btn-light border btn-del-agreement" data-id="${r.id}" title="Delete" aria-label="Delete"><img src="{{ asset('images/delete.svg') }}" alt="Delete" style="width:16px;height:16px;" /></button>` : '' }
                    </span>
                </li>`).join('');
            listWrap.innerHTML='';
            listWrap.appendChild(ul);
        }

        function fetchAvailableAgreements(){
            selectBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">Loading...</td></tr>';
            fetch(listUrl, {headers:{'X-Requested-With':'XMLHttpRequest'}})
                .then(r=>r.json())
                .then(json=>{
                    if(!json.success) throw new Error('Failed');
                    const existing = new Set(json.already_selected||[]);
                    if(!json.data.length){
                        selectBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">No Agreements Found</td></tr>';
                        return;
                    }
                    selectBody.innerHTML = json.data.map(a=>{
                        const isExisting = existing.has(a.id);
                        return `<tr data-id="${a.id}" class="${isExisting?'table-secondary':''}">
                            <td><input type="checkbox" class="agreement-pick" value="${a.id}" ${isExisting?'checked disabled':''}></td>
                            <td>${a.name||''} ${isExisting?'<span class="badge bg-secondary ms-1">Added</span>':''}</td>
                            <td>${a.state||''}</td>
                        </tr>`;
                    }).join('');
                })
                .catch(()=> selectBody.innerHTML = '<tr><td colspan="3" class="text-center text-danger py-4">Load failed</td></tr>');
        }

        function addSelectedAgreements(){
            const enabledChecks = [...selectBody.querySelectorAll('.agreement-pick:not(:disabled):checked')];
            if(!enabledChecks.length){ toastErr('You cannot add same agreement twice'); return; }
            const picks = enabledChecks.map(i=> parseInt(i.value,10));
            if(!picks.length){ toastErr('You cannot add same agreement twice'); return; }
            // Collect current IDs to ensure safety
            const currentIds = new Set([...listWrap.querySelectorAll('li[data-id]')].map(li=> parseInt(li.getAttribute('data-id'),10)));
            const newOnes = picks.filter(id => !currentIds.has(id));
            if(!newOnes.length){ toastErr('You cannot add same agreement twice'); return; }
            const fd = new FormData();
            newOnes.forEach(id=> fd.append('agreement_ids[]', id));
            fetch(storeUrl, {
                method:'POST',
                headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                body: fd
            }).then(r=>r.json()).then(json=>{
                if(!json.success) throw new Error(json.message||'Save failed');
                toastOk('Agreements added');
                renderAgreementsList(json.data||[]);
                hideModal(selectModalEl);
            }).catch(e=> toastErr(e.message||'Error'));
        }

        function openEdit(id){
            const url = showTpl.replace('__ID__', id);
            fetch(url, {headers:{'X-Requested-With':'XMLHttpRequest'}})
                .then(r=>r.json())
                .then(json=>{
                    if(!json.success) throw new Error('Load failed');
                    editId.value = json.data.id;
                    editName.value = json.data.name||'';
                    editDesc.value = json.data.description_html||'';
                    ensureTinyMce(()=>{
                        // Set after init if editor exists
                        const ed = window.tinymce?.get('edit_agreement_description');
                        if(ed){ ed.setContent(json.data.description_html||''); }
                    });
                    showModal(editModalEl);
                })
                .catch(()=> toastErr('Failed to load agreement'));
        }

        function saveEdit(){
            const id = editId.value;
            if(!id) return;
            // Sync TinyMCE content
            if(window.tinymce && window.tinymce.get('edit_agreement_description')){
                window.tinymce.get('edit_agreement_description').save();
            }
            const url = updateTpl.replace('__ID__', id);
            const fd = new FormData();
            fd.append('description_html', editDesc.value||'');
            fetch(url, {
                method:'POST',
                headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                body: fd
            }).then(r=>r.json()).then(json=>{
                if(!json.success) throw new Error(json.message||'Update failed');
                toastOk('Agreement updated');
                hideModal(editModalEl);
                destroyTinyMceIfExists();
            }).catch(e=> toastErr(e.message||'Error'));
        }

        function deleteAgreement(id){
            const doDelete = ()=>{
                const url = deleteTpl.replace('__ID__', id);
                fetch(url, {
                    method:'DELETE',
                    headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','X-Requested-With':'XMLHttpRequest'}
                }).then(r=>r.json()).then(json=>{
                    if(!json.success) throw new Error(json.message||'Delete failed');
                    toastOk('Agreement removed');
                    const li = listWrap.querySelector('li[data-id="'+id+'"]');
                    if(li) li.remove();
                    if(!listWrap.querySelector('li')) listWrap.innerHTML='<div class="no_info noinfo_wbg">There are no agreements added yet.</div>';
                }).catch(e=> toastErr(e.message||'Error'));
            };

            // SweetAlert2 (Swal)
            if(window.Swal && typeof window.Swal.fire === 'function'){
                window.Swal.fire({
                    title: 'Delete agreement?',
                    text: 'This will remove it from this schedule.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete',
                    cancelButtonText: 'Cancel'
                }).then(res=>{ if(res.isConfirmed) doDelete(); });
                return;
            }
            // SweetAlert (older swal)
            if(window.swal){
                window.swal({
                    title: 'Delete agreement?',
                    text: 'This will remove it from this schedule.',
                    icon: 'warning',
                    buttons: ['Cancel','Delete'],
                    dangerMode: true
                }).then(ok=>{ if(ok) doDelete(); });
                return;
            }
            // Fallback native confirm
            if(confirm('Delete agreement?')) doDelete();
        }

        // Event bindings
    if(openBtn){ openBtn.addEventListener('click', ()=>{ fetchAvailableAgreements(); showModal(selectModalEl); }); }
        if(addSelectedBtn){ addSelectedBtn.addEventListener('click', addSelectedAgreements); }
        if(saveEditBtn){ saveEditBtn.addEventListener('click', saveEdit); }
        listWrap.addEventListener('click', function(e){
            const editBtn = e.target.closest('.btn-edit-agreement');
            if(editBtn){ openEdit(editBtn.getAttribute('data-id')); return; }
            const delBtn = e.target.closest('.btn-del-agreement');
            if(delBtn){ deleteAgreement(delBtn.getAttribute('data-id')); return; }
        });

        // TinyMCE integration for agreement description
        function ensureTinyMce(cb){
            if(window.tinymce && window.tinymce.get){
                initOrReuse(cb); return;
            }
            if(!document.getElementById('tinymce-core-script')){
                const s = document.createElement('script');
                s.id='tinymce-core-script';
                s.src='https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js';
                s.referrerPolicy='no-referrer';
                s.onload=()=> initOrReuse(cb);
                document.head.appendChild(s);
            }
        }
        function initOrReuse(cb){
            if(!window.tinymce) return;
            const existing = window.tinymce.get('edit_agreement_description');
            if(existing){ if(cb) cb(); return; }
            window.tinymce.init({
                selector:'#edit_agreement_description',
                menubar:false,
                height:400,
                plugins:'advlist autolink lists link code fullscreen table searchreplace wordcount',
                toolbar:'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table | code fullscreen',
                setup:function(ed){
                    ed.on('change keyup', ()=>{ ed.save(); });
                    ed.on('init', ()=>{ if(cb) cb(); });
                },
                content_style:'body { font-family: Arial, sans-serif; font-size:14px; }'
            });
        }
        function destroyTinyMceIfExists(){
            try {
                const inst = window.tinymce?.get('edit_agreement_description');
                if(inst){ inst.save(); inst.remove(); }
            } catch(e) {}
        }

        // Clean up editor when modal hidden manually
        ['hidden.bs.modal','hide.bs.modal'].forEach(ev=>{
            editModalEl?.addEventListener(ev, ()=>{ destroyTinyMceIfExists(); });
        });
    })();

    // Step3 final submit
    (function(){
        const btn = document.getElementById('btn-submit-step3');
        const form = document.getElementById('step3FinalForm');
        if(!btn || !form) return;
        btn.addEventListener('click', function(){
            // ensure totals updated
            window.recalcScheduleTotals && window.recalcScheduleTotals();
            // sync radio values into hidden fields
            const insVal = document.querySelector('input[name="insurance_carrier"]:checked')?.value || 'no';
            const widVal = document.querySelector('input[name="widget_visiable"]:checked')?.value || 'no';
            const insHidden = document.getElementById('insurance_carrier_field');
            const widHidden = document.getElementById('widget_visiable_field');
            if(insHidden) insHidden.value = insVal;
            if(widHidden) widHidden.value = widVal === 'yes' ? 'yes' : 'no';
            const url = form.getAttribute('action');
            const fd = new FormData(form);
            fd.set('invoice_note', (document.getElementById('invoice_note')?.value||''));
            // serialize discounts
            const discountRows = [...document.querySelectorAll('.discount-item-row')];
            discountRows.forEach((row,idx)=>{
                const title = row.querySelector('.discount-title')?.value || '';
                const amt = row.querySelector('.discount-amount')?.value || '';
                if(title.trim()!=='' || amt.trim()!==''){
                    fd.append(`discounts[${idx}][title]`, title);
                    fd.append(`discounts[${idx}][amount]`, amt);
                }
            });
            // serialize additional fees
            const addFeeRows = [...document.querySelectorAll('.additional-fee-item-row')];
            addFeeRows.forEach((row,idx)=>{
                const title = row.querySelector('.additional-fee-title')?.value || '';
                const amt = row.querySelector('.additional-fee-amount')?.value || '';
                if(title.trim()!=='' || amt.trim()!==''){
                    fd.append(`additional_fees[${idx}][title]`, title);
                    fd.append(`additional_fees[${idx}][amount]`, amt);
                }
            });
            // simple fetch
            fetch(url, {
                method:'POST',
                headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','X-Requested-With':'XMLHttpRequest'},
                body: fd
            }).then(r=>r.json().catch(()=>null).then(j=>({ok:r.ok,status:r.status,json:j})))
            .then(res=>{
                if(!res.json || !res.json.success){ throw new Error(res.json?.message || 'Save failed'); }
                if(window.toastr) toastr.success(res.json.message||'Saved');
                // redirect to step3 (refresh) per requirement
                window.location.href = res.json.redirect || window.location.href;
            })
            .catch(e=>{ if(window.toastr) toastr.error(e.message); else alert(e.message); });
        });
    })();

    // Fallback ensure close buttons hide modals (if Bootstrap auto wiring fails)
    ['agreementSelectModal','agreementEditModal'].forEach(id=>{
        const el = document.getElementById(id);
        if(!el) return;
        el.querySelectorAll('.btn-close, [data-bs-dismiss="modal"]').forEach(btn=>{
            if(btn.dataset.bound) return; btn.dataset.bound='1';
            btn.addEventListener('click', (e)=>{ e.preventDefault(); hideModal(el); });
        });
    });
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&libraries=places&callback=initStep3Map"></script>
<script src="/assets/js/schedule_step3.js"></script>
@endpush

@push('styles')
<link rel="stylesheet" href="/assets/css/custom.css">
@endpush