@extends('layouts.admin')

@section('header')
    Add Rank
@endsection

@section('content')
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            <div class="mb-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Create New Rank</h3>
                <p class="mt-1 text-sm text-gray-600">Add a new rank for your club members.</p>
            </div>

            <form method="POST" action="{{ route('ranks.store') }}">
                @csrf

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

                <!-- Color Picker -->
                <div class="mb-4">
                    <label for="color" class="block text-sm font-medium text-gray-700">Color</label>
                    <input type="color" name="color" id="color" value="{{ old('color', '#000000') }}" class="mt-1 block h-10 w-20 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    @error('color')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500">Choose a solid color for this rank.</p>
                </div>

                <!-- Custom CSS (Optional) -->
                <div class="mb-4">
                    <label for="css" class="block text-sm font-medium text-gray-700">Custom background CSS (Optional)</label>
                    <textarea name="css" id="css" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="linear-gradient(...);">{{ old('css') }}</textarea>
                    @error('css')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-xs text-gray-500">If provided, this CSS will be used instead of the color picker. Example: <code class="bg-gray-100 px-1 rounded">linear-gradient(0deg, rgba(125,78,43,1) 0%, rgba(255,255,255,1) 50%, rgba(125,78,43,1) 100%)</code></p>
                </div>

                <!-- Preview -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Preview</label>
                    <div id="preview" class="w-32 h-32 rounded-md border-2 border-gray-300" style="background-color: #000000;"></div>
                </div>

                <div class="flex items-center justify-end gap-4">
                    <a href="{{ route('ranks.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        Cancel
                    </a>
                    <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                        Create Rank
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const colorInput = document.getElementById('color');
        const cssInput = document.getElementById('css');
        const preview = document.getElementById('preview');

        function updatePreview() {
            const cssValue = cssInput.value.trim();
            if (cssValue) {
                preview.style.cssText = `background: ${cssValue};`;
            } else {
                preview.style.cssText = `background-color: ${colorInput.value};`;
            }
        }

        colorInput.addEventListener('input', updatePreview);
        cssInput.addEventListener('input', updatePreview);

        // Initial preview
        updatePreview();
    </script>
@endsection