@extends('admin.layouts.app')

@section('title', 'Create Variation Option')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <form action="{{ route('admin.variations.options.store') }}" method="POST" class="p-6 space-y-6">
                @csrf

                <!-- Variation Type -->
                <div>
                    <label for="variation_type_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Variation Type
                    </label>
                    <select id="variation_type_id" name="variation_type_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">Select a variation type</option>
                        @foreach($variationTypes as $type)
                            <option value="{{ $type->id }}" {{ old('variation_type_id') == $type->id ? 'selected' : '' }}>
                                {{ $type->name_en }}
                            </option>
                        @endforeach
                    </select>
                    @error('variation_type_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

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

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

                <!-- Value (Arabic) -->
                <div>
                    <label for="value_ar" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Value (Arabic)
                    </label>
                    <input type="text" name="value_ar" id="value_ar" value="{{ old('value_ar') }}" dir="rtl"
                        class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    @error('value_ar')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Color Code -->
                <div>
                    <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Color Code
                    </label>
                    <div class="mt-1 flex space-x-3">
                        <input type="color" id="colorPicker" value="{{ old('code', '#000000') }}"
                            class="h-10 w-20 p-1 rounded border border-gray-300 dark:border-gray-600">
                        <input type="text" name="code" id="code" value="{{ old('code') }}"
                            class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                            placeholder="#000000">
                    </div>
                    @error('code')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Active Status -->
                <div class="flex items-center">
                    <input type="checkbox" name="is_active" id="is_active" value="1"
                        {{ old('is_active', true) ? 'checked' : '' }}
                        class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
                    <label for="is_active" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                        Active
                    </label>
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-end space-x-3 pt-5">
                    <a href="{{ route('admin.variations.options.index') }}"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
                        Cancel
                    </a>
                    <button type="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Create Option
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const colorPicker = document.getElementById('colorPicker');
        const codeInput = document.getElementById('code');

        // Update text input when color picker changes
        colorPicker.addEventListener('input', function(e) {
            codeInput.value = e.target.value.toUpperCase();
        });

        // Update color picker when text input changes
        codeInput.addEventListener('input', function(e) {
            if (e.target.value.match(/^#[0-9A-Fa-f]{6}$/)) {
                colorPicker.value = e.target.value;
            }
        });
    });
</script>
@endsection