@extends('backend.layouts.app')

@section('title', 'Email Branding')

@section('content')
    @include('backend.module._index-reset-button')
    @php
        $pageTitle = 'Email Branding';
        $indexRoute = 'email-template.index';
        $indexLabel = 'Email Templates';
    @endphp
    @include('backend.layouts.partials._page_header')

    <form action="{{ route('email-branding.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="space-y-5 sm:space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                <div class="px-5 py-4 sm:px-6 sm:py-5">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Government Email Branding</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        This header and footer are used by CMS email templates and fallback Laravel notification emails.
                    </p>
                </div>

                <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                        <div>
                            <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-400">Email Logo</label>
                            <div class="flex h-28 items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
                                @if (! empty($settings['logo_url']))
                                    <img src="{{ $settings['logo_url'] }}" alt="Email logo" class="max-h-20 max-w-full object-contain">
                                @else
                                    <span class="text-xs text-gray-400">No logo uploaded</span>
                                @endif
                            </div>
                            <input type="file" name="email_logo" accept=".jpg,.jpeg,.png,.webp"
                                class="mt-3 block w-full text-xs text-gray-500 file:mr-3 file:rounded-lg file:border-0 file:bg-brand-50 file:px-3 file:py-2 file:text-xs file:font-medium file:text-brand-600 hover:file:bg-brand-100 dark:text-gray-400 dark:file:bg-brand-500/15 dark:file:text-brand-400">
                            @include('backend.layouts.partials._upload-hint', ['text' => 'PNG/JPG/WebP · Max 15MB · Use a horizontal logo on a white background'])
                            @error('email_logo')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                            @if (! empty($settings['logo_url']))
                                <label class="mt-3 inline-flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
                                    <input type="checkbox" name="remove_email_logo" value="1" class="rounded border-gray-300 text-error-600 focus:ring-error-500">
                                    Remove current logo
                                </label>
                            @endif
                        </div>

                        <div class="lg:col-span-2">
                            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Organisation Name <span class="text-error-500">*</span></label>
                                    <input type="text" name="email_org_name" value="{{ old('email_org_name', $settings['org_name']) }}" placeholder="Kementerian / Agensi"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email_org_name') border-error-300 dark:border-error-700 @enderror">
                                    @error('email_org_name')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                                </div>
                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Subtitle / Department</label>
                                    <input type="text" name="email_org_subtitle" value="{{ old('email_org_subtitle', $settings['org_subtitle']) }}" placeholder="Bahagian / Unit"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email_org_subtitle') border-error-300 dark:border-error-700 @enderror">
                                    @error('email_org_subtitle')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                                </div>
                                <div class="sm:col-span-2">
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Address</label>
                                    <textarea name="email_address" rows="3" placeholder="Alamat pejabat"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email_address') border-error-300 dark:border-error-700 @enderror">{{ old('email_address', $settings['address']) }}</textarea>
                                    @error('email_address')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Phone</label>
                            <input type="text" name="email_phone" value="{{ old('email_phone', $settings['phone']) }}" placeholder="03-XXXX XXXX"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email_phone') border-error-300 dark:border-error-700 @enderror">
                            @error('email_phone')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Contact Email</label>
                            <input type="email" name="email_contact_email" value="{{ old('email_contact_email', $settings['contact_email']) }}" placeholder="info@agensi.gov.my"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email_contact_email') border-error-300 dark:border-error-700 @enderror">
                            @error('email_contact_email')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Website</label>
                            <input type="text" name="email_website" value="{{ old('email_website', $settings['website']) }}" placeholder="https://www.agensi.gov.my"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email_website') border-error-300 dark:border-error-700 @enderror">
                            @error('email_website')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Footer Note / Disclaimer</label>
                        <textarea name="email_footer_note" rows="3"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('email_footer_note') border-error-300 dark:border-error-700 @enderror"
                            placeholder="This is an automated message. Please do not reply to this email.">{{ old('email_footer_note', $settings['footer_note']) }}</textarea>
                        @error('email_footer_note')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </div>

                    <div class="max-w-xs">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Primary Colour</label>
                        <div class="flex items-center gap-3">
                            <input type="color" name="email_primary_color" value="{{ old('email_primary_color', $settings['primary_color']) }}" class="h-11 w-16 cursor-pointer rounded border border-gray-300 dark:border-gray-700">
                            <span class="font-mono text-xs text-gray-500 dark:text-gray-400">{{ $settings['primary_color'] }}</span>
                        </div>
                        @error('email_primary_color')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="flex flex-col-reverse gap-3 border-t border-gray-100 p-5 sm:flex-row sm:justify-end sm:p-6 dark:border-gray-800">
                    <a href="{{ route('email-template.index') }}"
                        class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 sm:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Cancel</a>
                    @can('email-branding.update')
                        <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2.5 text-theme-sm font-medium text-white hover:bg-brand-600 sm:w-auto">Save Branding</button>
                    @endcan
                </div>
            </div>
        </div>
    </form>
@endsection