@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 lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-4xl font-black">Van Box Management</h1>
            <p class="text-slate-500 mt-1">
                Organize van stock by shelf, box, barcode label, and product location.
            </p>
        </div>

        @if(auth()->user()->isAdmin())
            <form method="GET" class="flex gap-2">
                <select name="user_id" class="select select-bordered bg-white text-black" onchange="this.form.submit()">
                    @foreach($salesmen as $salesman)
                        <option value="{{ $salesman->id }}" @selected($selectedUser && $selectedUser->id == $salesman->id)>
                            {{ $salesman->name }}
                        </option>
                    @endforeach
                </select>
            </form>
        @endif
    </div>

    @if($selectedUser)
        <div class="rounded-3xl bg-gradient-to-br from-slate-950 to-indigo-900 text-white p-6 shadow-xl">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <div class="text-sm text-white/60">Selected Van</div>
                    <div class="text-3xl font-black">{{ $selectedUser->name }}</div>
                    <div class="text-white/60 mt-1">
                        Latest stock:
                        {{ $latestImport ? $latestImport->original_file : 'No completed stock import yet' }}
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-3">
                    <div class="rounded-2xl bg-white/10 p-4">
                        <div class="text-xs text-white/60">Boxes</div>
                        <div class="text-2xl font-black">{{ number_format($boxes->count()) }}</div>
                    </div>

                    <div class="rounded-2xl bg-white/10 p-4">
                        <div class="text-xs text-white/60">Assigned Items</div>
                        <div class="text-2xl font-black">{{ number_format($boxes->sum(fn($b) => $b->items->count())) }}</div>
                    </div>

                    <div class="rounded-2xl bg-white/10 p-4">
                        <div class="text-xs text-white/60">Unassigned</div>
                        <div class="text-2xl font-black">{{ number_format($unassignedItems->count()) }}</div>
                    </div>
                </div>
            </div>
        </div>

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

            <div class="xl:col-span-1 space-y-6">

                @if(auth()->user()->isAdmin())
                <div class="rounded-3xl bg-white border border-slate-200 shadow-sm p-6">
                    <h2 class="text-2xl font-black mb-4">➕ Create / Update Box</h2>

                    <form method="POST" action="{{ route('van-boxes.store') }}" class="space-y-3">
                        @csrf
                        <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">

                        <input name="box_code"
                               class="input input-bordered bg-white text-black w-full"
                               placeholder="Box Code e.g. A01"
                               required>

                        <input name="shelf"
                               class="input input-bordered bg-white text-black w-full"
                               placeholder="Shelf e.g. A / B / C">

                        <input name="position"
                               class="input input-bordered bg-white text-black w-full"
                               placeholder="Position e.g. Left / Middle / Right">

                        <input name="title"
                               class="input input-bordered bg-white text-black w-full"
                               placeholder="Title e.g. Chargers Box">

                        <textarea name="notes"
                                  class="textarea textarea-bordered bg-white text-black w-full"
                                  placeholder="Notes"></textarea>

                        <button class="btn btn-primary w-full">
                            💾 Save Box
                        </button>
                    </form>
                </div>

                @endif

                <div class="rounded-3xl bg-white border border-slate-200 shadow-sm p-6">
                    <h2 class="text-2xl font-black mb-2">📍 Van Layout Idea</h2>
                    <p class="text-sm text-slate-500 mb-4">
                        Use shelves like A/B/C and boxes like A01, A02, B01.
                    </p>

                    <div class="rounded-3xl bg-slate-100 border border-slate-200 p-4 space-y-3">
                        @foreach(['A' => 'Top Shelf', 'B' => 'Middle Shelf', 'C' => 'Bottom Shelf'] as $shelf => $label)
                            <div>
                                <div class="text-xs font-black text-slate-500 mb-2">{{ $label }}</div>
                                <div class="grid grid-cols-3 gap-2">
                                    @for($i = 1; $i <= 3; $i++)
                                        @php
                                            $code = $shelf . str_pad($i, 2, '0', STR_PAD_LEFT);
                                            $exists = $boxes->firstWhere('box_code', $code);
                                        @endphp

                                        <div class="rounded-2xl border p-3 text-center font-black
                                            {{ $exists ? 'bg-emerald-100 border-emerald-200 text-emerald-800' : 'bg-white border-slate-200 text-slate-400' }}">
                                            {{ $code }}
                                        </div>
                                    @endfor
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>

            <div class="xl:col-span-2 space-y-6">

                <div class="rounded-3xl bg-white border border-slate-200 shadow-sm p-6">
                    <div class="flex items-center justify-between mb-5">
                        <div>
                            <h2 class="text-2xl font-black">📦 Boxes</h2>
                            <p class="text-slate-500 text-sm">Click a box to view contents and print label.</p>
                        </div>
                    </div>

                    @if($boxes->count())
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach($boxes as $box)
                                <a href="{{ route('van-boxes.show', $box) }}"
                                   class="rounded-3xl bg-slate-50 border border-slate-200 p-5 hover:shadow-lg transition">
                                    <div class="flex items-start justify-between">
                                        <div>
                                            <div class="text-4xl mb-2">📦</div>
                                            <h3 class="text-2xl font-black">{{ $box->box_code }}</h3>
                                            <p class="text-sm text-slate-500">
                                                {{ $box->title ?: 'Box' }}
                                            </p>
                                        </div>

                                        <span class="badge badge-primary">
                                            {{ $box->items->count() }} SKUs
                                        </span>
                                    </div>

                                    <div class="grid grid-cols-3 gap-2 mt-4">
                                        <div class="rounded-2xl bg-white p-3">
                                            <div class="text-xs text-slate-500">Shelf</div>
                                            <div class="font-black">{{ $box->shelf ?: '-' }}</div>
                                        </div>

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

                                        <div class="rounded-2xl bg-white p-3">
                                            <div class="text-xs text-slate-500">Qty</div>
                                            <div class="font-black">{{ number_format($box->items->sum('qty')) }}</div>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-3xl bg-slate-50 border border-slate-200 p-10 text-center">
                            <div class="text-6xl mb-4">📦</div>
                            <h3 class="text-2xl font-black">No boxes yet</h3>
                            <p class="text-slate-500 mt-2">Create A01, A02, B01 boxes to start organizing the van.</p>
                        </div>
                    @endif
                </div>

                @if(auth()->user()->isAdmin())
                <div class="rounded-3xl bg-white border border-slate-200 shadow-sm p-6">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-5">
                        <div>
                            <h2 class="text-2xl font-black">🧩 Unassigned Van Stock Items</h2>
                            <p class="text-slate-500 text-sm">Assign products from the latest van stock to a box.</p>
                        </div>

                        <input id="unassignedSearch"
                               class="input input-bordered bg-white text-black"
                               placeholder="Search SKU / barcode / name...">
                    </div>

                    @if(!$latestImport)
                        <div class="rounded-3xl bg-orange-50 border border-orange-100 text-orange-800 p-8 text-center font-bold">
                            No completed stock import found for this salesman.
                        </div>
                    @elseif(!$boxes->count())
                        <div class="rounded-3xl bg-orange-50 border border-orange-100 text-orange-800 p-8 text-center font-bold">
                            Create boxes first, then assign products.
                        </div>
                    @elseif($unassignedItems->count())
                        <div class="space-y-3 max-h-[700px] overflow-y-auto pr-1">
                            @foreach($unassignedItems as $item)
                                <div class="unassigned-row rounded-3xl bg-slate-50 border border-slate-200 p-4"
                                     data-search="{{ strtolower(($item->sku ?? '') . ' ' . ($item->barcode ?? '') . ' ' . ($item->display_name ?? '') . ' ' . ($item->category ?? '')) }}">

                                    <div class="flex gap-4">
                                        <div class="w-20 h-20 rounded-2xl bg-white border border-slate-200 flex items-center justify-center overflow-hidden shrink-0">
                                            @if($item->main_image)
                                                <img src="{{ asset('storage/' . $item->main_image) }}" class="w-full h-full object-contain p-2">
                                            @else
                                                🖼
                                            @endif
                                        </div>

                                        <div class="flex-1 min-w-0">
                                            <div class="font-black truncate">{{ $item->display_name }}</div>
                                            <div class="text-xs text-slate-500 mt-1">
                                                SKU: {{ $item->sku ?: '-' }} |
                                                Barcode: {{ $item->barcode ?: '-' }} |
                                                Qty: {{ number_format($item->qty) }}
                                            </div>

                                            <form method="POST"
                                                  action="{{ route('van-boxes.items.add', $boxes->first()) }}"
                                                  class="grid grid-cols-1 md:grid-cols-4 gap-2 mt-3 assign-form">
                                                @csrf

                                                <input type="hidden" name="van_stock_item_id" value="{{ $item->id }}">

                                                <select class="select select-bordered bg-white text-black md:col-span-2 box-select"
                                                        onchange="this.closest('form').action=this.value"
                                                        required>
                                                    @foreach($boxes as $box)
                                                        <option value="{{ route('van-boxes.items.add', $box) }}">
                                                            {{ $box->box_code }} — {{ $box->title ?: 'Box' }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                                <input name="qty"
                                                       type="number"
                                                       step="1"
                                                       min="1"
                                                       max="{{ $item->qty }}"
                                                       value="{{ $item->qty }}"
                                                       class="input input-bordered bg-white text-black">

                                                <button class="btn btn-primary">
                                                    Assign
                                                </button>
                                            </form>
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-3xl bg-emerald-50 border border-emerald-100 text-emerald-800 p-8 text-center font-bold">
                            ✅ All latest van stock items are assigned to boxes.
                        </div>
                    @endif
                </div>

            </div>
            @endif

        </div>
    @endif

</div>

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

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