@extends('layouts.dashboard')

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

    <div class="rounded-3xl bg-white border border-gray-200 shadow-sm overflow-hidden">

        <div class="bg-gradient-to-br from-indigo-600 to-cyan-500 text-white p-6">
            <h1 class="text-3xl font-black">Assign Van Inventory</h1>
            <p class="text-white/80 mt-1">
                Upload a salesman stock file. The public catalog will update automatically.
            </p>
        </div>

        <form method="POST"
              action="{{ route('van-stocks.admin-upload.store') }}"
              enctype="multipart/form-data"
              class="p-6 space-y-6">
            @csrf

            <div>
                <label class="block text-sm font-black mb-2">Select Salesman / Van</label>
                <select name="user_id"
                        class="select select-bordered bg-white text-black w-full"
                        required>
                    <option value="">Choose salesman...</option>
                    @foreach($salesmen as $salesman)
                        <option value="{{ $salesman->id }}">
                            {{ $salesman->name }} — {{ $salesman->email }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-black mb-2">Upload Inventory File</label>

                <label class="flex flex-col items-center justify-center rounded-3xl border-2 border-dashed border-indigo-200 bg-indigo-50/60 p-10 cursor-pointer hover:bg-indigo-50 transition">
                    <div class="text-5xl mb-3">📤</div>
                    <div class="font-black text-lg">Click to choose Excel file</div>
                    <div class="text-sm text-slate-500 mt-1">
                        Supported: XLSX, XLS, CSV
                    </div>

                    <input type="file"
                           name="van_stock_file"
                           class="hidden"
                           accept=".xlsx,.xls,.csv"
                           required
                           onchange="document.getElementById('fileName').innerText = this.files[0]?.name || 'No file selected'">
                </label>

                <div id="fileName" class="mt-3 text-sm font-bold text-slate-500">
                    No file selected
                </div>
            </div>

            <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4 text-sm text-slate-600">
                <div class="font-black text-slate-800 mb-2">Expected columns:</div>
                <div>Item / SKU, Barcode, Description, Category, Quantity</div>
            </div>

            <button class="btn btn-primary w-full rounded-2xl">
                🚀 Upload, Assign & Update Catalog
            </button>
        </form>
    </div>

</div>
@endsection