@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; }

        .qr-frame {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            background: #fff;
            display: inline-block;
        }
        .ref-code {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: .3px;
            padding: 8px 12px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .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; }

        .scan-trail { display: flex; flex-direction: column; gap: 0; }
        .scan-step {
            display: flex; gap: 14px; align-items: flex-start;
            padding-bottom: 20px; position: relative;
        }
        .scan-step:last-child { padding-bottom: 0; }
        .scan-step::after {
            content: ''; position: absolute; left: 15px; top: 36px; bottom: 0;
            width: 2px; background: #e2e8f0;
        }
        .scan-step:last-child::after { display: none; }
        .scan-dot {
            width: 32px; height: 32px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: 15px;
        }
        .scan-dot.done { background: #dcfce7; color: #16a34a; }
        .scan-dot.pending { background: #f1f5f9; color: #94a3b8; }
        .scan-dot.active { background: #dbeafe; color: #2563eb; }
        .scan-title { font-weight: 600; font-size: 13.5px; color: #0f172a; }
        .scan-time { font-size: 12px; color: #64748b; }

        .product-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; }

        .delivery-timeline-item { position: relative; padding-left: 20px; padding-bottom: 14px; }
        .delivery-timeline-item::before {
            content: ''; position: absolute; left: 0; 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; }
        .delivery-timeline { border-left: 2px solid #e2e8f0; padding-left: 6px; margin-left: 4px; }
    </style>
@endsection

@section('content')
    @php
        $order = $product->orderItemVariant?->orderItem?->order;
        $item  = $product->orderItemVariant?->orderItem;
        $variant = $product->orderItemVariant;

        $scanStatusMeta = match($scanStatus) {
            'generated' => ['label' => 'Generated', 'class' => 'secondary', 'icon' => 'ri-qr-code-line'],
            'collected' => ['label' => 'Collected by Transporter', 'class' => 'warning', 'icon' => 'ri-truck-line'],
            'verified'  => ['label' => 'Verified by Warehouse', 'class' => 'success', 'icon' => 'ri-shield-check-line'],
            default     => ['label' => 'Unknown', 'class' => 'secondary', 'icon' => 'ri-question-line'],
        };
    @endphp

    {{-- Back link --}}
    <div class="mb-3">
        <a href="{{ route('admin.products.index') }}" class="btn btn-sm btn-soft-secondary">
            <i class="ri-arrow-left-line"></i> Back to Products
        </a>
    </div>

    {{-- Header: QR + reference + status --}}
    <div class="row g-3 mb-3">
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="qr-frame mb-3">
                        <img src="{{ qr_code_url($product->reference_id, 300) }}" width="220" height="220" alt="QR">
                    </div>
                    <div class="mb-2">
                        <div class="ref-code">
                            <i class="ri-qr-code-line text-primary"></i>
                            {{ $product->reference_id }}
                            <button type="button" class="btn btn-sm btn-link p-0 ms-1" title="Copy"
                                    onclick="navigator.clipboard.writeText('{{ $product->reference_id }}'); toastr.success('Copied');">
                                <i class="ri-file-copy-line"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mt-2">
                        <span class="badge bg-{{ $scanStatusMeta['class'] }}-subtle text-{{ $scanStatusMeta['class'] }} fs-12">
                            <i class="{{ $scanStatusMeta['icon'] }}"></i> {{ $scanStatusMeta['label'] }}
                        </span>
                    </div>
                    <div class="mt-3">
                        <a href="{{ qr_code_url($product->reference_id, 600) }}" download="qr-{{ $product->reference_id }}.png"
                           class="btn btn-sm btn-soft-primary">
                            <i class="ri-download-2-line"></i> Download QR
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-header border-bottom"><h5 class="card-title mb-0">Product</h5></div>
                <div class="card-body">
                    <div class="d-flex align-items-start gap-3 mb-3">
                        @if($variant?->image)
                            <img src="{{ $variant->image->url }}" class="product-thumb" alt="">
                        @elseif($item?->image)
                            <img src="{{ $item->image->url }}" class="product-thumb" alt="">
                        @endif
                        <div>
                            <div class="fw-bold fs-15">{{ $item?->name ?: '-' }}</div>
                            <div class="kv-muted">Variant: <strong>{{ $variant?->variant ?: '-' }}</strong></div>
                            <div class="kv-muted">Price: <strong>{{ number_format((float) ($variant?->price ?? 0), 2) }} AED</strong></div>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="kv-label">Reference ID</div>
                            <div class="font-monospace">{{ $product->reference_id }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="kv-label">Generated At</div>
                            <div class="kv-value">{{ web_date_in_timezone($product->created_at, 'M d, Y h:i A') }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="kv-label">Variant Quantity (Order)</div>
                            <div class="kv-value">{{ (int) ($variant?->quantity ?? 0) }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="kv-label">Order Item Total Qty</div>
                            <div class="kv-value">{{ (int) ($item?->total_items_quantity ?? 0) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Order context --}}
    <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 Context</h5>
                    @if($order)
                        <a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-soft-primary">
                            <i class="ri-external-link-line"></i> Open Order
                        </a>
                    @endif
                </div>
                <div class="card-body">
                    @if($order)
                        <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->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->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 class="col-md-6">
                                <div class="kv-label mb-1">Order Reference</div>
                                <a href="{{ route('admin.orders.show', $order->id) }}" class="fw-semibold text-primary">
                                    {{ $order->order_reference }}
                                </a>
                            </div>
                            <div class="col-md-6">
                                <div class="kv-label mb-1">Order Status</div>
                                <div>{!! order_status_badge($order->status) !!}</div>
                            </div>

                            <div class="col-md-6">
                                <div class="kv-label mb-1">Destination</div>
                                <div class="kv-value">
                                    {{ collect([$order->destination_city, $order->destination_country])->filter()->implode(', ') ?: '—' }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="kv-label mb-1">Order Created</div>
                                <div class="kv-value">{{ web_date_in_timezone($order->created_at, 'M d, Y h:i A') }}</div>
                            </div>
                        </div>
                    @else
                        <div class="text-muted">Order not found for this product.</div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Scan trail --}}
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header border-bottom"><h5 class="card-title mb-0">Lifecycle</h5></div>
                <div class="card-body">
                    <div class="scan-trail">
                        {{-- Step 1: Generated --}}
                        <div class="scan-step">
                            <div class="scan-dot done"><i class="ri-qr-code-line"></i></div>
                            <div>
                                <div class="scan-title">QR Generated</div>
                                <div class="scan-time">{{ web_date_in_timezone($product->created_at, 'M d, Y h:i A') }}</div>
                            </div>
                        </div>

                        {{-- Step 2: Assigned to delivery --}}
                        <div class="scan-step">
                            <div class="scan-dot {{ $pivot ? 'done' : 'pending' }}">
                                <i class="ri-truck-line"></i>
                            </div>
                            <div>
                                <div class="scan-title">Assigned to Delivery</div>
                                @if($pivot)
                                    <div class="scan-time">{{ web_date_in_timezone($pivot->created_at, 'M d, Y h:i A') }}</div>
                                    @if($delivery)
                                        <div class="party-meta mt-1">
                                            Tracking: <strong>{{ $delivery->tracking_number }}</strong>
                                        </div>
                                        <div class="party-meta">
                                            Transporter: <strong>{{ $delivery->transporter?->company_name ?: $delivery->transporter?->name ?: '-' }}</strong>
                                        </div>
                                    @endif
                                @else
                                    <div class="scan-time text-muted">Pending assignment</div>
                                @endif
                            </div>
                        </div>

                        {{-- Step 3: Verified --}}
                        <div class="scan-step">
                            <div class="scan-dot {{ $pivot && $pivot->is_warehouse_verified ? 'done' : 'pending' }}">
                                <i class="ri-shield-check-line"></i>
                            </div>
                            <div>
                                <div class="scan-title">Verified by Warehouse</div>
                                @if($pivot && $pivot->is_warehouse_verified)
                                    <div class="scan-time">
                                        {{ $pivot->warehouse_verified_at
                                            ? web_date_in_timezone($pivot->warehouse_verified_at, 'M d, Y h:i A')
                                            : 'Verified' }}
                                    </div>
                                @else
                                    <div class="scan-time text-muted">Awaiting verification</div>
                                @endif
                            </div>
                        </div>

                        {{-- Step 4: Marketplace --}}
                        <div class="scan-step">
                            <div class="scan-dot {{ $marketplaceState === 'published' ? 'active' : 'pending' }}">
                                <i class="ri-store-2-line"></i>
                            </div>
                            <div>
                                <div class="scan-title">Marketplace</div>
                                @if($marketplaceState === 'published')
                                    <div class="scan-time text-primary fw-semibold">Published — visible to end users</div>
                                @elseif($marketplaceState === 'unpublished')
                                    <div class="scan-time text-muted">In delivery, not published yet</div>
                                @else
                                    <div class="scan-time text-muted">Not in any delivery</div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Delivery detail + history --}}
    @if($delivery)
        <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">Delivery — {{ $delivery->tracking_number }}</h5>
                        @php
                            $dInfo = config("global.transporter_delivery_statuses.{$delivery->status}")
                                ?? ['text' => 'Unknown', 'class' => 'secondary'];
                        @endphp
                        <span class="badge bg-{{ $dInfo['class'] }}-subtle text-{{ $dInfo['class'] }}">
                            {{ $dInfo['text'] }}
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="kv-label">Transporter</div>
                                <div class="kv-value">{{ $delivery->transporter?->company_name ?: $delivery->transporter?->name ?: '-' }}</div>
                                @if($delivery->transporter?->phone)
                                    <div class="party-meta">+{{ $delivery->transporter->dial_code }}{{ $delivery->transporter->phone }}</div>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <div class="kv-label">Total Charges</div>
                                <div class="kv-value">{{ number_format((float) $delivery->total_charges, 2) }} AED</div>
                            </div>
                            <div class="col-md-4">
                                <div class="kv-label">Arrival Estimate</div>
                                <div class="kv-value">
                                    {{ $delivery->arrival_estimate ? web_date_in_timezone($delivery->arrival_estimate, 'M d, Y h:i A') : '—' }}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="kv-label">Delivered At</div>
                                <div class="kv-value">
                                    {{ $delivery->delivered_at ? web_date_in_timezone($delivery->delivered_at, 'M d, Y h:i A') : '—' }}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="kv-label">Published</div>
                                <div class="kv-value">
                                    @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
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <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">Delivery Timeline</h5>
                        <span class="badge bg-secondary-subtle text-secondary">{{ $deliveryStatusHistories->count() }}</span>
                    </div>
                    <div class="card-body">
                        @if($deliveryStatusHistories->isEmpty())
                            <div class="text-muted text-center py-3">No history yet.</div>
                        @else
                            <div class="delivery-timeline">
                                @foreach($deliveryStatusHistories->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-start">
                                            <span class="badge bg-{{ $shInfo['class'] }}-subtle text-{{ $shInfo['class'] }}">
                                                {{ $shInfo['text'] }}
                                            </span>
                                            <small class="text-muted">{{ web_date_in_timezone($sh->created_at, 'M d, Y h:i A') }}</small>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('script')
    {{-- No page-specific JS; QR copy handled inline --}}
@endsection