@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">Add 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">Add 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($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.store', [$website, $product]) }}" method="POST" enctype="multipart/form-data">
    @csrf
    
    <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>

            <!-- 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">
                        <div class="attribute-row mb-3" data-index="0">
                            <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" disabled>
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </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', 0) }}" 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($product->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', 0) }}" 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">
                    <div class="mb-3">
                        <label for="image" class="form-label">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') }}">
                        <div class="form-text">Leave empty to auto-generate from attributes</div>
                        @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" 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', 0) }}">
                        <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="text-muted">Add attributes to see preview</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> Create Variation
                    </button>
                    
                    <a href="{{ route('product-variations.index', [$website, $product]) }}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-x-lg"></i> Cancel
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let attributeIndex = 0;
    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">This will be the 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();
});
</script>
@endpush