@extends('layouts.app')

@section('title', 'Detail Barang: ' . $barangJadi->kode)
@section('page_title', 'Detail Barang Jadi')
@section('page_subtitle', 'Informasi spesifikasi barang dan riwayat pengiriman ke H.OBAR')

@section('content')
<div class="space-y-6">

    <!-- Top Card: Header & Stats -->
    <div class="bg-white rounded-2xl p-6 sm:p-8 shadow-xs border border-slate-200/80">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-6 border-b border-slate-100">
            <div>
                <div class="flex items-center gap-2 mb-2">
                    <span class="px-3 py-1 rounded-lg bg-blue-100 text-blue-800 font-mono font-extrabold text-sm border border-blue-200">
                        {{ $barangJadi->kode }}
                    </span>
                    @if($barangJadi->brand)
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
                            Brand: {{ $barangJadi->brand }}
                        </span>
                    @endif
                </div>
                <h2 class="text-xl sm:text-2xl font-black text-slate-900 tracking-tight leading-snug">
                    {{ $barangJadi->nama }}
                </h2>
                <p class="text-xs text-slate-500 mt-1">
                    Ditambahkan: {{ $barangJadi->created_at ? $barangJadi->created_at->translatedFormat('d F Y, H:i') : '-' }}
                </p>
            </div>

            <!-- Quick Action Buttons -->
            <div class="flex items-center gap-2">
                <a href="{{ route('barang-jadi.edit', $barangJadi->id) }}" 
                   class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-amber-50 hover:bg-amber-100 text-amber-700 text-xs sm:text-sm font-bold border border-amber-200 transition-all">
                    <i data-lucide="edit-3" class="w-4 h-4"></i>
                    <span>Edit Data</span>
                </a>
                <button type="button" 
                        onclick="confirmDelete('{{ route('barang-jadi.destroy', $barangJadi->id) }}', '{{ $barangJadi->kode }} - {{ addslashes($barangJadi->nama) }}')"
                        class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-rose-50 hover:bg-rose-100 text-rose-600 text-xs sm:text-sm font-bold border border-rose-200 transition-all cursor-pointer"
                        title="Hapus Barang">
                    <i data-lucide="trash-2" class="w-4 h-4 pointer-events-none"></i>
                    <span>Hapus</span>
                </button>
                <a href="{{ route('barang-jadi.index') }}" 
                   class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs sm:text-sm font-semibold transition-all">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    <span>Kembali</span>
                </a>
            </div>
        </div>

        <!-- Metric Cards: Responsive 3-Column Compact Grid -->
        <div class="grid grid-cols-3 gap-2 sm:gap-5 mt-6">
            <div class="p-3 sm:p-4 rounded-xl bg-slate-50 border border-slate-100 text-center sm:text-left">
                <p class="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">Per Koli</p>
                <div class="mt-1 flex flex-col sm:flex-row sm:items-baseline gap-0.5 sm:gap-1">
                    <span class="text-lg sm:text-2xl font-extrabold text-slate-900">{{ number_format($barangJadi->isi_koli) }}</span>
                    <span class="text-[10px] sm:text-xs font-semibold text-slate-500">Unit/Koli</span>
                </div>
            </div>

            <div class="p-3 sm:p-4 rounded-xl bg-blue-50/50 border border-blue-100 text-center sm:text-left">
                <p class="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-blue-800">Koli Terkirim</p>
                <div class="mt-1 flex flex-col sm:flex-row sm:items-baseline gap-0.5 sm:gap-1">
                    <span class="text-lg sm:text-2xl font-extrabold text-blue-700">{{ number_format($totalKoliShipped) }}</span>
                    <span class="text-[10px] sm:text-xs font-semibold text-blue-600">Koli</span>
                </div>
            </div>

            <div class="p-3 sm:p-4 rounded-xl bg-emerald-50/50 border border-emerald-100 text-center sm:text-left">
                <p class="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-emerald-800">Total Unit</p>
                <div class="mt-1 flex flex-col sm:flex-row sm:items-baseline gap-0.5 sm:gap-1">
                    <span class="text-lg sm:text-2xl font-extrabold text-emerald-700">{{ number_format($totalUnitShipped) }}</span>
                    <span class="text-[10px] sm:text-xs font-semibold text-emerald-600">Unit</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Shipment History: Desktop Table & Mobile Cards -->
    <div class="bg-white rounded-2xl shadow-xs border border-slate-200/80 overflow-hidden">
        <div class="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between">
            <div>
                <h3 class="text-sm sm:text-base font-extrabold text-slate-900 flex items-center gap-2">
                    <i data-lucide="truck" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600"></i>
                    <span>Riwayat Pengiriman ke H.OBAR</span>
                </h3>
                <p class="text-[11px] sm:text-xs text-slate-500">Daftar transaksi pengiriman yang mencakup {{ $barangJadi->kode }}</p>
            </div>
        </div>

        <!-- Desktop Table View (>= 768px) -->
        <div class="hidden md:block overflow-x-auto">
            <table class="w-full text-left text-sm text-slate-600">
                <thead class="bg-slate-50/80 text-xs uppercase font-bold text-slate-500 border-b border-slate-200">
                    <tr>
                        <th class="px-5 py-3.5">No Pengiriman</th>
                        <th class="px-4 py-3.5">Tanggal</th>
                        <th class="px-4 py-3.5">Tujuan</th>
                        <th class="px-4 py-3.5 text-right">Jumlah Koli</th>
                        <th class="px-4 py-3.5 text-right">Total Unit</th>
                        <th class="px-5 py-3.5">Keterangan Item</th>
                        <th class="px-4 py-3.5 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($shipmentHistory as $detail)
                        @if($detail->pengiriman)
                            <tr class="hover:bg-slate-50/70 transition-colors">
                                <td class="px-5 py-3.5 font-bold text-blue-600 whitespace-nowrap">
                                    <a href="{{ route('pengiriman.show', $detail->pengiriman->id) }}" class="hover:underline flex items-center gap-1.5">
                                        <i data-lucide="file-text" class="w-4 h-4 text-slate-400"></i>
                                        <span>{{ $detail->pengiriman->no_pengiriman }}</span>
                                    </a>
                                </td>
                                <td class="px-4 py-3.5 text-xs text-slate-600 whitespace-nowrap">
                                    {{ $detail->pengiriman->tanggal ? $detail->pengiriman->tanggal->format('d/m/Y') : '-' }}
                                </td>
                                <td class="px-4 py-3.5 whitespace-nowrap">
                                    <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-blue-100 text-blue-800">
                                        {{ $detail->pengiriman->tujuan }}
                                    </span>
                                </td>
                                <td class="px-4 py-3.5 text-right font-extrabold text-slate-900 whitespace-nowrap">
                                    {{ number_format($detail->jumlah_koli) }} Koli
                                </td>
                                <td class="px-4 py-3.5 text-right text-xs font-semibold text-slate-600 whitespace-nowrap">
                                    {{ number_format($detail->total_unit) }} unit
                                </td>
                                <td class="px-5 py-3.5 text-xs text-slate-500">
                                    {{ $detail->keterangan ?: '-' }}
                                </td>
                                <td class="px-4 py-3.5 text-center whitespace-nowrap">
                                    <a href="{{ route('pengiriman.show', $detail->pengiriman->id) }}" 
                                       class="p-1.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors inline-block"
                                       title="Detail Pengiriman">
                                        <i data-lucide="eye" class="w-4 h-4"></i>
                                    </a>
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-10 text-center text-slate-400">
                                <i data-lucide="package" class="w-8 h-8 mx-auto mb-2 text-slate-300"></i>
                                <p class="font-semibold text-slate-600">Belum ada catatan pengiriman untuk barang ini.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Mobile Card List View (< 768px): Vertical Flow Downwards ("kebawah"), 100% Screen Width -->
        <div class="md:hidden divide-y divide-slate-100">
            @forelse($shipmentHistory as $detail)
                @if($detail->pengiriman)
                    <div class="p-3.5 space-y-2.5">
                        <!-- Top: No Pengiriman & Tanggal -->
                        <div class="flex items-center justify-between gap-2">
                            <a href="{{ route('pengiriman.show', $detail->pengiriman->id) }}" class="inline-flex items-center gap-1 font-mono font-bold text-xs text-blue-700 bg-blue-50 px-2 py-0.5 rounded-md border border-blue-200">
                                <i data-lucide="file-text" class="w-3.5 h-3.5 text-blue-600"></i>
                                <span>{{ $detail->pengiriman->no_pengiriman }}</span>
                            </a>
                            <div class="text-right flex items-center gap-2">
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800">
                                    {{ $detail->pengiriman->tujuan }}
                                </span>
                                <span class="text-[11px] text-slate-500">
                                    {{ $detail->pengiriman->tanggal ? $detail->pengiriman->tanggal->format('d/m/Y') : '-' }}
                                </span>
                            </div>
                        </div>

                        <!-- Middle: Koli & Unit Pill -->
                        <div class="grid grid-cols-2 gap-2 bg-slate-50 p-2.5 rounded-xl border border-slate-100 text-center">
                            <div>
                                <span class="text-[10px] font-bold uppercase text-slate-400 block">Koli Terkirim</span>
                                <span class="text-xs font-extrabold text-blue-700">{{ number_format($detail->jumlah_koli) }} Koli</span>
                            </div>
                            <div>
                                <span class="text-[10px] font-bold uppercase text-slate-400 block">Total Unit</span>
                                <span class="text-xs font-extrabold text-emerald-700">{{ number_format($detail->total_unit) }} Unit</span>
                            </div>
                        </div>

                        @if($detail->keterangan)
                            <div class="text-[11px] text-slate-500 bg-slate-50/60 px-2.5 py-1 rounded-lg border border-slate-100">
                                <span class="font-semibold text-slate-600">Catatan:</span> {{ $detail->keterangan }}
                            </div>
                        @endif

                        <!-- Bottom: Action link -->
                        <div class="flex items-center justify-end pt-1 border-t border-slate-50">
                            <a href="{{ route('pengiriman.show', $detail->pengiriman->id) }}" 
                               class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-blue-50 text-blue-700 hover:bg-blue-100 text-xs font-bold transition-colors">
                                <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                                <span>Lihat Pengiriman Ini</span>
                            </a>
                        </div>
                    </div>
                @endif
            @empty
                <div class="p-8 text-center text-slate-400">
                    <i data-lucide="package" class="w-8 h-8 mx-auto mb-2 text-slate-300"></i>
                    <p class="font-semibold text-slate-600 text-xs">Belum ada catatan pengiriman untuk barang ini.</p>
                </div>
            @endforelse
        </div>

        @if($shipmentHistory->hasPages())
            <div class="px-4 sm:px-6 py-4 border-t border-slate-200 bg-slate-50/50">
                {{ $shipmentHistory->links() }}
            </div>
        @endif
    </div>
            </div>
        @endif
    </div>

</div>
@endsection