@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-8">
                    <h5 class="card-title mb-0">Create Product</h5>
                </div>
                <div class="col-4 text-end">
                    <a href="{{ route('products.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to List
                    </a>
                </div>
            </div>
            <hr />
        </div>

        <div class="card-body">
            <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Product Name <span class="text-danger">*</span></label>
                        <input type="text"
                               class="form-control @error('name') is-invalid @enderror"
                               name="name"
                               value="{{ old('name') }}"
                               placeholder="Enter product name">
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Unit Type <span class="text-danger">*</span></label>
                        <input type="text"
                               class="form-control @error('unit_type') is-invalid @enderror"
                               name="unit_type"
                               value="{{ old('unit_type') }}"
                               placeholder="e.g. kg, pcs, liter">
                        @error('unit_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Model</label>
                        <input type="text"
                               class="form-control @error('model') is-invalid @enderror"
                               name="model"
                               value="{{ old('model') }}"
                               placeholder="Enter model">
                        @error('model') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Standard Price <span class="text-danger">*</span></label>
                        <input type="number" step="0.01"
                               class="form-control @error('standard_price') is-invalid @enderror"
                               name="standard_price"
                               value="{{ old('standard_price') }}"
                               placeholder="Enter standard price">
                        @error('standard_price') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Special Price</label>
                        <input type="number" step="0.01"
                               class="form-control @error('special_price') is-invalid @enderror"
                               name="special_price"
                               value="{{ old('special_price') }}"
                               placeholder="Enter special price (optional)">
                        @error('special_price') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Category --}}
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Category <span class="text-danger">*</span></label>
                        <select class="form-control @error('category_id') is-invalid @enderror"
                                id="category_id"
                                name="category_id">
                            <option value="">Select Category</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>

                    {{-- Sub Category --}}
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Sub Category <span class="text-danger">*</span></label>
                        <select class="form-control @error('sub_category_id') is-invalid @enderror"
                                id="sub_category_id"
                                name="sub_category_id"
                                disabled>
                            <option value="">First Select Category</option>
                        </select>
                        @error('sub_category_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Brand</label>
                        <select class="form-control @error('brand_id') is-invalid @enderror" name="brand_id">
                            <option value="">Select Brand</option>
                            @foreach($brands as $brand)
                                <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                    {{ $brand->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('brand_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Manufacturer</label>
                        <select class="form-control @error('manufacturer_id') is-invalid @enderror" name="manufacturer_id">
                            <option value="">Select Manufacturer</option>
                            @foreach($manufacturers as $manufacturer)
                                <option value="{{ $manufacturer->id }}" {{ old('manufacturer_id') == $manufacturer->id ? 'selected' : '' }}>
                                    {{ $manufacturer->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('manufacturer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Price Type</label>
                        <input type="text" class="form-control @error('price_type') is-invalid @enderror"
                               name="price_type" value="{{ old('price_type') }}" placeholder="e.g., Retail, Wholesale">
                        @error('price_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Warranty</label>
                        <input type="text" class="form-control @error('warranty') is-invalid @enderror"
                               name="warranty" value="{{ old('warranty') }}" placeholder="e.g., 1 Year">
                        @error('warranty') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-12 mb-3">
                        <label class="form-label">Datasheet PDF</label>
                        <input type="file" class="form-control @error('datasheet_pdf') is-invalid @enderror"
                               name="datasheet_pdf" accept=".pdf">
                        <small class="text-muted">Upload PDF file (Max: 2MB)</small>
                        @error('datasheet_pdf') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

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

                    @if(auth()->user()->hasRole(['admin', 'super-admin']))
                        <div class="col-md-12 mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="status" name="status" value="1"
                                    {{ old('status') ? 'checked' : '' }}>
                                <label class="form-check-label" for="status">Active Product</label>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Create Product
                    </button>
                    <button type="reset" class="btn btn-outline-secondary">
                        <i class="fas fa-undo me-2"></i>Reset
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const category = document.getElementById('category_id');
    const subCat = document.getElementById('sub_category_id');

    const oldCategoryId = "{{ old('category_id') }}";
    const oldSubCategoryId = "{{ old('sub_category_id') }}";

    function resetSubCategory(text = 'First Select Category') {
        subCat.innerHTML = `<option value="">${text}</option>`;
        subCat.disabled = true;
    }

    async function loadSubCategories(categoryId, selectedSubId = null) {
        resetSubCategory('Loading...');
        if (!categoryId) {
            resetSubCategory('First Select Category');
            return;
        }

        try {
            const response = await fetch(`{{ url('/') }}/categories/${categoryId}/sub-categories`);
            if (!response.ok) throw new Error('Failed to fetch sub categories');

            const data = await response.json();

            subCat.innerHTML = '<option value="">Select Sub Category</option>';

            if (data.length > 0) {
                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.id;
                    option.textContent = item.name;
                    subCat.appendChild(option);
                });

                subCat.disabled = false;

                if (selectedSubId) {
                    subCat.value = selectedSubId;
                }
            } else {
                resetSubCategory('No sub-categories found');
            }
        } catch (e) {
            console.error(e);
            resetSubCategory('Error loading sub-categories');
        }
    }

    category.addEventListener('change', function () {
        loadSubCategories(this.value);
    });

    // on page load if old value exists
    if (oldCategoryId) {
        category.value = oldCategoryId;
        loadSubCategories(oldCategoryId, oldSubCategoryId);
    } else {
        resetSubCategory();
    }
});
</script>
@endpush