@extends('admin.layouts.dashboard')
@section('title', 'Edit Admin Booking')

@push('head')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
@include('admin.job-details._booking-form-styles')
@endpush

@section('content')
<div class="container-fluid mt-4">

    <div class="bk-page-header">
        <div>
            <h3 class="main-heading mb-0">Edit Admin Booking</h3>
            <p>Update booking details for {{ $jobDetail->customer_name ?? 'this customer' }}</p>
        </div>
        <a href="{{ route('admin.job-details.index') }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i> Back
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger mb-3">
            <strong><i class="fas fa-exclamation-circle me-1"></i> Please fix the following:</strong>
            <ul class="mb-0 mt-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success mb-3">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger mb-3">{{ session('error') }}</div>
    @endif

    <form method="POST" action="{{ route('admin.job-details.update', $jobDetail) }}" id="adminBookingForm">
        @csrf @method('PUT')
        <input type="hidden" name="customer_id" id="hiddenCustomerId" value="{{ $jobDetail->customer_id }}">

        <div class="bk-form-grid">
            <div class="bk-form-main">

                {{-- Customer --}}
                <div class="bk-section">
                    <div class="bk-section-head">
                        <div class="bk-section-icon"><i class="fas fa-user"></i></div>
                        <div>
                            <h6 class="bk-section-title">Customer Information</h6>
                            <p class="bk-section-sub">Select an existing customer or add a new one</p>
                        </div>
                    </div>
                    <label class="bk-label" for="customerDropdown">Select Customer <span class="text-danger">*</span></label>
                    <select id="customerDropdown" class="form-control @error('customer_id') is-invalid @enderror">
                        <option value="">-- Select Existing Customer --</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}"
                                data-name="{{ $c->name }}"
                                data-phone="{{ $c->phone }}"
                                data-email="{{ $c->email }}"
                                data-address="{{ $c->address }}"
                                data-city="{{ $c->city }}"
                                data-state="{{ $c->state }}"
                                data-country="{{ $c->country }}"
                                data-pincode="{{ $c->pincode }}"
                                {{ $jobDetail->customer_id == $c->id ? 'selected' : '' }}>
                                {{ $c->name }}{{ $c->phone ? ' — '.$c->phone : '' }}
                            </option>
                        @endforeach
                        <option value="__add__" class="add-new-option">+ Add New Customer</option>
                    </select>
                    <div id="customerIdError" class="invalid-feedback d-block"@if(!$errors->has('customer_id')) style="display:none;"@endif>{{ $errors->first('customer_id') }}</div>
                    <div id="selectedCustomerCard" class="bk-customer-card" @if(!$jobDetail->customer_id || !$jobDetail->customer) style="display:none;" @endif>
                        <div class="bk-customer-card-icon"><i class="fas fa-user"></i></div>
                        <div>
                            <div class="bk-customer-card-name" id="selectedCustomerName">
                                @if($jobDetail->customer_id && $jobDetail->customer){{ $jobDetail->customer->name }}@endif
                            </div>
                            <div class="bk-customer-card-meta" id="selectedCustomerInfo">
                                @if($jobDetail->customer_id && $jobDetail->customer)
                                    {{ collect([$jobDetail->customer->phone, $jobDetail->customer->email])->filter()->implode(' · ') }}
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div style="display:none;">
                    <input type="text" name="customer_name" id="fieldName" value="{{ old('customer_name', $jobDetail->customer_name) }}">
                    <input type="text" name="phone" id="fieldPhone" value="{{ old('phone', $jobDetail->phone) }}">
                    <input type="email" name="customer_email" id="fieldEmail" value="{{ old('customer_email', $jobDetail->customer_email) }}">
                    <input type="text" name="address" id="fieldAddress" value="{{ old('address', $jobDetail->address) }}">
                </div>

                {{-- Job details --}}
                <div class="bk-section">
                    <div class="bk-section-head">
                        <div class="bk-section-icon"><i class="fas fa-briefcase"></i></div>
                        <div>
                            <h6 class="bk-section-title">Job Details</h6>
                            <p class="bk-section-sub">Items, services and work description</p>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="bk-label" for="productDropdown">Item(s) / Service(s) <span class="text-danger">*</span></label>
                        @php $selectedIds = old('product_ids', $jobDetail->product_ids ?? ($jobDetail->product_id ? [$jobDetail->product_id] : [])); @endphp
                        <select name="product_ids[]" id="productDropdown" multiple class="form-control select2-multiselect @error('product_ids') is-invalid @enderror" style="width:100%;">
                            @foreach(\App\Models\Product::where('is_active', true)->orderBy('name')->get() as $prod)
                                <option value="{{ $prod->id }}"
                                    data-name="{{ $prod->name }}"
                                    {{ in_array($prod->id, (array)$selectedIds) ? 'selected' : '' }}>
                                    {{ $prod->name }}
                                </option>
                            @endforeach
                            <option value="__add__" class="add-new-option">+ Add New Item / Service</option>
                        </select>
                        <div id="productIdsError" class="invalid-feedback d-block"@if(!$errors->has('product_ids')) style="display:none;"@endif>{{ $errors->first('product_ids') }}</div>
                        <span class="bk-hint">Select one or more items from the list</span>
                    </div>
                    <div>
                        <label class="bk-label" for="jobDetailField">Job Detail</label>
                        <textarea name="job_detail" id="jobDetailField" class="form-control" rows="4" placeholder="Describe the job work...">{{ old('job_detail', $jobDetail->job_detail) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="bk-form-side">
                <div class="bk-section">
                    <div class="bk-section-head">
                        <div class="bk-section-icon"><i class="fas fa-calendar-alt"></i></div>
                        <div>
                            <h6 class="bk-section-title">Schedule</h6>
                            <p class="bk-section-sub">Pick date and available time slot</p>
                        </div>
                    </div>
                    @php
                        $originalDate = $jobDetail->job_date->format('Y-m-d');
                        $today        = date('Y-m-d');
                    @endphp
                    <div class="mb-3">
                        <label class="bk-label" for="job_date_picker">Job Date <span class="text-danger">*</span></label>
                        <input type="hidden" id="job_date" name="job_date" value="{{ old('job_date', $originalDate) }}">
                        <div class="input-group bk-input-group">
                            <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                            <input type="text" id="job_date_picker" class="form-control @error('job_date') is-invalid @enderror" placeholder="Select date" autocomplete="off">
                        </div>
                        <div id="jobDateError" class="invalid-feedback d-block"@if(!$errors->has('job_date')) style="display:none;"@endif>{{ $errors->first('job_date') }}</div>
                        <span class="bk-hint">Only original date or today onwards</span>
                    </div>
                    <div>
                        <label class="bk-label" for="job_time">Job Time <span class="text-danger">*</span></label>
                        <div class="input-group bk-input-group">
                            <span class="input-group-text"><i class="fas fa-clock"></i></span>
                            <select id="job_time" name="job_time" class="form-control @error('job_time') is-invalid @enderror">
                                @if($jobDetail->job_time)
                                    <option value="{{ \Carbon\Carbon::createFromTimeString($jobDetail->job_time)->format('H:i') }}" selected>
                                        {{ \Carbon\Carbon::createFromTimeString($jobDetail->job_time)->format('h:i A') }}
                                    </option>
                                @else
                                    <option value="">-- Select time --</option>
                                @endif
                            </select>
                        </div>
                        <div id="jobTimeError" class="invalid-feedback d-block"@if(!$errors->has('job_time')) style="display:none;"@endif>{{ $errors->first('job_time') }}</div>
                    </div>
                </div>

                <div class="bk-section">
                    <div class="bk-section-head">
                        <div class="bk-section-icon"><i class="fas fa-sticky-note"></i></div>
                        <div>
                            <h6 class="bk-section-title">Additional Notes</h6>
                            <p class="bk-section-sub">Optional internal remarks</p>
                        </div>
                    </div>
                    <label class="bk-label" for="remarksField">Remarks</label>
                    <textarea name="remarks" id="remarksField" class="form-control" rows="3" placeholder="Any special instructions or notes...">{{ old('remarks', $jobDetail->remarks) }}</textarea>
                </div>
            </div>
        </div>

        <input type="hidden" name="job_status" value="{{ $jobDetail->job_status ?? 'pending' }}">
        <input type="hidden" name="amount" value="{{ $jobDetail->amount ?? 0 }}">
        <input type="hidden" name="payment_mode" value="{{ $jobDetail->payment_mode ?? 'cash' }}">
    </form>

        <div class="bk-form-actions d-flex flex-wrap gap-2 align-items-center">
            <button type="submit" form="adminBookingForm" class="btn btn-dark">
                <i class="fas fa-check me-1"></i> Update Booking
            </button>
            @if($jobDetail->customer_email && $jobDetail->job_status !== 'cancelled')
                <form method="POST" action="{{ route('admin.job-details.send-reminder', $jobDetail) }}"
                      class="d-flex flex-wrap align-items-center gap-2"
                      onsubmit="return confirm('Send appointment reminder to {{ $jobDetail->customer_email }}?')">
                    @csrf
                    @include('admin.partials._reminder-send-form', ['compact' => false, 'scheduledAt' => $jobDetail->scheduledAt()])
                </form>
            @endif
            @if($jobDetail->reminder_sent_at)
                <small class="text-muted ms-1">
                    Last reminder: {{ \App\Support\BusinessTimezone::formatInstant($jobDetail->reminder_sent_at) }}
                </small>
            @endif
            <a href="{{ route('admin.job-details.index') }}" class="btn btn-light border">Cancel</a>
        </div>
</div>

@include('admin.job-details._add-customer-modal')

{{-- Add Product / Service Modal --}}
<dialog id="addProductModal" class="bk-modal">
    <div class="bk-modal-inner">
        <div class="bk-modal-header">
            <h5>Add New Item / Service</h5>
            <button type="button" class="bk-modal-close" onclick="document.getElementById('addProductModal').close()">&times;</button>
        </div>
        <div id="productModalError" class="alert alert-danger d-none"></div>
        <div class="row g-3">
            <div class="col-md-8">
                <label class="bk-label">Name <span class="text-danger">*</span></label>
                <input type="text" id="pm_name" class="form-control" placeholder="Item or service name">
            </div>
            <div class="col-md-4">
                <label class="bk-label">Type <span class="text-danger">*</span></label>
                <select id="pm_item_type" class="form-control">
                    <option value="service">Service</option>
                    <option value="product">Product</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="bk-label">Unit</label>
                <select id="pm_unit" class="form-control">
                    @foreach(\App\Models\Product::units() as $k => $v)
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="bk-label">Rate ($) <span class="text-danger">*</span></label>
                <input type="number" id="pm_rate" class="form-control" min="0.01" step="0.01" placeholder="0.00">
            </div>
            <div class="col-md-4">
                <label class="bk-label">GST Rate (%)</label>
                <input type="number" id="pm_gst_rate" class="form-control" min="0" step="0.01" value="5">
            </div>
            <div class="col-md-6">
                <label class="bk-label">PST/HST Rate (%)</label>
                <input type="number" id="pm_pst_rate" class="form-control" min="0" step="0.01" value="0">
            </div>
            <div class="col-12">
                <label class="bk-label">Description</label>
                <textarea id="pm_description" class="form-control" rows="2" placeholder="Optional description"></textarea>
            </div>
        </div>
        <div class="bk-modal-footer">
            <button type="button" class="btn btn-light border" onclick="document.getElementById('addProductModal').close()">Cancel</button>
            <button type="button" class="btn btn-dark" id="saveProductBtn">
                <i class="fas fa-save me-1"></i> Save Item
            </button>
        </div>
    </div>
</dialog>

@push('scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
function handleCustomerChange() {
    const dd = document.getElementById('customerDropdown');
    const val = dd.value;
    if (!val || val === '__add__') {
        document.getElementById('hiddenCustomerId').value = '';
        const card = document.getElementById('selectedCustomerCard');
        if (card) card.style.display = 'none';
        return;
    }
    dd.dataset.prevValue = val;
    const opt = dd.options[dd.selectedIndex];
    document.getElementById('hiddenCustomerId').value = opt.value;
    document.getElementById('fieldName').value    = opt.dataset.name    || '';
    document.getElementById('fieldPhone').value   = opt.dataset.phone   || '';
    document.getElementById('fieldEmail').value   = opt.dataset.email   || '';
    document.getElementById('fieldAddress').value = [
        opt.dataset.address, opt.dataset.city, opt.dataset.state,
        opt.dataset.country, opt.dataset.pincode
    ].filter(Boolean).join(', ');

    const card = document.getElementById('selectedCustomerCard');
    const nameEl = document.getElementById('selectedCustomerName');
    const infoEl = document.getElementById('selectedCustomerInfo');
    if (card && nameEl) {
        nameEl.textContent = opt.dataset.name;
        if (infoEl) infoEl.textContent = [opt.dataset.phone, opt.dataset.email].filter(Boolean).join(' · ');
        card.style.display = 'flex';
    }
    bkSetFieldError('customerIdError', '', dd);
}

// Save customer AJAX
document.getElementById('saveCustomerBtn').addEventListener('click', async function() {
    if (!cmValidateCustomerModal()) return;
    const businessName = document.getElementById('cm_business_name').value.trim();
    const name  = document.getElementById('cm_name').value.trim();
    const phone = document.getElementById('cm_phone').value.trim();
    const email = document.getElementById('cm_email').value.trim();
    const btn = this; btn.disabled = true; btn.textContent = 'Saving...';
    try {
        const resp = await fetch('{{ route("admin.customers.store") }}', {
            method: 'POST',
            headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept':'application/json' },
            body: JSON.stringify({
                business_name: businessName,
                name: name,
                phone: phone,
                telephone_no: document.getElementById('cm_telephone_no').value.trim(),
                email: email,
                address: document.getElementById('cm_address').value.trim(),
                city: document.getElementById('cm_city').value.trim(),
                state: document.getElementById('cm_state').value.trim(),
                country: document.getElementById('cm_country').value.trim(),
                pincode: document.getElementById('cm_pincode').value.trim(),
                remarks: document.getElementById('cm_remarks').value.trim(),
            })
        });
        const data = await resp.json();
        if (data.success) {
            const c = data.customer;
            const $dd = $('#customerDropdown');
            const label = c.name + (c.phone ? ' — ' + c.phone : '');
            if ($dd.find('option[value="' + c.id + '"]').length === 0) {
                const opt = new Option(label, c.id, true, true);
                opt.dataset.name = c.name || '';
                opt.dataset.phone = c.phone || '';
                opt.dataset.email = c.email || '';
                opt.dataset.address = c.address || '';
                opt.dataset.city = c.city || '';
                opt.dataset.state = c.state || '';
                opt.dataset.country = c.country || '';
                opt.dataset.pincode = c.pincode || '';
                const $addOpt = $dd.find('option[value="__add__"]');
                if ($addOpt.length) $addOpt.before(opt);
                else $dd.append(opt);
            }
            $dd.val(String(c.id)).trigger('change');
            document.getElementById('customerDropdown').dataset.prevValue = String(c.id);
            bkCloseAddCustomerModal();
            ['cm_business_name','cm_name','cm_phone','cm_telephone_no','cm_email','cm_address','cm_city','cm_state','cm_pincode','cm_remarks'].forEach(id => document.getElementById(id).value='');
            document.getElementById('cm_country').value='Canada';
            cmClearFields(['cm_business_name', 'cm_name', 'cm_phone', 'cm_email']);
        } else if (data.errors) {
            cmApplyModalServerErrors(data.errors);
        } else {
            cmSetFieldError('cm_email', data.message || 'Failed to save customer.');
        }
    } catch(e) {
        cmSetFieldError('cm_email', 'Network error. Please try again.');
    } finally { btn.disabled=false; btn.innerHTML='<i class="fas fa-save me-1"></i> Save Customer'; }
});
const currentTime    = '{{ old('job_time', $jobDetail->job_time ? \Carbon\Carbon::createFromTimeString($jobDetail->job_time)->format('H:i') : '') }}';
const originalDate   = '{{ $originalDate }}';
const today          = '{{ $today }}';

// Flatpickr — only enable originalDate + today onwards
const fp = flatpickr('#job_date_picker', {
    dateFormat: 'Y-m-d',
    defaultDate: document.getElementById('job_date').value || originalDate,
    enable: [
        originalDate,                    // the original booking date
        { from: today, to: '2099-12-31' } // today and all future dates
    ],
    onChange: function(selectedDates, dateStr) {
        document.getElementById('job_date').value = dateStr;
        if (dateStr) loadSlots(dateStr, '');
    },
    onReady: function(selectedDates, dateStr, instance) {
        // Show formatted date in the text input
        instance.setDate(document.getElementById('job_date').value, true);
    }
});

function loadSlots(date, selectedTime) {
    const select = document.getElementById('job_time');
    select.innerHTML = '<option value="">Loading…</option>';
    select.disabled = true;

    fetch(`/appointments/available-times?date=${date}`)
        .then(r => r.json())
        .then(data => {
            const available = data.availableSlots || [];

            // No schedule for this day
            if (!data.allSlots || data.allSlots.length === 0) {
                select.innerHTML = '<option value="">-- No slots for this date --</option>';
                select.disabled = true;
                return;
            }

            // All slots booked/blocked
            if (available.length === 0) {
                select.innerHTML = '<option value="">-- No available slots --</option>';
                select.disabled = true;
                return;
            }

            select.innerHTML = '<option value="">-- Select time --</option>';
            select.disabled = false;

            // Include currently saved time even if it's now "booked" (it's this job's own slot)
            const savedIn24 = selectedTime ? selectedTime.substring(0, 5) : null;
            const savedSlotIn12 = savedIn24 ? (() => {
                let [h, m] = savedIn24.split(':').map(Number);
                const p = h >= 12 ? 'PM' : 'AM';
                if (h > 12) h -= 12;
                if (h === 0) h = 12;
                return String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0') + ' ' + p;
            })() : null;

            const slotsToShow = [...available];
            if (savedSlotIn12 && !available.includes(savedSlotIn12)) {
                slotsToShow.unshift(savedSlotIn12); // add current booking's slot back
            }

            slotsToShow.forEach(slot => {
                const [time, period] = slot.split(' ');
                let [h, m] = time.split(':');
                h = parseInt(h);
                if (period === 'PM' && h !== 12) h += 12;
                if (period === 'AM' && h === 12) h = 0;
                const val = String(h).padStart(2, '0') + ':' + m;
                const opt = document.createElement('option');
                opt.value = val;
                opt.textContent = slot + (slot === savedSlotIn12 && !available.includes(slot) ? ' (Current)' : '');
                select.appendChild(opt);
            });

            if (selectedTime) select.value = selectedTime.substring(0, 5);
        })
        .catch(() => {
            select.innerHTML = '<option value="">-- Could not load slots --</option>';
            select.disabled = false;
        });
}

// Load slots on page ready
document.addEventListener('DOMContentLoaded', function () {
    const date = document.getElementById('job_date').value;
    if (date) loadSlots(date, currentTime);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    const $customerDd = $('#customerDropdown');
    if ($customerDd.val() && $customerDd.val() !== '__add__') {
        $customerDd[0].dataset.prevValue = $customerDd.val();
    }

    $customerDd.select2({
        placeholder: '-- Select Existing Customer --',
        allowClear: true,
        width: '100%',
        templateResult: function(data) {
            if (!data.id) return data.text;
            if (data.id === '__add__') {
                return $('<span class="add-new-option"><i class="fas fa-plus me-1"></i> Add New Customer</span>');
            }
            return data.text;
        },
        matcher: function(params, data) {
            if (data.id === '__add__') return data;
            if ($.trim(params.term) === '') return data;
            if (typeof data.text === 'undefined') return null;
            return data.text.toLowerCase().indexOf(params.term.toLowerCase()) > -1 ? data : null;
        },
        sorter: function(results) {
            const addOpt = results.filter(r => r.id === '__add__');
            const others = results.filter(r => r.id !== '__add__');
            return others.concat(addOpt);
        },
    }).on('select2:selecting', function(e) {
        if (e.params.args.data.id === '__add__') {
            e.preventDefault();
            bkOpenAddCustomerModal();
        }
    }).on('change', handleCustomerChange);

    $('#productDropdown').on('change', function() {
        bkSetFieldError('productIdsError', '', document.getElementById('productDropdown'));
    });

    $('#productDropdown').select2({
        placeholder: '-- Select Item(s)/Service(s) --',
        allowClear: true,
        width: '100%',
        templateResult: function(data) {
            if (!data.id) return data.text;
            if (data.id === '__add__') {
                return $('<span class="add-new-option"><i class="fas fa-plus me-1"></i> Add New Item / Service</span>');
            }
            return data.text;
        },
        matcher: function(params, data) {
            if (data.id === '__add__') return data;
            if ($.trim(params.term) === '') return data;
            if (typeof data.text === 'undefined') return null;
            return data.text.toLowerCase().indexOf(params.term.toLowerCase()) > -1 ? data : null;
        },
        sorter: function(results) {
            const addOpt = results.filter(r => r.id === '__add__');
            const others = results.filter(r => r.id !== '__add__');
            return others.concat(addOpt);
        },
    }).on('select2:selecting', function(e) {
        if (e.params.args.data.id === '__add__') {
            e.preventDefault();
            document.getElementById('addProductModal').showModal();
        }
    }).on('select2:close', function() {
        $(this).next('.select2-container').find('.select2-search__field').blur();
    });
});

function addProductToDropdown(p) {
    const label = p.name;
    const $dd = $('#productDropdown');
    if ($dd.find('option[value="' + p.id + '"]').length === 0) {
        const opt = new Option(label, p.id, false, false);
        opt.dataset.name = p.name;
        const $addOpt = $dd.find('option[value="__add__"]');
        if ($addOpt.length) $addOpt.before(opt);
        else $dd.append(opt);
    }
    const current = $dd.val() || [];
    const idStr = String(p.id);
    if (!current.includes(idStr)) {
        current.push(idStr);
    }
    $dd.val(current).trigger('change');
}

document.getElementById('saveProductBtn').addEventListener('click', async function() {
    const name = document.getElementById('pm_name').value.trim();
    const itemType = document.getElementById('pm_item_type').value;
    const rate = parseFloat(document.getElementById('pm_rate').value);
    const errDiv = document.getElementById('productModalError');
    const prodErrors = [];
    if (!name) prodErrors.push('Name is required.');
    if (!itemType) prodErrors.push('Type is required.');
    if (!rate || rate <= 0) prodErrors.push('Rate must be greater than 0.');
    if (prodErrors.length) {
        errDiv.textContent = prodErrors.join(' ');
        errDiv.classList.remove('d-none');
        return;
    }
    document.getElementById('pm_name').classList.remove('is-invalid');
    errDiv.classList.add('d-none');
    const btn = this;
    btn.disabled = true;
    btn.textContent = 'Saving...';
    try {
        const resp = await fetch('{{ route("admin.products.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({
                name: document.getElementById('pm_name').value.trim(),
                item_type: document.getElementById('pm_item_type').value,
                unit: document.getElementById('pm_unit').value,
                rate: parseFloat(document.getElementById('pm_rate').value) || 0,
                gst_rate: parseFloat(document.getElementById('pm_gst_rate').value) || 0,
                pst_rate: parseFloat(document.getElementById('pm_pst_rate').value) || 0,
                description: document.getElementById('pm_description').value.trim(),
            }),
        });
        const data = await resp.json();
        if (data.success) {
            addProductToDropdown(data.product);
            document.getElementById('addProductModal').close();
            document.getElementById('pm_name').value = '';
            document.getElementById('pm_description').value = '';
            document.getElementById('pm_rate').value = '';
            document.getElementById('pm_gst_rate').value = '5';
            document.getElementById('pm_pst_rate').value = '0';
            document.getElementById('pm_item_type').value = 'service';
        } else {
            const msgs = data.errors ? Object.values(data.errors).flat().join(' ') : (data.message || 'Failed to save item.');
            errDiv.textContent = msgs;
            errDiv.classList.remove('d-none');
        }
    } catch (e) {
        errDiv.textContent = 'Network error. Please try again.';
        errDiv.classList.remove('d-none');
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-save me-1"></i> Save Item';
    }
});
</script>
@include('admin.customers._customer-validation')
@include('admin.job-details._booking-form-validation')
@include('admin.customers._customer-modal-address-autocomplete')
@endpush
@endsection