@extends('layouts.app')
@section('title', 'Add Inventory Item')
@section('breadcrumb')<a href="{{ route('inventory.index') }}" class="hover:text-white">Inventory</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">Add Item</span>@endsection

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="mb-1">Add Inventory Item</h1>
            <p>Directly add a new stock item to inventory</p>
        </div>
    </div>

    @if($errors->any())
    <div class="card p-4 mb-4 border-red-500 bg-red-900/20">
        <ul class="text-red-400 text-sm space-y-1">
            @foreach($errors->all() as $e)
            <li><i class="fas fa-exclamation-circle mr-1"></i>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form method="POST" action="{{ route('inventory.direct-store') }}" class="space-y-6">
        @csrf

        <div class="card p-5 space-y-4">
            <h3 class="mb-2"><i class="fas fa-barcode text-blue-400 mr-2"></i>Item Details</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label>Item SKU <span class="text-red-400">*</span></label>
                    <input type="text"
                           name="sku"
                           value="{{ old('sku') }}"
                           class="input font-mono"
                           placeholder="e.g. CAB-001"
                           required
                           style="text-transform:uppercase">
                    <p class="text-xs text-slate-500 mt-1">Must be unique. Duplicate SKUs are not allowed.</p>
                </div>
                <div>
                    <label>Item Name <span class="text-red-400">*</span></label>
                    <input type="text"
                           name="item_name"
                           value="{{ old('item_name') }}"
                           class="input"
                           placeholder="e.g. Cabinet Door Handle"
                           required>
                </div>
            </div>

            <div>
                <label>Description</label>
                <textarea name="description" rows="2" class="input" placeholder="Optional detailed description…">{{ old('description') }}</textarea>
            </div>

            <div>
                <label>Supplier</label>
                <select name="preferred_supplier_id" class="input">
                    <option value="">— No Supplier —</option>
                    @foreach($suppliers as $s)
                    <option value="{{ $s->id }}" {{ old('preferred_supplier_id') == $s->id ? 'selected' : '' }}>
                        {{ $s->company ?: $s->full_name }}
                    </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="card p-5 space-y-4">
            <h3 class="mb-2"><i class="fas fa-boxes text-green-400 mr-2"></i>Stock &amp; Pricing</h3>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label>Quantity <span class="text-red-400">*</span></label>
                    <input type="number"
                           name="qty_on_hand"
                           value="{{ old('qty_on_hand', 0) }}"
                           class="input"
                           step="0.01"
                           min="0"
                           required>
                </div>
                <div>
                    <label>Unit</label>
                    <select name="unit" class="input">
                        @foreach(['Each','m','m²','m³','Sheet','Pack','Box','Set','Pair','Roll','L','kg','Bag','Panel','Slab'] as $u)
                        <option value="{{ $u }}" {{ old('unit', 'Each') === $u ? 'selected' : '' }}>{{ $u }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Unit Price <span class="text-red-400">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">$</span>
                        <input type="number"
                               name="unit_cost"
                               value="{{ old('unit_cost', 0) }}"
                               class="input pl-7"
                               step="0.01"
                               min="0"
                               required>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label>Storage Location</label>
                    <input type="text"
                           name="storage_location"
                           value="{{ old('storage_location') }}"
                           class="input"
                           placeholder="e.g. Shelf A3, Bay 2, Warehouse B">
                </div>
                <div>
                    <label>Reorder Point</label>
                    <input type="number"
                           name="reorder_point"
                           value="{{ old('reorder_point', 0) }}"
                           class="input"
                           step="0.01"
                           min="0">
                    <p class="text-xs text-slate-500 mt-1">Alert when stock falls to or below this level.</p>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-between">
            <a href="{{ route('inventory.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left mr-2"></i>Cancel
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-plus mr-2"></i>Add to Inventory
            </button>
        </div>
    </form>
</div>
@endsection