@extends('admin.layouts.dashboard')
@section('title', 'Add 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">Add Admin Booking</h3>
            <p>Schedule a new job booking for a 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

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

        <div class="bk-form-grid">
            {{-- Left column --}}
            <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 }}">
                                {{ $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" style="display:none;">
                        <div class="bk-customer-card-icon"><i class="fas fa-user"></i></div>
                        <div>
                            <div class="bk-customer-card-name" id="selectedCustomerName"></div>
                            <div class="bk-customer-card-meta" id="selectedCustomerInfo"></div>
                        </div>
                    </div>
                </div>

                {{-- Hidden customer fields --}}
                <div style="display:none;">
                    <input type="text" name="customer_name" id="fieldName" value="{{ old('customer_name') }}">
                    <input type="text" name="phone" id="fieldPhone" value="{{ old('phone') }}">
                    <input type="email" name="customer_email" id="fieldEmail" value="{{ old('customer_email') }}">
                    <input type="text" name="address" id="fieldAddress" value="{{ old('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>
                        <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, old('product_ids', [])) ? '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 @error('job_detail') is-invalid @enderror" rows="4" placeholder="Describe the job work, scope, location notes...">{{ old('job_detail') }}</textarea>
                        @error('job_detail')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            {{-- Right column --}}
            <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>
                    <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') }}">
                        <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 a 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>
                    </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">
                                <option value="">-- Select date first --</option>
                            </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') }}</textarea>
                </div>
            </div>
        </div>

        <input type="hidden" name="job_status" value="confirmed">
        <input type="hidden" name="amount" value="0">
        <input type="hidden" name="payment_mode" value="cash">

        <div class="bk-form-actions">
            <button type="submit" class="btn btn-dark">
                <i class="fas fa-check me-1"></i> Save Booking
            </button>
            <a href="{{ route('admin.job-details.index') }}" class="btn btn-light border">Cancel</a>
        </div>
    </form>
</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 formatDateYmd(date) {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return y + '-' + m + '-' + d;
}

function slotToValue(slot) {
    const [time, period] = slot.split(' ');
    let [h, m] = time.split(':');
    h = parseInt(h, 10);
    if (period === 'PM' && h !== 12) h += 12;
    if (period === 'AM' && h === 12) h = 0;
    return String(h).padStart(2, '0') + ':' + m;
}

async function fetchSlotsForDate(dateStr) {
    const r = await fetch(`/appointments/available-times?date=${dateStr}`);
    return r.json();
}

async function findFirstDateWithSlots(startDateStr, disabledDates, maxDays = 180) {
    const current = new Date(startDateStr + 'T12:00:00');
    for (let i = 0; i < maxDays; i++) {
        const dateStr = formatDateYmd(current);
        if (!disabledDates.includes(dateStr)) {
            const data = await fetchSlotsForDate(dateStr);
            const available = data.availableSlots || [];
            if (available.length > 0) {
                return { dateStr, available };
            }
        }
        current.setDate(current.getDate() + 1);
    }
    return null;
}

const hasOldBooking = @json((bool) old('job_date'));
const oldJobTime    = @json(old('job_time', ''));

// ── Flatpickr with disabled dates ──────────────────────────
fetch('/appointments/disabled-dates')
    .then(r => r.json())
    .then(async data => {
        const disabledDates = data.disabled || [];

        flatpickr('#job_date_picker', {
            dateFormat: 'Y-m-d',
            minDate: 'today',
            disable: [
                function(date) {
                    return disabledDates.includes(formatDateYmd(date));
                }
            ],
            defaultDate: hasOldBooking ? @json(old('job_date')) : null,
            onChange: function(selectedDates, dateStr) {
                document.getElementById('job_date').value = dateStr;
                loadSlots(dateStr, true);
            },
            onReady: async function(selectedDates, dateStr, instance) {
                if (hasOldBooking) {
                    instance.setDate(@json(old('job_date')), false);
                    document.getElementById('job_date').value = @json(old('job_date'));
                    loadSlots(@json(old('job_date')), false, oldJobTime);
                    return;
                }

                const todayStr = formatDateYmd(new Date());
                const found = await findFirstDateWithSlots(todayStr, disabledDates);

                if (found) {
                    instance.setDate(found.dateStr, false);
                    document.getElementById('job_date').value = found.dateStr;
                    loadSlots(found.dateStr, true);
                } else {
                    instance.setDate(todayStr, false);
                    document.getElementById('job_date').value = todayStr;
                    loadSlots(todayStr, false);
                }
            }
        });
    });

// ── Load available time slots ──────────────────────────────
function loadSlots(date, autoSelectFirst, presetTime) {
    const select = document.getElementById('job_time');
    select.innerHTML = '<option value="">Loading…</option>';
    select.disabled = true;

    if (!date) {
        select.innerHTML = '<option value="">-- Select date first --</option>';
        return;
    }

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

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

            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;

            available.forEach(slot => {
                const opt = document.createElement('option');
                opt.value = slotToValue(slot);
                opt.textContent = slot;
                select.appendChild(opt);
            });

            if (presetTime) {
                select.value = presetTime.substring(0, 5);
            } else if (autoSelectFirst) {
                select.value = slotToValue(available[0]);
            }
        })
        .catch(() => {
            select.innerHTML = '<option value="">-- Could not load slots --</option>';
            select.disabled = false;
        });
}

// Customer dropdown — Select2 with sticky add option
function handleCustomerChange() {
    const dd = document.getElementById('customerDropdown');
    const val = dd.value;
    if (!val || val === '__add__') {
        document.getElementById('hiddenCustomerId').value = '';
        document.getElementById('selectedCustomerCard').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(', ');
    document.getElementById('selectedCustomerName').textContent = opt.dataset.name;
    document.getElementById('selectedCustomerInfo').textContent =
        [opt.dataset.phone, opt.dataset.email].filter(Boolean).join(' · ');
    document.getElementById('selectedCustomerCard').style.display = 'flex';
    bkSetFieldError('customerIdError', '', dd);
}

// Save new customer via 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';
    }
});
</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