@extends('backEnd.layouts.master')
@section('title','Create Manual Order')
@push('styles')
<link rel="stylesheet" href="{{ asset('backEnd/css/product-live-search.css') }}?v={{ filemtime(public_path('backEnd/css/product-live-search.css')) }}">
<link rel="stylesheet" href="{{ asset('backEnd/css/customize-order.css') }}?v={{ filemtime(public_path('backEnd/css/customize-order.css')) }}">
<link rel="stylesheet" href="{{ asset('css/address-geo-breadcrumb.css') }}?v={{ filemtime(public_path('css/address-geo-breadcrumb.css')) }}">
<style>
.create-order-geo .select2-container { width: 100% !important; }
.create-order-geo .select2-container--bootstrap-5 .select2-selection {
    min-height: 38px; border-color: #dee2e6; border-radius: 0.375rem;
}
.create-order-geo .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 36px; padding-left: 12px;
}
</style>
@endpush
@section('content')
<div class="container-fluid py-3">
<style>
.order-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.order-source-option { margin: 0; cursor: pointer; }
.order-source-option input { position: absolute; opacity: 0; pointer-events: none; }
.order-source-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 88px; padding: 12px 8px;
    border: 2px solid #e5e7eb; border-radius: 12px; background: #fff;
    transition: all .15s ease; text-align: center;
}
.order-source-card i { font-size: 22px; color: var(--src-color, #374151); }
.order-source-card strong { font-size: 12px; color: #111827; }
.order-source-option input:checked + .order-source-card {
    border-color: var(--src-color, #2563eb);
    background: color-mix(in srgb, var(--src-color, #2563eb) 8%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--src-color, #2563eb) 18%, transparent);
}
.order-source-option:hover .order-source-card { border-color: #cbd5e1; }
.ai-fill-card { border-width: 2px !important; }
.ai-fill-card .card-header { background: linear-gradient(135deg, #eff6ff, #f0fdf4); }
.ai-filled { box-shadow: 0 0 0 2px #fbbf24 !important; background: #fffbeb !important; }
.ai-fill-status { min-height: 24px; }
</style>
    <div class="d-flex align-items-center mb-3">
        <a href="{{ route('admin.orders.index') }}" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-arrow-left"></i></a>
        <h4 class="mb-0 fw-bold"><i class="fas fa-cart-plus me-2 text-success"></i>Create Manual Order</h4>
    </div>

    {{-- AI Fill — separate from manual form; uses Global AI settings --}}
    <div class="card shadow-sm ai-fill-card mb-3">
        <div class="card-header d-flex flex-wrap align-items-center gap-2 py-3">
            <span class="fw-bold"><i class="fas fa-magic me-1 text-primary"></i> AI Fill</span>
            <span class="badge bg-primary">FB / WhatsApp paste</span>
            @if($aiConfigured ?? false)
            <span class="badge bg-success">Global AI ready</span>
            @else
            <span class="badge bg-warning text-dark">API key লাগবে</span>
            @if(\App\Support\SanafWorld::isDeveloper(auth()->user()))
            <a href="{{ $aiConfigUrl ?? route('admin.ai.config') }}" class="small ms-auto">→ Global AI Settings</a>
            @endif
            @endif
        </div>
        <div class="card-body">
            <p class="text-muted small mb-2">
                Messenger/WhatsApp থেকে order message copy করে paste করুন → <strong>Parse &amp; Fill</strong> → form auto-fill → শেষে <strong>Confirm Order</strong> চাপুন।
                @if(\App\Support\SanafWorld::isDeveloper(auth()->user()))
                API key: <a href="{{ route('admin.ai.config') }}">Social Automation → Global AI</a> (Gemini recommended).
                @else
                Global AI settings শুধু Developer configure করতে পারবেন।
                @endif
            </p>
            <textarea id="aiPasteMessage" class="form-control mb-2" rows="4"
                placeholder="Example:&#10;নাম: মিনা আক্তার&#10;মোবাইল: 01701234567&#10;ঠিকানা: মিরপুর ১০, ঢাকা&#10;প্রোডাক্ট: Vitamin C Serum x2 — ৳450"></textarea>
            <div class="d-flex flex-wrap gap-2 align-items-center">
                <button type="button" class="btn btn-primary" id="btnAiParseFill">
                    <i class="fas fa-wand-magic-sparkles me-1"></i> Parse &amp; Fill Form
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnAiClear">Clear</button>
                <div id="aiFillStatus" class="ai-fill-status small text-muted flex-grow-1"></div>
            </div>
        </div>
    </div>

    <form action="{{ route('admin.orders.store') }}" method="POST" id="orderForm">
        @csrf
        @if($errors->any())
        <div class="alert alert-danger border-0 shadow-sm mb-3">
            <strong><i class="fas fa-exclamation-triangle me-1"></i> Order save হয়নি — নিচের field গুলো ঠিক করুন:</strong>
            <ul class="mb-0 mt-2 small">@foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach</ul>
        </div>
        @endif
        <div class="row g-3">
            {{-- Customer Info --}}
            <div class="col-lg-7">
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-transparent fw-semibold"><i class="fas fa-user me-1 text-info"></i> Customer Details</div>
                    <div class="card-body">
                        {{-- Phone lookup --}}
                        @if(isset($repeat))
                        <div class="alert alert-warning border-0 mb-3 py-2 small">
                            <i class="fas fa-redo me-1"></i> Repeat order from <strong>#{{ $repeat->invoice_id }}</strong> — {{ $repeat->customer_name }}
                        </div>
                        @endif
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Phone Number *</label>
                            <div class="input-group">
                                <input type="tel" name="customer_phone" id="lookupPhone" class="form-control bd-phone-input"
                                    placeholder="01XXXXXXXXX" maxlength="11" inputmode="numeric"
                                    data-bd-phone-smart-paste="aiPasteMessage"
                                    data-bd-phone-smart-paste-parse="#btnAiParseFill"
                                    value="{{ $repeat->customer_phone ?? ($prefillPhone ?? '') }}" required>
                                <button type="button" class="btn btn-outline-primary" id="lookupBtn">
                                    <i class="fas fa-search"></i> Lookup
                                </button>
                            </div>
                            <small class="text-muted d-block">Phone দিন — returning customer auto-fill হবে। Full order message paste করলে AI Fill box-এ যাবে।</small>
                            <small id="phoneLookupStatus" class="d-block mt-1 small"></small>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Customer Name *</label>
                                <input type="text" name="customer_name" id="custName" class="form-control" value="{{ $repeat->customer_name ?? ($prefillName ?? '') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Email</label>
                                <input type="email" name="customer_email" id="custEmail" class="form-control" value="{{ $repeat->customer_email ?? '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Shipping Address *</label>
                                <textarea name="shipping_address" id="custAddress" class="form-control" rows="2" required placeholder="e.g. Hamzarbag, Panchlaish, CTG">{{ old('shipping_address', $repeat->shipping_address ?? '') }}</textarea>
                                <small class="text-muted">Area, upazila, district লিখলে District ও Upazila auto select হবে (e.g. <code>panchlaish, ctg</code>)</small>
                                <span class="d-block small text-muted" id="addressGeoStatus"></span>
                                @include('shared.partials.delivery-area-breadcrumb')
                            </div>
                            <div class="col-md-6 create-order-geo">
                                <label class="form-label fw-semibold">District *</label>
                                <select name="district" id="custDistrict" class="form-select checkout-search-select" required data-placeholder="জেলা খুঁজুন / Type district">
                                    <option value=""></option>
                                    @if(($shippingMode ?? 'district_wise') === 'simple')
                                        <option value="Inside Dhaka" data-id="0" data-charge="{{ $insideDhakaFee ?? 60 }}"
                                            {{ old('district', $repeat->district ?? '') === 'Inside Dhaka' ? 'selected' : '' }}>
                                            Inside Dhaka (৳{{ number_format($insideDhakaFee ?? 60, 0) }})
                                        </option>
                                        <option value="Outside Dhaka" data-id="0" data-charge="{{ $outsideDhakaFee ?? 120 }}"
                                            {{ old('district', $repeat->district ?? '') === 'Outside Dhaka' ? 'selected' : '' }}>
                                            Outside Dhaka (৳{{ number_format($outsideDhakaFee ?? 120, 0) }})
                                        </option>
                                    @else
                                        @foreach($districts as $d)
                                        @php $charge = $districtChargeMap[$d->id] ?? $d->shipping_charge ?? $defaultShippingFee ?? 80; @endphp
                                        <option value="{{ $d->name }}" data-id="{{ $d->id }}" data-charge="{{ $charge }}"
                                            {{ old('district', $repeat->district ?? '') === $d->name ? 'selected' : '' }}>
                                            {{ $d->name }}@if($d->bn_name) — {{ $d->bn_name }}@endif (৳{{ number_format($charge, 0) }})
                                        </option>
                                        @endforeach
                                    @endif
                                </select>
                                @error('district')<div class="text-danger small">{{ $message }}</div>@enderror
                                <small class="text-muted">Shipping charge auto-loads from <a href="{{ route('admin.shipping') }}" target="_blank">Shipping Settings</a></small>
                            </div>
                            <div class="col-md-6 create-order-geo">
                                <label class="form-label fw-semibold">Upazila / Police Station *</label>
                                <select name="upazila" id="custUpazila" class="form-select checkout-search-select" required disabled data-placeholder="উপজেলা খুঁজুন / Type upazila">
                                    <option value=""></option>
                                </select>
                                @error('upazila')<div class="text-danger small">{{ $message }}</div>@enderror
                                <small class="text-muted">District select করলে upazila list load হবে — না পেলে type করে Enter চাপুন</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Payment Method</label>
                                <select name="payment_method" class="form-select">
                                    <option value="cod">Cash on Delivery</option>
                                    <option value="bkash">bKash</option>
                                    <option value="nagad">Nagad</option>
                                    <option value="bank">Bank Transfer</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Products — POS style: search → auto add to cart --}}
                <div class="card shadow-sm border-0 mb-3 co-card co-card-products">
                    <div class="card-header co-card-header fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <span><i class="fas fa-box me-1"></i> Order Items</span>
                        <span class="badge bg-white text-success co-pos-count" id="posCartCount">0 items</span>
                    </div>
                    <div class="card-body p-0">
                        <div class="co-pos-search-wrap p-3 border-bottom bg-light">
                            <label class="form-label fw-semibold small mb-2 co-pos-search-label">
                                <i class="fas fa-search me-1 text-success"></i> Product Search
                            </label>
                            <div class="product-search-wrap co-pos-search" id="posSearchWrap">
                                <input type="text"
                                       class="form-control product-search-input co-pos-search-input"
                                       id="posProductSearch"
                                       placeholder="Search product — name, SKU, brand, category..."
                                       autocomplete="off">
                                <input type="hidden" class="product-id-input" value="">
                                <input type="hidden" class="product-variant-id-input" value="">
                                <input type="hidden" class="product-size-input" value="">
                                <input type="hidden" class="product-color-input" value="">
                                <div class="product-search-dropdown"></div>
                            </div>
                            <small class="text-muted d-block mt-2">Search করে product select করলে নিচে auto add হবে — একই product আবার select করলে qty বাড়বে।</small>
                        </div>
                        <div class="co-product-scroll table-responsive">
                            <table class="admin-table co-product-table co-pos-table mb-0">
                                <thead>
                                    <tr>
                                        <th style="width:42%">Product</th>
                                        <th style="width:16%">Price</th>
                                        <th style="width:22%">Qty</th>
                                        <th style="width:14%">Total</th>
                                        <th style="width:6%"></th>
                                    </tr>
                                </thead>
                                <tbody id="orderItems"></tbody>
                            </table>
                            <div id="posCartEmpty" class="co-pos-empty text-center py-4 px-3">
                                <i class="fas fa-shopping-basket fa-2x text-muted mb-2 d-block opacity-50"></i>
                                <p class="text-muted mb-0 small">কোনো product add হয়নি — উপরে search করুন</p>
                            </div>
                        </div>
                    </div>
                </div>

                <template id="createOrderItemTemplate">
                    @include('backEnd.order.partials.create-order-item-row', ['idx' => '__IDX__', 'row' => []])
                </template>

                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-transparent fw-semibold">
                        <i class="fas fa-bullhorn me-1 text-primary"></i> Order Source *
                    </div>
                    <div class="card-body">
                        <div class="order-source-grid">
                            @foreach(\App\Models\Order::sourceOptions() as $key => $meta)
                            @if($key === 'website')
                                @continue
                            @endif
                            <label class="order-source-option">
                                <input type="radio" name="order_source" value="{{ $key }}"
                                    {{ old('order_source', 'whatsapp') === $key ? 'checked' : '' }} required>
                                <span class="order-source-card" style="--src-color: {{ $meta['color'] }}">
                                    <i class="{{ $meta['icon'] }}"></i>
                                    <strong>{{ $meta['label'] }}</strong>
                                </span>
                            </label>
                            @endforeach
                        </div>
                        <small class="text-muted d-block mt-2">Website থেকে আসা order auto “Website” tag পায় — manual order-এ source select করুন।</small>
                        @error('order_source')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            {{-- Summary --}}
            <div class="col-lg-5">
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-transparent fw-semibold"><i class="fas fa-receipt me-1 text-warning"></i> Order Summary</div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Subtotal</span>
                            <span id="sumSubtotal" class="fw-semibold">৳0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2 align-items-center">
                            <span class="text-muted">Shipping</span>
                            <div class="text-end" style="width:120px">
                                <input type="number" name="shipping_charge" id="shippingInput" class="form-control form-control-sm text-end fw-semibold" value="0" min="0" readonly>
                                <small id="shippingHint" class="text-muted d-none"></small>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between mb-2 align-items-center">
                            <span class="text-muted">Discount</span>
                            <input type="number" name="discount" id="discountInput" class="form-control form-control-sm text-end" style="width:120px" value="0" min="0">
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between fw-bold fs-5">
                            <span>Total</span>
                            <span id="sumTotal" class="text-success">৳0</span>
                        </div>
                        <input type="hidden" name="amount" id="amountInput">
                    </div>
                </div>

                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-transparent fw-semibold">Admin Note</div>
                    <div class="card-body">
                        <textarea name="admin_note" class="form-control" rows="3" placeholder="Internal note..."></textarea>
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="fas fa-check me-1"></i> Confirm Order
                    </button>
                    <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection
@push('scripts')
<script src="{{ asset('backEnd/js/product-live-search.js') }}?v={{ filemtime(public_path('backEnd/js/product-live-search.js')) }}"></script>
<script src="{{ asset('backEnd/js/create-order-pos.js') }}?v={{ filemtime(public_path('backEnd/js/create-order-pos.js')) }}"></script>
<script src="{{ asset('js/address-geo-area-search.js') }}?v={{ filemtime(public_path('js/address-geo-area-search.js')) }}"></script>
<script>
const productSearchUrl = @json(route('admin.orders.product-search'));
const parseMessageUrl = @json(route('admin.orders.parse-message'));
const phoneHistoryUrl = @json(route('admin.orders.phone-history'));
const districtForUpazilaUrl = @json(route('admin.orders.district-for-upazila'));
const resolveAddressGeoUrl = @json(route('admin.orders.resolve-address-geo'));
const searchPathaoAreasUrl = @json(route('bd-address-geo.search-areas'));
const shippingQuoteUrl = @json(route('admin.orders.shipping-quote'));
const upazilasUrl = @json(url('/get-upazilas'));
const presetUpazila = @json(old('upazila', $repeat->upazila ?? ''));
const createShippingMode = @json($shippingMode ?? 'district_wise');
let upazilaLoadSeq = 0;
let lastLookupPhone = '';
let phoneLookupTimer = null;

function hasSelect2() {
    return typeof window.jQuery !== 'undefined' && typeof jQuery.fn.select2 === 'function';
}

function destroySearchSelect(el) {
    if (!el || !hasSelect2()) return;
    const $el = jQuery(el);
    if ($el.hasClass('select2-hidden-accessible')) {
        $el.select2('destroy');
    }
}

function initDistrictSearchSelect() {
    const el = document.getElementById('custDistrict');
    if (!el || !hasSelect2()) return;

    destroySearchSelect(el);
    jQuery(el).select2({
        width: '100%',
        theme: 'bootstrap-5',
        placeholder: el.dataset.placeholder || 'জেলা খুঁজুন / Type district',
        allowClear: true,
        dropdownParent: jQuery('#orderForm'),
        language: {
            noResults: function () { return 'কোনো জেলা পাওয়া যায়নি'; },
            searching: function () { return 'খুঁজছি...'; },
        },
    });
}

function initUpazilaSearchSelect() {
    const el = document.getElementById('custUpazila');
    if (!el || !hasSelect2()) return;

    destroySearchSelect(el);
    jQuery(el).select2({
        width: '100%',
        theme: 'bootstrap-5',
        placeholder: el.dataset.placeholder || 'উপজেলা খুঁজুন / Type upazila',
        allowClear: true,
        tags: true,
        dropdownParent: jQuery('#orderForm'),
        createTag: function (params) {
            const term = (params.term || '').trim();
            if (!term) return null;
            return { id: term, text: term, newTag: true };
        },
        language: {
            noResults: function () { return 'লিখে Enter চাপুন / Type and press Enter'; },
            searching: function () { return 'খুঁজছি...'; },
        },
    });

    jQuery(el).prop('disabled', el.disabled);
}

function getSelectedOptionData(select, key) {
    if (!select || !select.value) return '';
    for (let i = 0; i < select.options.length; i++) {
        if (select.options[i].value === select.value) {
            return select.options[i].dataset?.[key] || '';
        }
    }
    return '';
}

function bindSelectChange(el, handler) {
    if (!el) return;
    if (hasSelect2()) {
        jQuery(el).off('change.createOrder select2:select.createOrder').on('change.createOrder', handler);
    } else {
        el.addEventListener('change', handler);
    }
}

function syncSelect2Display(select) {
    if (!select || !hasSelect2()) return;
    jQuery(select).val(select.value || '').trigger('change.select2');
}

function setGeoSelectValue(select, value, triggerChange) {
    if (!select || !value) return false;
    let matched = false;
    [...select.options].forEach(o => {
        o.selected = (o.value === value || o.value.toLowerCase() === value.toLowerCase());
        if (o.selected && o.value) matched = true;
    });
    if (!matched) {
        [...select.options].forEach(o => {
            if (o.value && (o.value.includes(value) || value.includes(o.value))) {
                o.selected = true;
                matched = true;
            }
        });
    }
    if (!matched) {
        select.add(new Option(value, value, true, true));
        matched = true;
    }
    syncSelect2Display(select);
    if (triggerChange) {
        if (hasSelect2()) {
            jQuery(select).trigger('change');
        } else {
            select.dispatchEvent(new Event('change', { bubbles: true }));
        }
    }
    return matched;
}

function resolveDistrictFromUpazila(upazila, options) {
    options = options || {};
    upazila = (upazila || '').trim();
    if (!upazila) return Promise.resolve(null);

    return fetch(districtForUpazilaUrl + '?upazila=' + encodeURIComponent(upazila), {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
        .then(r => r.json())
        .then(function (res) {
            if (!res.district) return null;

            const districtEl = document.getElementById('custDistrict');
            const upazilaEl = document.getElementById('custUpazila');
            setGeoSelectValue(districtEl, res.district, false);
            if (options.markAi) markAiFilled(districtEl);

            return loadUpazilasForDistrict(districtEl, res.upazila || upazila).then(function () {
                const finalUpazila = res.upazila || upazila;
                setGeoSelectValue(upazilaEl, finalUpazila, false);
                if (options.markAi) markAiFilled(upazilaEl);
                refreshShippingQuote();
                return res;
            });
        })
        .catch(function () { return null; });
}

function applyParsedGeo(data) {
    const district = (data.district || '').trim();
    const upazila = (data.upazila || '').trim();
    if (!district && !upazila) return Promise.resolve();

    if (district) {
        const districtEl = document.getElementById('custDistrict');
        const upazilaEl = document.getElementById('custUpazila');
        setGeoSelectValue(districtEl, district, false);
        markAiFilled(districtEl);
        return loadUpazilasForDistrict(districtEl, upazila).then(function () {
            if (upazila) {
                setGeoSelectValue(upazilaEl, upazila, false);
                markAiFilled(upazilaEl);
            }
            refreshShippingQuote();
            updateDeliveryAreaBreadcrumb(data.district, data.upazila, {
                deliveryArea: data.delivery_area,
                matchSource: data.match_source,
            });
        });
    }

    return resolveDistrictFromUpazila(upazila, { markAi: true }).then(function (res) {
        if (res) {
            updateDeliveryAreaBreadcrumb(res.district, res.upazila || upazila, {
                deliveryArea: formatDeliveryArea(res.district, res.upazila || upazila),
                matchSource: data.match_source,
            });
        }
    });
}

let geoAutoApplying = false;
let userEditedGeo = false;
let addressGeoTimer = null;
let addressGeoResolveSeq = 0;
let addressGeoAbort = null;

function showAddressGeoStatus(message, tone) {
    const el = document.getElementById('addressGeoStatus');
    if (!el) return;
    el.textContent = message || '';
    el.className = 'd-block small'
        + (tone === 'success' ? ' text-success fw-semibold'
            : tone === 'warning' ? ' text-warning'
            : ' text-muted');
}

function formatDeliveryArea(district, upazila) {
    district = (district || '').trim();
    upazila = (upazila || '').trim();
    if (district && upazila) return district + ' >> ' + upazila;
    return district || upazila || '';
}

function updateDeliveryAreaBreadcrumb(district, upazila, options) {
    options = options || {};
    const el = document.getElementById('deliveryAreaBreadcrumb');
    const routeEl = document.getElementById('deliveryAreaRoute');
    const hintEl = document.getElementById('deliveryAreaHint');
    if (!el || !routeEl) return;

    const route = options.deliveryArea || formatDeliveryArea(district, upazila);
    if (!route) {
        el.hidden = true;
        el.classList.remove('is-visible', 'is-approx');
        routeEl.textContent = '';
        if (hintEl) hintEl.textContent = '';
        return;
    }

    routeEl.textContent = route;
    el.hidden = false;
    el.classList.add('is-visible');
    el.classList.toggle('is-approx', options.matchSource === 'fuzzy' || options.matchSource === 'alias');
    if (hintEl) {
        hintEl.textContent = options.matchSource === 'fuzzy'
            ? 'Approx match — verify Upazila if needed'
            : options.matchSource === 'alias'
                ? 'Area nickname matched — verify if needed'
                : (options.hint || 'Auto detected from address');
    }
}

function syncDeliveryAreaFromSelects() {
    const districtEl = document.getElementById('custDistrict');
    const upazilaEl = document.getElementById('custUpazila');
    const district = districtEl?.options[districtEl.selectedIndex]?.text?.trim() || districtEl?.value || '';
    const upazila = upazilaEl?.options[upazilaEl.selectedIndex]?.text?.trim() || upazilaEl?.value || '';
    updateDeliveryAreaBreadcrumb(district, upazila, {
        deliveryArea: formatDeliveryArea(district, upazila),
        hint: 'Selected delivery area',
    });
}

function resolveGeoFromAddress(address, options) {
    options = options || {};
    address = (address || '').trim();
    const requestSeq = ++addressGeoResolveSeq;

    if (address.length < 8) {
        showAddressGeoStatus('');
        return Promise.resolve(null);
    }
    if (userEditedGeo && !options.force) {
        return Promise.resolve(null);
    }

    if (addressGeoAbort) {
        addressGeoAbort.abort();
    }
    addressGeoAbort = typeof AbortController !== 'undefined' ? new AbortController() : null;

    showAddressGeoStatus('District/Upazila detect হচ্ছে…');

    return fetch(resolveAddressGeoUrl + '?address=' + encodeURIComponent(address), {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        signal: addressGeoAbort ? addressGeoAbort.signal : undefined,
    })
        .then(r => r.json())
        .then(function (res) {
            if (requestSeq !== addressGeoResolveSeq) {
                return null;
            }

            if (!res.success) {
                showAddressGeoStatus(res.message || 'District/Upazila detect হয়নি — manually select করুন', 'warning');
                return null;
            }

            geoAutoApplying = true;
            return applyParsedGeo(res).then(function () {
                if (requestSeq !== addressGeoResolveSeq) {
                    return null;
                }
                const route = res.delivery_area || formatDeliveryArea(res.district, res.upazila);
                showAddressGeoStatus('Auto: ' + route, 'success');
                updateDeliveryAreaBreadcrumb(res.district, res.upazila, {
                    deliveryArea: route,
                    matchSource: res.match_source,
                });
                userEditedGeo = false;
                return res;
            }).finally(function () {
                geoAutoApplying = false;
            });
        })
        .catch(function (err) {
            if (err && err.name === 'AbortError') {
                return null;
            }
            if (requestSeq === addressGeoResolveSeq) {
                showAddressGeoStatus('');
            }
            return null;
        });
}

function scheduleAddressGeoResolve() {
    clearTimeout(addressGeoTimer);
    addressGeoTimer = setTimeout(function () {
        const addrEl = document.getElementById('custAddress');
        if (!addrEl) return;
        resolveGeoFromAddress(addrEl.value);
    }, 700);
}

function recalcRow(row) {
    let price = parseFloat(row.querySelector('.item-price').value) || 0;
    let qty   = parseFloat(row.querySelector('.item-qty').value) || 1;
    const line = price * qty;
    const totalInput = row.querySelector('.item-total');
    const totalSpan = row.querySelector('.co-line-total');
    if (totalInput) totalInput.value = line.toFixed(0);
    if (totalSpan) totalSpan.textContent = '৳' + line.toLocaleString('en-BD', { maximumFractionDigits: 0 });
    recalcTotal();
}
window.recalcRow = recalcRow;

function recalcTotal() {
    let subtotal = 0;
    document.querySelectorAll('.order-item').forEach(r => {
        let price = parseFloat(r.querySelector('.item-price').value) || 0;
        let qty   = parseFloat(r.querySelector('.item-qty').value) || 0;
        subtotal += price * qty;
    });
    let shipping = parseFloat(document.getElementById('shippingInput').value) || 0;
    let discount = parseFloat(document.getElementById('discountInput').value) || 0;
    let total    = subtotal + shipping - discount;
    document.getElementById('sumSubtotal').textContent = '৳' + subtotal.toFixed(0);
    document.getElementById('sumTotal').textContent    = '৳' + total.toFixed(0);
    document.getElementById('amountInput').value       = total.toFixed(0);
}

let createOrderPos = null;

function initCreateOrderPos() {
    if (typeof CreateOrderPos === 'undefined') return;
    createOrderPos = new CreateOrderPos({ productSearchUrl: productSearchUrl });
    createOrderPos.init();
    window.createOrderPos = createOrderPos;
}

initCreateOrderPos();
document.querySelectorAll('#shippingInput,#discountInput').forEach(el => el.addEventListener('input', recalcTotal));

function collectOrderProductIds() {
    return [...document.querySelectorAll('.product-id-input')]
        .map(el => el.value)
        .filter(Boolean);
}

function refreshShippingQuote() {
    const districtEl = document.getElementById('custDistrict');
    const district = districtEl.value;
    if (!district) return;

    const params = new URLSearchParams({
        district: district,
        district_id: getSelectedOptionData(districtEl, 'id') || '',
        product_ids: collectOrderProductIds().join(',')
    });

    fetch(shippingQuoteUrl + '?' + params.toString(), {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
        .then(r => r.json())
        .then(data => {
            const charge = parseFloat(data.shipping_charge || 0);
            document.getElementById('shippingInput').value = charge.toFixed(0);
            const hint = document.getElementById('shippingHint');
            if (data.free_shipping) {
                hint.textContent = 'Free Shipping product';
                hint.classList.remove('d-none');
                hint.classList.add('text-success');
            } else {
                hint.textContent = data.label ? ('Rate: ' + data.label) : '';
                hint.classList.toggle('d-none', !hint.textContent);
                hint.classList.remove('text-success');
            }
            recalcTotal();
        })
        .catch(() => {});
}
window.refreshShippingQuote = refreshShippingQuote;

function loadUpazilasForDistrict(districtSelect, selectedUpazila) {
    const upazilaSelect = document.getElementById('custUpazila');
    const districtId = getSelectedOptionData(districtSelect, 'id');
    const loadSeq = ++upazilaLoadSeq;

    destroySearchSelect(upazilaSelect);
    upazilaSelect.innerHTML = '<option value=""></option>';
    upazilaSelect.disabled = true;

    if (!districtSelect.value) {
        if (hasSelect2()) jQuery(upazilaSelect).prop('disabled', true);
        initUpazilaSearchSelect();
        return Promise.resolve();
    }

    if (!districtId || districtId === '0') {
        const opt = document.createElement('option');
        opt.value = 'General';
        opt.textContent = 'General';
        opt.selected = true;
        upazilaSelect.appendChild(opt);
        upazilaSelect.disabled = false;
        initUpazilaSearchSelect();
        if (hasSelect2()) jQuery(upazilaSelect).prop('disabled', false);
        return Promise.resolve();
    }

    upazilaSelect.innerHTML = '<option value="">Loading...</option>';
    upazilaSelect.disabled = true;

    return fetch(upazilasUrl + '/' + districtId, {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
        .then(r => r.json())
        .then(data => {
            if (loadSeq !== upazilaLoadSeq) return;

            upazilaSelect.innerHTML = '<option value=""></option>';
            const seen = new Set();
            (data.upazilas || []).forEach(function (u) {
                const name = (u.name || '').trim();
                if (!name || seen.has(name)) return;
                seen.add(name);

                const option = document.createElement('option');
                option.value = name;
                option.textContent = u.label || name;
                if (selectedUpazila && name === selectedUpazila) {
                    option.selected = true;
                }
                upazilaSelect.appendChild(option);
            });
            upazilaSelect.disabled = false;
            initUpazilaSearchSelect();
            if (selectedUpazila) {
                setGeoSelectValue(upazilaSelect, selectedUpazila, false);
            }
        })
        .catch(function () {
            if (loadSeq !== upazilaLoadSeq) return;

            upazilaSelect.innerHTML = '<option value=""></option>';
            upazilaSelect.disabled = false;
            initUpazilaSearchSelect();
            if (selectedUpazila) {
                setGeoSelectValue(upazilaSelect, selectedUpazila, false);
            }
        });
}

const custDistrictEl = document.getElementById('custDistrict');
const custAddressEl = document.getElementById('custAddress');

bindSelectChange(custDistrictEl, function () {
    if (!geoAutoApplying) {
        userEditedGeo = true;
    }
    loadUpazilasForDistrict(custDistrictEl);
    refreshShippingQuote();
    syncDeliveryAreaFromSelects();
});

custAddressEl?.addEventListener('input', function () {
    userEditedGeo = false;
    scheduleAddressGeoResolve();
});

initDistrictSearchSelect();
initUpazilaSearchSelect();

if (window.BdPathaoAreaSearch && custAddressEl && searchPathaoAreasUrl) {
    BdPathaoAreaSearch.bind({
        addressEl: custAddressEl,
        districtEl: custDistrictEl,
        searchAreasUrl: searchPathaoAreasUrl,
        applyGeo: function (data) {
            geoAutoApplying = true;
            applyParsedGeo(data).finally(function () {
                geoAutoApplying = false;
                userEditedGeo = false;
            });
        },
    });
}

bindSelectChange(document.getElementById('custUpazila'), function () {
    if (!geoAutoApplying) {
        userEditedGeo = true;
    }
    const upazilaEl = document.getElementById('custUpazila');
    const districtEl = document.getElementById('custDistrict');
    const upazila = (upazilaEl?.value || '').trim();
    if (!upazila) return;
    resolveDistrictFromUpazila(upazila).then(function (res) {
        if (res?.district && districtEl && !districtEl.value) {
            markAiFilled(districtEl);
        }
        syncDeliveryAreaFromSelects();
    });
});

if (custDistrictEl.value) {
    if (hasSelect2()) jQuery(custDistrictEl).val(custDistrictEl.value);
    loadUpazilasForDistrict(custDistrictEl, presetUpazila).then(function () {
        refreshShippingQuote();
        syncDeliveryAreaFromSelects();
    });
} else {
    syncDeliveryAreaFromSelects();
}

document.getElementById('orderForm').addEventListener('submit', function (e) {
    const phoneEl = document.getElementById('lookupPhone');
    if (phoneEl && window.BdPhone) {
        phoneEl.value = BdPhone.normalize(phoneEl.value);
        if (!BdPhone.isValid(phoneEl.value)) {
            e.preventDefault();
            alert('সঠিক ১১ সংখ্যার মোবাইল নম্বর দিন (01XXXXXXXXX)।');
            return;
        }
    }

    const upazilaEl = document.getElementById('custUpazila');
    upazilaEl.disabled = false;
    if (hasSelect2()) {
        jQuery(upazilaEl).prop('disabled', false);
    }
});

function showPhoneLookupStatus(message, tone) {
    const el = document.getElementById('phoneLookupStatus');
    if (!el) return;
    el.textContent = message || '';
    el.className = 'd-block mt-1 small'
        + (tone === 'success' ? ' text-success fw-semibold'
            : tone === 'warning' ? ' text-warning'
            : tone === 'danger' ? ' text-danger'
            : ' text-muted');
}

function applyPhoneLookupData(d, options) {
    options = options || {};
    const nameEl = document.getElementById('custName');
    const emailEl = document.getElementById('custEmail');
    const addrEl = document.getElementById('custAddress');
    const districtEl = document.getElementById('custDistrict');

    if (d.customer) {
        nameEl.value = d.customer.name || '';
        emailEl.value = d.customer.email || '';
        addrEl.value = d.customer.address || '';
        if (!options.skipGeo && d.customer.district) {
            const upazila = d.customer.upazila || d.last_upazila || '';
            setGeoSelectValue(districtEl, d.customer.district, false);
            return loadUpazilasForDistrict(districtEl, upazila).then(refreshShippingQuote).then(function () {
                return 'customer';
            });
        }
        return Promise.resolve('customer');
    }

    const last = (d.orders && d.orders.length) ? d.orders[0] : null;
    if (last) {
        if (last.customer_name) nameEl.value = last.customer_name;
        if (last.shipping_address) addrEl.value = last.shipping_address;
        if (last.customer_email) emailEl.value = last.customer_email;
    }

    if (!options.skipGeo && (d.last_district || last?.district)) {
        const district = d.last_district || last.district;
        const upazila = d.last_upazila || last?.upazila || '';
        setGeoSelectValue(districtEl, district, false);
        return loadUpazilasForDistrict(districtEl, upazila).then(refreshShippingQuote).then(function () {
            return last ? 'order' : 'geo';
        });
    }

    if (last) return Promise.resolve('order');
    if (!options.skipGeo && d.last_upazila) {
        return resolveDistrictFromUpazila(d.last_upazila).then(function () { return 'geo'; });
    }

    return Promise.resolve('new');
}

function runPhoneLookup(options) {
    options = options || {};
    let phone = document.getElementById('lookupPhone').value.trim();
    if (window.BdPhone) {
        phone = BdPhone.normalize(phone);
        document.getElementById('lookupPhone').value = phone;
    }
    if (!phone) {
        showPhoneLookupStatus('', '');
        return;
    }
    if (window.BdPhone && !BdPhone.isValid(phone)) {
        if (phone.length >= 11) {
            showPhoneLookupStatus('Valid 11-digit mobile number দিন (01XXXXXXXXX)', 'warning');
        } else {
            showPhoneLookupStatus('', '');
        }
        return;
    }
    if (phone === lastLookupPhone && !options.force) {
        return;
    }

    lastLookupPhone = phone;
    showPhoneLookupStatus('Looking up customer…', '');

    fetch(phoneHistoryUrl + '?phone=' + encodeURIComponent(phone), {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
        .then(r => r.json())
        .then(function (d) {
            return applyPhoneLookupData(d, options).then(function (kind) {
                return { d: d, kind: kind };
            });
        })
        .then(function ({ d, kind }) {
            if (kind === 'customer') {
                showPhoneLookupStatus('Returning customer — ' + (d.customer.name || 'loaded'), 'success');
                if (options.toast && typeof toastr !== 'undefined') {
                    toastr.success('Customer found: ' + d.customer.name);
                }
            } else if (kind === 'order') {
                showPhoneLookupStatus('Previous order found — details auto-filled', 'success');
                if (options.toast && typeof toastr !== 'undefined') {
                    toastr.info('Previous order found for this phone.');
                }
            } else if (kind === 'geo') {
                showPhoneLookupStatus('Previous location loaded from order history', 'success');
            } else {
                showPhoneLookupStatus('New customer', '');
                if (options.toast && typeof toastr !== 'undefined') {
                    toastr.info('New customer.');
                }
            }
        })
        .catch(function () {
            showPhoneLookupStatus('Lookup failed — try again', 'danger');
        });
}

// Phone lookup — manual button
document.getElementById('lookupBtn').addEventListener('click', function () {
    runPhoneLookup({ force: true, toast: true });
});

// Phone lookup — auto on valid number
const lookupPhoneEl = document.getElementById('lookupPhone');
lookupPhoneEl?.addEventListener('input', function () {
    clearTimeout(phoneLookupTimer);
    const raw = this.value.trim();
    if (window.BdPhone) {
        const normalized = BdPhone.normalize(raw);
        if (normalized !== raw && normalized.length <= 11) {
            this.value = normalized;
        }
    }
    if (raw.length < 11) {
        if (raw.length === 0) lastLookupPhone = '';
        showPhoneLookupStatus('', '');
        return;
    }
    phoneLookupTimer = setTimeout(function () {
        runPhoneLookup({ silent: true });
    }, 450);
});

lookupPhoneEl?.addEventListener('blur', function () {
    clearTimeout(phoneLookupTimer);
    runPhoneLookup({ silent: true });
});

if (lookupPhoneEl?.value.trim()) {
    setTimeout(function () { runPhoneLookup({ silent: true }); }, 350);
}

function markAiFilled(el) {
    if (el) el.classList.add('ai-filled');
}

function clearAiHighlights() {
    document.querySelectorAll('.ai-filled').forEach(el => el.classList.remove('ai-filled'));
}

function selectOrderSource(source) {
    if (!source) return;
    const radio = document.querySelector('input[name="order_source"][value="' + source + '"]');
    if (radio) {
        radio.checked = true;
        markAiFilled(radio.closest('.order-source-option'));
    }
}

function setSelectValue(select, value) {
    return setGeoSelectValue(select, value, false);
}

function applyProductSelection(row, item) {
    const name = item.display_name || item.name || 'Product';
    const nameEl = row.querySelector('.co-item-name');
    const nameInput = row.querySelector('.co-item-name-input') || row.querySelector('.product-search-input');
    if (nameEl) nameEl.textContent = name;
    if (nameInput) nameInput.value = name;
    row.querySelector('.product-id-input').value = item.product_id || '';
    row.querySelector('.product-variant-id-input').value = item.variant_id || '';
    row.querySelector('.product-size-input').value = item.size || '';
    row.querySelector('.product-color-input').value = item.color || '';
    if (item.price != null && item.price !== '') {
        row.querySelector('.item-price').value = item.price;
    }
    if (item.product_id) {
        row.dataset.cartKey = String(item.product_id) + ':' + String(item.variant_id || '');
    }
    recalcRow(row);
}

function showVariantPicker(row, item) {
    const suggestions = item.variant_suggestions || [];
    if (!suggestions.length) return;

    row.querySelector('.ai-variant-pick')?.remove();

    const box = document.createElement('div');
    box.className = 'ai-variant-pick mt-2';
    box.innerHTML = '<label class="small text-warning fw-semibold mb-1 d-block">'
        + '<i class="fas fa-layer-group me-1"></i>Variant select করুন:</label>'
        + '<select class="form-select form-select-sm ai-variant-select">'
        + suggestions.map(function (v) {
            return '<option value="' + v.id + '" data-price="' + v.price + '" data-size="' + (v.size || '') + '" data-color="' + (v.color || '') + '" data-label="' + (v.label || '').replace(/"/g, '&quot;') + '">'
                + (v.label || ('Variant #' + v.id)) + ' — ৳' + v.price
                + '</option>';
        }).join('')
        + '</select>';

    const productCell = row.querySelector('td[data-label="Product"] .co-item-name-wrap')
        || row.querySelector('td[data-label="Product"]')
        || row;
    productCell.appendChild(box);
    markAiFilled(box.querySelector('.ai-variant-select'));

    const sel = box.querySelector('.ai-variant-select');
    sel.addEventListener('change', function () {
        const opt = sel.options[sel.selectedIndex];
        row.querySelector('.product-variant-id-input').value = sel.value;
        row.querySelector('.product-size-input').value = opt.dataset.size || '';
        row.querySelector('.product-color-input').value = opt.dataset.color || '';
        row.querySelector('.item-price').value = opt.dataset.price || '';
        const label = opt.dataset.label || opt.textContent.split(' — ')[0];
        const fullName = item.name + ' (' + label + ')';
        const nameEl = row.querySelector('.co-item-name');
        const nameInput = row.querySelector('.co-item-name-input');
        if (nameEl) nameEl.textContent = fullName;
        if (nameInput) nameInput.value = fullName;
        if (item.product_id) {
            row.dataset.cartKey = String(item.product_id) + ':' + String(sel.value || '');
        }
        recalcRow(row);
        refreshShippingQuote();
    });

    if (suggestions.length === 1) {
        sel.dispatchEvent(new Event('change'));
    }
}

function finalizeAiItemRow(row, item) {
    if (item.product_id && item.variant_id) {
        applyProductSelection(row, item);
        return;
    }

    if (item.product_id && item.pick_variant) {
        applyProductSelection(row, item);
        showVariantPicker(row, item);
        return;
    }

    if (item.product_id) {
        applyProductSelection(row, item);
    }
}

function buildItemRow(index, item) {
    if (!createOrderPos) return null;
    return createOrderPos.appendRow({
        name: item.display_name || item.name || '',
        product_id: item.product_id || '',
        variant_id: item.variant_id || '',
        size: item.size || '',
        color: item.color || '',
        price: item.price,
        qty: item.qty || 1,
        thumbnail: item.thumbnail || '',
    });
}

function applyParsedOrder(data) {
    clearAiHighlights();

    const phoneEl = document.getElementById('lookupPhone');
    const hasParsedGeo = !!(data.district || data.upazila);

    applyParsedGeo(data).then(function () {
        if (data.customer_phone) {
            phoneEl.value = data.customer_phone;
            markAiFilled(phoneEl);
            lastLookupPhone = '';
            setTimeout(function () {
                runPhoneLookup({ silent: true, skipGeo: hasParsedGeo });
            }, 300);
        }
    });

    const nameEl = document.getElementById('custName');
    if (data.customer_name) {
        nameEl.value = data.customer_name;
        markAiFilled(nameEl);
    }
    const addrEl = document.getElementById('custAddress');
    if (data.shipping_address) {
        addrEl.value = data.shipping_address;
        markAiFilled(addrEl);
    }

    selectOrderSource(data.order_source);

    const paySel = document.querySelector('select[name="payment_method"]');
    if (data.payment_method && paySel) {
        setSelectValue(paySel, data.payment_method);
        markAiFilled(paySel);
    }

    const noteEl = document.querySelector('textarea[name="admin_note"]');
    if (data.notes && noteEl) {
        noteEl.value = data.notes;
        markAiFilled(noteEl);
    }

    const items = (Array.isArray(data.items) ? data.items : []).filter(function (item) {
        return item && (item.matched || item.product_id);
    });
    if (items.length && createOrderPos) {
        createOrderPos.clearCart();
        items.forEach(function (item) {
            const row = buildItemRow(0, item);
            if (row) {
                finalizeAiItemRow(row, item);
                row.querySelectorAll('.item-price, .item-qty').forEach(function (el) {
                    markAiFilled(el);
                });
            }
        });
    }

    recalcTotal();
}

document.getElementById('btnAiClear')?.addEventListener('click', function () {
    document.getElementById('aiPasteMessage').value = '';
    document.getElementById('aiFillStatus').textContent = '';
});

document.getElementById('btnAiParseFill')?.addEventListener('click', function () {
    const message = document.getElementById('aiPasteMessage').value.trim();
    const statusEl = document.getElementById('aiFillStatus');
    const btn = this;

    if (message.length < 5) {
        statusEl.innerHTML = '<span class="text-danger">কমপক্ষে কিছু text paste করুন।</span>';
        return;
    }

    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Parsing…';
    statusEl.textContent = '';

    fetch(parseMessageUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ message: message }),
    })
        .then(r => r.json().then(d => ({ ok: r.ok, data: d })))
        .then(({ ok, data }) => {
            if (!ok || !data.success) {
                throw new Error(data.message || 'Parse failed');
            }
            applyParsedOrder(data.data || {});
            const skipped = data.data?.items_skipped || 0;
            const matchedCount = (data.data?.items || []).filter(i => i.matched || i.product_id).length;
            const variantPick = (data.data?.items || []).filter(i => i.pick_variant).length;
            let msg = 'Form filled — please verify yellow fields';
            if (data.source === 'local') {
                msg = data.message || 'Gemini busy — local parser দিয়ে fill হয়েছে। Yellow fields verify করুন।';
            } else if (data.source === 'regex') {
                msg += ' (basic parse)';
            }
            if (matchedCount) {
                msg += ' ' + matchedCount + ' টি product catalog থেকে match হয়েছে।';
            } else {
                msg += ' কোনো product auto-match হয়নি — Order Items থেকে manually search করুন।';
            }
            if (skipped) msg += ' ' + skipped + ' টি text catalog-এ match হয়নি (skip)।';
            else if (variantPick) msg += ' ' + variantPick + ' product-এ variant select করুন।';
            statusEl.innerHTML = '<span class="' + (data.source === 'local' ? 'text-warning' : 'text-success') + ' fw-semibold">' + msg + '</span>';
            if (typeof toastr !== 'undefined') toastr.success('AI Fill applied — verify & confirm');
        })
        .catch(err => {
            statusEl.innerHTML = '<span class="text-danger">' + (err.message || 'Request failed') + '</span>';
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-wand-magic-sparkles me-1"></i> Parse &amp; Fill Form';
        });
});
</script>
@endpush