@php
    use Illuminate\Support\Facades\Storage;
@endphp
@extends('layouts.app')

@section('content')
    <div class="bg-gray-50 min-h-screen">
        <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div class="md:flex md:items-center md:justify-between pb-6 border-b-2 border-gray-200 mb-8">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">⚙️ Pengaturan Toko</h1>
                    <p class="text-gray-600 mt-1">Kelola informasi umum dan branding toko Anda.</p>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
                <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="p-6 sm:p-8 space-y-8">

                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-3 mb-6">Informasi
                                Utama</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="md:col-span-2">
                                    <label for="store_name" class="block text-sm font-medium text-gray-700 mb-1">Nama Toko
                                        <span class="text-red-500">*</span></label>
                                    <input type="text" id="store_name" name="store_name"
                                        value="{{ old('store_name', $settings->store_name) }}" required
                                        class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                                        placeholder="Contoh: Toko Barokah Jaya">
                                    @error('store_name')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                                </div>



                                <div class="md:col-span-2">
                                    <label for="store_description"
                                        class="block text-sm font-medium text-gray-700 mb-1">Deskripsi/Footer Struk <span
                                            class="text-gray-500">(Opsional)</span></label>
                                    <textarea id="store_description" name="store_description" rows="3"
                                        class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 resize-none"
                                        placeholder="Contoh: Terima kasih telah berbelanja! Barang yang sudah dibeli tidak dapat dikembalikan.">{{ old('store_description', $settings->store_description) }}</textarea>
                                    @error('store_description')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-1">
                                    <label for="tax_rate" class="block text-sm font-medium text-gray-700 mb-1">Pajak Default
                                        (%)</label>
                                    <div class="relative">
                                        <input type="number" id="tax_rate" name="tax_rate"
                                            value="{{ old('tax_rate', $settings->tax_rate ?? 0) }}" step="0.1" min="0"
                                            max="100"
                                            class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 pr-8"
                                            placeholder="0">
                                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                            <span class="text-gray-500 sm:text-sm">%</span>
                                        </div>
                                    </div>
                                    <p class="mt-1 text-xs text-gray-500">Nilai ini akan menjadi default pajak di halaman
                                        kasir.</p>
                                    @error('tax_rate')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>


                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-3 mb-6">Branding Toko
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
                                <div class="md:col-span-1">
                                    <p class="block text-sm font-medium text-gray-700 mb-2">Logo Saat Ini</p>
                                    <div
                                        class="aspect-square w-32 h-32 bg-gray-100 rounded-lg border flex items-center justify-center">
                                        @if($settings->store_logo && Storage::disk('public')->exists($settings->store_logo))
                                            <img src="{{ Storage::url($settings->store_logo) }}" alt="Logo Toko"
                                                class="w-full h-full object-contain p-2 rounded-lg">
                                        @else
                                            <div class="text-center text-gray-500 text-xs p-2">
                                                <svg class="w-8 h-8 mx-auto text-gray-400" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                                                    </path>
                                                </svg>
                                                <p class="mt-1">Belum ada logo</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="md:col-span-2">
                                    <label for="store_logo" class="block text-sm font-medium text-gray-700 mb-2">Upload Logo
                                        Baru <span class="text-gray-500">(Opsional)</span></label>
                                    <div
                                        class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                                        <div class="space-y-1 text-center">
                                            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none"
                                                viewBox="0 0 48 48" aria-hidden="true">
                                                <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-4v8"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                            <div class="flex text-sm text-gray-600">
                                                <label for="store_logo_input"
                                                    class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                                    <span>Upload file</span>
                                                    <input id="store_logo_input" name="store_logo" type="file"
                                                        class="sr-only">
                                                </label>
                                                <p class="pl-1">atau tarik dan lepas</p>
                                            </div>
                                            <p class="text-xs text-gray-500">PNG, JPG, GIF hingga 2MB</p>
                                        </div>
                                    </div>
                                    @error('store_logo')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>

                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-3 mb-6">Personalisasi
                                Tampilan</h2>
                            <div class="space-y-6">
                                <div>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                                        <!-- Primary Color Section -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-4">Warna Tema Utama
                                                (Primary)</label>

                                            <!-- Color Preview Box -->
                                            <div class="mb-6 p-4 rounded-lg border-2 border-gray-200" id="theme_preview_box"
                                                style="background: linear-gradient(135deg, {{ old('theme_color', $settings->theme_color ?? '#f97316') }}, {{ old('theme_color', $settings->theme_color ?? '#f97316') }}dd);">
                                                <div class="flex items-center justify-between">
                                                    <div class="text-white">
                                                        <p class="font-bold text-lg">Warna Utama</p>
                                                        <p class="text-white/80 text-sm">Warna aksen & tombol utama</p>
                                                    </div>
                                                    <div class="bg-white/20 rounded-full px-4 py-2">
                                                        <span id="color_code_display"
                                                            class="text-white font-mono font-bold">{{ old('theme_color', $settings->theme_color ?? '#f97316') }}</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <input type="color" id="theme_color" name="theme_color"
                                                value="{{ old('theme_color', $settings->theme_color ?? '#f97316') }}"
                                                class="sr-only" onchange="updateThemePreview(this.value, 'primary')">

                                            <div class="flex flex-wrap gap-2 mb-4">
                                                @php
                                                    $primaryPresets = [
                                                        ['#f97316', 'Orange'],
                                                        ['#ea580c', 'Dk Orange'],
                                                        ['#dc2626', 'Red'],
                                                        ['#ef4444', 'Rose'],
                                                        ['#db2777', 'Pink'],
                                                        ['#9333ea', 'Purple'],
                                                        ['#7c3aed', 'Violet'],
                                                        ['#4f46e5', 'Indigo'],
                                                        ['#2563eb', 'Blue'],
                                                        ['#0ea5e9', 'Sky'],
                                                        ['#06b6d4', 'Cyan'],
                                                        ['#0d9488', 'Teal'],
                                                        ['#16a34a', 'Green'],
                                                        ['#84cc16', 'Lime'],
                                                        ['#eab308', 'Yellow'],
                                                        ['#000000', 'Black']
                                                    ];
                                                    $curPrimary = old('theme_color', $settings->theme_color ?? '#f97316');
                                                @endphp
                                                @foreach($primaryPresets as $color)
                                                    <button type="button" onclick="setThemeColor('{{ $color[0] }}', 'primary')"
                                                        title="{{ $color[1] }}"
                                                        class="group w-8 h-8 p-0.5 rounded-full border-2 transition-all flex items-center justify-center {{ $curPrimary === $color[0] ? 'border-gray-900 bg-gray-100' : 'border-transparent hover:border-gray-300' }}">
                                                        <div class="w-full h-full rounded-full shadow-sm"
                                                            style="background-color: {{ $color[0] }};"></div>
                                                    </button>
                                                @endforeach
                                                <button type="button"
                                                    onclick="document.getElementById('theme_color').click()"
                                                    title="Custom Color"
                                                    class="w-8 h-8 p-0.5 rounded-full border-2 border-dashed border-gray-300 hover:border-gray-400 flex items-center justify-center">
                                                    <div
                                                        class="w-full h-full rounded-full flex items-center justify-center text-gray-400 bg-gray-50">
                                                        <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"></path>
                                                        </svg>
                                                    </div>
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Secondary Color Section -->
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-4">Warna Tema Sekunder
                                                (Secondary)</label>

                                            <!-- Color Preview Box -->
                                            <div class="mb-6 p-4 rounded-lg border-2 border-gray-200"
                                                id="secondary_preview_box"
                                                style="background: linear-gradient(135deg, {{ old('secondary_color', $settings->secondary_color ?? '#a855f7') }}, {{ old('secondary_color', $settings->secondary_color ?? '#a855f7') }}dd);">
                                                <div class="flex items-center justify-between">
                                                    <div class="text-white">
                                                        <p class="font-bold text-lg">Warna Sekunder</p>
                                                        <p class="text-white/80 text-sm">Gradasi & aksen pelengkap</p>
                                                    </div>
                                                    <div class="bg-white/20 rounded-full px-4 py-2">
                                                        <span id="secondary_code_display"
                                                            class="text-white font-mono font-bold">{{ old('secondary_color', $settings->secondary_color ?? '#a855f7') }}</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <input type="color" id="secondary_color" name="secondary_color"
                                                value="{{ old('secondary_color', $settings->secondary_color ?? '#a855f7') }}"
                                                class="sr-only" onchange="updateThemePreview(this.value, 'secondary')">

                                            <div class="flex flex-wrap gap-2 mb-4">
                                                @php
                                                    $secondaryPresets = [
                                                        ['#a855f7', 'Purple'],
                                                        ['#d946ef', 'Fuchsia'],
                                                        ['#db2777', 'Pink'],
                                                        ['#be185d', 'Rose'],
                                                        ['#6366f1', 'Indigo'],
                                                        ['#3b82f6', 'Blue'],
                                                        ['#0ea5e9', 'Sky'],
                                                        ['#06b6d4', 'Cyan'],
                                                        ['#0d9488', 'Teal'],
                                                        ['#10b981', 'Emerald'],
                                                        ['#22c55e', 'Green'],
                                                        ['#84cc16', 'Lime'],
                                                        ['#eab308', 'Yellow'],
                                                        ['#f59e0b', 'Amber'],
                                                        ['#f43f5e', 'Red'],
                                                        ['#64748b', 'Slate']
                                                    ];
                                                    $curSecondary = old('secondary_color', $settings->secondary_color ?? '#a855f7');
                                                @endphp
                                                @foreach($secondaryPresets as $color)
                                                    <button type="button"
                                                        onclick="setThemeColor('{{ $color[0] }}', 'secondary')"
                                                        title="{{ $color[1] }}"
                                                        class="group w-8 h-8 p-0.5 rounded-full border-2 transition-all flex items-center justify-center {{ $curSecondary === $color[0] ? 'border-gray-900 bg-gray-100' : 'border-transparent hover:border-gray-300' }}">
                                                        <div class="w-full h-full rounded-full shadow-sm"
                                                            style="background-color: {{ $color[0] }};"></div>
                                                    </button>
                                                @endforeach
                                                <button type="button"
                                                    onclick="document.getElementById('secondary_color').click()"
                                                    title="Custom Color"
                                                    class="w-8 h-8 p-0.5 rounded-full border-2 border-dashed border-gray-300 hover:border-gray-400 flex items-center justify-center">
                                                    <div
                                                        class="w-full h-full rounded-full flex items-center justify-center text-gray-400 bg-gray-50">
                                                        <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"></path>
                                                        </svg>
                                                    </div>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <script>
                                        function setThemeColor(color, type) {
                                            const id = type === 'primary' ? 'theme_color' : 'secondary_color';
                                            document.getElementById(id).value = color;
                                            updateThemePreview(color, type);
                                        }

                                        function updateThemePreview(color, type) {
                                            const boxId = type === 'primary' ? 'theme_preview_box' : 'secondary_preview_box';
                                            const textId = type === 'primary' ? 'color_code_display' : 'secondary_code_display';

                                            // Update preview box
                                            document.getElementById(boxId).style.background =
                                                `linear-gradient(135deg, ${color}, ${color}dd)`;

                                            // Update color code display
                                            document.getElementById(textId).textContent = color.toUpperCase();

                                            // Update active state of preset buttons
                                            document.querySelectorAll(`[onclick*="'${type}'"]`).forEach(btn => {
                                                const match = btn.getAttribute('onclick').match(/'([^']+)'/);
                                                if (match) {
                                                    const btnColor = match[1];
                                                    const isSelected = btnColor.toLowerCase() === color.toLowerCase();
                                                    btn.classList.toggle('border-gray-900', isSelected);
                                                    btn.classList.toggle('bg-gray-100', isSelected);
                                                    btn.classList.toggle('border-transparent', !isSelected);
                                                }
                                            });
                                        }
                                    </script>
                                    @error('theme_color')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                                    @error('secondary_color')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                    @error('theme_color')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>

                        <!-- Custom Production Status Labels -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-3 mb-6">Label Status
                                Produksi
                            </h2>
                            <p class="text-sm text-gray-500 mb-4">Sesuaikan penamaan status alur produksi (Kanban & List)
                                agar sesuai dengan bahasa operasional bisnis Anda.</p>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                                <div>
                                    <label for="status_label_pending"
                                        class="block text-xs font-medium text-gray-500 mb-1">Status 1: Pending</label>
                                    <input type="text" id="status_label_pending" name="status_label_pending"
                                        value="{{ old('status_label_pending', $settings->status_label_pending ?? 'Menunggu') }}"
                                        required
                                        class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                                        placeholder="Menunggu">
                                </div>
                                <div>
                                    <label for="status_label_queued"
                                        class="block text-xs font-medium text-gray-500 mb-1">Status 2: Queued</label>
                                    <input type="text" id="status_label_queued" name="status_label_queued"
                                        value="{{ old('status_label_queued', $settings->status_label_queued ?? 'Antrian') }}"
                                        required
                                        class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                                        placeholder="Antrian">
                                </div>
                                <div>
                                    <label for="status_label_in_progress"
                                        class="block text-xs font-medium text-gray-500 mb-1">Status 3: In Progress</label>
                                    <input type="text" id="status_label_in_progress" name="status_label_in_progress"
                                        value="{{ old('status_label_in_progress', $settings->status_label_in_progress ?? 'Dikerjakan') }}"
                                        required
                                        class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                                        placeholder="Dikerjakan">
                                </div>
                                <div>
                                    <label for="status_label_completed"
                                        class="block text-xs font-medium text-gray-500 mb-1">Status 4: Completed</label>
                                    <input type="text" id="status_label_completed" name="status_label_completed"
                                        value="{{ old('status_label_completed', $settings->status_label_completed ?? 'Selesai') }}"
                                        required
                                        class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                                        placeholder="Selesai">
                                </div>
                                <div>
                                    <label for="status_label_ready_for_pickup"
                                        class="block text-xs font-medium text-gray-500 mb-1">Status 5: Ready</label>
                                    <input type="text" id="status_label_ready_for_pickup"
                                        name="status_label_ready_for_pickup"
                                        value="{{ old('status_label_ready_for_pickup', $settings->status_label_ready_for_pickup ?? 'Siap Ambil') }}"
                                        required
                                        class="w-full border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm"
                                        placeholder="Siap Ambil">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="px-6 sm:px-8 py-4 bg-gray-50 border-t border-gray-200 flex justify-end">
                        <button type="submit"
                            class="w-full sm:w-auto flex items-center justify-center px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 shadow-md transition-transform transform hover:scale-105 duration-300">
                            <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">
                                </path>
                            </svg>
                            Simpan Pengaturan
                        </button>
                    </div>
                </form>
            </div>

            @if(session('success'))
                <div id="success-toast"
                    class="fixed bottom-5 right-5 flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-lg"
                    role="alert">
                    <div
                        class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <div class="ml-3 text-sm font-normal">{{ session('success') }}</div>
                    <button type="button"
                        class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8"
                        onclick="document.getElementById('success-toast').style.display='none'">
                        <span class="sr-only">Close</span>
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>
                <script>
                    setTimeout(() => {
                        const toast = document.getElementById('success-toast');
                        if (toast) toast.style.display = 'none';
                    }, 5000);
                </script>
            @endif

        </div>
    </div>
@endsection