@php
    $planos = $planos ?? collect();
    $oldStep = (int) old('contratacao_step', 1);

    if ($errors->has('plano_id')) {
        $oldStep = 2;
    }

    if ($errors->has('forma_pagamento') || $errors->has('dependentes') || $errors->has('dependentes.*')) {
        $oldStep = 3;
    }

    $hasErrors = $errors->any();
    $shouldOpen = $hasErrors || request('contratacao') === 'sucesso' || session('contratacao_success');
@endphp

<div
    id="contratacao-modal"
    class="fixed inset-0 z-[100] hidden items-end justify-center bg-[#171d19]/60 p-0 backdrop-blur-sm sm:items-center sm:p-4"
    data-open="{{ $shouldOpen ? 'true' : 'false' }}"
    data-initial-step="{{ $hasErrors ? $oldStep : 1 }}"
    data-success="{{ session('contratacao_success') ? 'true' : 'false' }}"
    aria-hidden="true"
>
    <div class="relative flex max-h-[96vh] w-full max-w-2xl flex-col overflow-hidden rounded-t-[2rem] bg-white shadow-2xl sm:rounded-[2rem]" role="dialog" aria-modal="true" aria-labelledby="contratacao-modal-title">
        <div class="flex items-start justify-between border-b border-[#e9efe9] px-6 py-5 sm:px-8">
            <div>
                <p class="text-[10px] font-bold uppercase tracking-[0.24em] text-[#006948]">Contratação digital</p>
                <h2 id="contratacao-modal-title" class="mt-1 text-xl font-extrabold text-[#171d19] sm:text-2xl">Garantir minha proteção</h2>
                <p class="mt-1 text-sm text-[#68827f]">Complete os passos abaixo para iniciar sua adesão ao plano.</p>
            </div>
            <button type="button" data-contratacao-close class="rounded-xl p-2 text-[#68827f] transition hover:bg-[#f5fbf5] hover:text-[#171d19]" aria-label="Fechar">
                <i class="ph ph-x text-xl" aria-hidden="true"></i>
            </button>
        </div>

        <div id="contratacao-steps" class="border-b border-[#e9efe9] px-6 py-4 sm:px-8">
            <ol class="grid grid-cols-3 gap-2">
                @foreach ([1 => 'Dados pessoais', 2 => 'Plano', 3 => 'Pagamento'] as $step => $label)
                    <li
                        data-contratacao-step-indicator="{{ $step }}"
                        class="flex items-center gap-2 rounded-xl px-2 py-2 text-xs font-bold text-[#68827f] sm:px-3 sm:text-sm"
                    >
                        <span data-contratacao-step-badge="{{ $step }}" class="flex size-7 shrink-0 items-center justify-center rounded-full border border-[#dde4e3] bg-white text-[11px] font-extrabold">{{ $step }}</span>
                        <span class="hidden sm:inline">{{ $label }}</span>
                    </li>
                @endforeach
            </ol>
        </div>

        <div id="contratacao-success" class="hidden flex-1 overflow-y-auto px-6 py-8 sm:px-8">
            <div class="mx-auto max-w-md text-center">
                <span class="mx-auto flex size-16 items-center justify-center rounded-full bg-[#006948]/10 text-[#006948]">
                    <i class="ph ph-check-circle text-4xl" aria-hidden="true"></i>
                </span>
                <h3 class="mt-6 text-2xl font-extrabold text-[#171d19]">Solicitação enviada!</h3>
                <p id="contratacao-success-message" class="mt-3 text-sm leading-6 text-[#68827f]">
                    {{ session('contratacao_success') ?? 'Recebemos sua solicitação. Em breve entraremos em contato com os próximos passos.' }}
                </p>
                <button type="button" data-contratacao-close class="mt-8 inline-flex w-full items-center justify-center rounded-2xl bg-[#006948] px-6 py-4 text-sm font-bold text-white transition hover:-translate-y-0.5">
                    Fechar
                </button>
            </div>
        </div>

        <form
            id="contratacao-form"
            action="{{ route('landing.pf.contratacao') }}"
            method="post"
            class="flex min-h-0 flex-1 flex-col"
            novalidate
        >
            @csrf
            <input type="hidden" name="contratacao_step" id="contratacao-step-input" value="{{ $oldStep }}">

            <div class="min-h-0 flex-1 overflow-y-auto px-6 py-6 sm:px-8">
                @if ($errors->any())
                    <div class="mb-5 rounded-2xl border border-red-100 bg-red-50 px-4 py-3 text-sm text-red-700">
                        <p class="font-bold">Revise os campos destacados abaixo.</p>
                    </div>
                @endif

                {{-- Passo 1 --}}
                <div data-contratacao-panel="1" class="space-y-4">
                    <div>
                        <h3 class="text-lg font-extrabold text-[#171d19]">Seus dados</h3>
                        <p class="mt-1 text-sm text-[#68827f]">Informações para contato e localização.</p>
                    </div>

                    <label class="block">
                        <span class="mb-2 block text-sm font-bold">Nome completo</span>
                        <input name="nome" type="text" value="{{ old('nome') }}" required autocomplete="name" class="@error('nome') border-red-300 @enderror w-full rounded-xl border border-[#dde4e3] px-4 py-3 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20">
                        @error('nome')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </label>

                    <label class="block">
                        <span class="mb-2 block text-sm font-bold">E-mail</span>
                        <input name="email" type="email" value="{{ old('email') }}" required autocomplete="email" class="@error('email') border-red-300 @enderror w-full rounded-xl border border-[#dde4e3] px-4 py-3 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20">
                        @error('email')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </label>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <label class="block">
                            <span class="mb-2 block text-sm font-bold">Telefone</span>
                            <input name="telefone" type="tel" value="{{ old('telefone') }}" required inputmode="tel" data-mask="phone" autocomplete="tel" class="@error('telefone') border-red-300 @enderror w-full rounded-xl border border-[#dde4e3] px-4 py-3 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20">
                            @error('telefone')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                        </label>
                        <label class="block">
                            <span class="mb-2 block text-sm font-bold">CPF</span>
                            <input name="cpf" type="text" value="{{ old('cpf') }}" required inputmode="numeric" data-mask="cpf" class="@error('cpf') border-red-300 @enderror w-full rounded-xl border border-[#dde4e3] px-4 py-3 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20">
                            @error('cpf')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                        </label>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <label class="block">
                            <span class="mb-2 block text-sm font-bold">Estado</span>
                            <select name="uf" data-address-group="contratacao" data-address-field="uf" data-value="{{ old('uf') }}" required class="@error('uf') border-red-300 @enderror w-full rounded-xl border border-[#dde4e3] bg-white px-4 py-3 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20"></select>
                            @error('uf')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                        </label>
                        <label class="block">
                            <span class="mb-2 block text-sm font-bold">Cidade</span>
                            <select name="cidade" data-address-group="contratacao" data-address-field="cidade" data-value="{{ old('cidade') }}" required class="@error('cidade') border-red-300 @enderror w-full rounded-xl border border-[#dde4e3] bg-white px-4 py-3 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20"></select>
                            @error('cidade')<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                        </label>
                    </div>
                </div>

                {{-- Passo 2 --}}
                <div data-contratacao-panel="2" class="hidden space-y-4">
                    <div>
                        <h3 class="text-lg font-extrabold text-[#171d19]">Escolha seu plano</h3>
                        <p class="mt-1 text-sm text-[#68827f]">Selecione a proteção ideal para você e sua família.</p>
                    </div>

                    @if ($planos->isEmpty())
                        <p class="rounded-2xl border border-dashed border-[#dde4e3] px-4 py-8 text-center text-sm text-[#68827f]">Nenhum plano disponível no momento. Entre em contato conosco.</p>
                    @else
                        <div class="grid gap-3">
                            @foreach ($planos as $plano)
                                <label class="group block cursor-pointer">
                                    <input
                                        type="radio"
                                        name="plano_id"
                                        value="{{ $plano->id }}"
                                        @checked((string) old('plano_id') === (string) $plano->id)
                                        class="peer sr-only"
                                        data-plano-valor="{{ $plano->valor_mensal }}"
                                        data-plano-nome="{{ $plano->nome }}"
                                    >
                                    <div class="rounded-2xl border border-[#dde4e3] p-5 transition peer-checked:border-[#006948] peer-checked:bg-[#006948]/5 peer-checked:shadow-md group-hover:border-[#006948]/40">
                                        <div class="flex items-start justify-between gap-4">
                                            <div>
                                                <p class="font-extrabold text-[#171d19]">{{ $plano->nome }}</p>
                                                @if ($plano->descricao)
                                                    <p class="mt-1 text-sm text-[#68827f]">{{ $plano->descricao }}</p>
                                                @endif
                                                <span class="mt-2 inline-flex rounded-full bg-[#e9efe9] px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-[#006948]">{{ $plano->tipo === 'ambos' ? 'Individual e familiar' : 'Individual' }}</span>
                                            </div>
                                            <div class="text-right">
                                                <p class="text-2xl font-extrabold text-[#006948]">R$ {{ number_format($plano->valor_mensal, 2, ',', '.') }}</p>
                                                <p class="text-xs text-[#68827f]">/mês</p>
                                            </div>
                                        </div>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                        @error('plano_id')<p class="text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    @endif
                </div>

                {{-- Passo 3 --}}
                <div data-contratacao-panel="3" class="hidden space-y-5">
                    <div>
                        <h3 class="text-lg font-extrabold text-[#171d19]">Pagamento e dependentes</h3>
                        <p class="mt-1 text-sm text-[#68827f]">Escolha a forma de pagamento e inclua dependentes, se desejar.</p>
                    </div>

                    <div id="contratacao-resumo" class="rounded-2xl border border-[#006948]/20 bg-[#006948]/5 p-4">
                        <p class="text-xs font-bold uppercase tracking-wide text-[#006948]">Resumo</p>
                        <p id="contratacao-resumo-plano" class="mt-1 font-extrabold text-[#171d19]">—</p>
                        <p id="contratacao-resumo-valor" class="mt-1 text-sm text-[#68827f]">Selecione um plano no passo anterior.</p>
                    </div>

                    <div>
                        <p class="mb-3 text-sm font-bold text-[#171d19]">Forma de pagamento</p>
                        <div class="grid gap-3 sm:grid-cols-3">
                            @foreach ([
                                'pix_recorrente' => ['label' => 'PIX recorrente', 'icon' => 'qr-code'],
                                'boleto_recorrente' => ['label' => 'Boleto recorrente', 'icon' => 'barcode'],
                                'cartao_credito' => ['label' => 'Cartão de crédito', 'icon' => 'credit-card'],
                            ] as $value => $option)
                                <label class="block cursor-pointer">
                                    <input type="radio" name="forma_pagamento" value="{{ $value }}" @checked(old('forma_pagamento') === $value) class="peer sr-only">
                                    <div class="flex h-full flex-col items-center justify-center rounded-2xl border border-[#dde4e3] px-3 py-4 text-center transition peer-checked:border-[#006948] peer-checked:bg-[#006948]/5">
                                        <i class="ph ph-{{ $option['icon'] }} text-2xl text-[#006948]" aria-hidden="true"></i>
                                        <span class="mt-2 text-xs font-bold text-[#171d19]">{{ $option['label'] }}</span>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                        @error('forma_pagamento')<p class="mt-2 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <div class="mb-3 flex items-center justify-between gap-3">
                            <div>
                                <p class="text-sm font-bold text-[#171d19]">Dependentes</p>
                                <p class="text-xs text-[#68827f]">Inclua familiares no plano (mesmo valor do plano com 15% de desconto).</p>
                            </div>
                            <button type="button" id="contratacao-add-dependente" class="inline-flex items-center gap-1 rounded-xl border border-[#006948]/30 px-3 py-2 text-xs font-bold text-[#006948] transition hover:bg-[#006948]/5">
                                <i class="ph ph-plus" aria-hidden="true"></i>
                                Adicionar
                            </button>
                        </div>
                        <div id="contratacao-dependentes" class="space-y-3"></div>
                        <template id="contratacao-dependente-template">
                            <div data-dependente-item class="rounded-2xl border border-[#dde4e3] p-4">
                                <div class="mb-3 flex items-center justify-between">
                                    <p class="text-sm font-bold text-[#171d19]">Dependente <span data-dependente-index></span></p>
                                    <button type="button" data-dependente-remove class="rounded-lg p-1.5 text-[#68827f] transition hover:bg-red-50 hover:text-red-600" aria-label="Remover dependente">
                                        <i class="ph ph-trash text-lg" aria-hidden="true"></i>
                                    </button>
                                </div>
                                <div class="grid gap-3 sm:grid-cols-2">
                                    <label class="block sm:col-span-2">
                                        <span class="mb-1 block text-xs font-bold text-[#68827f]">Nome completo</span>
                                        <input type="text" data-dependente-nome class="w-full rounded-xl border border-[#dde4e3] px-3 py-2.5 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20">
                                    </label>
                                    <label class="block">
                                        <span class="mb-1 block text-xs font-bold text-[#68827f]">CPF</span>
                                        <input type="text" inputmode="numeric" data-mask="cpf" data-dependente-cpf class="w-full rounded-xl border border-[#dde4e3] px-3 py-2.5 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20">
                                    </label>
                                    <label class="block">
                                        <span class="mb-1 block text-xs font-bold text-[#68827f]">Parentesco</span>
                                        <select data-dependente-parentesco class="w-full rounded-xl border border-[#dde4e3] bg-white px-3 py-2.5 text-sm focus:border-[#006948] focus:ring-2 focus:ring-[#006948]/20">
                                            <option value="">Selecione</option>
                                            <option value="conjuge">Cônjuge</option>
                                            <option value="filho">Filho(a)</option>
                                            <option value="pai">Pai/Mãe</option>
                                            <option value="outro">Outro</option>
                                        </select>
                                    </label>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <div id="contratacao-actions" class="flex flex-col-reverse gap-3 border-t border-[#e9efe9] px-6 py-4 sm:flex-row sm:justify-between sm:px-8">
                <button type="button" id="contratacao-back" class="hidden rounded-2xl border border-[#dde4e3] px-6 py-3.5 text-sm font-bold text-[#68827f] transition hover:bg-[#f5fbf5]">
                    Voltar
                </button>
                <div class="flex flex-1 flex-col gap-3 sm:flex-row sm:justify-end">
                    <button type="button" id="contratacao-next" class="rounded-2xl bg-[#006948] px-6 py-3.5 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5">
                        Continuar
                    </button>
                    <button type="submit" id="contratacao-submit" class="hidden rounded-2xl bg-[#006948] px-6 py-3.5 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5">
                        Finalizar contratação
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>