@extends('merchant.templates.layout')

@php
    $deliveryTransporters = $order->deliveries
        ->map(fn ($d) => $d->transporter?->company_name ?: $d->transporter?->name)
        ->filter()->unique()->values();

    $displayTransporter = $deliveryTransporters->isEmpty() ? '—' : $deliveryTransporters->implode(', ');

    $totalItems = $order->orderItems->count();
    $totalQty   = (int) ($order->total_items_quantity ?? 0);
    $totalAmt   = (float) ($order->total_items_amount ?? 0);
@endphp

@section('head')
    <style>
        .kv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #64748b; font-weight: 600; }
        .kv-value { font-size: 14px; font-weight: 600; color: #1e293b; }

        /* Reference badge */
        .ref-count-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            border: 1px solid #c7d2fe;
            cursor: pointer;
            transition: background .15s ease, border-color .15s ease;
            white-space: nowrap;
        }
        .ref-count-badge:hover { background: #e0e7ff; border-color: #a5b4fc; }
        .ref-count-badge i { font-size: 12px; }

        /* QR modal grid */
        .qr-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
        }
        .qr-tile {
            border: 1px solid #e9edf2;
            border-radius: 10px;
            padding: 12px 10px;
            text-align: center;
            background: #fff;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
        .qr-tile:hover { border-color: #c7d2fe; box-shadow: 0 2px 8px rgba(99,102,241,.08); }
        .qr-tile img {
            width: 100px; height: 100px;
            object-fit: contain;
            background: #fff;
            border-radius: 6px;
            display: block;
            margin: 0 auto 8px;
        }
        .qr-ref {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10.5px;
            color: #475569;
            word-break: break-all;
            line-height: 1.35;
            margin-bottom: 8px;
            min-height: 30px;
        }
        .qr-actions { display: flex; gap: 4px; justify-content: center; }
        .qr-actions button {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 6px;
        }

        /* Timeline */
        .timeline-item { position: relative; padding-left: 24px; padding-bottom: 16px; }
        .timeline-item::before {
            content: ''; position: absolute; left: 6px; top: 6px;
            width: 10px; height: 10px; border-radius: 50%;
            background: #6366f1; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0;
        }
        .timeline-item::after {
            content: ''; position: absolute; left: 11px; top: 16px; bottom: 0;
            width: 1px; background: #e2e8f0;
        }
        .timeline-item:last-child { padding-bottom: 0; }
        .timeline-item:last-child::after { display: none; }

        /* QR loading spinner */
        .qr-loader {
            display: flex; align-items: center; justify-content: center;
            min-height: 260px; color: #94a3b8;
        }
    </style>
@endsection

@section('content')
<div class="row g-3 mb-3">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Order {{ $order->order_reference }}</h5>
                <div>{!! order_status_badge($order->status) !!}</div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="kv-label">Cargo Company</div>
                        <div class="kv-value">{{ $order->cargoCompany?->company_name ?: ($order->cargoCompany?->name ?: 'Pending Assignment') }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="kv-label">Transporter(s)</div>
                        <div class="kv-value">{{ $displayTransporter }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="kv-label">Total Items</div>
                        <div class="kv-value">{{ $totalItems }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="kv-label">Total Quantity</div>
                        <div class="kv-value">{{ $totalQty }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="kv-label">Total Amount</div>
                        <div class="kv-value">{{ number_format($totalAmt, 2) }} {{ $order->currency ?? 'AED' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header border-bottom"><h5 class="card-title mb-0">Actions</h5></div>
            <div class="card-body">
                <a href="{{ route('merchant.orders.export', $order->id) }}" class="btn btn-soft-success w-100 mb-2">
                    <i class="ri-file-excel-2-line me-1"></i> Export Items
                </a>
                <a href="{{ route('merchant.orders.index') }}" class="btn btn-soft-secondary w-100">
                    <i class="ri-arrow-left-line me-1"></i> Back to Orders
                </a>
            </div>
        </div>
    </div>
</div>

{{-- Items --}}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Items</h5>
                <span class="text-muted fs-13">{{ $totalItems }} item(s)</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width:50px;">#</th>
                                <th>Item</th>
                                <th>Variant</th>
                                <th class="text-end">Price</th>
                                <th class="text-end">Qty</th>
                                <th class="text-end">Subtotal</th>
                                <th style="width:180px;">Reference IDs</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = 1; @endphp
                            @forelse($order->orderItems as $item)
                                @foreach($item->orderItemVariants as $variant)
                                    @php
                                        $refCount = $variant->orderItemVariantProducts->count();
                                    @endphp
                                    <tr>
                                        <td>{{ $i++ }}</td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($item->image)
                                                    <img src="{{ $item->image->url }}" width="40" height="40" class="rounded border" style="object-fit:cover;">
                                                @endif
                                                <span class="fw-semibold">{{ $item->name }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                @if($variant->image)
                                                    <img src="{{ $variant->image->url }}" width="32" height="32" class="rounded border" style="object-fit:cover;">
                                                @elseif($item->image)
                                                    <img src="{{ $item->image->url }}" width="32" height="32" class="rounded border" style="object-fit:cover;opacity:.55;">
                                                @endif
                                                <span>{{ $variant->variant }}</span>
                                            </div>
                                        </td>
                                        <td class="text-end">{{ number_format((float) $variant->price, 2) }} AED</td>
                                        <td class="text-end">{{ $variant->quantity }}</td>
                                        <td class="text-end fw-semibold">
                                            {{ number_format((float) $variant->price * (int) $variant->quantity, 2) }} AED
                                        </td>
                                        <td>
                                            @if($refCount === 0)
                                                <span class="text-muted fs-12">—</span>
                                            @else
                                                <button type="button"
                                                        class="ref-count-badge view-refs-btn"
                                                        data-variant-id="{{ $variant->id }}"
                                                        data-variant-name="{{ e($variant->variant) }}"
                                                        title="View all reference IDs">
                                                    <i class="ri-qr-code-line"></i>
                                                    {{ $refCount }} {{ Str::plural('SKU', $refCount) }}
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @empty
                                <tr><td colspan="7" class="text-center text-muted py-4">No items in this order.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Deliveries --}}
@if($order->deliveries->count())
    <div class="row g-3 mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Deliveries</h5>
                    <span class="badge bg-warning-subtle text-warning">{{ $order->deliveries->count() }} total</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Tracking #</th>
                                    <th>Transporter</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-end">Charges</th>
                                    <th>Status</th>
                                    <th>Arrival Estimate</th>
                                    <th>Marketplace</th>
                                    <th class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($order->deliveries as $d)
                                    @php
                                        $dInfo = config("global.transporter_delivery_statuses.{$d->status}")
                                            ?? ['text' => 'Unknown', 'class' => 'secondary'];

                                        $canPublish = in_array((int) $d->status, [
                                            TRANSPORTER_DELIVERY_INTRANSIT,
                                            TRANSPORTER_DELIVERY_ARRIVED,
                                            TRANSPORTER_DELIVERY_COMPLETED,
                                        ], true);
                                    @endphp
                                    <tr>
                                        <td class="fw-semibold font-monospace">{{ $d->tracking_number }}</td>
                                        <td>{{ $d->transporter?->company_name ?: ($d->transporter?->name ?: '—') }}</td>
                                        <td class="text-center">{{ $d->quantity }}</td>
                                        <td class="text-end">{{ number_format((float) $d->total_charges, 2) }} AED</td>
                                        <td>
                                            <span class="badge bg-{{ $dInfo['class'] }}-subtle text-{{ $dInfo['class'] }}">
                                                {{ $dInfo['text'] }}
                                            </span>
                                        </td>
                                        <td class="text-muted fs-12">
                                            {{ $d->arrival_estimate ? web_date_in_timezone($d->arrival_estimate, 'M d, Y h:i A') : '—' }}
                                        </td>
                                        <td>
                                            @if($d->is_published)
                                                <span class="badge bg-primary-subtle text-primary">
                                                    <i class="ri-store-2-line"></i> Published
                                                </span>
                                            @else
                                                <span class="badge bg-light text-secondary border">Unpublished</span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            @if($canPublish)
                                                <button type="button"
                                                        class="btn btn-sm {{ $d->is_published ? 'btn-soft-secondary' : 'btn-soft-primary' }} toggle-publish-btn"
                                                        data-url="{{ route('merchant.orders.delivery_toggle_publish', $d->id) }}"
                                                        data-published="{{ $d->is_published ? '1' : '0' }}"
                                                        title="{{ $d->is_published ? 'Unpublish from marketplace' : 'Publish to marketplace' }}">
                                                    <i class="{{ $d->is_published ? 'ri-eye-off-line' : 'ri-store-2-line' }}"></i>
                                                    {{ $d->is_published ? 'Unpublish' : 'Publish' }}
                                                </button>
                                            @else
                                                <span class="text-muted fs-12">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Quote --}}
@if($order->activeQuote)
    @php $quote = $order->activeQuote; @endphp
    <div class="row g-3 mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Shipping Quote</h5>
                    @php $qs = config('global.quote_statuses')[$quote->status] ?? ['text'=>'—','class'=>'secondary']; @endphp
                    <span class="badge bg-{{ $qs['class'] }}-subtle text-{{ $qs['class'] }}">{{ $qs['text'] }}</span>
                </div>
                <div class="card-body">
                    @if($quote->status == QUOTE_SUBMITTED)
                        <div class="alert alert-info py-2 mb-3 small">
                            <i class="ri-information-line"></i> The cargo company has submitted a quote.
                        </div>
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-muted">Quoted Total</span>
                            <span class="fw-bold fs-16 text-primary">
                                {{ number_format((float) $quote->total_amount, 2) }} AED
                            </span>
                        </div>
                        <div class="d-flex gap-2">
                            <button class="btn btn-success flex-grow-1 accept-quote-btn"
                                    data-url="{{ route('merchant.orders.accept_quote', $order->id) }}">
                                <i class="ri-check-line"></i> Accept Quote
                            </button>
                            <button class="btn btn-outline-danger flex-grow-1 reject-quote-btn">
                                <i class="ri-close-line"></i> Reject
                            </button>
                        </div>
                    @elseif($quote->status == QUOTE_ACCEPTED)
                        <div class="alert alert-success py-2 mb-0 small">
                            <i class="ri-checkbox-circle-line"></i> You accepted this quote.
                        </div>
                    @elseif($quote->status == QUOTE_REQUESTED)
                        <div class="text-center text-muted py-3">
                            <i class="ri-hourglass-line fs-32 d-block mb-2"></i>
                            <small>Waiting for the cargo company to submit a quote.</small>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Timeline --}}
@if($order->histories->count())
    <div class="row g-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom"><h5 class="card-title mb-0">Status History</h5></div>
                <div class="card-body">
                    @foreach($order->histories->sortByDesc('created_at') as $h)
                        <div class="timeline-item">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="fw-semibold">{!! order_status_badge($h->status) !!}</div>
                                    <div class="text-muted fs-13">{{ $h->remark ?: '—' }}</div>
                                    @if($h->changer)
                                        <small class="text-muted">by {{ $h->changer->name }}</small>
                                    @endif
                                </div>
                                <small class="text-muted">{{ web_date_in_timezone($h->created_at, 'M d, Y h:i A') }}</small>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endif

{{-- ═══ Reference IDs Modal ═══ --}}
<div class="modal fade" id="refsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title mb-0" id="refsModalTitle">Reference IDs</h5>
                    <small class="text-muted" id="refsModalSubtitle"></small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white"><i class="ri-search-line"></i></span>
                        <input type="text" class="form-control" id="refsSearch" placeholder="Search reference ID...">
                    </div>
                </div>
                <div id="refsBody">
                    <div class="qr-loader">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status"></div>
                            <div class="mt-2 small">Loading reference IDs...</div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3" id="refsPaginator" style="display:none !important;">
                    <small class="text-muted" id="refsMeta"></small>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-light" id="refsPrev">‹ Prev</button>
                        <button type="button" class="btn btn-sm btn-light" id="refsNext">Next ›</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Reject modal --}}
<div class="modal fade" id="rejectQuoteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Quote & Reassign</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Assign to a new cargo company:</label>
                <select id="newCargoCompany" class="form-select"></select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmRejectBtn">Reject & Reassign</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
var CSRF = '{{ csrf_token() }}';

$(function () {

    /* ═══ Reference IDs modal ═══ */
    let refsVariantId = null;
    let refsPage = 1;
    let refsSearch = '';
    let refsLastPage = 1;
    let refsModal = null;

    function loadRefs() {
        if (!refsVariantId) return;

        $('#refsBody').html(`
            <div class="qr-loader">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status"></div>
                    <div class="mt-2 small">Loading...</div>
                </div>
            </div>`);
        $('#refsPaginator').attr('style', 'display:none !important;');

        $.get('{{ url("merchant/orders/variant") }}/' + refsVariantId + '/products', {
            page: refsPage,
            search: refsSearch || undefined,
            limit: 24,
        }, function (res) {
            const data = res.data || {};
            const list = data.list || [];
            const meta = data.meta || {};

            if (!list.length) {
                $('#refsBody').html(`
                    <div class="text-center text-muted py-5">
                        <i class="ri-qr-code-line" style="font-size:40px;opacity:.4;"></i>
                        <div class="mt-2">${refsSearch ? 'No reference IDs match your search.' : 'No reference IDs yet.'}</div>
                    </div>`);
                return;
            }

            let html = '<div class="qr-grid">';
            list.forEach(function (p) {
                html += `
                    <div class="qr-tile">
                        <img src="${p.qr_url}" alt="${p.reference_id}" loading="lazy">
                        <div class="qr-ref">${p.reference_id}</div>
                        <div class="qr-actions">
                            <button type="button" class="btn btn-soft-primary copy-ref-btn" data-ref="${p.reference_id}">
                                <i class="ri-file-copy-line"></i> Copy
                            </button>
                            <a href="${p.qr_url}" download="qr-${p.reference_id}.png" class="btn btn-soft-secondary" title="Download QR">
                                <i class="ri-download-2-line"></i>
                            </a>
                        </div>
                    </div>`;
            });
            html += '</div>';
            $('#refsBody').html(html);

            refsLastPage = meta.last_page || 1;
            $('#refsMeta').text(`Showing ${meta.current_page} of ${refsLastPage} · ${meta.total} total`);
            $('#refsPaginator').removeAttr('style');
            $('#refsPrev').prop('disabled', meta.current_page <= 1);
            $('#refsNext').prop('disabled', meta.current_page >= refsLastPage);
        }).fail(function () {
            $('#refsBody').html(`
                <div class="text-center text-danger py-5">
                    <i class="ri-error-warning-line" style="font-size:40px;"></i>
                    <div class="mt-2">Failed to load reference IDs.</div>
                </div>`);
        });
    }

    $(document).on('click', '.view-refs-btn', function () {
        refsVariantId = $(this).data('variant-id');
        refsPage = 1;
        refsSearch = '';
        $('#refsSearch').val('');
        $('#refsModalTitle').text('Reference IDs');
        $('#refsModalSubtitle').text($(this).data('variant-name') || '');

        refsModal = new bootstrap.Modal(document.getElementById('refsModal'));
        refsModal.show();
        loadRefs();
    });

    let searchTimer = null;
    $(document).on('input', '#refsSearch', function () {
        clearTimeout(searchTimer);
        const val = $(this).val();
        searchTimer = setTimeout(function () {
            refsSearch = val.trim();
            refsPage = 1;
            loadRefs();
        }, 350);
    });

    $(document).on('click', '#refsPrev', function () {
        if (refsPage > 1) { refsPage--; loadRefs(); }
    });

    $(document).on('click', '#refsNext', function () {
        if (refsPage < refsLastPage) { refsPage++; loadRefs(); }
    });

    $(document).on('click', '.copy-ref-btn', function () {
        const ref = $(this).data('ref');
        navigator.clipboard.writeText(ref).then(() => {
            toastr.success('Reference ID copied');
        }).catch(() => {
            toastr.error('Copy failed');
        });
    });

    /* ═══ Publish toggle ═══ */
    $(document).on('click', '.toggle-publish-btn', function () {
        const $btn = $(this);
        const url = $btn.data('url');
        const isPublished = $btn.data('published') === '1';

        const confirmText = isPublished
            ? 'Unpublish this delivery from the marketplace?'
            : 'Publish this delivery to the marketplace?';

        Swal.fire({
            title: 'Confirm',
            text: confirmText,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: isPublished ? 'Yes, unpublish' : 'Yes, publish',
            confirmButtonColor: isPublished ? '#dc2626' : '#4f46e5',
        }).then(r => {
            if (!r.isConfirmed) return;
            $btn.prop('disabled', true);

            $.ajax({
                url: url, type: 'POST', data: { _token: CSRF },
                success: function (res) {
                    toastr.success(res.message);
                    setTimeout(() => location.reload(), 500);
                },
                error: function (xhr) {
                    toastr.error(xhr.responseJSON?.message || 'Failed');
                    $btn.prop('disabled', false);
                }
            });
        });
    });

    /* ═══ Quote actions ═══ */
    $('.accept-quote-btn').on('click', function () {
        const url = $(this).data('url');
        Swal.fire({
            title: 'Accept this quote?', icon: 'question', showCancelButton: true,
            confirmButtonText: 'Yes, accept', confirmButtonColor: '#10b981'
        }).then(r => {
            if (!r.isConfirmed) return;
            $.ajax({
                url: url, type: 'POST', data: { _token: CSRF },
                success: res => { toastr.success(res.message); location.reload(); },
                error: xhr => toastr.error(xhr.responseJSON?.message || 'Failed')
            });
        });
    });

    $('.reject-quote-btn').on('click', function () {
        const $sel = $('#newCargoCompany');
        $sel.html('<option>Loading...</option>');
        $.post('{{ route("merchant.orders.cargo_options") }}', { _token: CSRF }, function (res) {
            let html = '<option value="">— Select —</option>';
            (res.data || []).forEach(u => {
                html += `<option value="${u.id}">${u.company_name || u.name}</option>`;
            });
            $sel.html(html);
        });
        new bootstrap.Modal(document.getElementById('rejectQuoteModal')).show();
    });

    $('#confirmRejectBtn').on('click', function () {
        const newId = $('#newCargoCompany').val();
        if (!newId) { toastr.warning('Please select a cargo company.'); return; }
        $.ajax({
            url: '{{ route("merchant.orders.reject_quote", $order->id) }}',
            type: 'POST',
            data: { _token: CSRF, new_cargo_company_id: newId },
            success: res => { toastr.success(res.message); location.reload(); },
            error: xhr => toastr.error(xhr.responseJSON?.message || 'Failed')
        });
    });
});
</script>
@endsection