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

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

    <a href="{{ route('dashboard.claims.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 Klaim
    </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">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Bukti Video Klaim / Claim Video Proof</p>
                    <span class="font-mono font-bold text-slate-900 text-2xl">{{ $package->resi_number }}</span>
                    <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>
                <div class="flex items-center gap-3">
                    @if($package->status === 'done')
                    <form method="POST" action="{{ route('dashboard.claims.mark-claimed', $package) }}">
                        @csrf
                        <button type="submit"
                                class="inline-flex items-center gap-2 bg-violet-600 hover:bg-violet-700 text-white font-semibold px-5 py-2.5 rounded-xl transition text-sm shadow-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Tandai Klaim
                        </button>
                    </form>
                    @else
                    <span class="inline-flex items-center gap-2 bg-violet-100 text-violet-700 font-semibold px-5 py-2.5 rounded-xl 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Sudah Diklaim
                    </span>
                    @endif
                    <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
                    </a>
                </div>
            </div>
        </div>

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

        {{-- Info bar --}}
        <div class="px-6 py-4 bg-blue-50 border-t border-blue-100 flex flex-wrap gap-6 text-sm">
            <div class="flex items-center gap-2 text-blue-700">
                <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span>Video ini adalah bukti resmi proses packing / This video is official packing proof</span>
            </div>
            @if($package->video->expires_at)
            <div class="flex items-center gap-2 text-amber-700">
                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <span>Kedaluwarsa: {{ $package->video->expires_at->format('d/m/Y') }}</span>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection