@extends('layouts.admin')

@section('content')

<div class="mb-4">
    <a href="{{ route('admin.products.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill mb-2">
        <i class="bi bi-arrow-left me-1"></i> Back to Inventory
    </a>
    <h4 class="brand-font text-uppercase text-secondary mb-0">Add New Product</h4>
</div>

<div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white">
    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data" data-turbo-frame="admin-content">
        @csrf
        
        <div class="row g-3">
            <!-- Name -->
            <div class="col-md-6">
                <label for="name" class="form-label small fw-semibold text-muted">Product Name</label>
                <input type="text" class="form-control rounded-pill px-3 @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
                @error('name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Brand -->
            <div class="col-md-6">
                <label for="brand" class="form-label small fw-semibold text-muted">Brand Name</label>
                <input type="text" class="form-control rounded-pill px-3 @error('brand') is-invalid @enderror" id="brand" name="brand" value="{{ old('brand') }}" placeholder="e.g. Trek, Shimano, Specialized">
                @error('brand')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Type -->
            <div class="col-md-4">
                <label for="type" class="form-label small fw-semibold text-muted">Product Type</label>
                <select class="form-select rounded-pill px-3 @error('type') is-invalid @enderror" id="type" name="type" required>
                    <option value="" disabled selected>Select Type</option>
                    <option value="bike" {{ old('type') === 'bike' ? 'selected' : '' }}>Bicycle</option>
                    <option value="spare_part" {{ old('type') === 'spare_part' ? 'selected' : '' }}>Spare Part</option>
                    <option value="accessory" {{ old('type') === 'accessory' ? 'selected' : '' }}>Accessory</option>
                    <option value="apparel" {{ old('type') === 'apparel' ? 'selected' : '' }}>Apparel</option>
                </select>
                @error('type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Category -->
            <div class="col-md-4">
                <label for="category_id" class="form-label small fw-semibold text-muted">Category</label>
                <select class="form-select rounded-pill px-3 @error('category_id') is-invalid @enderror" id="category_id" name="category_id" required>
                    <option value="" disabled selected>Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }} ({{ ucfirst($cat->type) }})
                        </option>
                    @endforeach
                </select>
                @error('category_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Availability -->
            <div class="col-md-4">
                <label for="availability" class="form-label small fw-semibold text-muted">Availability status</label>
                <select class="form-select rounded-pill px-3" id="availability" name="availability" required>
                    <option value="available" {{ old('availability') === 'available' ? 'selected' : '' }}>Available / In Stock</option>
                    <option value="pre_order" {{ old('availability') === 'pre_order' ? 'selected' : '' }}>Pre-Order</option>
                    <option value="out_of_stock" {{ old('availability') === 'out_of_stock' ? 'selected' : '' }}>Out of Stock</option>
                </select>
            </div>

            <!-- Price -->
            <div class="col-md-4">
                <label for="price" class="form-label small fw-semibold text-muted">Showroom Price (KSh)</label>
                <input type="number" step="0.01" class="form-control rounded-pill px-3 @error('price') is-invalid @enderror" id="price" name="price" value="{{ old('price') }}" required>
                @error('price')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Discount Price -->
            <div class="col-md-4">
                <label for="discount_price" class="form-label small fw-semibold text-muted">Discount Price (KSh - Optional)</label>
                <input type="number" step="0.01" class="form-control rounded-pill px-3 @error('discount_price') is-invalid @enderror" id="discount_price" name="discount_price" value="{{ old('discount_price') }}">
                @error('discount_price')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Stock Quantity -->
            <div class="col-md-4">
                <label for="stock_quantity" class="form-label small fw-semibold text-muted">Inventory Quantity</label>
                <input type="number" class="form-control rounded-pill px-3 @error('stock_quantity') is-invalid @enderror" id="stock_quantity" name="stock_quantity" value="{{ old('stock_quantity', 1) }}" required>
                @error('stock_quantity')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Size / Attributes (Only relevant for bikes or clothing) -->
            <div class="col-md-4">
                <label for="frame_size" class="form-label small fw-semibold text-muted">Frame Size (e.g. Medium, 54cm - Optional)</label>
                <input type="text" class="form-control rounded-pill px-3" id="frame_size" name="frame_size" value="{{ old('frame_size') }}">
            </div>
            
            <div class="col-md-4">
                <label for="wheel_size" class="form-label small fw-semibold text-muted">Wheel Size (e.g. 29", 700c - Optional)</label>
                <input type="text" class="form-control rounded-pill px-3" id="wheel_size" name="wheel_size" value="{{ old('wheel_size') }}">
            </div>

            <div class="col-md-4">
                <label for="color" class="form-label small fw-semibold text-muted">Color (Optional)</label>
                <input type="text" class="form-control rounded-pill px-3" id="color" name="color" value="{{ old('color') }}">
            </div>

            <!-- Primary Image -->
            <div class="col-md-6">
                <label for="primary_image" class="form-label small fw-semibold text-muted">Primary Catalog Image</label>
                <input type="file" class="form-control rounded-pill px-3 @error('primary_image') is-invalid @enderror" id="primary_image" name="primary_image" required>
                @error('primary_image')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Extra Images -->
            <div class="col-md-6">
                <label for="extra_images" class="form-label small fw-semibold text-muted">Extra Detail Photos (Multi-Upload)</label>
                <input type="file" class="form-control rounded-pill px-3" id="extra_images" name="extra_images[]" multiple>
            </div>

            <!-- Description -->
            <div class="col-12">
                <label for="description" class="form-label small fw-semibold text-muted">Product Description</label>
                <textarea class="form-control rounded-4 @error('description') is-invalid @enderror" id="description" name="description" rows="4" required>{{ old('description') }}</textarea>
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Dynamic Specifications -->
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label small fw-semibold text-muted mb-0">Product Specifications</label>
                    <button type="button" class="btn btn-outline-danger btn-sm rounded-pill py-1" onclick="addSpecRow()"><i class="bi bi-plus-circle"></i> Add Row</button>
                </div>
                <div id="specsContainer">
                    <div class="row g-2 mb-2 spec-row">
                        <div class="col-5">
                            <input type="text" class="form-control rounded-pill px-3" name="specifications_keys[]" placeholder="Specification Label (e.g. Weight)">
                        </div>
                        <div class="col-6">
                            <input type="text" class="form-control rounded-pill px-3" name="specifications_values[]" placeholder="Value (e.g. 10.2 kg)">
                        </div>
                        <div class="col-1 text-end">
                            <button type="button" class="btn btn-outline-danger rounded-circle p-1" onclick="removeSpecRow(this)"><i class="bi bi-trash"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Featured check -->
            <div class="col-12 my-2">
                <div class="form-check form-switch card p-3 border-light shadow-sm flex-row align-items-center justify-content-between">
                    <div>
                        <label class="form-check-label fw-bold text-secondary d-block" for="is_featured">Feature on Homepage?</label>
                        <small class="text-muted">Toggle this if you want the product to appear in the home showcase section.</small>
                    </div>
                    <input class="form-check-input ms-0 me-3" type="checkbox" role="switch" id="is_featured" name="is_featured" value="1">
                </div>
            </div>
        </div>

        <div class="text-center mt-4">
            <button type="submit" class="btn btn-primary-mj btn-lg rounded-pill px-5 text-uppercase">
                Save Product <i class="bi bi-check-circle ms-1"></i>
            </button>
        </div>
    </form>
</div>

@endsection

@section('scripts')
<script>
    function addSpecRow() {
        const container = document.getElementById('specsContainer');
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 spec-row';
        row.innerHTML = `
            <div class="col-5">
                <input type="text" class="form-control rounded-pill px-3" name="specifications_keys[]" placeholder="Label">
            </div>
            <div class="col-6">
                <input type="text" class="form-control rounded-pill px-3" name="specifications_values[]" placeholder="Value">
            </div>
            <div class="col-1 text-end">
                <button type="button" class="btn btn-outline-danger rounded-circle p-1" onclick="removeSpecRow(this)"><i class="bi bi-trash"></i></button>
            </div>
        `;
        container.appendChild(row);
    }
</script>
@endsection
