@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <div>
        <h1 class="h2">Edit Product Variation</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('products.index', $website) }}">Products</a></li>
                <li class="breadcrumb-item"><a href="{{ route('products.edit', [$website, $product]) }}">{{ $product->name }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('product-variations.index', [$website, $product]) }}">Variations</a></li>
                <li class="breadcrumb-item active">Edit Variation</li>
            </ol>
        </nav>
    </div>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ route('product-variations.index', [$website, $product]) }}" class="btn btn-sm btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Variations
        </a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @foreach($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form action="{{ route('product-variations.update', [$website, $product, $variation]) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Product Context -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-box me-2"></i>Product Information</h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-2">
                            @if($product->images && count($product->images) > 0)
                                <img src="{{ $product->images[0] }}" alt="{{ $product->name }}" 
                                     class="img-fluid rounded">
                            @else
                                <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                     style="height: 80px;">
                                    <i class="bi bi-image text-muted"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-10">
                            <h5 class="mb-1">{{ $product->name }}</h5>
                            <p class="text-muted mb-1">SKU: {{ $product->sku ?: 'N/A' }}</p>
                            <p class="text-muted mb-0">Base Price: <strong>RM {{ number_format($product->price, 2) }}</strong></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Current Variation -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Current Variation</h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-2">
                            @if($variation->image)
                                <img src="{{ $variation->image }}" alt="Variation" 
                                     class="img-fluid rounded" style="max-height: 80px;">
                            @else
                                <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                     style="height: 80px;">
                                    <i class="bi bi-image text-muted"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-10">
                            <h6 class="mb-1">{{ $variation->variation_display }}</h6>
                            <p class="text-muted mb-1">SKU: {{ $variation->sku }}</p>
                            <p class="text-muted mb-0">
                                Current Price: <strong>RM {{ number_format($variation->final_price, 2) }}</strong>
                                @if($variation->price_adjustment != 0)
                                    (Base {{ $variation->price_adjustment >= 0 ? '+' : '' }}RM {{ number_format($variation->price_adjustment, 2) }})
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Variation Attributes -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-tags me-2"></i>Variation Attributes</h5>
                </div>
                <div class="card-body">
                    <div id="attributes-container">
                        @php $index = 0; @endphp
                        @foreach($variation->attributes as $name => $value)
                            <div class="attribute-row mb-3" data-index="{{ $index }}">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label class="form-label">Attribute Name *</label>
                                        <select class="form-select attribute-name" name="attribute_names[]" required>
                                            <option value="">Select Attribute</option>
                                            <option value="size" {{ $name === 'size' ? 'selected' : '' }}>Size</option>
                                            <option value="color" {{ $name === 'color' ? 'selected' : '' }}>Color</option>
                                            <option value="material" {{ $name === 'material' ? 'selected' : '' }}>Material</option>
                                            <option value="style" {{ $name === 'style' ? 'selected' : '' }}>Style</option>
                                            <option value="capacity" {{ $name === 'capacity' ? 'selected' : '' }}>Capacity</option>
                                            @if(!in_array($name, ['size', 'color', 'material', 'style', 'capacity']))
                                                <option value="{{ $name }}" selected>{{ ucfirst($name) }}</option>
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Attribute Value *</label>
                                        <input type="text" class="form-control attribute-value" 
                                               name="attribute_values[]" value="{{ $value }}" required>
                                    </div>
                                    <div class="col-md-2 d-flex align-items-end">
                                        <button type="button" class="btn btn-outline-danger remove-attribute">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @php $index++; @endphp
                        @endforeach
                    </div>
                    
                    <button type="button" class="btn btn-outline-primary" id="add-attribute">
                        <i class="bi bi-plus"></i> Add Another Attribute
                    </button>
                    
                    <div class="form-text mt-2">
                        Define the characteristics that make this variation unique (e.g., Size: Large, Color: Red)
                    </div>
                </div>
            </div>

            <!-- Pricing & Stock -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-currency-dollar me-2"></i>Pricing & Stock</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="price_adjustment" class="form-label">Price Adjustment (RM) *</label>
                                <input type="number" step="0.01" class="form-control @error('price_adjustment') is-invalid @enderror"
                                       id="price_adjustment" name="price_adjustment" 
                                       value="{{ old('price_adjustment', $variation->price_adjustment) }}" required>
                                <div class="form-text">
                                    Amount to add/subtract from base price (RM {{ number_format($product->price, 2) }})
                                    <br><span id="final-price-display">Final Price: RM {{ number_format($variation->final_price, 2) }}</span>
                                </div>
                                @error('price_adjustment')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="stock_quantity" class="form-label">Stock Quantity *</label>
                                <input type="number" min="0" class="form-control @error('stock_quantity') is-invalid @enderror"
                                       id="stock_quantity" name="stock_quantity" 
                                       value="{{ old('stock_quantity', $variation->stock_quantity) }}" required>
                                @error('stock_quantity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Variation Image -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-image me-2"></i>Variation Image</h5>
                </div>
                <div class="card-body">
                    @if($variation->image)
                        <div class="mb-3">
                            <label class="form-label">Current Image</label>
                            <div class="d-flex align-items-center">
                                <img src="{{ $variation->image }}" alt="Current variation image" 
                                     class="img-thumbnail me-3" style="max-width: 150px;">
                                <div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="remove_image" name="remove_image" value="1">
                                        <label class="form-check-label text-danger" for="remove_image">
                                            Remove current image
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    <div class="mb-3">
                        <label for="image" class="form-label">{{ $variation->image ? 'Replace Image' : 'Upload Image' }}</label>
                        <input type="file" class="form-control @error('image') is-invalid @enderror"
                               id="image" name="image" accept="image/*">
                        <div class="form-text">Optional. Shows a specific image for this variation. Recommended size: 500x500 pixels</div>
                        @error('image')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <!-- Image preview -->
                    <div id="image-preview" class="d-none">
                        <img id="preview-img" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Variation Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Variation Settings</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="sku" class="form-label">SKU *</label>
                        <input type="text" class="form-control @error('sku') is-invalid @enderror"
                               id="sku" name="sku" value="{{ old('sku', $variation->sku) }}" required>
                        @error('sku')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1"
                                   {{ old('is_active', $variation->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Variation Active
                            </label>
                        </div>
                        <div class="form-text">Inactive variations won't be available for purchase</div>
                    </div>

                    <div class="mb-3">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" min="0" class="form-control @error('sort_order') is-invalid @enderror"
                               id="sort_order" name="sort_order" value="{{ old('sort_order', $variation->sort_order) }}">
                        <div class="form-text">Lower numbers appear first</div>
                        @error('sort_order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-eye me-2"></i>Variation Preview</h5>
                </div>
                <div class="card-body">
                    <div id="variation-preview">
                        <div class="fw-semibold">{{ $variation->variation_display }}</div>
                        <div class="text-muted mt-1">Current variation display name</div>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="bi bi-check-lg"></i> Update Variation
                    </button>
                    
                    <a href="{{ route('product-variations.index', [$website, $product]) }}" class="btn btn-outline-secondary w-100 mb-2">
                        <i class="bi bi-arrow-left"></i> Back to Variations
                    </a>
                    
                    <button type="button" class="btn btn-outline-danger w-100" onclick="confirmDelete()">
                        <i class="bi bi-trash"></i> Delete Variation
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Delete Form -->
<form id="delete-form" action="{{ route('product-variations.destroy', [$website, $product, $variation]) }}" method="POST" class="d-none">
    @csrf
    @method('DELETE')
</form>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let attributeIndex = {{ count($variation->attributes) }};
    const basePrice = {{ $product->price }};

    // Update final price when price adjustment changes
    $('#price_adjustment').on('input', function() {
        const adjustment = parseFloat($(this).val()) || 0;
        const finalPrice = basePrice + adjustment;
        $('#final-price-display').text(`Final Price: RM ${finalPrice.toFixed(2)}`);
    });

    // Add attribute row
    $('#add-attribute').on('click', function() {
        attributeIndex++;
        const attributeRow = $(`
            <div class="attribute-row mb-3" data-index="${attributeIndex}">
                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label">Attribute Name *</label>
                        <select class="form-select attribute-name" name="attribute_names[]" required>
                            <option value="">Select Attribute</option>
                            <option value="size">Size</option>
                            <option value="color">Color</option>
                            <option value="material">Material</option>
                            <option value="style">Style</option>
                            <option value="capacity">Capacity</option>
                            <option value="custom">Custom...</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Attribute Value *</label>
                        <input type="text" class="form-control attribute-value" name="attribute_values[]" required>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-outline-danger remove-attribute">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `);
        $('#attributes-container').append(attributeRow);
        updateRemoveButtons();
        updatePreview();
    });

    // Remove attribute row
    $(document).on('click', '.remove-attribute', function() {
        $(this).closest('.attribute-row').remove();
        updateRemoveButtons();
        updatePreview();
    });

    // Handle custom attribute selection
    $(document).on('change', '.attribute-name', function() {
        const row = $(this).closest('.attribute-row');
        const valueInput = row.find('.attribute-value');
        
        if ($(this).val() === 'custom') {
            const customName = prompt('Enter custom attribute name:');
            if (customName) {
                $(this).append(`<option value="${customName.toLowerCase()}" selected>${customName}</option>`);
                $(this).val(customName.toLowerCase());
            } else {
                $(this).val('');
            }
        }
        
        updatePreview();
    });

    // Update preview when values change
    $(document).on('input change', '.attribute-name, .attribute-value', function() {
        updatePreview();
    });

    function updateRemoveButtons() {
        const rows = $('.attribute-row');
        $('.remove-attribute').prop('disabled', rows.length <= 1);
    }

    function updatePreview() {
        const attributes = [];
        $('.attribute-row').each(function() {
            const name = $(this).find('.attribute-name').val();
            const value = $(this).find('.attribute-value').val();
            if (name && value) {
                attributes.push(`${name.charAt(0).toUpperCase() + name.slice(1)}: ${value}`);
            }
        });

        const preview = $('#variation-preview');
        if (attributes.length > 0) {
            preview.html(`
                <div class="fw-semibold">${attributes.join(', ')}</div>
                <div class="text-muted mt-1">Updated variation display name</div>
            `);
        } else {
            preview.html('<div class="text-muted">Add attributes to see preview</div>');
        }
    }

    // Convert attributes to the format expected by the backend
    $('form').on('submit', function(e) {
        const attributes = {};
        $('.attribute-row').each(function() {
            const name = $(this).find('.attribute-name').val();
            const value = $(this).find('.attribute-value').val();
            if (name && value) {
                attributes[name] = value;
            }
        });

        // Remove the individual name/value inputs
        $('.attribute-name, .attribute-value').remove();

        // Add the combined attributes
        Object.keys(attributes).forEach(key => {
            $('<input>').attr({
                type: 'hidden',
                name: `attributes[${key}]`,
                value: attributes[key]
            }).appendTo(this);
        });
    });

    // Image preview
    $('#image').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#preview-img').attr('src', e.target.result);
                $('#image-preview').removeClass('d-none');
            };
            reader.readAsDataURL(file);
        } else {
            $('#image-preview').addClass('d-none');
        }
    });

    // Initialize
    updateRemoveButtons();
});

function confirmDelete() {
    if (confirm('Are you sure you want to delete this variation? This action cannot be undone.')) {
        $('#delete-form').submit();
    }
}
</script>
@endpush