@php
    $invoicePreview = \App\Services\InvoiceNumberService::preview($setting ?? null);
    $otCssVer = @filemtime(public_path('css/order-tracking.css')) ?: time();
@endphp

<link rel="stylesheet" href="{{ asset('css/order-tracking.css') }}?v={{ $otCssVer }}">

<div id="trackModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="otModalTitle">
    <div class="ot-modal-panel">
        <button type="button" class="ot-modal-close" onclick="closeTrackModal()" aria-label="Close">&times;</button>
        <h5 class="ot-modal-title" id="otModalTitle">
            <i class="fas fa-search-location me-2 text-success"></i>Order Tracking
        </h5>
        <p class="ot-modal-subtitle">Mobile number অথবা Invoice number দিয়ে অর্ডার track করুন</p>

        <ul class="nav nav-tabs ot-track-tabs mb-3" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="track-tab-phone" data-bs-toggle="tab" data-bs-target="#track-pane-phone" type="button">Mobile No</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="track-tab-invoice" data-bs-toggle="tab" data-bs-target="#track-pane-invoice" type="button">Invoice No</button>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="track-pane-phone">
                <div class="ot-search-hint">Mobile দিয়ে শুধু running অর্ডার দেখাবে — Delivered/Cancelled দেখানো হয় না। পুরনো অর্ডার track করতে Invoice tab ব্যবহার করুন।</div>
                <div class="ot-search-row">
                    <input id="trackInputPhone" class="form-control bd-phone-input" placeholder="01XXXXXXXXX" maxlength="11" inputmode="numeric" autocomplete="tel">
                    <button type="button" onclick="runOrderTracking({mode:'phone', value:document.getElementById('trackInputPhone').value, resultEl:'trackResult'})" class="btn btn-success">Track</button>
                </div>
            </div>
            <div class="tab-pane fade" id="track-pane-invoice">
                <div class="ot-search-hint">Invoice track করতে order-এর registered mobile number দিতে হবে।</div>
                <div class="ot-search-row mb-2">
                    <input id="trackInputInvoicePhone" class="form-control bd-phone-input" placeholder="01XXXXXXXXX" maxlength="11" inputmode="numeric" autocomplete="tel">
                </div>
                <div class="ot-search-row">
                    <input id="trackInputInvoice" class="form-control" placeholder="e.g. {{ $invoicePreview ?? 'INV-0001' }}" autocomplete="off">
                    <button type="button" onclick="runOrderTracking({mode:'invoice', value:document.getElementById('trackInputInvoice').value, phone:document.getElementById('trackInputInvoicePhone').value, resultEl:'trackResult'})" class="btn btn-success">Track</button>
                </div>
            </div>
        </div>

        <div id="trackResult" class="ot-track-result"></div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('js/order-tracking.js') }}?v={{ @filemtime(public_path('js/order-tracking.js')) }}"></script>
<script>
document.getElementById('trackModal')?.addEventListener('click', function (e) {
    if (e.target === this && typeof closeTrackModal === 'function') closeTrackModal();
});
</script>
@endpush