@extends('layouts.bootstrap')

@section('title', 'Create Product')

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-plus-circle me-2"></i>Create Product
    </h1>
    <a href="{{ route('products.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back to Products
    </a>
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-md-10">
        <!-- Step-by-step Info -->
        <div class="alert alert-info mb-4">
            <h6><i class="bi bi-info-circle me-2"></i>Quick Product Creation</h6>
            <p class="mb-2">Start by entering just the product name - you can add the remaining details later!</p>
            <ul class="mb-0">
                <li><strong>Required now:</strong> Product Name</li>
                <li><strong>Optional now:</strong> Category, Subcategory, Country, Price, Description</li>
                <li><strong>Complete later:</strong> Edit the product anytime to add missing details</li>
            </ul>
        </div>

        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-1-circle me-2"></i>Step 1: Basic Product Information
                </h6>
            </div>
            <div class="card-body">
                <form action="{{ route('products.store') }}" method="POST">
                    @csrf

                    <!-- Required Field -->
                    <div class="mb-4">
                        <label for="name" class="form-label">
                            <i class="bi bi-asterisk text-danger me-1" style="font-size: 0.7em;"></i>
                            Product Name <span class="text-danger">*</span>
                        </label>
                        <input type="text"
                               class="form-control form-control-lg @error('name') is-invalid @enderror"
                               id="name"
                               name="name"
                               value="{{ old('name') }}"
                               required
                               placeholder="Enter the product name..."
                               autofocus>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">This is the only required field to get started!</div>
                    </div>

                    <!-- Optional Fields Section -->
                    <div class="card bg-light">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="bi bi-2-circle me-2"></i>Optional Details
                                <small class="text-muted">(can be added later)</small>
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="category_id" class="form-label">Category</label>
                                    <select class="form-select @error('category_id') is-invalid @enderror"
                                            id="category_id"
                                            name="category_id">
                                        <option value="">Select Category (Optional)</option>
                                        @foreach($categories as $category)
                                            <option value="{{ $category->id }}"
                                                    {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('category_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="subcategory_id" class="form-label">Subcategory</label>
                                    <select class="form-select @error('subcategory_id') is-invalid @enderror"
                                            id="subcategory_id"
                                            name="subcategory_id">
                                        <option value="">Select Subcategory (Optional)</option>
                                    </select>
                                    @error('subcategory_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="country_of_origin" class="form-label">Country of Origin</label>
                                    <input type="text"
                                           class="form-control @error('country_of_origin') is-invalid @enderror"
                                           id="country_of_origin"
                                           name="country_of_origin"
                                           value="{{ old('country_of_origin') }}"
                                           placeholder="Enter country (Optional)">
                                    @error('country_of_origin')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label for="measurement_unit" class="form-label">Measurement Unit</label>
                                    <input type="text"
                                           class="form-control @error('measurement_unit') is-invalid @enderror"
                                           id="measurement_unit"
                                           name="measurement_unit"
                                           value="{{ old('measurement_unit') }}"
                                           placeholder="e.g., kg, lbs, pieces, liters (Optional)"
                                           list="measurement_units">
                                    <datalist id="measurement_units">
                                        <option value="kg">
                                        <option value="lbs">
                                        <option value="g">
                                        <option value="oz">
                                        <option value="pieces">
                                        <option value="units">
                                        <option value="dozen">
                                        <option value="liters">
                                        <option value="ml">
                                        <option value="gallons">
                                        <option value="meters">
                                        <option value="cm">
                                        <option value="inches">
                                        <option value="feet">
                                    </datalist>
                                    @error('measurement_unit')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="price" class="form-label">Price</label>
                                    <div class="input-group">
                                        <span class="input-group-text">$</span>
                                        <input type="number"
                                               class="form-control @error('price') is-invalid @enderror"
                                               id="price"
                                               name="price"
                                               value="{{ old('price') }}"
                                               step="0.01"
                                               min="0"
                                               placeholder="0.00 (Optional)">
                                        @error('price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror"
                                          id="description"
                                          name="description"
                                          rows="3"
                                          placeholder="Enter product description (Optional)">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-4">
                        <a href="{{ route('products.index') }}" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-1"></i>Cancel
                        </a>
                        <div>
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="bi bi-plus-circle me-1"></i>Create Product
                            </button>
                            <div class="form-text text-center mt-1">
                                <small>You can complete missing details after creation</small>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Dynamic subcategory loading
document.getElementById('category_id').addEventListener('change', function() {
    const categoryId = this.value;
    const subcategorySelect = document.getElementById('subcategory_id');
    
    // Clear current options
    subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
    
    if (categoryId) {
        fetch(`/categories/${categoryId}/subcategories`)
            .then(response => response.json())
            .then(data => {
                data.forEach(subcategory => {
                    const option = document.createElement('option');
                    option.value = subcategory.id;
                    option.textContent = subcategory.name;
                    subcategorySelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
});

// Pre-populate subcategories if category is already selected (for validation errors)
document.addEventListener('DOMContentLoaded', function() {
    const categoryId = document.getElementById('category_id').value;
    const selectedSubcategoryId = '{{ old("subcategory_id") }}';
    
    if (categoryId) {
        fetch(`/categories/${categoryId}/subcategories`)
            .then(response => response.json())
            .then(data => {
                const subcategorySelect = document.getElementById('subcategory_id');
                subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
                
                data.forEach(subcategory => {
                    const option = document.createElement('option');
                    option.value = subcategory.id;
                    option.textContent = subcategory.name;
                    if (subcategory.id == selectedSubcategoryId) {
                        option.selected = true;
                    }
                    subcategorySelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
});
</script>
@endpush