@extends('layouts.admin')

@section('page-title', 'Colors')

@section('content')
<div class="space-y-6">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Colors</h2>
            <p class="text-sm text-gray-500 mt-1">Manage product color options for your catalog</p>
        </div>
        <span class="inline-flex items-center px-3 py-1.5 bg-indigo-50 text-indigo-700 text-sm font-medium rounded-full">
            {{ $colors->total() }} {{ Str::plural('color', $colors->total()) }}
        </span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Color List --}}
        <div class="lg:col-span-2">
            <div class="royal-card overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-base font-semibold text-gray-900">Colors</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600 w-12">#</th>
                                <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Name</th>
                                <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Code</th>
                                <th class="text-center py-3 px-4 text-sm font-semibold text-gray-600">Options</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($colors as $index => $color)
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="py-3 px-4 text-sm text-gray-500">{{ $colors->firstItem() + $index }}</td>
                                    <td class="py-3 px-4 text-sm font-medium text-gray-900">{{ $color->name }}</td>
                                    <td class="py-3 px-4">
                                        <span class="text-sm font-mono" style="color: {{ $color->hex_code }}">{{ $color->hex_code }}</span>
                                    </td>
                                    <td class="py-3 px-4 text-center">
                                        <div class="flex items-center justify-center gap-2">
                                            <a href="{{ route('admin.products.colors.edit', $color) }}" class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" title="Edit">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                            </a>
                                            <form action="{{ route('admin.products.colors.destroy', $color) }}" method="POST" class="inline" onsubmit="return confirm('Delete this color?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="Delete">
                                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="py-8 text-center text-gray-500">No colors found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($colors->hasPages())
                    <div class="px-6 py-4 border-t border-gray-200">
                        {{ $colors->links() }}
                    </div>
                @endif
            </div>
        </div>

        {{-- Add Color Form --}}
        <div class="lg:col-span-1">
            <div class="royal-card overflow-hidden sticky top-6">
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-purple-50">
                    <h3 class="text-base font-semibold text-gray-900">Add New Color</h3>
                </div>
                <div class="p-6">
                    <form action="{{ route('admin.products.colors.store') }}" method="POST">
                        @csrf
                        <div class="space-y-5">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1.5">Color Name</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" placeholder="e.g. Midnight Blue" class="w-full px-3.5 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-shadow" required autofocus>
                                @error('name')
                                    <p class="mt-1.5 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="code" class="block text-sm font-medium text-gray-700 mb-1.5">Hex Code</label>
                                <div class="flex items-center gap-3">
                                    <div class="relative flex-1">
                                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm font-mono">#</span>
                                        <input type="text" name="code" id="code" value="{{ old('code') }}" placeholder="000000" class="w-full pl-7 pr-3 py-2.5 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-shadow uppercase" maxlength="7">
                                    </div>
                                    <div class="relative">
                                        <button type="button" id="color-picker-btn" class="w-10 h-10 rounded-lg border-2 border-gray-200 hover:border-gray-300 transition-colors overflow-hidden cursor-pointer" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
                                        </button>
                                        <input type="color" id="native-color-picker" class="sr-only">
                                    </div>
                                </div>
                                @error('code')
                                    <p class="mt-1.5 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Live Preview --}}
                            <div class="pt-2">
                                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Preview</p>
                                <div id="color-preview" class="h-12 rounded-lg border border-gray-200 transition-colors" style="background-color: #667eea"></div>
                            </div>

                            <button type="submit" class="w-full px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white text-sm font-medium rounded-lg transition-colors shadow-sm hover:shadow flex items-center justify-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                                Add Color
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const codeInput = document.getElementById('code');
    const nativePicker = document.getElementById('native-color-picker');
    const pickerBtn = document.getElementById('color-picker-btn');
    const preview = document.getElementById('color-preview');

    pickerBtn.addEventListener('click', function() {
        nativePicker.click();
    });

    nativePicker.addEventListener('input', function() {
        codeInput.value = this.value;
        preview.style.backgroundColor = this.value;
        pickerBtn.style.background = this.value;
    });

    codeInput.addEventListener('input', function() {
        let val = this.value;
        if (!val.startsWith('#') && val.length > 0) {
            val = '#' + val;
        }
        if (/^#[0-9A-Fa-f]{6}$/.test(val)) {
            nativePicker.value = val;
            preview.style.backgroundColor = val;
            pickerBtn.style.background = val;
        }
    });

    if (codeInput.value && /^#[0-9A-Fa-f]{6}$/.test(codeInput.value)) {
        preview.style.backgroundColor = codeInput.value;
        pickerBtn.style.background = codeInput.value;
    }
});
</script>
@endsection