@extends('layouts.user_type.auth')

@section('content')

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="row">
                        <div class="col-6">
                            <h6 class="mb-0">
                                <i class="fas fa-plus me-2"></i>
                                Add New Item
                            </h6>
                            <p class="text-sm mb-0">Create a new item for your inventory</p>
                        </div>
                        <div class="col-6 text-end">
                            <a href="{{ route('items.index') }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>
                                Back to List
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('items.store') }}" method="POST">
                        @csrf
                        
                        <!-- Basic Information -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="name" class="form-label text-sm font-weight-bold text-dark mb-2">
                                        <i class="fas fa-keyboard me-2 text-info"></i>Item Name
                                    </label>
                                    <div class="input-group input-group-outline">
                                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required maxlength="150" placeholder="Enter item name...">
                                    </div>
                                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="category" class="form-label text-sm font-weight-bold text-dark mb-2">
                                        <i class="fas fa-tag me-2 text-info"></i>Category
                                    </label>
                                    <div class="input-group input-group-outline">
                                        <select name="category" id="category" class="form-control @error('category') is-invalid @enderror" required>
                                            <option value="">Select Category</option>
                                            @foreach(\App\Models\Category::orderBy('name')->get() as $category)
                                                <option value="{{ $category->name }}" @selected(old('category') == $category->name)>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('category')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="status" class="form-label text-sm font-weight-bold text-dark mb-2">
                                        <i class="fas fa-map-marker-alt me-2 text-info"></i>Status
                                    </label>
                                    <div class="input-group input-group-outline">
                                        <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required>
                                            <option value="">Select Status</option>
                                            <option value="gudang" @selected(old('status') == 'gudang')>
                                                <i class="fas fa-warehouse"></i> Gudang
                                            </option>
                                            <option value="distributor" @selected(old('status') == 'distributor')>
                                                <i class="fas fa-truck"></i> Distributor
                                            </option>
                                        </select>
                                    </div>
                                    @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        <!-- Serial Number -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="serial_number" class="form-label text-sm font-weight-bold text-dark mb-2">
                                        <i class="fas fa-barcode me-2 text-info"></i>Serial Number
                                    </label>
                                    <div class="input-group input-group-outline">
                                        <input type="text" name="serial_number" id="serial_number" class="form-control @error('serial_number') is-invalid @enderror" value="{{ old('serial_number') }}" required maxlength="100" placeholder="Enter serial number...">
                                    </div>
                                    @error('serial_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        <!-- Stock and Location -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="stock" class="form-label text-sm font-weight-bold text-dark mb-2">
                                        <i class="fas fa-cubes me-2 text-info"></i>Stock Quantity
                                    </label>
                                    <div class="input-group input-group-outline">
                                        <select name="stock" id="stock" class="form-control @error('stock') is-invalid @enderror" required>
                                            <option value="">Select Stock Range</option>
                                            <option value="25" @selected(old('stock') == '25')>1-50 (25)</option>
                                            <option value="75" @selected(old('stock') == '75')>50-100 (75)</option>
                                            <option value="150" @selected(old('stock') == '150')>100-200 (150)</option>
                                        </select>
                                    </div>
                                    @error('stock')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="distribution" class="form-label text-sm font-weight-bold text-dark mb-2">
                                        <i class="fas fa-map-marker-alt me-2 text-info"></i>Location
                                    </label>
                                    <div class="input-group input-group-outline">
                                        <input type="text" name="distribution" id="distribution" class="form-control @error('distribution') is-invalid @enderror" value="{{ old('distribution') }}" placeholder="Enter location...">
                                    </div>
                                    @error('distribution')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="expired_at" class="form-label text-sm font-weight-bold text-dark mb-2">
                                        <i class="fas fa-calendar me-2 text-info"></i>Expiry Date
                                    </label>
                                    <div class="input-group input-group-outline">
                                        <input type="date" name="expired_at" id="expired_at" class="form-control @error('expired_at') is-invalid @enderror" value="{{ old('expired_at') }}" placeholder="Select expiry date...">
                                    </div>
                                    @error('expired_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label for="description" class="form-label text-sm font-weight-bold text-dark mb-2">
                                <i class="fas fa-info-circle me-2 text-info"></i>Description
                            </label>
                            <div class="input-group input-group-outline">
                                <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" rows="3" placeholder="Enter detailed description...">{{ old('description') }}</textarea>
                            </div>
                            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex gap-2 mt-4">
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-save me-2"></i>Save Item
                            </button>
                            <a href="{{ route('items.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection