@php
    $contrato = $contrato ?? null;
    $editando = $contrato !== null;

    $clienteAtual = old(
        'cliente_id',
        $contrato?->cliente_id
            ?? $clienteSelecionado?->id
            ?? null
    );

    $statusAtual = old(
        'status',
        $contrato?->status ?? 'Rascunho'
    );

    $indiceAtual = old(
        'indice_reajuste',
        $contrato?->indice_reajuste
            ?? 'Percentual fixo'
    );

    $valorMensal = old(
        'valor_mensal',
        $contrato
            ? number_format(
                (float) $contrato->valor_mensal,
                2,
                ',',
                '.'
            )
            : null
    );

    $percentualReajuste = old(
        'percentual_reajuste_anual',
        $contrato
            ? number_format(
                (float) $contrato->percentual_reajuste_anual,
                2,
                ',',
                '.'
            )
            : '0,00'
    );

    $renovacaoAutomatica = old(
        'renovacao_automatica',
        $contrato?->renovacao_automatica ?? false
    );
@endphp

@if ($errors->any())
    <div class="ui-alert ui-alert-error">
        <div>
            <div class="font-semibold">
                Verifique os dados informados
            </div>

            <ul class="mt-2 list-inside list-disc space-y-1">
                @foreach ($errors->all() as $erro)
                    <li>{{ $erro }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<div class="space-y-6">
    {{-- Identificação --}}
    <x-ui.card
        title="Identificação do contrato"
        description="Informe o cliente e os dados principais do documento."
    >
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <div class="md:col-span-2">
                <x-ui.select
                    name="cliente_id"
                    label="Cliente"
                    required
                >
                    <option value="">
                        Selecione o cliente
                    </option>

                    @foreach ($clientes as $cliente)
                        <option
                            value="{{ $cliente->id }}"
                            @selected(
                                (string) $clienteAtual ===
                                (string) $cliente->id
                            )
                        >
                            {{ $cliente->nome }}
                            —
                            {{ $cliente->cnpj_formatado }}
                        </option>
                    @endforeach
                </x-ui.select>
            </div>

            <x-ui.input
                name="numero"
                label="Número do contrato"
                :value="$contrato?->numero"
                required
                placeholder="Ex.: CT-2026-001"
            />

            <x-ui.select
                name="status"
                label="Status"
                required
            >
                @foreach ($statusDisponiveis as $status)
                    <option
                        value="{{ $status }}"
                        @selected($statusAtual === $status)
                    >
                        {{ $status }}
                    </option>
                @endforeach
            </x-ui.select>

            <div class="md:col-span-2">
                <x-ui.input
                    name="titulo"
                    label="Título do contrato"
                    :value="$contrato?->titulo"
                    required
                    placeholder="Ex.: Prestação de serviços de suporte técnico"
                />
            </div>

            <div class="md:col-span-2">
                <x-ui.textarea
                    name="descricao_servicos"
                    label="Descrição dos serviços"
                    :value="$contrato?->descricao_servicos"
                    rows="5"
                    placeholder="Descreva resumidamente os serviços cobertos pelo contrato."
                />
            </div>
        </div>
    </x-ui.card>

    {{-- Valores e cobrança --}}
    <x-ui.card
        title="Valores e cobrança"
        description="Defina o valor mensal, vencimento e regra de reajuste."
    >
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
            <x-ui.input
                name="valor_mensal"
                label="Valor mensal"
                type="text"
                :value="$valorMensal"
                required
                inputmode="decimal"
                placeholder="0,00"
            />

            <x-ui.input
                name="dia_vencimento"
                label="Dia de vencimento"
                type="number"
                :value="$contrato?->dia_vencimento ?? 10"
                required
                min="1"
                max="28"
                placeholder="10"
                help="Utilizamos até o dia 28 para evitar problemas em fevereiro."
            />

            <x-ui.select
                name="indice_reajuste"
                label="Índice de reajuste"
                required
            >
                @foreach ($indicesReajuste as $indice)
                    <option
                        value="{{ $indice }}"
                        @selected($indiceAtual === $indice)
                    >
                        {{ $indice }}
                    </option>
                @endforeach
            </x-ui.select>

            <x-ui.input
                name="percentual_reajuste_anual"
                label="Percentual previsto"
                type="text"
                :value="$percentualReajuste"
                required
                inputmode="decimal"
                placeholder="0,00"
                help="Informe somente o número, sem o símbolo de porcentagem."
            />
        </div>
    </x-ui.card>

    {{-- Estrutura atendida --}}
    <x-ui.card
        title="Estrutura atendida"
        description="Campos opcionais para registrar a capacidade coberta pelo contrato."
    >
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <x-ui.input
                name="quantidade_servidores"
                label="Quantidade de servidores"
                type="number"
                :value="$contrato?->quantidade_servidores"
                min="0"
                step="1"
                placeholder="Ex.: 3"
            />

            <x-ui.input
                name="quantidade_estacoes"
                label="Quantidade de estações"
                type="number"
                :value="$contrato?->quantidade_estacoes"
                min="0"
                step="1"
                placeholder="Ex.: 50"
            />
        </div>
    </x-ui.card>

    {{-- Vigência --}}
    <x-ui.card
        title="Vigência"
        description="Informe as datas de assinatura, início e encerramento."
    >
        <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
            <x-ui.input
                name="data_assinatura"
                label="Data da assinatura"
                type="date"
                :value="$contrato?->data_assinatura?->format('Y-m-d')"
                required
            />

            <x-ui.input
                name="data_inicio_vigencia"
                label="Início da vigência"
                type="date"
                :value="$contrato?->data_inicio_vigencia?->format('Y-m-d')"
                required
            />

            <x-ui.input
                name="data_encerramento"
                label="Data de encerramento"
                type="date"
                :value="$contrato?->data_encerramento?->format('Y-m-d')"
                required
            />
        </div>

        <div class="mt-6 grid grid-cols-1 gap-5 md:grid-cols-2">
            <x-ui.input
                name="dias_aviso_vencimento"
                label="Avisar com quantos dias de antecedência?"
                type="number"
                :value="$contrato?->dias_aviso_vencimento ?? 90"
                required
                min="1"
                max="365"
                placeholder="90"
            />

            <div>
                <label class="ui-label">
                    Renovação automática
                </label>

                <label
                    class="
                        flex min-h-[46px] cursor-pointer
                        items-center gap-3 rounded-xl
                        border border-slate-300 bg-white
                        px-4 py-3 transition
                        hover:border-indigo-300
                        hover:bg-indigo-50/40
                    "
                >
                    <input
                        type="checkbox"
                        name="renovacao_automatica"
                        value="1"
                        @checked($renovacaoAutomatica)
                        class="
                            h-4 w-4 rounded border-slate-300
                            text-indigo-600
                            focus:ring-indigo-500
                        "
                    >

                    <span>
                        <span class="block text-sm font-semibold text-slate-800">
                            Renovar automaticamente
                        </span>

                        <span class="mt-0.5 block text-xs text-slate-500">
                            Marque quando o contrato possuir cláusula de renovação automática.
                        </span>
                    </span>
                </label>
            </div>
        </div>
    </x-ui.card>

    {{-- Documento --}}
    <x-ui.card
        title="Documento do contrato"
        description="O PDF é opcional e será armazenado de forma privada."
    >
        @if ($editando && $contrato->arquivo_pdf)
            <div
                class="
                    mb-5 rounded-2xl border
                    border-emerald-200 bg-emerald-50 p-4
                "
            >
                <div
                    class="
                        flex flex-col gap-4
                        sm:flex-row sm:items-center
                        sm:justify-between
                    "
                >
                    <div class="flex items-center gap-3">
                        <div
                            class="
                                flex h-11 w-11 flex-shrink-0
                                items-center justify-center
                                rounded-xl bg-emerald-100
                                text-emerald-600
                            "
                        >
                            <svg
                                class="h-6 w-6"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="1.8"
                                    d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5A3.375 3.375 0 0 0 10.125 2.25H6.75A2.25 2.25 0 0 0 4.5 4.5v15a2.25 2.25 0 0 0 2.25 2.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-5.25Z"
                                />
                            </svg>
                        </div>

                        <div>
                            <div class="font-semibold text-emerald-900">
                                PDF cadastrado
                            </div>

                            <div class="mt-1 text-sm text-emerald-700">
                                Você pode baixar, substituir ou remover o documento.
                            </div>
                        </div>
                    </div>

                    <x-ui.button
                        :href="route(
                            'admin.contratos.download',
                            $contrato
                        )"
                        variant="secondary"
                        size="sm"
                    >
                        Baixar PDF
                    </x-ui.button>
                </div>

                <label
                    class="
                        mt-4 flex cursor-pointer
                        items-center gap-2 text-sm
                        font-medium text-red-700
                    "
                >
                    <input
                        type="checkbox"
                        name="remover_pdf"
                        value="1"
                        @checked(old('remover_pdf'))
                        class="
                            h-4 w-4 rounded border-red-300
                            text-red-600 focus:ring-red-500
                        "
                    >

                    Remover o PDF atual ao salvar
                </label>
            </div>
        @endif

        <div>
            <label
                for="arquivo_pdf"
                class="ui-label"
            >
                {{ $editando && $contrato->arquivo_pdf
                    ? 'Substituir PDF'
                    : 'Arquivo PDF'
                }}
            </label>

            <input
                type="file"
                name="arquivo_pdf"
                id="arquivo_pdf"
                accept="application/pdf,.pdf"
                class="
                    block w-full rounded-xl
                    border border-slate-300 bg-white
                    px-4 py-3 text-sm text-slate-700
                    file:mr-4 file:rounded-lg
                    file:border-0 file:bg-indigo-50
                    file:px-4 file:py-2
                    file:text-sm file:font-semibold
                    file:text-indigo-700
                    hover:file:bg-indigo-100
                    focus:border-indigo-500
                    focus:outline-none
                    focus:ring-2
                    focus:ring-indigo-500/20
                "
            >

            @error('arquivo_pdf')
                <p class="ui-field-error">
                    {{ $message }}
                </p>
            @enderror

            <p class="ui-field-help">
                Somente arquivos PDF com no máximo 10 MB.
            </p>
        </div>
    </x-ui.card>

    {{-- Observações --}}
    <x-ui.card
        title="Observações internas"
        description="Essas informações poderão ser usadas pela equipe para acompanhamento."
    >
        <x-ui.textarea
            name="observacoes"
            label="Observações"
            :value="$contrato?->observacoes"
            rows="5"
            placeholder="Informe condições especiais, acordos, exceções ou observações importantes."
        />
    </x-ui.card>
</div>