@extends('layouts.bootstrap')

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

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-pencil me-2"></i>Edit 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">
        <!-- Completion Status -->
        @if($product->isIncomplete())
            <div class="alert alert-warning mb-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6><i class="bi bi-exclamation-triangle me-2"></i>Product Incomplete</h6>
                        <p class="mb-1">This product is missing some details. Complete them to finish setup:</p>
                        <strong>Missing:</strong> {{ implode(', ', $product->getMissingFields()) }}
                    </div>
                    <div class="text-end">
                        <div class="progress" style="width: 100px; height: 20px;">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ $product->getCompletionPercentage() }}%">
                                {{ $product->getCompletionPercentage() }}%
                            </div>
                        </div>
                        <small class="text-muted">Completion</small>
                    </div>
                </div>
            </div>
        @else
            <div class="alert alert-success mb-4">
                <h6><i class="bi bi-check-circle me-2"></i>Product Complete</h6>
                <p class="mb-0">This product has all required details filled in.</p>
            </div>
        @endif

        <!-- Step Creation Notice -->
        @if(session('step_creation'))
            <div class="alert alert-info mb-4">
                <h6><i class="bi bi-info-circle me-2"></i>Complete Your Product Setup</h6>
                <p class="mb-0">Great! You've created "{{ $product->name }}". Now add the remaining details below to complete the setup.</p>
            </div>
        @endif

        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    @if($product->isIncomplete())
                        <i class="bi bi-pencil-square me-2"></i>Complete Product Information
                    @else
                        <i class="bi bi-pencil me-2"></i>Edit Product Information
                    @endif
                </h6>
            </div>
            <div class="card-body">
                <form action="{{ route('products.update', $product) }}" method="POST">
                    @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) }}"
                                   required
                                   placeholder="Enter product name">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="country_of_origin" class="form-label">
                                Country of Origin
                                @if(is_null($product->country_of_origin))
                                    <span class="badge bg-warning text-dark ms-1">Missing</span>
                                @endif
                            </label>
                            <input type="text"
                                   class="form-control @error('country_of_origin') is-invalid @enderror @if(is_null($product->country_of_origin)) border-warning @endif"
                                   id="country_of_origin"
                                   name="country_of_origin"
                                   value="{{ old('country_of_origin', $product->country_of_origin) }}"
                                   placeholder="Enter country of origin">
                            @error('country_of_origin')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            @if(is_null($product->country_of_origin))
                                <div class="form-text text-warning">This field is missing - please add it to complete the product.</div>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="category_id" class="form-label">
                                Category
                                @if(is_null($product->category_id))
                                    <span class="badge bg-warning text-dark ms-1">Missing</span>
                                @endif
                            </label>
                            <select class="form-select @error('category_id') is-invalid @enderror @if(is_null($product->category_id)) border-warning @endif"
                                    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
                            @if(is_null($product->category_id))
                                <div class="form-text text-warning">This field is missing - please select a category.</div>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="subcategory_id" class="form-label">
                                Subcategory
                                @if(is_null($product->subcategory_id))
                                    <span class="badge bg-warning text-dark ms-1">Missing</span>
                                @endif
                            </label>
                            <select class="form-select @error('subcategory_id') is-invalid @enderror @if(is_null($product->subcategory_id)) border-warning @endif"
                                    id="subcategory_id"
                                    name="subcategory_id">
                                <option value="">Select Subcategory</option>
                                @foreach($subcategories as $subcategory)
                                    <option value="{{ $subcategory->id }}"
                                            {{ old('subcategory_id', $product->subcategory_id) == $subcategory->id ? 'selected' : '' }}>
                                        {{ $subcategory->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('subcategory_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            @if(is_null($product->subcategory_id))
                                <div class="form-text text-warning">This field is missing - please select a subcategory.</div>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="price" class="form-label">
                                Price
                                @if(is_null($product->price))
                                    <span class="badge bg-warning text-dark ms-1">Missing</span>
                                @endif
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">$</span>
                                <input type="number"
                                       class="form-control @error('price') is-invalid @enderror @if(is_null($product->price)) border-warning @endif"
                                       id="price"
                                       name="price"
                                       value="{{ old('price', $product->price) }}"
                                       step="0.01"
                                       min="0"
                                       placeholder="0.00">
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            @if(is_null($product->price))
                                <div class="form-text text-warning">This field is missing - please add a price.</div>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="measurement_unit" class="form-label">
                                Measurement Unit
                                @if(is_null($product->measurement_unit))
                                    <span class="badge bg-warning text-dark ms-1">Missing</span>
                                @endif
                            </label>
                            <input type="text"
                                   class="form-control @error('measurement_unit') is-invalid @enderror @if(is_null($product->measurement_unit)) border-warning @endif"
                                   id="measurement_unit"
                                   name="measurement_unit"
                                   value="{{ old('measurement_unit', $product->measurement_unit) }}"
                                   placeholder="e.g., kg, lbs, pieces, liters"
                                   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
                            @if(is_null($product->measurement_unit))
                                <div class="form-text text-warning">This field is missing - please add a measurement unit.</div>
                            @endif
                        </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="4" 
                                  placeholder="Enter product description (optional)">{{ old('description', $product->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="reason" class="form-label">Reason for Change</label>
                        <input type="text" 
                               class="form-control" 
                               id="reason" 
                               name="reason" 
                               value="{{ old('reason') }}" 
                               placeholder="Optional: Reason for this update">
                        <div class="form-text">
                            This will be recorded in the audit trail.
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('products.index') }}" class="btn btn-secondary">
                            <i class="bi bi-x-circle me-1"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle me-1"></i>Update Product
                        </button>
                    </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');
    const currentSubcategoryId = '{{ old("subcategory_id", $product->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;
                    if (subcategory.id == currentSubcategoryId) {
                        option.selected = true;
                    }
                    subcategorySelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
});

// Load subcategories on page load if category is selected
document.addEventListener('DOMContentLoaded', function() {
    const categoryId = document.getElementById('category_id').value;
    if (categoryId) {
        document.getElementById('category_id').dispatchEvent(new Event('change'));
    }
});
</script>
@endpush