@extends('layouts.app')
@section('title', 'Video: ' . ($package->resi_number ?? '—'))

@section('content')
<div class="p-6 lg:p-8 max-w-4xl mx-auto">

    <a href="{{ route('dashboard.videos.index') }}"
       class="inline-flex items-center gap-1.5 text-slate-500 hover:text-blue-600 text-sm mb-6 transition font-medium">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        Kembali ke Daftar Video
    </a>

    <div class="bg-white border border-slate-100 rounded-2xl shadow-sm overflow-hidden">
        {{-- Header --}}
        <div class="px-6 py-5 border-b border-slate-100 flex flex-wrap items-center justify-between gap-4">
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Nomor Resi / Tracking Number</p>
                <div class="flex items-center gap-3">
                    <span class="font-mono font-bold text-slate-900 text-xl">{{ $package->resi_number }}</span>
                    @php
                    $statusConfig = [
                        'done'    => ['bg-green-100 text-green-700', 'Selesai'],
                        'claimed' => ['bg-violet-100 text-violet-700', 'Diklaim'],
                        'packing' => ['bg-amber-100 text-amber-700', 'Packing'],
                    ][$package->status] ?? ['bg-slate-100 text-slate-600', $package->status];
                    @endphp
                    <span class="px-2.5 py-1 rounded-full text-xs font-semibold {{ $statusConfig[0] }}">
                        {{ $statusConfig[1] }}
                    </span>
                </div>
                <p class="text-sm text-slate-400 mt-1">
                    Operator: {{ optional($package->operator)->name ?? '—' }} ·
                    {{ optional($package->packed_at)->format('d/m/Y H:i') ?? '' }}
                </p>
            </div>
            @if($package->video && $viewUrl)
            <a href="{{ $viewUrl }}" target="_blank" download
               class="inline-flex items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-4 py-2.5 rounded-xl transition text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                Unduh Video / Download
            </a>
            @endif
        </div>

        {{-- Video player --}}
        @if($package->video && $viewUrl)
        <div class="bg-black aspect-video">
            <video controls class="w-full h-full" preload="metadata">
                <source src="{{ $viewUrl }}" type="{{ $package->video->mime_type }}">
                Browser Anda tidak mendukung pemutaran video.
            </video>
        </div>

        {{-- Meta --}}
        <div class="grid sm:grid-cols-3 divide-y sm:divide-y-0 sm:divide-x divide-slate-100">
            <div class="px-6 py-4">
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Durasi</p>
                <p class="font-bold text-slate-900 font-mono">{{ gmdate('i:s', $package->video->duration_seconds) }}</p>
            </div>
            <div class="px-6 py-4">
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Ukuran File</p>
                <p class="font-bold text-slate-900">{{ $package->video->fileSizeFormatted() }}</p>
            </div>
            <div class="px-6 py-4">
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Kedaluwarsa / Expires</p>
                <p class="font-bold text-slate-900">
                    {{ optional($package->video->expires_at)->format('d/m/Y') ?? 'Permanen' }}
                </p>
            </div>
        </div>
        @else
        <div class="py-20 text-center">
            <div class="text-5xl mb-4">📭</div>
            <p class="text-slate-500 font-medium">Video belum tersedia untuk resi ini</p>
            <p class="text-slate-400 text-xs mt-1">No video available for this tracking number yet</p>
        </div>
        @endif
    </div>
</div>
@endsection