<x-app-layout>
    <x-slot name="header">
        {{ __('Branding') }}
    </x-slot>

    <div class="p-6 space-y-6">
        @if (session('status'))
            <div class="rounded-md bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="rounded-md bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-800">
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('settings.branding.update') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5 space-y-4">
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <h2 class="text-base font-semibold text-gray-900">Logo</h2>
                        <p class="mt-1 text-sm text-gray-600">
                            Update the logo for this dealer. If no logo is set, the platform default is used.
                        </p>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="h-12 flex items-center">
                            <img
                                src="{{ $dealerLogoUrl ?? asset('images/mega-theron-logo.png') }}"
                                alt="{{ $dealer->name }}"
                                class="h-12 w-auto object-contain"
                            />
                        </div>
                    </div>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-gray-600" for="logo">
                            Upload logo
                        </label>
                        <input
                            id="logo"
                            name="logo"
                            type="file"
                            accept="image/*"
                            class="mt-1 block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-3 file:rounded-md file:border file:border-gray-300 file:text-sm file:font-medium file:bg-white file:text-gray-700 hover:file:bg-gray-50"
                        >
                        <p class="mt-1 text-xs text-gray-500">PNG or SVG, max 2 MB.</p>
                    </div>

                    <div class="flex items-end">
                        <label class="inline-flex items-center gap-2 text-xs font-medium text-gray-700">
                            <input
                                type="checkbox"
                                name="logo_reset"
                                value="1"
                                class="rounded border-gray-300 text-red-600 shadow-sm focus:ring-red-500"
                            >
                            <span>Reset to default logo</span>
                        </label>
                    </div>
                </div>

                <div class="pt-4 border-t border-gray-100 space-y-3">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h3 class="text-sm font-semibold text-gray-900">Favicon</h3>
                            <p class="mt-1 text-sm text-gray-600">
                                Upload a custom favicon for this dealer. If none is set, the platform default favicon is used.
                            </p>
                        </div>
                        <div class="flex items-center gap-2">
                            <img
                                src="{{ $dealerFaviconUrl ?? asset('favicon.ico') }}"
                                alt="Favicon preview"
                                class="h-6 w-6 rounded border border-gray-200 bg-white"
                            />
                        </div>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="block text-xs font-medium text-gray-600" for="favicon">
                                Upload favicon
                            </label>
                            <input
                                id="favicon"
                                name="favicon"
                                type="file"
                                accept=".ico,image/x-icon,image/vnd.microsoft.icon,image/png,image/svg+xml"
                                class="mt-1 block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-3 file:rounded-md file:border file:border-gray-300 file:text-sm file:font-medium file:bg-white file:text-gray-700 hover:file:bg-gray-50"
                            >
                            <p class="mt-1 text-xs text-gray-500">ICO or PNG (SVG optional), max 512 KB.</p>
                        </div>

                        <div class="flex items-end">
                            <label class="inline-flex items-center gap-2 text-xs font-medium text-gray-700">
                                <input
                                    type="checkbox"
                                    name="favicon_reset"
                                    value="1"
                                    class="rounded border-gray-300 text-red-600 shadow-sm focus:ring-red-500"
                                >
                                <span>Reset to default favicon</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5 space-y-4">
                <div>
                    <h2 class="text-base font-semibold text-gray-900">Login branding</h2>
                    <p class="mt-1 text-sm text-gray-600">
                        Customize the public login page for this dealer. These settings are dealer-scoped.
                    </p>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="block text-xs font-medium text-gray-600" for="login_background">
                            Login background image
                        </label>
                        <input
                            id="login_background"
                            name="login_background"
                            type="file"
                            accept="image/*"
                            class="mt-1 block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-3 file:rounded-md file:border file:border-gray-300 file:text-sm file:font-medium file:bg-white file:text-gray-700 hover:file:bg-gray-50"
                        >
                        <p class="mt-1 text-xs text-gray-500">
                            Optional login page background. PNG/JPG/SVG, max 3 MB.
                        </p>
                        @error('login_background')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-600" for="login_logo">
                            Login logo
                        </label>
                        <input
                            id="login_logo"
                            name="login_logo"
                            type="file"
                            accept="image/*"
                            class="mt-1 block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-3 file:rounded-md file:border file:border-gray-300 file:text-sm file:font-medium file:bg-white file:text-gray-700 hover:file:bg-gray-50"
                        >
                        <p class="mt-1 text-xs text-gray-500">
                            Optional login-specific logo. Falls back to the main logo if not set.
                        </p>
                        @error('login_logo')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    @php
                        $loginAccent = old('login_accent_color', $dealer->login_accent_color ?? '');
                    @endphp
                    <label class="block text-xs font-medium text-gray-600" for="login_accent_color">
                        Login accent color
                    </label>
                    <div class="mt-1 flex items-center gap-2">
                        <input
                            id="login_accent_color_preview"
                            type="color"
                            value="{{ $loginAccent !== '' ? $loginAccent : ($branding['accent_color'] ?? '#dc2626') }}"
                            class="h-9 w-9 rounded-md border border-gray-300"
                            onchange="document.getElementById('login_accent_color').value = this.value;"
                        >
                        <input
                            id="login_accent_color"
                            name="login_accent_color"
                            type="text"
                            value="{{ $loginAccent }}"
                            placeholder="#dc2626"
                            class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                        >
                    </div>
                    <p class="mt-1 text-xs text-gray-500">
                        Hex value for the login button, e.g. <code class="font-mono text-[11px] text-gray-700">#dc2626</code>.
                    </p>
                    @error('login_accent_color')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-5 space-y-4">
                <div>
                    <h2 class="text-base font-semibold text-gray-900">Custom colors</h2>
                    <p class="mt-1 text-sm text-gray-600">
                        All text colors are derived automatically for legibility. Only surface colors are configurable here.
                    </p>
                </div>

                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
                    @php
                        $fields = [
                            'nav_color' => 'Nav color',
                            'accent_color' => 'Accent color',
                            'accent_color_2' => 'Secondary accent',
                            'background_color' => 'Background color',
                            'topbar_color' => 'Top bar color',
                        ];
                    @endphp

                    @foreach ($fields as $field => $label)
                        @php
                            $value = old($field, $branding[$field] ?? '');
                        @endphp
                        <div>
                            <label class="block text-xs font-medium text-gray-600" for="{{ $field }}">
                                {{ $label }}
                            </label>
                            <div class="mt-1 flex items-center gap-2">
                                <input
                                    id="{{ $field }}_preview"
                                    type="color"
                                    value="{{ $value ?: '#ffffff' }}"
                                    class="h-9 w-9 rounded-md border border-gray-300"
                                    onchange="document.getElementById('{{ $field }}').value = this.value;"
                                >
                                <input
                                    id="{{ $field }}"
                                    name="{{ $field }}"
                                    type="text"
                                    value="{{ $value }}"
                                    placeholder="#000000"
                                    class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                                >
                            </div>
                            <p class="mt-1 text-xs text-gray-500">
                                Hex value, e.g. <code class="font-mono text-[11px] text-gray-700">#262626</code>.
                            </p>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="flex items-center justify-end">
                <button
                    type="submit"
                    class="inline-flex items-center rounded-md bg-[var(--dealer-accent-color)] px-4 py-2 text-sm font-semibold text-[var(--dealer-accent-text-color)] shadow-sm hover:bg-[var(--dealer-accent-hover-color)]"
                >
                    Save branding
                </button>
            </div>
        </form>
    </div>
</x-app-layout>

