@extends('admin.templates.layout')

@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; }
        .kv-muted { font-size: 13px; color: #64748b; }

        .stat-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; background: #fff; }
        .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #64748b; font-weight: 600; }
        .stat-value { font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.2; }

        .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-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;
        }
        .ref-trigger:hover { background: #e0e7ff; color: #3730a3; }
        .ref-trigger[aria-expanded="true"] { background: #4338ca; color: #fff; border-color: #4338ca; }
        .ref-box { max-width: 100%; }

        .party-card { display: flex; gap: 12px; align-items: flex-start; }
        .party-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid #e2e8f0; flex-shrink: 0; }
        .party-logo-placeholder {
            width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 15px;
        }
        .party-name { font-weight: 600; color: #0f172a; font-size: 14px; line-height: 1.3; }
        .party-meta { font-size: 12px; color: #64748b; }

        .timeline-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .timeline-line { position: relative; }
        .timeline-line::after {
            content: ''; position: absolute; left: 15px; top: 32px; bottom: -16px;
            width: 2px; background: #e2e8f0;
        }
        .timeline-line:last-child::after { display: none; }

        .delivery-timeline { border-left: 2px solid #e2e8f0; padding-left: 16px; margin-left: 8px; }
        .delivery-timeline-item { position: relative; padding-bottom: 14px; }
        .delivery-timeline-item::before {
            content: ''; position: absolute; left: -21px; top: 6px;
            width: 10px; height: 10px; border-radius: 50%;
            background: #6366f1; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0;
        }
        .delivery-timeline-item:last-child { padding-bottom: 0; }
    </style>
@endsection

@section('content')
    {{-- Header card --}}
    <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 py-3">
                    <div>
                        <div class="kv-label mb-1">Order</div>
                        <div class="d-flex align-items-center gap-2">
                            <h5 class="card-title mb-0 fw-bold">{{ $order->order_reference }}</h5>
                            <button class="btn btn-sm btn-soft-secondary py-0 px-2" title="Copy"
                                    onclick="navigator.clipboard.writeText('{{ $order->order_reference }}'); toastr.success('Copied');">
                                <i class="ri-file-copy-line"></i>
                            </button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        {!! order_status_badge($order->status) !!}
                        <span class="badge bg-light text-dark border">
                            {{ web_date_in_timezone($order->created_at, 'M d, Y h:i A') }}
                        </span>
                    </div>
                </div>

                <div class="card-body pb-2">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-label">Items Qty</div>
                                <div class="stat-value">{{ (int) ($order->total_items_quantity ?: 0) }}</div>
                                <div class="kv-muted">{{ $totalVariants }} variant(s)</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-label">Items Amount</div>
                                <div class="stat-value">{{ number_format((float) ($order->total_items_amount ?: 0), 2) }}</div>
                                <div class="kv-muted">{{ $order->currency ?: 'AED' }}</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-label">SKUs Generated</div>
                                <div class="stat-value">{{ $totalProducts }}</div>
                                <div class="kv-muted">physical units</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card">
                                <div class="stat-label">Delivered</div>
                                <div class="stat-value">{{ $deliveredQty }} / {{ (int) ($order->total_items_quantity ?: 0) }}</div>
                                <div class="kv-muted">{{ number_format($deliveredCost, 2) }} AED charges</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body pt-3 border-top">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="kv-label mb-2">Merchant</div>
                            @if($order->merchant)
                                <div class="party-card">
                                    @if($order->merchant->profileImage)
                                        <img src="{{ $order->merchant->profileImage->url }}" class="party-logo" alt="">
                                    @else
                                        <div class="party-logo-placeholder">
                                            {{ strtoupper(substr($order->merchant->company_name ?: $order->merchant->name, 0, 1)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <div class="party-name">{{ $order->merchant->company_name ?: $order->merchant->name }}</div>
                                        <div class="party-meta">{{ $order->merchant->user_code }}</div>
                                        @if($order->merchant->email)
                                            <div class="party-meta"><i class="ri-mail-line"></i> {{ $order->merchant->email }}</div>
                                        @endif
                                        @if($order->merchant->phone)
                                            <div class="party-meta"><i class="ri-phone-line"></i> +{{ $order->merchant->dial_code }}{{ $order->merchant->phone }}</div>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </div>

                        <div class="col-md-6">
                            <div class="kv-label mb-2">Cargo Company</div>
                            @if($order->cargoCompany)
                                <div class="party-card">
                                    @if($order->cargoCompany->profileImage)
                                        <img src="{{ $order->cargoCompany->profileImage->url }}" class="party-logo" alt="">
                                    @else
                                        <div class="party-logo-placeholder">
                                            {{ strtoupper(substr($order->cargoCompany->company_name ?: $order->cargoCompany->name, 0, 1)) }}
                                        </div>
                                    @endif
                                    <div>
                                        <div class="party-name">{{ $order->cargoCompany->company_name ?: $order->cargoCompany->name }}</div>
                                        <div class="party-meta">{{ $order->cargoCompany->user_code }}</div>
                                        @if($order->cargoCompany->email)
                                            <div class="party-meta"><i class="ri-mail-line"></i> {{ $order->cargoCompany->email }}</div>
                                        @endif
                                        @if($order->cargoCompany->phone)
                                            <div class="party-meta"><i class="ri-phone-line"></i> +{{ $order->cargoCompany->dial_code }}{{ $order->cargoCompany->phone }}</div>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <span class="text-muted">Not assigned</span>
                            @endif
                        </div>
                    </div>

                    <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <div class="kv-label mb-1">Transporter(s)</div>
                            @php
                                $transporters = $order->deliveries
                                    ->map(fn ($d) => $d->transporter)
                                    ->filter()
                                    ->unique('id')
                                    ->values();
                            @endphp
                            @forelse($transporters as $t)
                                <div class="party-meta mb-1">
                                    <i class="ri-truck-line"></i>
                                    <strong>{{ $t->company_name ?: $t->name }}</strong>
                                    @if($t->phone)
                                        <span class="text-muted">· +{{ $t->dial_code }}{{ $t->phone }}</span>
                                    @endif
                                </div>
                            @empty
                                <div class="kv-muted">Not assigned</div>
                            @endforelse
                        </div>

                        <!-- <div class="col-md-6">
                            <div class="kv-label mb-1">Destination</div>
                            <div class="kv-value">{{ $destination !== '' ? $destination : '—' }}</div>
                        </div> -->
                    </div>

                    <!-- <div class="row g-3 mt-2">
                        <div class="col-md-6">
                            <div class="kv-label mb-1">Pickup Address</div>
                            <div class="kv-muted">{{ $order->pickup_address ?: '—' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="kv-label mb-1">Delivery Address</div>
                            <div class="kv-muted">{{ $order->delivery_address ?: '—' }}</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">Change Status</h5></div>
                <div class="card-body d-flex flex-column">
                    <select id="statusSelect" class="form-select mb-3">
                        @foreach(config('global.order_statuses') as $key => $meta)
                            <option value="{{ $key }}" {{ (int) $order->status === (int) $key ? 'selected' : '' }}>
                                {{ $meta['text'] }}
                            </option>
                        @endforeach
                    </select>
                    <textarea id="statusRemark" class="form-control mb-3" rows="3" placeholder="Optional remark..."></textarea>
                    <button id="saveStatus" class="btn btn-primary w-100 mt-auto">Update Status</button>
                </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="badge bg-primary-subtle text-primary">{{ $order->orderItems->count() }} 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>Variants</th>
                                    <th class="text-center" style="width:80px;">Qty</th>
                                    <th class="text-end" style="width:120px;">Amount</th>
                                    <th style="width:180px;">Reference IDs</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($order->orderItems as $i => $item)
                                    @php
                                        $allRefs = $item->orderItemVariants
                                            ->flatMap(fn ($v) => $v->orderItemVariantProducts->pluck('reference_id'));
                                    @endphp
                                    <tr>
                                        <td class="text-muted">{{ $i + 1 }}</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
                                                <div>
                                                    <div class="fw-semibold">{{ $item->name ?: '-' }}</div>
                                                    @if($item->min_variant_price)
                                                        <div class="party-meta">min {{ number_format((float) $item->min_variant_price, 2) }} AED</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            @foreach($item->orderItemVariants as $variant)
                                                <div class="mb-1">
                                                    <span class="badge bg-secondary-subtle text-secondary">{{ $variant->variant }}</span>
                                                    <span class="text-muted fs-12">
                                                        × {{ $variant->quantity }} @ {{ number_format((float) $variant->price, 2) }} AED
                                                    </span>
                                                </div>
                                            @endforeach
                                        </td>
                                        <td class="text-center fw-semibold">{{ $item->total_items_quantity ?: 0 }}</td>
                                        <td class="text-end fw-semibold">{{ number_format((float) ($item->total_items_amount ?: 0), 2) }}</td>
                                        <td>
                                            @if($allRefs->isEmpty())
                                                <span class="text-muted fs-12">—</span>
                                            @else
                                                <button class="ref-trigger" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#refs-{{ $item->id }}"
                                                        aria-expanded="false">
                                                    <i class="ri-qr-code-line"></i>
                                                    {{ $allRefs->count() }} SKU
                                                </button>
                                                <div class="collapse mt-2" id="refs-{{ $item->id }}">
                                                    <div class="ref-box d-flex flex-wrap gap-1">
                                                        @foreach($allRefs as $ref)
                                                            <span class="ref-collapse">{{ $ref }}</span>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center text-muted py-4">No items.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Quotes --}}
    <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">Quotes</h5>
                    <span class="badge bg-info-subtle text-info">{{ $order->quotes->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 style="width:40px;">#</th>
                                    <th>Cargo Company</th>
                                    <th>Status</th>
                                    <th class="text-end">Total Amount</th>
                                    <th>Active</th>
                                    <th>Created</th>
                                    <th style="width:100px;">Items</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($order->quotes as $i => $quote)
                                    @php
                                        $quoteInfo = config("global.quote_statuses.{$quote->status}")
                                            ?? ['text' => 'Unknown', 'class' => 'secondary'];
                                    @endphp
                                    <tr>
                                        <td>{{ $i + 1 }}</td>
                                        <td>{{ $quote->cargoCompany?->company_name ?: ($quote->cargoCompany?->name ?: '-') }}</td>
                                        <td>
                                            <span class="badge bg-{{ $quoteInfo['class'] }}-subtle text-{{ $quoteInfo['class'] }}">
                                                {{ $quoteInfo['text'] }}
                                            </span>
                                        </td>
                                        <td class="text-end fw-semibold">{{ number_format((float) $quote->total_amount, 2) }} AED</td>
                                        <td>
                                            @if($quote->is_active)
                                                <span class="badge bg-success-subtle text-success">Yes</span>
                                            @else
                                                <span class="badge bg-secondary-subtle text-secondary">No</span>
                                            @endif
                                        </td>
                                        <td class="text-muted fs-12">{{ web_date_in_timezone($quote->created_at, 'M d, Y h:i A') }}</td>
                                        <td>
                                            @if($quote->items->isEmpty())
                                                <span class="text-muted fs-12">—</span>
                                            @else
                                                <button class="ref-trigger" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#quote-items-{{ $quote->id }}">
                                                    <i class="ri-list-check-2"></i>
                                                    {{ $quote->items->count() }}
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                    @if($quote->items->isNotEmpty())
                                        <tr class="collapse" id="quote-items-{{ $quote->id }}">
                                            <td colspan="7" class="bg-light">
                                                <table class="table table-sm mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th>Item</th>
                                                            <th>Variant</th>
                                                            <th class="text-end">Price (AED)</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($quote->items as $qi)
                                                            <tr>
                                                                <td>{{ $qi->orderItemVariant?->orderItem?->name ?: '-' }}</td>
                                                                <td>{{ $qi->orderItemVariant?->variant ?: '-' }}</td>
                                                                <td class="text-end">{{ number_format((float) $qi->price, 2) }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    @endif
                                @empty
                                    <tr><td colspan="7" class="text-center text-muted py-4">No quotes yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Deliveries --}}
    <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>Published</th>
                                    <th>Arrival Estimate</th>
                                    <th>Delivered At</th>
                                    <th>Created</th>
                                    <th style="width:120px;">History</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($order->deliveries as $delivery)
                                    @php
                                        $dInfo = config("global.transporter_delivery_statuses.{$delivery->status}")
                                            ?? ['text' => 'Unknown', 'class' => 'secondary'];
                                    @endphp
                                    <tr>
                                        <td class="fw-semibold">{{ $delivery->tracking_number }}</td>
                                        <td>{{ $delivery->transporter?->company_name ?: ($delivery->transporter?->name ?: '-') }}</td>
                                        <td class="text-center">{{ $delivery->quantity }}</td>
                                        <td class="text-end">{{ number_format((float) $delivery->total_charges, 2) }} AED</td>
                                        <td>
                                            <span class="badge bg-{{ $dInfo['class'] }}-subtle text-{{ $dInfo['class'] }}">
                                                {{ $dInfo['text'] }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($delivery->is_published)
                                                <span class="badge bg-success-subtle text-success">Yes</span>
                                            @else
                                                <span class="badge bg-secondary-subtle text-secondary">No</span>
                                            @endif
                                        </td>
                                        <td class="text-muted fs-12">
                                            {{ $delivery->arrival_estimate ? web_date_in_timezone($delivery->arrival_estimate, 'M d, Y h:i A') : '—' }}
                                        </td>
                                        <td class="text-muted fs-12">
                                            {{ $delivery->delivered_at ? web_date_in_timezone($delivery->delivered_at, 'M d, Y h:i A') : '—' }}
                                        </td>
                                        <td class="text-muted fs-12">{{ web_date_in_timezone($delivery->created_at, 'M d, Y h:i A') }}</td>
                                        <td>
                                            @if($delivery->statusHistories->isEmpty())
                                                <span class="text-muted fs-12">—</span>
                                            @else
                                                <button class="ref-trigger" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#delivery-history-{{ $delivery->id }}">
                                                    <i class="ri-history-line"></i>
                                                    {{ $delivery->statusHistories->count() }}
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                    @if($delivery->statusHistories->isNotEmpty())
                                        <tr class="collapse" id="delivery-history-{{ $delivery->id }}">
                                            <td colspan="10" class="bg-light">
                                                <div class="p-3">
                                                    <div class="kv-label mb-3">Delivery Status History — {{ $delivery->tracking_number }}</div>
                                                    <div class="delivery-timeline">
                                                        @foreach($delivery->statusHistories->sortByDesc('created_at') as $sh)
                                                            @php
                                                                $shInfo = config("global.transporter_delivery_statuses.{$sh->status}")
                                                                    ?? ['text' => 'Unknown', 'class' => 'secondary'];
                                                            @endphp
                                                            <div class="delivery-timeline-item">
                                                                <div class="d-flex justify-content-between align-items-center">
                                                                    <div>
                                                                        <span class="badge bg-{{ $shInfo['class'] }}-subtle text-{{ $shInfo['class'] }}">
                                                                            {{ $shInfo['text'] }}
                                                                        </span>
                                                                    </div>
                                                                    <small class="text-muted">
                                                                        {{ web_date_in_timezone($sh->created_at, 'M d, Y h:i A') }}
                                                                    </small>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                @empty
                                    <tr><td colspan="10" class="text-center text-muted py-4">No deliveries yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Order Status Timeline --}}
    <div class="row g-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">Order Status Timeline</h5>
                    <span class="badge bg-secondary-subtle text-secondary">{{ $order->histories->count() }} entries</span>
                </div>
                <div class="card-body">
                    @forelse($order->histories->sortByDesc('created_at') as $history)
                        <div class="d-flex mb-3 timeline-line">
                            <div class="flex-shrink-0 me-3">
                                <div class="timeline-dot bg-primary-subtle text-primary">
                                    <i class="ri-checkbox-circle-line"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between">
                                    <div class="fw-semibold">{!! order_status_badge($history->status) !!}</div>
                                    <small class="text-muted">{{ web_date_in_timezone($history->created_at, 'M d, Y h:i A') }}</small>
                                </div>
                                <div class="text-muted fs-13">{{ $history->remark ?: '—' }}</div>
                                @if($history->changer)
                                    <small class="text-muted">
                                        by {{ $history->changer->name }}
                                        ({{ role_label($history->changed_by_role) }})
                                    </small>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">No status history yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $('#saveStatus').on('click', function () {
            const $btn = $(this).prop('disabled', true).text('Saving...');

            $.ajax({
                url: '{{ route("admin.orders.status") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: {{ $order->id }},
                    status: $('#statusSelect').val(),
                    remark: $('#statusRemark').val()
                },
                success: function (res) {
                    if (res.status === 'success') {
                        toastr.success(res.message);
                        setTimeout(() => location.reload(), 700);
                    } else {
                        toastr.error(res.message);
                    }
                },
                error: function (xhr) {
                    const msg = xhr.responseJSON?.message || 'Failed to update';
                    toastr.error(msg);
                },
                complete: function () {
                    $btn.prop('disabled', false).text('Update Status');
                }
            });
        });
    </script>
@endsection