@extends('layouts.admin')

@section('title', 'Add Item to Library')
@section('page-title', 'Add Item to Library')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('item-library.index') }}">Item Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Create</li>
@endsection

@section('content')
<div class="card card-primary card-outline mb-4">
    <div class="card-header">
        <h3 class="card-title">
            <i class="bi bi-plus-circle me-1"></i> Add New Item
        </h3>
    </div>
    <div class="card-body">
        <form action="{{ route('item-library.store') }}" method="POST">
            @csrf
            
            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label for="name" class="form-label">Item Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                           id="name" name="name" value="{{ old('name') }}" required placeholder="e.g., Photo Booth Package">
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label for="category" class="form-label">Category</label>
                    <input type="text" class="form-control @error('category') is-invalid @enderror" 
                           id="category" name="category" value="{{ old('category') }}" placeholder="e.g., Photography">
                    @error('category')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text">You can create new categories or use existing ones.</div>
                </div>
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                <textarea class="trumbowyg form-control @error('description') is-invalid @enderror" 
                          id="description" name="description" rows="5" required placeholder="Describe the item in detail...">{{ old('description') }}</textarea>
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <div class="form-text">This description will be used when adding the item to invoices.</div>
            </div>

            <div class="row g-3 mb-4 align-items-center">
                <div class="col-md-6">
                    <label for="default_price" class="form-label">Default Price (RM)</label>
                    <div class="input-group">
                        <span class="input-group-text">RM</span>
                        <input type="number" step="0.01" class="form-control @error('default_price') is-invalid @enderror" 
                               id="default_price" name="default_price" value="{{ old('default_price', '0.00') }}" min="0">
                        @error('default_price')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-6">
                    <label class="form-label d-block">Status</label>
                    <div class="form-check form-switch pt-1">
                        <input class="form-check-input" type="checkbox" role="switch" id="is_active" name="is_active" value="1" checked>
                        <label class="form-check-label fw-bold" for="is_active">Active</label>
                    </div>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-start gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-floppy me-1"></i> Save Item
                </button>
                <a href="{{ route('item-library.index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-lg me-1"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Quick Tips -->
<div class="card card-info card-outline mb-4">
    <div class="card-header">
        <h3 class="card-title">
            <i class="bi bi-lightbulb me-1"></i> Tips
        </h3>
    </div>
    <div class="card-body">
        <ul class="mb-0 ps-3">
            <li class="mb-1"><strong>Name:</strong> Give your item a clear, descriptive name.</li>
            <li class="mb-1"><strong>Category:</strong> Organize items by category for easier filtering.</li>
            <li class="mb-1"><strong>Description:</strong> Include all details that should appear on invoices.</li>
            <li class="mb-1"><strong>Default Price:</strong> Set a standard price that can be adjusted when adding to invoices.</li>
            <li><strong>Active:</strong> Inactive items won't appear in the library when creating invoices.</li>
        </ul>
    </div>
</div>
@endsection