@extends('admin.layouts.app')

@section('title', __('admin.lead_settings'))
@section('heading', __('admin.lead_settings'))

@section('content')
    <x-admin.page-header :title="__('admin.lead_settings')" />
    <p class="-mt-4 mb-6 text-sm text-slate-500">{{ __('admin.lead_settings_intro') }}</p>

    @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.lead-settings.update') }}"
        class="space-y-6"
        x-data="adminLeadSettings({
            categories: @js($categoriesForJs),
            categoryTree: @js($categoryTreeForJs),
            visibleSlots: @js($visibleSlots),
            slots: @js($slotsForJs),
            slotLabels: @js([
                1 => __('admin.lead_slot', ['slot' => 1]),
                2 => __('admin.lead_slot', ['slot' => 2]),
                3 => __('admin.lead_slot', ['slot' => 3]),
            ]),
        })"
    >
        @csrf
        @method('PUT')

        <template x-for="slot in visibleSlots" :key="'active-' + slot">
            <input type="hidden" name="active_slots[]" :value="slot" />
        </template>

        @foreach ([1, 2, 3] as $slot)
            <input type="hidden" name="recipients[{{ $slot }}][phone]" :value="slots[{{ $slot }}].phone" />
            <input type="hidden" name="recipients[{{ $slot }}][label]" :value="slots[{{ $slot }}].label" />
            <input type="hidden" name="recipients[{{ $slot }}][is_active]" :value="slots[{{ $slot }}].active ? 1 : 0" />
            <input type="hidden" name="recipients[{{ $slot }}][email]" :value="slots[{{ $slot }}].email" />
            <input type="hidden" name="recipients[{{ $slot }}][password]" :value="slots[{{ $slot }}].password" />
            <input type="hidden" name="recipients[{{ $slot }}][assign_role]" :value="slots[{{ $slot }}].assign_role ? 1 : 0" />
            <template x-for="catId in slots[{{ $slot }}].categoryIds" :key="'route-{{ $slot }}-' + catId">
                <input type="hidden" name="routing[{{ $slot }}][]" :value="catId" />
            </template>
        @endforeach

        <div class="space-y-4">
            <template x-for="(slot, index) in visibleSlots" :key="slot">
                <article
                    class="admin-card overflow-hidden transition ring-1 "
                    :class="activeSlot === slot ? 'ring-2 ring-brand-accent shadow-card' : ''"
                >
                    <header
                        class="flex cursor-pointer flex-wrap items-center gap-3 border-b border-slate-100 bg-slate-50/80 px-4 py-4 sm:px-6"
                        @click="setActive(slot)"
                    >
                        <span
                            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-navy text-sm font-bold text-white"
                            x-text="slot"
                        ></span>
                        <div class="min-w-0 flex-1">
                            <h2 class="text-base font-bold " x-text="slotLabel(slot)"></h2>
                            <p class="text-xs text-slate-500" x-show="slots[slot].phone" x-text="slots[slot].phone" dir="ltr"></p>
                            <p class="text-xs text-slate-400" x-show="!slots[slot].phone">{{ __('admin.lead_phone_missing') }}</p>
                        </div>
                        <span
                            class="rounded-full bg-brand-accent/10 px-3 py-1 text-xs font-semibold text-brand-accent"
                            x-text="slots[slot].categoryIds.length + ' {{ __('admin.lead_category_count') }}'"
                        ></span>
                        <span
                            x-show="slot === lastSlot()"
                            class="rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-800"
                        >{{ __('admin.lead_catch_all_badge') }}</span>
                    </header>

                    <div class="space-y-5 p-4 sm:p-6" x-show="activeSlot === slot" x-collapse>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="admin-label">{{ __('admin.lead_phone') }}</label>
                                <input
                                    type="text"
                                    class="admin-input font-mono"
                                    dir="ltr"
                                    placeholder="09123456789"
                                    x-model="slots[slot].phone"
                                    @click.stop
                                />
                            </div>
                            <div>
                                <label class="admin-label">{{ __('admin.name') }} <span class="font-normal text-slate-400">({{ __('admin.optional') }})</span></label>
                                <input
                                    type="text"
                                    class="admin-input"
                                    :placeholder="'{{ __('admin.lead_slot', ['slot' => '…']) }}'"
                                    x-model="slots[slot].label"
                                    @click.stop
                                />
                            </div>
                        </div>

                        <label class="flex items-center gap-2 text-sm" @click.stop>
                            <input type="checkbox" class="rounded border-slate-300" x-model="slots[slot].active" />
                            {{ __('admin.lead_sms_active') }}
                        </label>

                        <div class="rounded-xl border border-dashed border-slate-200 bg-white p-4">
                            <h3 class="mb-3 text-sm font-bold text-slate-700">{{ __('admin.lead_account_title') }}</h3>
                            <p class="mb-4 text-xs text-slate-500">{{ __('admin.lead_account_hint') }}</p>
                            <div class="grid gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="admin-label">{{ __('admin.email') }}</label>
                                    <input
                                        type="email"
                                        class="admin-input"
                                        dir="ltr"
                                        placeholder="lead1@example.com"
                                        x-model="slots[slot].email"
                                        @click.stop
                                    />
                                </div>
                                <div>
                                    <label class="admin-label">{{ __('admin.password') }}</label>
                                    <x-site.password-input
                                        class="admin-input"
                                        dir="ltr"
                                        x-bind:placeholder="slots[slot].email ? '{{ __('admin.lead_account_password_keep') }}' : '{{ __('admin.password') }}'"
                                        x-model="slots[slot].password"
                                        x-on:click.stop
                                    />
                                </div>
                            </div>
                            <label class="mt-4 flex items-start gap-2 text-sm" @click.stop>
                                <input type="checkbox" class="mt-0.5 rounded border-slate-300" x-model="slots[slot].assign_role" />
                                <span>
                                    <span class="font-semibold text-slate-800">{{ __('admin.lead_assign_role') }}</span>
                                    <span class="mt-0.5 block text-xs text-slate-500">{{ __('admin.lead_assign_role_hint') }}</span>
                                </span>
                            </label>
                        </div>

                        <div>
                            <label class="admin-label">{{ __('admin.lead_pick_categories') }}</label>
                            <button
                                type="button"
                                class="mt-1 flex w-full items-center justify-between rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-600 transition hover:border-brand-accent"
                                @click.stop="openCategoryModal(slot)"
                            >
                                <span x-text="slots[slot].categoryIds.length ? (slots[slot].categoryIds.length + ' {{ __('admin.lead_category_count') }}') : '{{ __('admin.lead_category_search') }}'"></span>
                                <x-site.svg-icon name="back" class="h-6 w-6" rotate="-90" />
                            </button>
                        </div>

                        <div x-show="slots[slot].categoryIds.length > 0">
                            <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">{{ __('admin.lead_assigned_categories') }}</p>
                            <div class="flex flex-wrap gap-2">
                                <template x-for="catId in slots[slot].categoryIds" :key="catId">
                                    <span class="lead-settings-chip">
                                        <span x-text="categoryLabel(catId)"></span>
                                        <button type="button" class="lead-settings-chip-remove" @click="removeCategory(slot, catId)" aria-label="{{ __('admin.delete') }}">×</button>
                                    </span>
                                </template>
                            </div>
                        </div>

                        <p
                            x-show="slot === lastSlot() && remainderCount() > 0"
                            class="rounded-xl border border-dashed border-amber-200 bg-amber-50/80 px-4 py-3 text-sm text-amber-900"
                        >
                            <span class="font-semibold" x-text="remainderCount()"></span>
                            {{ __('admin.lead_remainder_hint') }}
                        </p>
                    </div>
                </article>
            </template>
        </div>

        <div
            x-show="categoryModalOpen"
            x-cloak
            class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4 sm:p-8"
            @keydown.escape.window="closeCategoryModal()"
        >
            <div
                class="flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
                @click.outside="closeCategoryModal()"
            >
                <header class="flex items-center justify-between border-b border-slate-100 px-5 py-4 sm:px-6">
                    <div>
                        <h3 class="text-lg font-bold">{{ __('admin.lead_pick_categories') }}</h3>
                        <p class="text-xs text-slate-500" x-show="categoryModalSlot" x-text="slotLabel(categoryModalSlot)"></p>
                    </div>
                    <button type="button" class="rounded-lg p-2 text-slate-400 hover:bg-slate-100" @click="closeCategoryModal()">
                        <x-site.svg-icon name="close" class="h-6 w-6" />
                    </button>
                </header>

                <div class="space-y-4 border-b border-slate-100 px-5 py-4 sm:px-6">
                    <input
                        type="text"
                        class="admin-input"
                        :placeholder="'{{ __('admin.lead_category_search') }}'"
                        x-model="queries[categoryModalSlot]"
                        @input="expandAllParents()"
                    />
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="btn btn-muted text-xs" @click="expandAllParents()">{{ __('admin.lead_expand_all') }}</button>
                        <button type="button" class="btn btn-muted text-xs" @click="collapseAllParents()">{{ __('admin.lead_collapse_all') }}</button>
                    </div>
                </div>

                <div class="flex-1 overflow-y-auto px-5 py-4 sm:px-6 ">
                    <template x-for="parent in filteredTree()" :key="parent.id">
                        <div class="mb-3 overflow-hidden rounded-xl border border-slate-200 scrollbar-thin scrollbar-thumb-slate-300 scrollbar-track-slate-100">
                            <button
                                type="button"
                                class="flex w-full items-center justify-between bg-slate-50 px-4 py-3 text-start text-sm font-semibold"
                                @click="toggleParent(parent.id)"
                            >
                                <span x-text="parent.label"></span>
                                <span class="text-xs text-slate-500" x-text="parent.children.length"></span>
                            </button>
                            <ul x-show="isParentExpanded(parent)" x-collapse class="divide-y divide-slate-100">
                                <template x-for="child in parent.children" :key="child.id">
                                    <li>
                                        <button
                                            type="button"
                                            class="flex w-full px-4 py-3 text-start text-sm hover:bg-brand-accent/5"
                                            @click="addCategory(categoryModalSlot, child)"
                                        >
                                            <span x-text="child.label"></span>
                                        </button>
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </template>
                    <p x-show="filteredTree().length === 0" class="py-8 text-center text-sm text-slate-500">{{ __('admin.lead_category_empty') }}</p>
                </div>

                <footer class="border-t border-slate-100 px-5 py-4 sm:px-6">
                    <x-ui.button type="button" @click="closeCategoryModal()">{{ __('admin.done') }}</x-ui.button>
                </footer>
            </div>
        </div>

        <button
            type="button"
            x-show="canAddSlot()"
            @click="addSlot()"
            class="flex w-full items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-slate-300 bg-white px-4 py-4 text-sm font-semibold text-brand-accent transition hover:border-brand-accent hover:bg-brand-accent/5"
        >
            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-accent text-lg text-white">+</span>
            {{ __('admin.lead_add_responsible') }}
        </button>

        <div class="flex flex-wrap gap-3 border-t border-slate-200 pt-6">
            <x-ui.button type="submit">{{ __('admin.save') }}</x-ui.button>
            <a href="{{ route('admin.dashboard') }}" class="btn btn-muted">{{ __('admin.cancel') }}</a>
        </div>
    </form>
@endsection