@extends('layouts.dashboard')

@section('content')
<div class="max-w-7xl mx-auto p-6 space-y-6">

    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4">
            ✅ {{ session('success') }}
        </div>
    @endif

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-4xl font-black">📦 Box {{ $box->box_code }}</h1>
            <p class="text-slate-500 mt-1">
                {{ $box->salesman->name ?? 'Salesman' }} • Shelf {{ $box->shelf ?: '-' }} • {{ $box->position ?: '-' }}
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            <button onclick="window.print()" class="btn btn-primary">
                🖨 Print Box Label
            </button>

            <a href="{{ route('van-boxes.index', ['user_id' => $box->user_id]) }}" class="btn btn-ghost">
                ← Back
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <div class="rounded-3xl bg-white border border-slate-200 shadow-sm p-6">
            <div class="text-center border-b border-slate-100 pb-6">
                <div class="text-7xl mb-3">📦</div>
                <h2 class="text-5xl font-black">{{ $box->box_code }}</h2>
                <p class="text-slate-500 mt-2">{{ $box->title ?: 'Van Box' }}</p>
            </div>

            <div class="grid grid-cols-2 gap-3 mt-6">
                <div class="rounded-2xl bg-indigo-50 border border-indigo-100 p-4">
                    <div class="text-xs text-slate-500">Products</div>
                    <div class="text-2xl font-black text-indigo-600">{{ number_format($items->count()) }}</div>
                </div>

                <div class="rounded-2xl bg-emerald-50 border border-emerald-100 p-4">
                    <div class="text-xs text-slate-500">Total Qty</div>
                    <div class="text-2xl font-black text-emerald-600">{{ number_format($items->sum('qty')) }}</div>
                </div>

                <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4">
                    <div class="text-xs text-slate-500">Shelf</div>
                    <div class="text-2xl font-black">{{ $box->shelf ?: '-' }}</div>
                </div>

                <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4">
                    <div class="text-xs text-slate-500">Position</div>
                    <div class="text-xl font-black">{{ $box->position ?: '-' }}</div>
                </div>
            </div>

            <div class="mt-6 rounded-3xl bg-slate-50 border border-slate-200 p-5 text-center">
                <div class="font-black mb-2">Box QR / Barcode Placeholder</div>
                <div class="text-4xl tracking-widest font-mono">
                    {{ $box->box_code }}
                </div>
                <p class="text-xs text-slate-500 mt-2">
                    Next phase: generate real QR code for box scanning.
                </p>
            </div>
        </div>

        <div class="lg:col-span-2 rounded-3xl bg-white border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-5 border-b border-slate-100 flex items-center justify-between">
                <div>
                    <h2 class="text-2xl font-black">Items Inside Box</h2>
                    <p class="text-slate-500 text-sm">Products assigned to this physical box.</p>
                </div>

                <input id="boxItemSearch"
                       class="input input-bordered bg-white text-black"
                       placeholder="Search...">
            </div>

            @if($items->count())
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Photo</th>
                                <th>Product</th>
                                <th>Barcode</th>
                                <th>Qty</th>
                                <th></th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($items as $item)
                                <tr class="box-item-row"
                                    data-search="{{ strtolower(($item->sku ?? '') . ' ' . ($item->barcode ?? '') . ' ' . ($item->display_name ?? '')) }}">
                                    <td>
                                        <div class="w-16 h-16 rounded-2xl bg-slate-50 border border-slate-200 flex items-center justify-center overflow-hidden">
                                            @if($item->main_image)
                                                <img src="{{ asset('storage/' . $item->main_image) }}" class="w-full h-full object-contain p-2">
                                            @else
                                                🖼
                                            @endif
                                        </div>
                                    </td>

                                    <td>
                                        <div class="font-black">{{ $item->display_name }}</div>
                                        <div class="text-xs text-slate-500">SKU: {{ $item->sku ?: '-' }}</div>
                                    </td>

                                    <td>{{ $item->barcode ?: '-' }}</td>

                                    <td class="font-black">{{ number_format($item->qty) }}</td>

                                    <td>
                                        <form method="POST"
                                              action="{{ route('van-boxes.items.remove', $item->id) }}"
                                              onsubmit="return confirm('Remove item from this box?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-xs btn-error">Remove</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="p-12 text-center">
                    <div class="text-6xl mb-4">📦</div>
                    <h3 class="text-2xl font-black">Box is empty</h3>
                    <p class="text-slate-500 mt-2">Go back and assign products to this box.</p>
                </div>
            @endif
        </div>

    </div>

</div>

<script>
document.getElementById('boxItemSearch')?.addEventListener('input', function () {
    const q = this.value.toLowerCase().trim();

    document.querySelectorAll('.box-item-row').forEach(row => {
        row.style.display = row.dataset.search.includes(q) ? '' : 'none';
    });
});
</script>
@endsection