@extends('admin.layouts.app')

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

@section('content')
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Edit Variation</h1>
                    <p class="text-gray-600 dark:text-gray-400">Update variation details for {{ $variation->product->name_en }}</p>
                </div>
                <a href="{{ route('admin.products.variations.index', $variation->product) }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Back to Variations
                </a>
            </div>

            <form action="{{ route('admin.products.variations.update', [$variation->product, $variation]) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- SKU -->
                    <div>
                        <label for="sku" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SKU</label>
                        <input type="text" name="sku" id="sku" value="{{ old('sku', $variation->sku) }}" required
                               class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
                        @error('sku')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Barcode -->
                    <div>
                        <label for="barcode" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Barcode</label>
                        <input type="text" name="barcode" id="barcode" value="{{ old('barcode', $variation->barcode) }}"
                               class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
                        @error('barcode')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Price -->
                    <div>
                        <label for="price" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Price</label>
                        <input type="number" name="price" id="price" step="0.01" min="0" value="{{ old('price', $variation->price) }}" required
                               class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
                        @error('price')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Stock -->
                    <div>
                        <label for="stock" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Stock</label>
                        <input type="number" name="stock" id="stock" min="0" value="{{ old('stock', $variation->stock) }}" required
                               class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
                        @error('stock')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Stock Threshold -->
                    <div>
                        <label for="stock_threshold" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Stock Threshold</label>
                        <input type="number" name="stock_threshold" id="stock_threshold" value="{{ old('stock_threshold', $variation->stock_threshold) }}" 
                               class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
                        @error('stock_threshold')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Image -->
                    <div class="md:col-span-2">
                        <label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Image</label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-lg hover:border-blue-500 dark:hover:border-blue-400 transition-colors duration-200">
                            <div class="space-y-1 text-center">
                                <div id="image-preview" class="{{ $variation->image ? '' : 'hidden' }} mb-4">
                                    <img src="{{ $variation->image ? Storage::url($variation->image) : '' }}" alt="Current variation image" 
                                         class="h-32 w-32 object-cover rounded-lg mx-auto border border-gray-200 dark:border-gray-600">
                                </div>
                                <svg id="upload-icon" class="mx-auto h-12 w-12 text-gray-400 {{ $variation->image ? 'hidden' : '' }}" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <div class="flex text-sm text-gray-600 dark:text-gray-400">
                                    <label for="image" class="relative cursor-pointer bg-white dark:bg-gray-800 rounded-md font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                        <span>Upload a file</span>
                                        <input id="image" name="image" type="file" class="sr-only" accept="image/*">
                                    </label>
                                    <p class="pl-1">or drag and drop</p>
                                </div>
                                <p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF up to 2MB</p>
                            </div>
                        </div>
                        @error('image')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Variation Options -->
                    <div class="md:col-span-2">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Variation Options</h3>
                        <div class="space-y-4">
                            @foreach($variationTypes as $type)
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                        {{ $type->name_en }}
                                    </label>
                                    <input type="hidden" name="options[{{ $loop->index }}][type_id]" value="{{ $type->id }}">
                                    <select name="options[{{ $loop->index }}][option_id]" required
                                            class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
                                        <option value="">Select {{ $type->name_en }}</option>
                                        @foreach($type->options as $option)
                                            <option value="{{ $option->id }}"
                                                    @if($variation->options->contains('id', $option->id))
                                                        selected
                                                    @endif
                                                    @if($type->slug === 'color' && $option->code)
                                                        data-color-code="{{ $option->code }}"
                                                    @endif>
                                                {{ $option->value_en }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="md:col-span-2">
                        <div class="flex items-center space-x-3">
                            <div class="relative inline-block w-10 mr-2 align-middle select-none">
                                <input type="checkbox" name="is_active" id="is_active" value="1" 
                                       {{ old('is_active', $variation->is_active) ? 'checked' : '' }}
                                       class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition duration-200 ease-in-out transform checked:translate-x-4 checked:bg-blue-600 border-gray-300 dark:border-gray-600 dark:bg-gray-700">
                                <label for="is_active" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 dark:bg-gray-600 cursor-pointer"></label>
                            </div>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active</span>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Update Variation
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Color preview for color options
    document.querySelectorAll('select[name^="options"][name$="[option_id]"]').forEach(select => {
        select.addEventListener('change', function() {
            const option = this.options[this.selectedIndex];
            const colorCode = option.dataset.colorCode;
            if (colorCode) {
                this.style.backgroundColor = colorCode;
                this.style.color = getContrastColor(colorCode);
            } else {
                this.style.backgroundColor = '';
                this.style.color = '';
            }
        });

        // Set initial color if selected option has a color code
        const selectedOption = select.options[select.selectedIndex];
        if (selectedOption && selectedOption.dataset.colorCode) {
            select.style.backgroundColor = selectedOption.dataset.colorCode;
            select.style.color = getContrastColor(selectedOption.dataset.colorCode);
        }
    });

    function getContrastColor(hexColor) {
        // Convert hex to RGB
        const r = parseInt(hexColor.substr(1, 2), 16);
        const g = parseInt(hexColor.substr(3, 2), 16);
        const b = parseInt(hexColor.substr(5, 2), 16);
        
        // Calculate luminance
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        
        // Return black or white based on luminance
        return luminance > 0.5 ? '#000000' : '#FFFFFF';
    }

    // Handle image preview
    document.getElementById('image').addEventListener('change', function(e) {
        const preview = document.getElementById('image-preview');
        const uploadIcon = document.getElementById('upload-icon');
        
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                preview.querySelector('img').src = e.target.result;
                preview.classList.remove('hidden');
                uploadIcon.classList.add('hidden');
            }
            
            reader.readAsDataURL(this.files[0]);
        } else {
            preview.classList.add('hidden');
            uploadIcon.classList.remove('hidden');
        }
    });
</script>
@endpush
@endsection