@extends('admin.layouts.app')
@section('title', __('admin.menu_contact'))
@section('heading', __('admin.menu_contact'))
@section('content')
@php
    $maxImageKb = (int) config('admin.media.max_image_size', 2048);
    $maxImageMb = max(1, (int) round($maxImageKb / 1024));
    $imagePreview = $contact->heroImageUrl();
    $dropError = $errors->first('image');
@endphp
<x-admin.page-header :title="__('admin.menu_contact')" />
@if ($errors->any())
    <div class="mb-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
        <ul class="list-disc ps-5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
@endif
<form method="post" action="{{ route('admin.contact-us.update') }}" enctype="multipart/form-data" class="admin-card space-y-4" x-data="adminForm()" @submit="submit($event)">
    @csrf
    @method('PUT')
    <div class="grid gap-4 sm:grid-cols-2">
        <div
            class="sm:col-span-2 rounded-xl border border-slate-100 p-4"
            x-data="{
                dragging: false,
                loading: false,
                error: @js($dropError),
                preview: @js($imagePreview),
                filename: '',
                removeExisting: false,
                allowed: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
                maxBytes: {{ $maxImageKb * 1024 }},
                select(e) {
                    const file = e.target.files?.[0];
                    this.consume(file, false);
                },
                drop(e) {
                    const file = e.dataTransfer?.files?.[0];
                    this.dragging = false;
                    this.consume(file, true);
                },
                consume(file, fromDrop) {
                    this.error = '';
                    if (!file) return;
                    if (!this.allowed.includes(file.type)) {
                        this.error = @js(__('admin.banner_upload_invalid_type'));
                        return;
                    }
                    if (file.size > this.maxBytes) {
                        this.error = @js(__('admin.banner_upload_invalid_size', ['size' => $maxImageMb]));
                        return;
                    }
                    if (this.preview && this.preview.startsWith('blob:')) URL.revokeObjectURL(this.preview);
                    this.loading = true;
                    this.removeExisting = false;
                    this.filename = file.name;
                    this.preview = URL.createObjectURL(file);
                    const dt = new DataTransfer();
                    dt.items.add(file);
                    this.$refs.file.files = dt.files;
                    this.loading = false;
                    if (fromDrop) this.$refs.file.dispatchEvent(new Event('change'));
                },
                clear() {
                    if (this.preview && this.preview.startsWith('blob:')) URL.revokeObjectURL(this.preview);
                    this.preview = @js($imagePreview);
                    this.filename = '';
                    this.error = '';
                    this.removeExisting = false;
                    this.$refs.file.value = '';
                },
                remove() {
                    if (this.preview && this.preview.startsWith('blob:')) URL.revokeObjectURL(this.preview);
                    this.preview = null;
                    this.filename = '';
                    this.error = '';
                    this.removeExisting = true;
                    this.$refs.file.value = '';
                }
            }"
        >
            <h3 class="mb-1 text-sm font-bold text-slate-700">{{ __('admin.contact_hero_image') }}</h3>
            <p class="mb-3 text-[11px] text-slate-500">{{ __('admin.contact_hero_image_hint') }}</p>
            <div
                class="rounded-xl border border-dashed p-4 transition"
                :class="dragging ? 'border-brand-primary bg-brand-primary/5' : 'border-slate-300 bg-white'"
                @dragover.prevent="dragging = true"
                @dragleave.prevent="dragging = false"
                @drop.prevent="drop($event)"
            >
                <template x-if="preview">
                    <img :src="preview" alt="" class="mb-3 h-40 w-full max-w-2xl rounded-lg object-cover ring-1" />
                </template>
                @can(\App\Models\Permission::MEDIA_UPLOAD)
                    <input type="hidden" name="remove_image" :value="removeExisting ? 1 : 0" />
                    <div class="flex flex-wrap items-center gap-2">
                        <label class="admin-btn-muted cursor-pointer">
                            <input
                                x-ref="file"
                                type="file"
                                name="image"
                                accept="image/jpeg,image/png,image/webp,image/gif"
                                class="sr-only"
                                @change="select($event)"
                            />
                            {{ __('admin.banner_pick_image') }}
                        </label>
                        <button type="button" class="admin-btn-muted" @click="clear()">{{ __('admin.banner_clear_new_file') }}</button>
                        @if ($imagePreview)
                            <button type="button" class="admin-btn-muted" @click="remove()">{{ __('admin.contact_hero_image_remove') }}</button>
                        @endif
                        <span class="text-xs text-slate-500" x-text="filename"></span>
                    </div>
                    <p class="mt-2 text-[11px] text-slate-500">
                        {{ __('admin.banner_drop_hint') }}
                        — {{ __('admin.banner_size_hint', ['size' => $maxImageMb]) }}
                    </p>
                    <p class="mt-2 text-xs text-amber-600" x-show="loading" x-cloak>{{ __('admin.saving') }}</p>
                    <p class="mt-2 text-xs text-rose-600" x-text="error" x-show="error" x-cloak></p>
                @endcan
                @error('image')<p class="mt-2 text-xs text-rose-600">{{ $message }}</p>@enderror
            </div>
        </div>

        @foreach($enabledLocales as $loc)
            <div class="sm:col-span-2 border-b border-slate-100 pb-4 font-semibold ">{{ __("admin.locale_{$loc}") }}</div>
            <div><label class="admin-label">{{ __('admin.name') }}</label><input name="name_{{ $loc }}" value="{{ old("name_{$loc}", $contact->{"name_{$loc}"}) }}" class="admin-input" /></div>
            <div><label class="admin-label">{{ __('admin.subject') }}</label><input name="subject_{{ $loc }}" value="{{ old("subject_{$loc}", $contact->{"subject_{$loc}"}) }}" class="admin-input" /></div>
            <div class="sm:col-span-2"><label class="admin-label">{{ __('admin.text') }}</label><textarea name="text_{{ $loc }}" rows="25" class="admin-input">{{ old("text_{$loc}", $contact->{"text_{$loc}"}) }}</textarea></div>
            <div class="sm:col-span-2"><label class="admin-label">{{ __('admin.address') }}</label><textarea name="address_{{ $loc }}" rows="2" class="admin-input">{{ old("address_{$loc}", $contact->{"address_{$loc}"}) }}</textarea></div>
        @endforeach
        <div><label class="admin-label">{{ __('admin.mobile') }}</label><input name="mobile" value="{{ old('mobile', $contact->mobile) }}" class="admin-input" /></div>
        <div><label class="admin-label">{{ __('admin.email') }}</label><input type="email" name="email" value="{{ old('email', $contact->email) }}" class="admin-input" /></div>
        <div><label class="admin-label">{{ __('admin.telegram') }}</label><input name="telegram" value="{{ old('telegram', $contact->telegram) }}" class="admin-input" /></div>
        <div><label class="admin-label">{{ __('admin.instagram') }}</label><input name="instagram" value="{{ old('instagram', $contact->instagram) }}" class="admin-input" /></div>
        <div><label class="admin-label">{{ __('admin.whatsapp') }}</label><input name="whatsapp" value="{{ old('whatsapp', $contact->whatsapp) }}" class="admin-input" /></div>
    </div>

    <section
        class="space-y-4 border-t border-slate-100 pt-4"
        x-data="{
            items: @js(old('contact_trust', $contactTrust)),
            icons: @js($contactIcons),
            locales: @js($enabledLocales),
            add() {
                const label = {};
                const value = {};
                this.locales.forEach((locale) => { label[locale] = ''; value[locale] = ''; });
                this.items.push({ icon: 'repair', label, value });
            },
            remove(i) { this.items.splice(i, 1); }
        }">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h2 class="text-base font-semibold text-slate-900">{{ __('admin.site_settings_contact_trust_title') }}</h2>
                <p class="mt-1 text-sm text-slate-500">{{ __('admin.site_settings_contact_trust_hint') }}</p>
            </div>
            <button type="button" class="admin-ghost-btn" @click="add()">
                {{ __('admin.site_settings_contact_add_row') }}
            </button>
        </div>
        <div class="space-y-3">
            <template x-for="(item, index) in items" :key="index">
                <div class="space-y-3 rounded-xl border border-slate-100 p-3">
                    <div class="admin-repeater-row">
                        <label class="md:col-span-4">
                            <span class="admin-label">{{ __('admin.site_settings_contact_icon') }}</span>
                            <select class="admin-input" :name="`contact_trust[${index}][icon]`" x-model="item.icon">
                                <template x-for="(meta, id) in icons" :key="id">
                                    <option :value="id" x-text="meta.label" :selected="item.icon === id"></option>
                                </template>
                            </select>
                        </label>
                        <div class="flex items-end md:col-span-1">
                            <button type="button" class="admin-danger-btn" @click="remove(index)">×</button>
                        </div>
                    </div>
                    <template x-for="locale in locales" :key="locale">
                        <div class="grid gap-3 md:grid-cols-2">
                            <label>
                                <span class="admin-label">{{ __('admin.site_settings_contact_label') }} (<span x-text="locale.toUpperCase()"></span>)</span>
                                <input type="text" class="admin-input" :name="`contact_trust[${index}][label][${locale}]`" x-model="item.label[locale]" maxlength="180" />
                            </label>
                            <label>
                                <span class="admin-label">{{ __('admin.site_settings_contact_value') }} (<span x-text="locale.toUpperCase()"></span>)</span>
                                <input type="text" class="admin-input" :name="`contact_trust[${index}][value][${locale}]`" x-model="item.value[locale]" maxlength="180" />
                            </label>
                        </div>
                    </template>
                </div>
            </template>
            <p class="text-sm text-slate-500" x-show="items.length === 0">{{ __('admin.site_settings_contact_empty') }}</p>
        </div>
    </section>

    <section
        class="space-y-4 border-t border-slate-100 pt-4"
        x-data="{
            items: @js(old('contact_checklist', $contactChecklist)),
            icons: @js($contactIcons),
            locales: @js($enabledLocales),
            add() {
                const label = {};
                this.locales.forEach((locale) => { label[locale] = ''; });
                this.items.push({ icon: 'check', label });
            },
            remove(i) { this.items.splice(i, 1); }
        }">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h2 class="text-base font-semibold text-slate-900">{{ __('admin.site_settings_contact_checklist_title') }}</h2>
                <p class="mt-1 text-sm text-slate-500">{{ __('admin.site_settings_contact_checklist_hint') }}</p>
            </div>
            <button type="button" class="admin-ghost-btn" @click="add()">
                {{ __('admin.site_settings_contact_add_row') }}
            </button>
        </div>
        <div class="space-y-3">
            <template x-for="(item, index) in items" :key="index">
                <div class="space-y-3 rounded-xl border border-slate-100 p-3">
                    <div class="admin-repeater-row">
                        <label class="md:col-span-4">
                            <span class="admin-label">{{ __('admin.site_settings_contact_icon') }}</span>
                            <select class="admin-input" :name="`contact_checklist[${index}][icon]`" x-model="item.icon">
                                <template x-for="(meta, id) in icons" :key="id">
                                    <option :value="id" x-text="meta.label" :selected="item.icon === id"></option>
                                </template>
                            </select>
                        </label>
                        <div class="flex items-end md:col-span-1">
                            <button type="button" class="admin-danger-btn" @click="remove(index)">×</button>
                        </div>
                    </div>
                    <template x-for="locale in locales" :key="locale">
                        <label>
                            <span class="admin-label">{{ __('admin.site_settings_contact_label') }} (<span x-text="locale.toUpperCase()"></span>)</span>
                            <input type="text" class="admin-input" :name="`contact_checklist[${index}][label][${locale}]`" x-model="item.label[locale]" maxlength="180" />
                        </label>
                    </template>
                </div>
            </template>
            <p class="text-sm text-slate-500" x-show="items.length === 0">{{ __('admin.site_settings_contact_empty') }}</p>
        </div>
    </section>

    <section class="space-y-4 border-t border-slate-100 pt-4">
        <div>
            <h2 class="text-base font-semibold text-slate-900">{{ __('admin.site_settings_specialty_title') }}</h2>
            <p class="mt-1 text-sm text-slate-500">{{ __('admin.site_settings_specialty_hint') }}</p>
        </div>
        @php($specialtyCopy = old('specialty_copy', $specialtyCopy ?? []))
        <div class="space-y-4">
            @foreach ($enabledLocales as $locale)
            @php($row = is_array($specialtyCopy[$locale] ?? null) ? $specialtyCopy[$locale] : [])
            <div class="rounded-xl border border-slate-100 p-4">
                <h3 class="mb-3 text-sm font-bold text-slate-700">{{ $allLocales[$locale] ?? strtoupper($locale) }}</h3>
                <div class="grid gap-3 md:grid-cols-2">
                    <label>
                        <span class="admin-label">{{ __('admin.site_settings_specialty_eyebrow') }}</span>
                        <input type="text" class="admin-input" name="specialty_copy[{{ $locale }}][eyebrow]" value="{{ $row['eyebrow'] ?? '' }}" maxlength="120" />
                    </label>
                    <label>
                        <span class="admin-label">{{ __('admin.site_settings_specialty_heading') }}</span>
                        <input type="text" class="admin-input" name="specialty_copy[{{ $locale }}][heading]" value="{{ $row['heading'] ?? '' }}" maxlength="180" />
                    </label>
                    <label class="md:col-span-2">
                        <span class="admin-label">{{ __('admin.site_settings_specialty_subtitle') }}</span>
                        <textarea class="admin-input admin-input--prose-sm" rows="3" name="specialty_copy[{{ $locale }}][subtitle]" maxlength="400">{{ $row['subtitle'] ?? '' }}</textarea>
                    </label>
                </div>
            </div>
            @endforeach
        </div>
    </section>

    @include('admin.partials.form-footer', ['cancelRoute' => route('admin.dashboard')])
</form>
@endsection