@extends('cargo_company.templates.layout')

@php
    $dinfo = config("global.transporter_delivery_statuses.{$delivery->status}")
        ?? ['text' => '—', 'class' => 'secondary'];

    $progressPct = $totalExpected > 0
        ? (int) round(($totalVerified / $totalExpected) * 100)
        : 0;

    $pending = max(0, $totalExpected - $totalVerified);

    $isCompleted = (int) $delivery->status === TRANSPORTER_DELIVERY_COMPLETED;
@endphp

@section('head')
<style>
    .detail-head {
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
    }
    .detail-head h5 {
        font-size: 18px; font-weight: 700; color: #0f172a;
        margin: 0 0 6px; font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
    }
    .detail-head .meta {
        display: flex; align-items: center; gap: 10px;
        font-size: 13px; color: #64748b; flex-wrap: wrap;
    }
    .detail-head .meta .dot { color: #cbd5e1; }
    .detail-head .meta .mono {
        font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
        font-weight: 600; color: #1d4ed8;
    }

    .tile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
    .tile {
        border: 1px solid #e9edf2;
        border-radius: 10px;
        padding: 14px 16px;
        background: #fff;
        transition: border-color .15s ease;
    }
    .tile:hover { border-color: #d5dde7; }
    .tile .tile-label {
        font-size: 11px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .5px;
        margin-bottom: 4px;
    }
    .tile .tile-value {
        font-size: 22px; font-weight: 700; color: #0f172a;
        line-height: 1.15; font-variant-numeric: tabular-nums;
    }
    .tile .tile-value.success { color: #047857; }
    .tile .tile-value.warn    { color: #b45309; }
    .tile .tile-hint { font-size: 12px; color: #94a3b8; margin-top: 3px; }

    .progress-track {
        height: 5px; background: #f1f5f9; border-radius: 999px;
        overflow: hidden; margin-top: 8px;
    }
    .progress-track > span {
        display: block; height: 100%;
        background: linear-gradient(90deg, #6366f1, #4338ca);
        transition: width .3s ease;
    }

    .scan-box {
        border: 2px dashed #c7d2fe;
        border-radius: 14px;
        background: linear-gradient(180deg, #f5f7ff 0%, #eef2ff 100%);
        padding: 26px 24px 22px;
        text-align: center;
        position: relative;
        transition: border-color .15s ease, background .15s ease;
    }
    .scan-box.focused {
        border-color: #4338ca;
        background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    }
    .scan-box .scan-icon {
        font-size: 42px; color: #4338ca;
        display: block; margin-bottom: 8px;
    }
    .scan-box h6 {
        font-size: 15px; font-weight: 700; color: #0f172a;
        margin: 0 0 4px;
    }
    .scan-box p {
        font-size: 12.5px; color: #64748b; margin: 0 0 16px;
    }
    .scan-box .form-control {
        height: 56px;
        font-size: 20px;
        font-weight: 700;
        font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
        text-align: center;
        letter-spacing: 2px;
        text-transform: uppercase;
        border: 2px solid #c7d2fe;
        border-radius: 10px;
        background: #fff;
    }
    .scan-box .form-control::placeholder {
        text-transform: none; letter-spacing: 0;
        font-family: inherit; font-weight: 400;
        color: #94a3b8; font-size: 15px;
    }
    .scan-box .form-control:focus {
        border-color: #4338ca;
        box-shadow: 0 0 0 4px rgba(67,56,202,.12);
    }

    .scan-feedback {
        display: none;
        align-items: flex-start;
        gap: 10px;
        margin-top: 14px;
        font-size: 13.5px;
        padding: 12px 16px;
        border-radius: 10px;
        text-align: left;
        line-height: 1.4;
    }
    .scan-feedback.show { display: flex; }
    .scan-feedback > i { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
    .scan-feedback .fb-title { font-weight: 700; margin-bottom: 2px; }
    .scan-feedback .fb-detail {
        font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
        font-size: 12.5px; color: inherit; opacity: .85;
    }

    .scan-feedback.success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
    .scan-feedback.error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
    .scan-feedback.warn    { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }

    .items-card table thead th {
        background: #fafbfd; font-size: 11px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .6px;
        padding: 12px 20px; border-bottom: 1px solid #e9edf2; white-space: nowrap;
    }
    .items-card table tbody td {
        padding: 14px 20px; font-size: 13.5px; color: #334155;
        border-bottom: 1px solid #f1f4f9; vertical-align: middle;
    }
    .items-card table tbody tr:last-child td { border-bottom: none; }
    .items-card table tbody tr:hover { background: #fafbfd; }

    .items-card tr.item-row.done { background: #f0fdf4; }
    .items-card tr.item-row.done:hover { background: #ecfdf5; }

    .items-card .item-name { font-weight: 600; color: #0f172a; }

    .variant-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 4px 10px; border-radius: 999px;
        background: #f1f5f9;
        font-size: 12px;
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
    }
    .variant-pill.done {
        background: #dcfce7;
        color: #166534;
    }
    .variant-pill.done i { font-size: 12px; }

    .empty-state { text-align: center; padding: 48px 20px; color: #94a3b8; }
    .empty-state i { font-size: 36px; display: block; margin-bottom: 10px; opacity: .5; }
    .empty-state small { font-size: 13px; }
</style>
@endsection

@section('content')

<div class="detail-head">
    <div>
        <h5>{{ $delivery->tracking_number }}</h5>
        <div class="meta">
            <span class="badge bg-{{ $dinfo['class'] }}-subtle text-{{ $dinfo['class'] }}">
                {{ $dinfo['text'] }}
            </span>
            <span class="dot">·</span>
            <span>
                Order
                <span class="mono">{{ $delivery->order->order_reference }}</span>
            </span>
            @if($delivery->transporter)
                <span class="dot">·</span>
                <span>
                    Transporter
                    <span class="mono">{{ $delivery->transporter->user_code ?: $delivery->transporter->name }}</span>
                </span>
            @endif
            @if($delivery->arrival_estimate)
                <span class="dot">·</span>
                <span>Est. {{ web_date_in_timezone($delivery->arrival_estimate, 'M d, Y') }}</span>
            @endif
        </div>
    </div>
    <a href="{{ route('cargo_company.warehouse.deliveries.index') }}" class="btn btn-light">
        <i class="ri-arrow-left-line"></i> Back
    </a>
</div>

<div class="card info-card mb-3">
    <div class="card-body">
        <div class="tile-grid">
            <div class="tile">
                <div class="tile-label">Expected</div>
                <div class="tile-value" id="tileExpected">{{ (int) $totalExpected }}</div>
                <div class="tile-hint">SKUs to verify</div>
            </div>
            <div class="tile">
                <div class="tile-label">Verified</div>
                <div class="tile-value success" id="tileVerified">{{ (int) $totalVerified }}</div>
                <div class="tile-hint">Scanned successfully</div>
            </div>
            <div class="tile">
                <div class="tile-label">Pending</div>
                <div class="tile-value warn" id="tilePending">{{ (int) $pending }}</div>
                <div class="tile-hint">Still to scan</div>
            </div>
            <div class="tile">
                <div class="tile-label">Progress</div>
                <div class="tile-value" id="tileProgress">{{ $progressPct }}%</div>
                <div class="progress-track"><span id="tileBar" style="width: {{ $progressPct }}%"></span></div>
            </div>
        </div>
    </div>
</div>

@if($canScan && ! $isCompleted)
    <div class="scan-box mb-3" id="scanBox">
        <i class="ri-qr-scan-2-line scan-icon"></i>
        <h6>Scan product QR / barcode</h6>
        <p>Point your scanner at the label, or type the reference ID manually and press Enter.</p>

        <input type="text"
               id="scanInput"
               class="form-control"
               placeholder="e.g. KBM-A1B2C3-00042-00001"
               autocomplete="off"
               autofocus
               spellcheck="false">

        <div class="scan-feedback" id="scanFeedback"></div>
    </div>
@elseif($isCompleted)
    <div class="alert alert-success d-flex align-items-center gap-2 mb-3">
        <i class="ri-checkbox-circle-fill fs-20"></i>
        <div>
            <strong>Delivery completed.</strong>
            <span class="text-muted ms-1">This delivery has been received and verified.</span>
        </div>
    </div>
@endif

<div class="card items-card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0" style="font-size:15px;font-weight:700;">Items to Verify</h5>
        <span class="text-muted fs-12">
            {{ count($itemBreakdown) }} item{{ count($itemBreakdown) === 1 ? '' : 's' }}
            · {{ $totalExpected }} unit{{ $totalExpected === 1 ? '' : 's' }}
        </span>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Variants</th>
                        <th class="text-center" style="width:180px;">Verified / Expected</th>
                        <th class="text-end" style="width:220px;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($itemBreakdown as $row)
                        <tr class="item-row {{ $row['is_all_verified'] ? 'done' : '' }}"
                            data-item-id="{{ $row['order_item_id'] }}"
                            data-expected="{{ $row['expected'] }}"
                            data-verified="{{ $row['verified'] }}">
                            <td class="item-name">
                                <div class="d-flex align-items-center gap-2">
                                    @if($row['image_url'])
                                        <img src="{{ $row['image_url'] }}"
                                             width="40" height="40"
                                             class="rounded border"
                                             style="object-fit:cover;">
                                    @endif
                                    <div>
                                        <div class="fw-semibold">{{ $row['name'] ?: '—' }}</div>
                                        <div class="text-muted fs-12">
                                            {{ $row['variants_count'] }} variant{{ $row['variants_count'] === 1 ? '' : 's' }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    @foreach($row['variants'] as $v)
                                        <span class="variant-pill {{ $v['is_verified'] ? 'done' : '' }}"
                                              data-variant-id="{{ $v['variant_id'] }}"
                                              data-expected="{{ $v['expected_quantity'] }}"
                                              data-verified="{{ $v['verified_quantity'] }}">
                                            @if($v['is_verified'])<i class="ri-check-line"></i>@endif
                                            {{ $v['name'] }}
                                            <span class="text-muted">·</span>
                                            <span class="pill-count">{{ $v['verified_quantity'] }}/{{ $v['expected_quantity'] }}</span>
                                        </span>
                                    @endforeach
                                </div>
                            </td>

                            <td class="text-center fw-bold">
                                <span class="text-success item-verified">{{ $row['verified'] }}</span>
                                <span class="text-muted">/</span>
                                <span class="item-expected">{{ $row['expected'] }}</span>
                            </td>

                            <td class="text-end">
                                @if($row['is_all_verified'])
                                    <span class="badge bg-success-subtle text-success">
                                        <i class="ri-check-double-line"></i> Verified
                                    </span>
                                @elseif($canScan && ! $isCompleted)
                                    <button type="button"
                                            class="btn btn-sm btn-soft-primary complete-item-btn"
                                            data-url="{{ route('cargo_company.warehouse.deliveries.complete_item', $delivery->id) }}"
                                            data-item-id="{{ $row['order_item_id'] }}"
                                            data-item-name="{{ e($row['name']) }}">
                                        <i class="ri-check-double-line"></i> Mark All Verified
                                    </button>
                                @else
                                    <span class="text-muted fs-12">—</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">
                                <div class="empty-state">
                                    <i class="ri-inbox-2-line"></i>
                                    <small>No items in this delivery</small>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@if($canScan && ! $isCompleted)
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div class="text-muted fs-13">
            @if($allVerified)
                <i class="ri-checkbox-circle-fill text-success"></i>
                All items verified. You can complete this delivery.
            @else
                <i class="ri-information-line"></i>
                Verify all items to enable completion.
            @endif
        </div>
        <button type="button"
                id="completeDeliveryBtn"
                class="btn btn-success d-inline-flex align-items-center gap-2"
                data-url="{{ route('cargo_company.warehouse.deliveries.complete', $delivery->id) }}"
                {{ $allVerified ? '' : 'disabled' }}>
            <i class="ri-checkbox-circle-line"></i> Complete Delivery
        </button>
    </div>
@endif

@endsection

@section('script')
<script>
$(function () {
    var CSRF          = '{{ csrf_token() }}';
    var expectedTotal = {{ (int) $totalExpected }};
    var verifiedTotal = {{ (int) $totalVerified }};

    var $scanInput = $('#scanInput');
    var $scanBox   = $('#scanBox');
    var $feedback  = $('#scanFeedback');

    function refreshTiles() {
        var pending = Math.max(0, expectedTotal - verifiedTotal);
        var pct     = expectedTotal > 0
            ? Math.round((verifiedTotal / expectedTotal) * 100)
            : 0;

        $('#tileVerified').text(verifiedTotal);
        $('#tilePending').text(pending);
        $('#tileProgress').text(pct + '%');
        $('#tileBar').css('width', pct + '%');
    }

    function showFeedback(type, title, detail) {
        var icon = type === 'success' ? 'ri-checkbox-circle-fill'
                 : type === 'warn'    ? 'ri-alert-line'
                 :                      'ri-close-circle-fill';

        var html = '<i class="' + icon + '"></i><div>'
                 + '<div class="fb-title">' + title + '</div>';

        if (detail) {
            html += '<div class="fb-detail">' + detail + '</div>';
        }
        html += '</div>';

        $feedback
            .removeClass('success error warn show')
            .addClass(type + ' show')
            .html(html);
    }

    $scanInput
        .on('focus', function () { $scanBox.addClass('focused'); })
        .on('blur',  function () { $scanBox.removeClass('focused'); });

    $scanInput.on('keypress', function (e) {
        if (e.which !== 13) return;
        e.preventDefault();

        var code = ($(this).val() || '').trim();
        if (! code) return;

        $scanInput.prop('disabled', true);

        $.ajax({
            url: '{{ route("cargo_company.warehouse.deliveries.scan", $delivery->id) }}',
            type: 'POST',
            data: { _token: CSRF, code: code },
            success: function (res) {
                if (res.status === 'success') {
                    var d = res.data || {};

                    verifiedTotal = parseInt(d.verified, 10) || verifiedTotal;
                    expectedTotal = parseInt(d.expected, 10) || expectedTotal;

                    showFeedback(
                        'success',
                        d.item_name + ' — ' + d.variant_name,
                        d.reference_id + ' · ' + d.verified + ' / ' + d.expected + ' verified'
                    );

                    refreshTiles();
                    bumpRowByVariantId(d);

                    if (d.all_done) {
                        setTimeout(function () { location.reload(); }, 900);
                    }
                } else {
                    showFeedback('warn', res.message || 'Could not verify product');
                }
            },
            error: function (xhr) {
                var msg = xhr.responseJSON?.message || 'Scan failed';
                showFeedback('error', msg);
            },
            complete: function () {
                $scanInput.prop('disabled', false).val('').focus();
            }
        });
    });

    /**
     * Deterministic row bump — matches on data-variant-id, not text.
     */
    function bumpRowByVariantId(d) {
        if (! d.variant_id) return;

        var $pill = $('.variant-pill[data-variant-id="' + d.variant_id + '"]').first();
        if (! $pill.length) return;

        var cur = parseInt($pill.attr('data-verified'), 10) || 0;
        var max = parseInt($pill.attr('data-expected'), 10) || 0;
        var next = Math.min(cur + 1, max);

        $pill.attr('data-verified', next);

        var label = $pill.find('.pill-count');
        if (label.length) {
            label.text(next + '/' + max);
        } else {
            // Fallback if markup ever changes — rebuild the pill
            var name = $pill.text().replace(/\d+\s*\/\s*\d+\s*$/, '').trim();
            $pill.html(
                (next >= max ? '<i class="ri-check-line"></i> ' : '')
                + name
                + ' <span class="text-muted">·</span> '
                + '<span class="pill-count">' + next + '/' + max + '</span>'
            );
        }

        if (next >= max) {
            $pill.addClass('done');
        }

        // Bump the parent row's aggregate counters
        var $row = $pill.closest('.item-row');
        if (! $row.length) return;

        var $v = $row.find('.item-verified');
        var curRow = parseInt($v.text(), 10) || 0;
        var expRow = parseInt($row.find('.item-expected').text(), 10) || 0;
        var nextRow = Math.min(curRow + 1, expRow);
        $v.text(nextRow);

        if (nextRow >= expRow) {
            $row.addClass('done');
            $row.find('.complete-item-btn').replaceWith(
                '<span class="badge bg-success-subtle text-success">'
                + '<i class="ri-check-double-line"></i> Verified</span>'
            );
        }
    }

    $(document).on('click', '.complete-item-btn', function () {
        var $btn     = $(this);
        var url      = $btn.data('url');
        var itemId   = $btn.data('item-id');
        var itemName = $btn.data('item-name') || 'this item';

        Swal.fire({
            title: 'Mark all verified?',
            html: 'Every SKU of <strong>' + itemName + '</strong> will be marked as verified.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, verify all',
            confirmButtonColor: '#4338ca'
        }).then(function (r) {
            if (! r.isConfirmed) return;

            $btn.prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm"></span>'
            );

            $.ajax({
                url: url,
                type: 'POST',
                data: { _token: CSRF, order_item_id: itemId },
                success: function (res) {
                    if (res.status === 'success') {
                        toastr.success(res.message || 'Item verification completed');
                        setTimeout(function () { location.reload(); }, 500);
                    } else {
                        toastr.error(res.message || 'Failed');
                        $btn.prop('disabled', false)
                            .html('<i class="ri-check-double-line"></i> Mark All Verified');
                    }
                },
                error: function (xhr) {
                    toastr.error(xhr.responseJSON?.message || 'Failed');
                    $btn.prop('disabled', false)
                        .html('<i class="ri-check-double-line"></i> Mark All Verified');
                }
            });
        });
    });

    $('#completeDeliveryBtn').on('click', function () {
        var $btn = $(this);
        var url  = $btn.data('url');

        Swal.fire({
            title: 'Complete this delivery?',
            html: 'This will mark the delivery as <strong>received</strong>. '
                + 'Further scans will no longer be possible.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, complete',
            confirmButtonColor: '#10b981'
        }).then(function (r) {
            if (! r.isConfirmed) return;

            $btn.prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm"></span> Completing...'
            );

            $.ajax({
                url: url,
                type: 'POST',
                data: { _token: CSRF },
                success: function (res) {
                    if (res.status === 'success') {
                        toastr.success(res.message || 'Delivery received completely');
                        setTimeout(function () {
                            window.location.href = res.redirect
                                || '{{ route("cargo_company.warehouse.deliveries.index") }}';
                        }, 600);
                    } else {
                        toastr.error(res.message || 'Failed');
                        $btn.prop('disabled', false)
                            .html('<i class="ri-checkbox-circle-line"></i> Complete Delivery');
                    }
                },
                error: function (xhr) {
                    toastr.error(xhr.responseJSON?.message || 'Failed');
                    $btn.prop('disabled', false)
                        .html('<i class="ri-checkbox-circle-line"></i> Complete Delivery');
                }
            });
        });
    });
});
</script>
@endsection