@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">Edit 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.update', $product) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Product 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', $product->name) }}"
                                   placeholder="Enter product name"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

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


                        

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

                        <div class="col-md-6 mb-3">
                            <label for="standard_price" 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" 
                                id="standard_price" 
                                name="standard_price" 
                                value="{{ old('standard_price', $product->standard_price) }}"
                                placeholder="Enter standard price"
                                required>
                            @error('standard_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

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



                        <div class="col-md-4 mb-3">
                            <label for="category_id" class="form-label">Category</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', $product->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-4 mb-3">
                            <label for="brand_id" class="form-label">Brand</label>
                            <select class="form-control @error('brand_id') is-invalid @enderror" 
                                    id="brand_id" 
                                    name="brand_id">
                                <option value="">Select Brand</option>
                                @foreach($brands as $brand)
                                    <option value="{{ $brand->id }}" {{ old('brand_id', $product->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-4 mb-3">
                            <label for="manufacturer_id" class="form-label">Manufacturer</label>
                            <select class="form-control @error('manufacturer_id') is-invalid @enderror" 
                                    id="manufacturer_id" 
                                    name="manufacturer_id">
                                <option value="">Select Manufacturer</option>
                                @foreach($manufacturers as $manufacturer)
                                    <option value="{{ $manufacturer->id }}" {{ old('manufacturer_id', $product->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 for="price" class="form-label">Price (₹)</label>
                            <input type="number" 
                                   step="0.01" 
                                   class="form-control @error('price') is-invalid @enderror" 
                                   id="price" 
                                   name="price" 
                                   value="{{ old('price', $product->price) }}"
                                   placeholder="0.00">
                            @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div> --}}

                        <div class="col-md-6 mb-3">
                            <label for="price_type" class="form-label">Price Type</label>
                            <input type="text" 
                                   class="form-control @error('price_type') is-invalid @enderror" 
                                   id="price_type" 
                                   name="price_type" 
                                   value="{{ old('price_type', $product->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 for="barcode" class="form-label">Barcode / SKU</label>-->
                        <!--    <input type="text" -->
                        <!--           class="form-control @error('barcode') is-invalid @enderror" -->
                        <!--           id="barcode" -->
                        <!--           name="barcode" -->
                        <!--           value="{{ old('barcode', $product->barcode) }}"-->
                        <!--           placeholder="Enter barcode or SKU">-->
                        <!--    @error('barcode')-->
                        <!--        <div class="invalid-feedback">{{ $message }}</div>-->
                        <!--    @enderror-->
                        <!--</div>-->

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

                        <div class="col-12 mb-3">
                            <label for="datasheet_pdf" class="form-label">Datasheet PDF</label>
                            
                            @if($product->datasheet_pdf_link)
                                <div class="mb-2">
                                    <p class="mb-1">Current PDF:</p>
                                    <a href="{{ route('products.download.datasheet', $product) }}" 
                                       target="_blank" 
                                       class="btn btn-sm btn-outline-primary mb-2">
                                        <i class="fas fa-file-pdf me-1"></i>Download Current Datasheet
                                    </a>
                                </div>
                            @endif
                            
                            <input type="file" 
                                   class="form-control @error('datasheet_pdf') is-invalid @enderror" 
                                   id="datasheet_pdf" 
                                   name="datasheet_pdf" 
                                   accept=".pdf">
                            <small class="text-muted">Upload new PDF file to replace existing (Max: 2MB)</small>
                            @error('datasheet_pdf')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="4"
                                      placeholder="Enter product description">{{ old('description', $product->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', $product->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>Update Product
                        </button>
                        <button type="reset" class="btn btn-outline-secondary">
                            <i class="fas fa-undo me-2"></i>Reset Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


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

    // priority: old() → edit product value
    const oldCategoryId    = @json(old('category_id', $product->category_id ?? null));
    const oldSubCategoryId = @json(old('sub_category_id', $product->sub_category_id ?? null));

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

    async function loadSubCategories(categoryId, selectedId = null) {
        if (!categoryId) {
            resetSub();
            return;
        }

        resetSub('Loading...');

        try {
            const res = await fetch(`{{ url('/categories') }}/${categoryId}/sub-categories`);
            const data = await res.json();

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

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

                subCat.disabled = false;

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

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

    // 🔥 edit form / validation reload
    if (oldCategoryId) {
        category.value = oldCategoryId;
        loadSubCategories(oldCategoryId, oldSubCategoryId);
    } else {
        resetSub();
    }
});
</script>
@endpush