@extends('cargo_company.templates.layout')

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

    $totalItems   = $delivery->deliveryItems->sum('quantity');
    $totalProduct = $delivery->deliveryItems->sum(fn ($i) => $i->products?->count() ?? 0);

    // Publish gate — same as API's toggleDeliveryPublish
    $canTogglePublish = in_array((int) $delivery->status, [
        TRANSPORTER_DELIVERY_INTRANSIT,
        TRANSPORTER_DELIVERY_ARRIVED,
        TRANSPORTER_DELIVERY_COMPLETED,
    ], true);
@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-actions {
        display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    }
    .detail-head-actions .btn {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 600;
        padding: 8px 14px; height: 38px;
        border-radius: 8px;
    }
    .detail-head-actions .btn-publish {
        background: #4338ca; color: #fff; border: none;
        transition: background .15s ease;
    }
    .detail-head-actions .btn-publish:hover { background: #3730a3; color: #fff; }
    .detail-head-actions .btn-unpublish {
        background: #fff; color: #dc2626;
        border: 1px solid #fecaca;
        transition: background .15s ease;
    }
    .detail-head-actions .btn-unpublish:hover { background: #fef2f2; }

    .info-card .card-header { padding: 16px 20px; border-bottom: 1px solid #e9edf2; }
    .info-card .card-header h5 { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
    .info-card .card-body { padding: 20px; }

    .info-label {
        font-size: 11.5px; font-weight: 600; color: #64748b;
        text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
    }
    .info-value { font-size: 13.5px; font-weight: 600; color: #0f172a; }
    .info-value.mono { font-family: 'SF Mono', ui-monospace, 'Menlo', monospace; }
    .info-value a { color: #3b5bfd; text-decoration: none; font-weight: 600; }
    .info-value a:hover { text-decoration: underline; }

    .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 .item-name { font-weight: 600; color: #0f172a; }

    .ref-trigger {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 999px;
        background: #eef2ff;
        color: #4338ca;
        border: 1px solid #c7d2fe;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease;
    }
    .ref-trigger:hover { background: #e0e7ff; color: #3730a3; }
    .ref-trigger[aria-expanded="true"] { background: #4338ca; color: #fff; border-color: #4338ca; }
    .ref-trigger i { font-size: 12px; }

    .ref-collapse {
        font-size: 10.5px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        padding: 2px 8px;
        border-radius: 6px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
        white-space: nowrap;
    }
    .ref-box {
        max-width: 100%;
        max-height: 180px;
        overflow-y: auto;
        padding: 10px 12px;
        border: 1px solid #e9edf2;
        border-radius: 8px;
        background: #fbfcfe;
    }
    .ref-box::-webkit-scrollbar { width: 6px; }
    .ref-box::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

    .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;
    }
    .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: 20px; font-weight: 700; color: #0f172a;
        line-height: 1.15; font-variant-numeric: tabular-nums;
    }
    .tile .tile-hint { font-size: 12px; color: #94a3b8; margin-top: 3px; }

    .timeline-item { display: flex; gap: 12px; padding: 8px 0; }
    .timeline-dot {
        width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 13px; flex-shrink: 0; background: #e0e9ff; color: #1d4ed8;
    }
    .timeline-body { flex: 1; min-width: 0; }
    .timeline-title { font-size: 13px; font-weight: 600; color: #0f172a; }
    .timeline-time { font-size: 12px; color: #64748b; }

    .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')

{{-- ═══ HEADER with publish toggle ═══ --}}
<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>{{ web_date_in_timezone($delivery->created_at, 'M d, Y h:i A') }}</span>
            @if($delivery->is_published)
                <span class="dot">·</span>
                <span class="badge bg-primary-subtle text-primary">
                    <i class="ri-store-2-line"></i> Published to Marketplace
                </span>
            @endif
        </div>
    </div>
    <div class="detail-head-actions">
        @if($canTogglePublish)
            @if($delivery->is_published)
                <button type="button" class="btn btn-unpublish toggle-publish-btn"
                        data-url="{{ route('cargo_company.deliveries.toggle_publish', $delivery->id) }}"
                        data-published="1">
                    <i class="ri-eye-off-line"></i> Unpublish
                </button>
            @else
                <button type="button" class="btn btn-publish toggle-publish-btn"
                        data-url="{{ route('cargo_company.deliveries.toggle_publish', $delivery->id) }}"
                        data-published="0">
                    <i class="ri-store-2-line"></i> Publish to Marketplace
                </button>
            @endif
        @endif

        <a href="{{ route('cargo_company.deliveries.index') }}" class="btn btn-light">
            <i class="ri-arrow-left-line"></i> Back
        </a>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-8">

        <div class="card info-card mb-3">
            <div class="card-header"><h5>Summary</h5></div>
            <div class="card-body">
                <div class="tile-grid">
                    <div class="tile">
                        <div class="tile-label">Total Units</div>
                        <div class="tile-value">{{ (int) $totalItems }}</div>
                        <div class="tile-hint">{{ $delivery->deliveryItems->count() }} variant(s)</div>
                    </div>
                    <div class="tile">
                        <div class="tile-label">SKUs</div>
                        <div class="tile-value">{{ (int) $totalProduct }}</div>
                        <div class="tile-hint">physical units</div>
                    </div>
                    <div class="tile">
                        <div class="tile-label">Charges</div>
                        <div class="tile-value">{{ number_format((float) $delivery->total_charges, 2) }}</div>
                        <div class="tile-hint">AED</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card info-card mb-3">
            <div class="card-header"><h5>Delivery Information</h5></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="info-label">Order</div>
                        <div class="info-value mono">
                            @if($delivery->order)
                                <a href="{{ route('cargo_company.shipments.show', $delivery->order->id) }}">
                                    {{ $delivery->order->order_reference }}
                                </a>
                            @else
                                —
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-label">Merchant</div>
                        <div class="info-value">
                            {{ $delivery->order?->merchant?->company_name ?: ($delivery->order?->merchant?->name ?: '—') }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-label">Destination</div>
                        <div class="info-value">
                            {{ $delivery->order?->destination_city ?: '—' }}
                            @if($delivery->order?->destination_country)
                                , {{ $delivery->order->destination_country }}
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-label">Delivery Window</div>
                        <div class="info-value">
                            @if($delivery->delivered_at)
                                Delivered {{ web_date_in_timezone($delivery->delivered_at, 'M d, Y') }}
                            @elseif($delivery->arrival_estimate)
                                Est. {{ web_date_in_timezone($delivery->arrival_estimate, 'M d, Y') }}
                            @else
                                —
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-label">Quantity</div>
                        <div class="info-value">{{ number_format((int) $delivery->quantity) }}</div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-label">Total Charges</div>
                        <div class="info-value">{{ number_format((float) $delivery->total_charges, 2) }} AED</div>
                    </div>
                    <div class="col-md-4">
                        <div class="info-label">Created</div>
                        <div class="info-value">{{ web_date_in_timezone($delivery->created_at, 'M d, Y') }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card items-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Items</h5>
                <span class="text-muted fs-12">{{ $delivery->deliveryItems->count() }} variant(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>Variant</th>
                                <th class="text-end">Qty</th>
                                <th style="width:150px;">Reference IDs</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($delivery->deliveryItems as $di)
                                @php
                                    $variant = $di->variant;
                                    $refs    = $di->products ? $di->products->pluck('reference_id') : collect();
                                @endphp
                                <tr>
                                    <td class="item-name">
                                        <div class="d-flex align-items-center gap-2">
                                            @if($variant?->orderItem?->image)
                                                <img src="{{ $variant->orderItem->image->url }}"
                                                     width="32" height="32" class="rounded border"
                                                     style="object-fit:cover;">
                                            @endif
                                            <span>{{ $variant?->orderItem?->name ?? '—' }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            @if($variant?->image)
                                                <img src="{{ $variant->image->url }}"
                                                     width="28" height="28" class="rounded border"
                                                     style="object-fit:cover;">
                                            @endif
                                            <span>{{ $variant?->variant ?? '—' }}</span>
                                        </div>
                                    </td>
                                    <td class="text-end fw-semibold">{{ $di->quantity }}</td>
                                    <td>
                                        @if($refs->isEmpty())
                                            <span class="text-muted fs-12">—</span>
                                        @else
                                            <button class="ref-trigger" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#refs-{{ $di->id }}"
                                                    aria-expanded="false">
                                                <i class="ri-qr-code-line"></i>
                                                {{ $refs->count() }} SKU
                                            </button>
                                            <div class="collapse mt-2" id="refs-{{ $di->id }}">
                                                <div class="ref-box d-flex flex-wrap gap-1">
                                                    @foreach($refs as $ref)
                                                        <span class="ref-collapse">{{ $ref }}</span>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @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>
    </div>

    <div class="col-lg-4">

        @if($delivery->transporter)
            <div class="card info-card mb-3">
                <div class="card-header"><h5>Transporter</h5></div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="info-label">Code</div>
                        <div class="info-value mono" style="font-size:15px; letter-spacing:.5px;">
                            {{ $delivery->transporter->user_code }}
                        </div>
                    </div>
                    @if($delivery->transporter->email)
                        <div class="mb-3">
                            <div class="info-label">Email</div>
                            <div class="info-value" style="font-weight:500;font-size:13px;">
                                {{ $delivery->transporter->email }}
                            </div>
                        </div>
                    @endif
                    @if($delivery->transporter->dial_code || $delivery->transporter->phone)
                        <div>
                            <div class="info-label">Phone</div>
                            <div class="info-value" style="font-weight:500;font-size:13px;">
                                +{{ $delivery->transporter->dial_code }}{{ $delivery->transporter->phone }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        @if($delivery->statusHistories->count())
            <div class="card info-card">
                <div class="card-header"><h5>Status Timeline</h5></div>
                <div class="card-body">
                    @foreach($delivery->statusHistories->sortByDesc('created_at') as $h)
                        @php $hs = config('global.transporter_delivery_statuses')[$h->status] ?? ['text'=>'—','class'=>'secondary']; @endphp
                        <div class="timeline-item">
                            <div class="timeline-dot"><i class="ri-checkbox-circle-line"></i></div>
                            <div class="timeline-body">
                                <div class="timeline-title">
                                    <span class="badge bg-{{ $hs['class'] }}-subtle text-{{ $hs['class'] }}">
                                        {{ $hs['text'] }}
                                    </span>
                                </div>
                                <div class="timeline-time">
                                    {{ web_date_in_timezone($h->created_at, 'M d, Y h:i A') }}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

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

    /* ═══ Toggle publish from detail page ═══ */
    $('.toggle-publish-btn').on('click', function (e) {
        e.preventDefault();

        const $btn        = $(this);
        const url         = $btn.data('url');
        const isPublished = $btn.data('published') === 1 || $btn.data('published') === '1';

        Swal.fire({
            title: isPublished ? 'Unpublish this delivery?' : 'Publish to marketplace?',
            text: isPublished
                ? 'Products will be hidden from the marketplace.'
                : 'Products will be visible to end users on the marketplace.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: isPublished ? 'Yes, unpublish' : 'Yes, publish',
            confirmButtonColor: isPublished ? '#dc2626' : '#4338ca',
        }).then(r => {
            if (!r.isConfirmed) return;

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

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