@extends('layouts.admin-simple')

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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Edit {{ $product->name }}</li>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Edit Product: {{ $product->name }}</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <!-- Category Selection -->
                    <div class="form-group">
                        <label for="category_select">Product Category <span class="text-danger">*</span></label>
                        <select class="form-control" id="category_select" required>
                            <option value="">Select category...</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <small class="form-text text-muted">Choose the main product category</small>
                    </div>

                    <!-- Standard Selection -->
                    <div class="form-group">
                        <label for="standard_select">Standard <span class="text-danger">*</span></label>
                        <select class="form-control" id="standard_select" required disabled>
                            <option value="">Select standard...</option>
                        </select>
                        <small class="form-text text-muted">Choose the applicable standard</small>
                    </div>

                    <!-- Application Selection -->
                    <div class="form-group">
                        <label for="application_id">Application <span class="text-danger">*</span></label>
                        <select class="form-control @error('application_id') is-invalid @enderror" 
                                id="application_id" name="application_id" required disabled>
                            <option value="">Select application...</option>
                        </select>
                        @error('application_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">Choose the specific application</small>
                    </div>


                    <!-- Product Name -->
                    <div class="form-group">
                        <label for="name">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>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

                    <!-- Features -->
                    <div class="form-group">
                        <label for="features">Key Features</label>
                        <textarea class="form-control @error('features') is-invalid @enderror" 
                                  id="features" name="features" rows="3">{{ old('features', $product->features) }}</textarea>
                        @error('features')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Thickness Range -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="thickness_min">Min Thickness</label>
                                <input type="number" step="0.01" class="form-control @error('thickness_min') is-invalid @enderror" 
                                       id="thickness_min" name="thickness_min" value="{{ old('thickness_min', $product->thickness_min) }}">
                                @error('thickness_min')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="thickness_max">Max Thickness</label>
                                <input type="number" step="0.01" class="form-control @error('thickness_max') is-invalid @enderror" 
                                       id="thickness_max" name="thickness_max" value="{{ old('thickness_max', $product->thickness_max) }}">
                                @error('thickness_max')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="thickness_unit">Unit</label>
                                <select class="form-control @error('thickness_unit') is-invalid @enderror" 
                                        id="thickness_unit" name="thickness_unit">
                                    <option value="mm" {{ old('thickness_unit', $product->thickness_unit) == 'mm' ? 'selected' : '' }}>mm</option>
                                    <option value="inch" {{ old('thickness_unit', $product->thickness_unit) == 'inch' ? 'selected' : '' }}>inch</option>
                                </select>
                                @error('thickness_unit')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Main Image -->
                    <div class="form-group">
                        <label for="image">Main Product Image</label>
                        @if($product->image)
                            <div class="mb-2">
                                <img src="{{ asset('storage/' . $product->image) }}" 
                                     alt="{{ $product->name }}" 
                                     class="img-thumbnail" 
                                     style="max-width: 200px;">
                                <div class="mt-1">
                                    <small class="text-muted">Current image</small>
                                </div>
                            </div>
                        @endif
                        <input type="file" class="form-control-file @error('image') is-invalid @enderror" 
                               id="image" name="image" accept="image/*">
                        @error('image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">Upload a new image to replace the current one</small>
                    </div>

                    <!-- Additional Images -->
                    <div class="form-group">
                        <label for="images">Additional Images</label>
                        @if($product->images)
                            <div class="mb-2">
                                <div class="row">
                                    @foreach($product->images as $additionalImage)
                                        <div class="col-3 mb-2">
                                            <img src="{{ asset('storage/' . $additionalImage) }}" 
                                                 alt="{{ $product->name }}" 
                                                 class="img-thumbnail">
                                        </div>
                                    @endforeach
                                </div>
                                <small class="text-muted">Current additional images</small>
                            </div>
                        @endif
                        <input type="file" class="form-control-file @error('images.*') is-invalid @enderror" 
                               id="images" name="images[]" accept="image/*" multiple>
                        @error('images.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">Upload new images to replace all current additional images</small>
                    </div>


                    <!-- Settings -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="sort_order">Sort Order</label>
                                <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                       id="sort_order" name="sort_order" value="{{ old('sort_order', $product->sort_order) }}">
                                @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                    <input type="hidden" name="is_featured" value="0">
                                    <input type="checkbox" class="custom-control-input" id="is_featured" 
                                           name="is_featured" value="1" {{ old('is_featured', $product->is_featured) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_featured">Featured Product</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="custom-control custom-switch">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" class="custom-control-input" id="is_active" 
                                           name="is_active" value="1" {{ old('is_active', $product->is_active) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_active">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Technical Specifications Section -->
                    <div class="card mt-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Technical Specifications</h5>
                            <button type="button" class="btn btn-sm btn-success" onclick="addTechSpecRow()">
                                <i class="material-icons">add</i> Add Specification
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="techSpecsTable">
                                    <thead class="bg-light">
                                        <tr>
                                            <th width="30%">Length</th>
                                            <th width="30%">Width</th>
                                            <th width="30%">Technical Specification File</th>
                                            <th width="10%">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="techSpecsBody">
                                        @foreach($product->technicalSpecifications as $index => $spec)
                                        <tr data-spec-id="{{ $spec->id }}">
                                            <td>
                                                <input type="text" class="form-control" name="tech_specs[{{ $index }}][length]" 
                                                       value="{{ $spec->length }}" placeholder="e.g., 3300mm" required>
                                                <input type="hidden" name="tech_specs[{{ $index }}][id]" value="{{ $spec->id }}">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="tech_specs[{{ $index }}][width]" 
                                                       value="{{ $spec->width }}" placeholder="e.g., 2140mm" required>
                                            </td>
                                            <td>
                                                <input type="file" class="form-control-file" name="tech_specs[{{ $index }}][file]" 
                                                       accept=".pdf,.doc,.docx">
                                                @if($spec->file_path)
                                                    <small class="text-success">
                                                        <i class="material-icons" style="font-size: 14px;">check_circle</i>
                                                        Current: {{ $spec->file_name }}
                                                    </small>
                                                    <input type="hidden" name="tech_specs[{{ $index }}][existing_file]" value="{{ $spec->file_path }}">
                                                @endif
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-sm btn-danger" onclick="removeTechSpecRow(this)">
                                                    <i class="material-icons">delete</i>
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                @if($product->technicalSpecifications->count() == 0)
                                <div class="text-center py-3" id="noSpecsMessage">
                                    <p class="text-muted">No technical specifications added yet. Click "Add Specification" to get started.</p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="material-icons">save</i> Update Product
                        </button>
                        <a href="{{ route('admin.products.index') }}" class="btn btn-secondary">
                            <i class="material-icons">cancel</i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Product Stats -->
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Product Information</h4>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <strong>Slug:</strong> <code>{{ $product->slug }}</code>
                </div>
                <div class="mb-2">
                    <strong>Category:</strong> 
                    @if($product->application && $product->application->standard && $product->application->standard->category)
                        {{ $product->application->standard->category->name }}
                    @elseif($product->standard && $product->standard->category)
                        {{ $product->standard->category->name }}
                    @else
                        N/A
                    @endif
                </div>
                <div class="mb-2">
                    <strong>Standard:</strong> 
                    @if($product->application && $product->application->standard)
                        {{ $product->application->standard->name }}
                    @elseif($product->standard)
                        {{ $product->standard->name }}
                    @else
                        N/A
                    @endif
                </div>
                <div class="mb-2">
                    <strong>Application:</strong> {{ $product->application ? $product->application->name : 'N/A' }}
                </div>
                <div class="mb-2">
                    <strong>Specifications:</strong> {{ $product->specifications->count() }}
                </div>
                <div class="mb-2">
                    <strong>Created:</strong> {{ $product->created_at->format('M d, Y') }}
                </div>
                <div class="mb-2">
                    <strong>Updated:</strong> {{ $product->updated_at->format('M d, Y') }}
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="card mt-3">
            <div class="card-header">
                <h4 class="card-title">Quick Actions</h4>
            </div>
            <div class="card-body">
                <a href="{{ route('admin.products.show', $product) }}" class="btn btn-outline-info btn-block">
                    <i class="material-icons">visibility</i> View Product
                </a>
                <button type="button" class="btn btn-outline-primary btn-block" data-toggle="modal" data-target="#addSpecModal">
                    <i class="material-icons">add</i> Add Specification
                </button>
                <form action="{{ route('admin.products.destroy', $product) }}" 
                      method="POST" 
                      class="mt-2"
                      onsubmit="return confirm('Are you sure you want to delete this product?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-outline-danger btn-block">
                        <i class="material-icons">delete</i> Delete Product
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Data passed from Laravel
    const standards = @json($standards);
    const applications = @json($applications);
    
    // Current product data
    const currentProduct = @json($product);
    const currentApplication = @json($product->application ?? null);
    const currentStandard = currentApplication ? currentApplication.standard : @json($product->standard ?? null);
    
    // Elements
    const categorySelect = document.getElementById('category_select');
    const standardSelect = document.getElementById('standard_select');
    const applicationSelect = document.getElementById('application_id');
    
    // Initialize form with current values
    function initializeForm() {
        // Set current category
        if (currentStandard && currentStandard.category_id) {
            categorySelect.value = currentStandard.category_id;
            
            // Populate standards for this category
            const categoryStandards = standards.filter(s => s.category_id == currentStandard.category_id);
            standardSelect.innerHTML = '<option value="">Select standard...</option>';
            categoryStandards.forEach(standard => {
                const option = new Option(standard.name + (standard.code ? ` (${standard.code})` : ''), standard.id);
                standardSelect.add(option);
            });
            standardSelect.disabled = false;
            
            // Set current standard
            standardSelect.value = currentStandard.id;
            
            // Populate applications for this standard
            const standardApplications = applications.filter(a => a.standard_id == currentStandard.id);
            applicationSelect.innerHTML = '<option value="">Select application...</option>';
            standardApplications.forEach(application => {
                const option = new Option(application.name, application.id);
                applicationSelect.add(option);
            });
            applicationSelect.disabled = false;
            
            // Set current application if exists
            if (currentApplication) {
                applicationSelect.value = currentApplication.id;
            }
        }
    }
    
    // Category change handler
    categorySelect.addEventListener('change', function() {
        const categoryId = this.value;
        
        // Reset and enable standard select
        standardSelect.innerHTML = '<option value="">Select standard...</option>';
        standardSelect.disabled = !categoryId;
        
        // Reset dependent selects
        resetSelect(applicationSelect, 'Select application...');
        
        if (categoryId) {
            // Populate standards for selected category
            const categoryStandards = standards.filter(s => s.category_id == categoryId);
            categoryStandards.forEach(standard => {
                const option = new Option(standard.name + (standard.code ? ` (${standard.code})` : ''), standard.id);
                standardSelect.add(option);
            });
        }
    });

    // Standard change handler
    standardSelect.addEventListener('change', function() {
        const standardId = this.value;
        
        // Reset application select
        resetSelect(applicationSelect, 'Select application...');
        applicationSelect.disabled = !standardId;
        
        if (standardId) {
            // Populate applications for selected standard
            const standardApplications = applications.filter(a => a.standard_id == standardId);
            standardApplications.forEach(application => {
                const option = new Option(application.name, application.id);
                applicationSelect.add(option);
            });
        }
    });

    function resetSelect(selectElement, placeholder) {
        selectElement.innerHTML = `<option value="">${placeholder}</option>`;
        selectElement.disabled = true;
    }
    
    // Initialize form on page load
    initializeForm();

    // Technical Specifications JavaScript
    let techSpecIndex = {{ $product->technicalSpecifications->count() }};

    function addTechSpecRow() {
        const tbody = document.getElementById('techSpecsBody');
        const noSpecsMessage = document.getElementById('noSpecsMessage');
        
        // Hide "no specs" message if visible
        if (noSpecsMessage) {
            noSpecsMessage.style.display = 'none';
        }
        
        // Get thickness from product thickness fields
        const thicknessMin = document.getElementById('thickness_min').value || '';
        const thicknessMax = document.getElementById('thickness_max').value || '';
        const thicknessUnit = document.getElementById('thickness_unit').value || 'mm';
        
        let thicknessValue = '';
        if (thicknessMin && thicknessMax) {
            if (thicknessMin === thicknessMax) {
                thicknessValue = thicknessMin + thicknessUnit;
            } else {
                thicknessValue = thicknessMin + '-' + thicknessMax + thicknessUnit;
            }
        } else if (thicknessMin) {
            thicknessValue = thicknessMin + thicknessUnit;
        }

        const row = `
            <tr>
                <td>
                    <input type="text" class="form-control" name="tech_specs[${techSpecIndex}][length]" 
                           placeholder="e.g., 3300mm" required>
                </td>
                <td>
                    <input type="text" class="form-control" name="tech_specs[${techSpecIndex}][width]" 
                           placeholder="e.g., 2140mm" required>
                </td>
                <td>
                    <input type="file" class="form-control-file" name="tech_specs[${techSpecIndex}][file]" 
                           accept=".pdf,.doc,.docx">
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeTechSpecRow(this)">
                        <i class="material-icons">delete</i>
                    </button>
                </td>
            </tr>
        `;
        
        tbody.insertAdjacentHTML('beforeend', row);
        techSpecIndex++;
    }

    function removeTechSpecRow(button) {
        const row = button.closest('tr');
        row.remove();
        
        // Show "no specs" message if no rows left
        const tbody = document.getElementById('techSpecsBody');
        const noSpecsMessage = document.getElementById('noSpecsMessage');
        
        if (tbody.children.length === 0 && noSpecsMessage) {
            noSpecsMessage.style.display = 'block';
        }
    }

    // Auto-populate thickness when product thickness changes
    function updateThicknessInSpecs() {
        const thicknessMin = document.getElementById('thickness_min').value || '';
        const thicknessMax = document.getElementById('thickness_max').value || '';
        const thicknessUnit = document.getElementById('thickness_unit').value || 'mm';
        
        let thicknessValue = '';
        if (thicknessMin && thicknessMax) {
            if (thicknessMin === thicknessMax) {
                thicknessValue = thicknessMin + thicknessUnit;
            } else {
                thicknessValue = thicknessMin + '-' + thicknessMax + thicknessUnit;
            }
        } else if (thicknessMin) {
            thicknessValue = thicknessMin + thicknessUnit;
        }

        // Update all thickness inputs in technical specs
        document.querySelectorAll('.thickness-input').forEach(input => {
            if (!input.value || input.placeholder === 'Auto-filled') {
                input.value = thicknessValue;
            }
        });
    }

    // Add event listeners for thickness fields
    document.addEventListener('DOMContentLoaded', function() {
        const thicknessMin = document.getElementById('thickness_min');
        const thicknessMax = document.getElementById('thickness_max');
        const thicknessUnit = document.getElementById('thickness_unit');
        
        if (thicknessMin) thicknessMin.addEventListener('input', updateThicknessInSpecs);
        if (thicknessMax) thicknessMax.addEventListener('input', updateThicknessInSpecs);
        if (thicknessUnit) thicknessUnit.addEventListener('change', updateThicknessInSpecs);
    });
</script>
@endpush
@endsection