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

    <div class="p-6 space-y-6">
        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-6">
                <div>
                    <h1 class="text-xl font-semibold text-gray-900">Add Dealer</h1>
                    <p class="mt-1 text-sm text-gray-600">
                        Create a new dealer (tenant). Codes must be unique.
                    </p>
                </div>

                <form method="POST" action="{{ route('settings.dealers.store') }}" enctype="multipart/form-data" class="space-y-4">
                    @csrf

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

                    <div class="text-xs text-gray-500">
                        Dealer code will be generated automatically from the name (e.g. <code>DLR-MEGA-THERON-TRADERS</code>).
                    </div>

                    <div>
                        <label for="domain" class="block text-sm font-medium text-gray-700">Email / Login Domain</label>
                        <input
                            id="domain"
                            name="domain"
                            type="text"
                            placeholder="example: dealerb.co.za"
                            value="{{ old('domain') }}"
                            required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                        >
                        <p class="mt-1 text-xs text-gray-500">
                            Used to generate built-in user emails (e.g. <code>admin@dealerb.co.za</code>).
                        </p>
                        @error('domain')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="pt-4 mt-4 border-t border-gray-100 space-y-4">
                        <h2 class="text-sm font-semibold text-gray-900">Dealer Details</h2>
                        <p class="text-xs text-gray-500">
                            Core profile and contact information for this dealer.
                        </p>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label for="business_registration_number" class="block text-sm font-medium text-gray-700">
                                    Business Registration Number
                                </label>
                                <input
                                    id="business_registration_number"
                                    name="business_registration_number"
                                    type="text"
                                    value="{{ old('business_registration_number') }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                                >
                                <p class="mt-1 text-xs text-gray-500">
                                    Example: <code class="font-mono text-[11px] text-gray-700">2020/123456/07</code> or <code class="font-mono text-[11px] text-gray-700">K2020123456</code>.
                                </p>
                                @error('business_registration_number')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="vat_number" class="block text-sm font-medium text-gray-700">
                                    VAT Number
                                </label>
                                <input
                                    id="vat_number"
                                    name="vat_number"
                                    type="text"
                                    value="{{ old('vat_number') }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                                >
                                <p class="mt-1 text-xs text-gray-500">
                                    SARS VAT number, exactly 10 digits. Example: <code class="font-mono text-[11px] text-gray-700">4123456789</code>.
                                </p>
                                @error('vat_number')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="dealer_address" class="block text-sm font-medium text-gray-700">
                                Dealer Address
                            </label>
                            <textarea
                                id="dealer_address"
                                name="dealer_address"
                                rows="3"
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                            >{{ old('dealer_address') }}</textarea>
                            @error('dealer_address')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid gap-4 sm:grid-cols-3">
                            <div>
                                <label for="telephone" class="block text-sm font-medium text-gray-700">
                                    Tel
                                </label>
                                <input
                                    id="telephone"
                                    name="telephone"
                                    type="text"
                                    value="{{ old('telephone') }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                                >
                                @error('telephone')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="sm:col-span-2">
                                <label for="contact_email" class="block text-sm font-medium text-gray-700">
                                    General Contact Email
                                </label>
                                <input
                                    id="contact_email"
                                    name="contact_email"
                                    type="email"
                                    value="{{ old('contact_email') }}"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                                >
                                @error('contact_email')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="pt-4 mt-4 border-t border-gray-100 space-y-3">
                        <h2 class="text-sm font-semibold text-gray-900">Main Contact</h2>
                        <p class="text-xs text-gray-500">
                            Primary point of contact for this dealer.
                        </p>

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

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

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

                    <div class="pt-4 mt-4 border-t border-gray-100 space-y-3">
                        <h2 class="text-sm font-semibold text-gray-900">Default Branch</h2>
                        <p class="text-xs text-gray-500">
                            These details will be used to create the initial default branch for this dealer.
                        </p>

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

                        <div>
                            <label for="default_branch_address" class="block text-sm font-medium text-gray-700">Default Branch Address</label>
                            <textarea
                                id="default_branch_address"
                                name="default_branch_address"
                                rows="3"
                                required
                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 text-sm"
                            >{{ old('default_branch_address') }}</textarea>
                            @error('default_branch_address')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="pt-4 mt-4 border-t border-gray-100 space-y-4">
                        <h2 class="text-sm font-semibold text-gray-900">Branding</h2>
                        <p class="text-xs text-gray-500">
                            Configure this dealer&apos;s initial branding. Colors are required; logo and favicon are optional.
                        </p>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-gray-700" for="logo">
                                    Logo (optional)
                                </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>
                                @error('logo')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700" for="favicon">
                                    Favicon (optional)
                                </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>
                                @error('favicon')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-4">
                            <p class="text-xs text-gray-600">
                                All text colors are derived automatically for legibility. Only surface colors are configurable here.
                            </p>

                            <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, '');
                                    @endphp
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600" for="{{ $field }}">
                                            {{ $label }} <span class="text-red-500">*</span>
                                        </label>
                                        <div class="mt-1 flex items-center gap-2">
                                            <input
                                                id="{{ $field }}_preview"
                                                type="color"
                                                value="{{ $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"
                                                required
                                                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>
                                        @error($field)
                                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 space-y-4">
                            <div>
                                <h3 class="text-xs font-semibold text-gray-900 uppercase tracking-wide">Login branding</h3>
                                <p class="mt-1 text-xs text-gray-600">
                                    Optional login-specific branding. If omitted, the login page will fall back to this dealer&apos;s main branding and platform defaults.
                                </p>
                            </div>

                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700" for="login_background">
                                        Login Background Image (optional)
                                    </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">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-sm font-medium text-gray-700" for="login_logo">
                                        Login Logo (optional)
                                    </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', '');
                                @endphp
                                <label class="block text-xs font-medium text-gray-600" for="login_accent_color">
                                    Login accent color (optional)
                                </label>
                                <div class="mt-1 flex items-center gap-2">
                                    <input
                                        id="login_accent_color_preview"
                                        type="color"
                                        value="{{ $loginAccent !== '' ? $loginAccent : '#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>

                    <div class="pt-4 mt-4 border-t border-gray-100 space-y-4">
                        <h2 class="text-sm font-semibold text-gray-900">Documents</h2>
                        <p class="text-xs text-gray-500">
                            Upload compliance documents for this dealer. CIPC allows multiple files.
                        </p>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-gray-700" for="cipc_documents">
                                    CIPC Documents
                                </label>
                                <input
                                    id="cipc_documents"
                                    name="cipc_documents[]"
                                    type="file"
                                    multiple
                                    accept=".pdf,image/*,.doc,.docx"
                                    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">PDF, images or Office documents, max 10 MB each.</p>
                                @error('cipc_documents')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                                @error('cipc_documents.*')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700" for="vat_certificate">
                                    VAT Certificate
                                </label>
                                <input
                                    id="vat_certificate"
                                    name="vat_certificate"
                                    type="file"
                                    accept=".pdf,image/*,.doc,.docx"
                                    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">PDF, images or Office documents, max 10 MB.</p>
                                @error('vat_certificate')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-gray-700" for="proof_of_address">
                                    Proof of Address
                                </label>
                                <input
                                    id="proof_of_address"
                                    name="proof_of_address"
                                    type="file"
                                    accept=".pdf,image/*,.doc,.docx"
                                    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">PDF, images or Office documents, max 10 MB.</p>
                                @error('proof_of_address')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-end gap-3 pt-4">
                        <a
                            href="{{ route('settings.dealers.index') }}"
                            class="inline-flex items-center rounded-md border border-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                        >
                            Cancel
                        </a>
                        <button
                            type="submit"
                            class="inline-flex items-center rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700"
                        >
                            Save Dealer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>

