@php
use App\Http\Controllers\ThemeController;
$current = ThemeController::current();
@endphp

<!-- Theme Drawer Backdrop -->
<div id="theme-backdrop" class="fixed inset-0 bg-black/50 z-40 hidden transition-opacity duration-300 opacity-0" onclick="closeThemeDrawer()"></div>

<!-- Theme Drawer -->
<div id="theme-drawer" class="fixed inset-y-0 right-0 w-96 max-w-full bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50 flex flex-col">
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
        <h2 class="text-lg font-bold text-secondary">Theme Customizer</h2>
        <button type="button" onclick="closeThemeDrawer()" class="text-gray-400 hover:text-gray-600 focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>

    <div class="flex-1 overflow-y-auto p-6">
        <!-- Templates -->
        <div class="mb-8">
            <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-4">Color Templates</h3>
            <div class="grid grid-cols-2 gap-3">
                @foreach(ThemeController::TEMPLATES as $index => $template)
                <form method="POST" action="{{ route('theme.apply') }}">
                    @csrf
                    <input type="hidden" name="theme" value="{{ $index }}">
                    <button type="submit" class="w-full text-left p-3 rounded-lg border-2 transition-all {{ $current['name'] === $template['name'] ? 'border-primary ring-2 ring-primary ring-opacity-30' : 'border-gray-200 hover:border-gray-300' }}">
                        <div class="flex items-center space-x-2 mb-2">
                            <div class="w-4 h-4 rounded-full" style="background-color: {{ $template['primary'] }}"></div>
                            <div class="w-4 h-4 rounded-full" style="background-color: {{ $template['secondary'] }}"></div>
                        </div>
                        <div class="text-xs font-semibold text-gray-700">{{ $template['name'] }}</div>
                    </button>
                </form>
                @endforeach
            </div>
        </div>

        <!-- Custom Colors -->
        <div class="mb-8">
            <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-4">Custom Colors</h3>
            <form method="POST" action="{{ route('theme.apply') }}">
                @csrf
                <input type="hidden" name="theme" value="custom">
                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Primary Color</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" name="custom[primary]" value="{{ $current['primary'] }}" class="w-10 h-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" value="{{ $current['primary'] }}" class="flex-1 text-sm border border-gray-300 rounded px-2 py-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Secondary Color</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" name="custom[secondary]" value="{{ $current['secondary'] }}" class="w-10 h-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" value="{{ $current['secondary'] }}" class="flex-1 text-sm border border-gray-300 rounded px-2 py-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Header Background</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" name="custom[header_bg]" value="{{ $current['header_bg'] }}" class="w-10 h-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" value="{{ $current['header_bg'] }}" class="flex-1 text-sm border border-gray-300 rounded px-2 py-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Footer Background</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" name="custom[footer_bg]" value="{{ $current['footer_bg'] }}" class="w-10 h-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" value="{{ $current['footer_bg'] }}" class="flex-1 text-sm border border-gray-300 rounded px-2 py-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Card Background</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" name="custom[card_bg]" value="{{ $current['card_bg'] }}" class="w-10 h-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" value="{{ $current['card_bg'] }}" class="flex-1 text-sm border border-gray-300 rounded px-2 py-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Body Background</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" name="custom[body_bg]" value="{{ $current['body_bg'] }}" class="w-10 h-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" value="{{ $current['body_bg'] }}" class="flex-1 text-sm border border-gray-300 rounded px-2 py-1" readonly>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Text Color</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" name="custom[text_color]" value="{{ $current['text_color'] }}" class="w-10 h-10 rounded border border-gray-300 cursor-pointer">
                            <input type="text" value="{{ $current['text_color'] }}" class="flex-1 text-sm border border-gray-300 rounded px-2 py-1" readonly>
                        </div>
                    </div>
                </div>
                <button type="submit" class="mt-4 w-full py-2 bg-primary text-white rounded-lg font-semibold hover:opacity-90 transition-opacity">Apply Custom Theme</button>
            </form>
        </div>

        <!-- Reset -->
        <form method="POST" action="{{ route('theme.reset') }}">
            @csrf
            <button type="submit" class="w-full py-2 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors">Reset to Default</button>
        </form>
    </div>
</div>

<script>
function openThemeDrawer() {
    const drawer = document.getElementById('theme-drawer');
    const backdrop = document.getElementById('theme-backdrop');
    if (drawer && backdrop) {
        backdrop.classList.remove('hidden');
        // small delay to allow display:block to apply before opacity transition
        setTimeout(() => backdrop.classList.remove('opacity-0'), 10);
        drawer.classList.remove('translate-x-full');
    }
}

function closeThemeDrawer() {
    const drawer = document.getElementById('theme-drawer');
    const backdrop = document.getElementById('theme-backdrop');
    if (drawer && backdrop) {
        drawer.classList.add('translate-x-full');
        backdrop.classList.add('opacity-0');
        setTimeout(() => backdrop.classList.add('hidden'), 300);
    }
}

// Close drawer on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeThemeDrawer();
});
</script>