@php
    $editando =
        isset($cliente)
        && $cliente;

    $tipoPessoaSelecionado =
        old(
            'tipo_pessoa',
            $cliente
                ->tipo_pessoa
                ?? \App\Models\Cliente::PESSOA_JURIDICA
        );

    $grupoSelecionado =
        old(
            'grupo_cobranca_id',
            $cliente
                ->grupo_cobranca_id
                ?? ''
        );

    $loteAtivo =
        old(
            'cobranca_lote_ativa',
            $cliente
                ->cobranca_lote_ativa
                ?? false
        );
@endphp

<div
    class="
        grid grid-cols-1 gap-6
        xl:grid-cols-3
    "
>
    <div class="space-y-6 xl:col-span-2">
        <x-ui.card
            title="Dados do cliente"
            description="Informações cadastrais da pessoa física ou jurídica."
        >
            <div
                class="
                    grid grid-cols-1 gap-5
                    md:grid-cols-2
                "
            >
                <x-ui.select
                    name="tipo_pessoa"
                    label="Tipo de pessoa"
                    required
                >
                    @foreach (
                        \App\Models\Cliente::TIPOS_PESSOA
                        as $valor => $label
                    )
                        <option
                            value="{{ $valor }}"
                            @selected(
                                $tipoPessoaSelecionado
                                    === $valor
                            )
                        >
                            {{ $label }}
                        </option>
                    @endforeach
                </x-ui.select>

                <div>
                    <x-ui.input
                        name="nome"
                        label="Nome ou razão social"
                        :value="old(
                            'nome',
                            $cliente->nome
                                ?? null
                        )"
                        required
                        maxlength="255"
                    />
                </div>

                <div
                    id="campo-cpf"
                    @class([
                        'md:col-span-1',
                        'hidden' =>
                            $tipoPessoaSelecionado
                            !== \App\Models\Cliente::PESSOA_FISICA,
                    ])
                >
                    <x-ui.input
                        name="cpf"
                        label="CPF"
                        :value="old(
                            'cpf',
                            $cliente->cpf
                                ?? null
                        )"
                        inputmode="numeric"
                        maxlength="14"
                        placeholder="000.000.000-00"
                    />
                </div>

                <div
                    id="campo-cnpj"
                    @class([
                        'md:col-span-1',
                        'hidden' =>
                            $tipoPessoaSelecionado
                            !== \App\Models\Cliente::PESSOA_JURIDICA,
                    ])
                >
                    <x-ui.input
                        name="cnpj"
                        label="CNPJ"
                        :value="old(
                            'cnpj',
                            $cliente->cnpj
                                ?? null
                        )"
                        inputmode="numeric"
                        maxlength="18"
                        placeholder="00.000.000/0000-00"
                    />
                </div>

                <x-ui.input
                    name="telefone"
                    label="Telefone"
                    :value="old(
                        'telefone',
                        $cliente->telefone
                            ?? null
                    )"
                    inputmode="tel"
                    maxlength="15"
                    placeholder="(00) 00000-0000"
                />

                <div class="md:col-span-2">
                    <x-ui.input
                        name="site"
                        label="Site"
                        :value="old(
                            'site',
                            $cliente->site
                                ?? null
                        )"
                        maxlength="255"
                        placeholder="https://empresa.com.br"
                    />
                </div>

                <div class="md:col-span-2">
                    <x-ui.textarea
                        name="endereco"
                        label="Endereço"
                        :value="old(
                            'endereco',
                            $cliente->endereco
                                ?? null
                        )"
                        rows="3"
                        maxlength="2000"
                    />
                </div>
            </div>
        </x-ui.card>

        <x-ui.card
            title="Grupo de cobrança"
            description="Classificação usada nos relatórios e na geração de cobranças em lote."
        >
            <div
                class="
                    grid grid-cols-1 gap-5
                    md:grid-cols-2
                "
            >
                <x-ui.select
                    name="grupo_cobranca_id"
                    label="Grupo"
                    help="O grupo define valor, vencimento e regras financeiras padrão."
                >
                    <option value="">
                        Sem grupo de cobrança
                    </option>

                    @foreach (
                        $gruposCobranca
                        as $grupo
                    )
                        <option
                            value="{{ $grupo->id }}"
                            @selected(
                                (string) $grupoSelecionado
                                    ===
                                (string) $grupo->id
                            )
                        >
                            {{ $grupo->nome }}
                            —
                            {{ $grupo->valor_formatado }}
                            —
                            dia
                            {{ $grupo->dia_vencimento }}

                            @if (!$grupo->ativo)
                                (inativo)
                            @endif
                        </option>
                    @endforeach
                </x-ui.select>

                <div
                    class="
                        flex items-center rounded-2xl
                        border border-slate-200
                        bg-slate-50 p-4
                    "
                >
                    <label
                        class="
                            flex cursor-pointer
                            items-start gap-3
                        "
                    >
                        <input
                            type="checkbox"
                            name="cobranca_lote_ativa"
                            value="1"
                            @checked($loteAtivo)
                            class="
                                mt-1 rounded
                                border-slate-300
                                text-indigo-600
                                focus:ring-indigo-500
                            "
                        >

                        <span>
                            <span
                                class="
                                    block text-sm
                                    font-bold text-slate-800
                                "
                            >
                                Participar da cobrança em lote
                            </span>

                            <span
                                class="
                                    mt-1 block text-xs
                                    leading-5 text-slate-500
                                "
                            >
                                Pode ser pausada sem retirar o cliente do grupo.
                            </span>
                        </span>
                    </label>

                    @error('cobranca_lote_ativa')
                        <p
                            class="
                                mt-3 text-sm font-semibold
                                text-red-600
                            "
                        >
                            {{ $message }}
                        </p>
                    @enderror
                </div>
            </div>

            @if (
                $editando
                && $cliente
                    ->grupoCobranca
            )
                <div
                    class="
                        mt-5 rounded-xl
                        border border-indigo-200
                        bg-indigo-50 p-4
                        text-sm leading-6
                        text-indigo-900
                    "
                >
                    <strong>Regra atual:</strong>
                    {{ $cliente
                        ->grupoCobranca
                        ->valor_formatado
                    }},
                    vencimento no dia
                    {{ $cliente
                        ->grupoCobranca
                        ->dia_vencimento
                    }},
                    {{ $cliente
                        ->grupoCobranca
                        ->forma_pagamento_label
                    }}.
                </div>
            @endif
        </x-ui.card>
    </div>

    <div class="space-y-6">
        <x-ui.card
            title="Responsável e acesso"
            description="Usuário que acessará o portal do cliente."
        >
            <div class="space-y-5">
                <x-ui.input
                    name="responsavel_contrato"
                    label="Responsável pelo contrato"
                    :value="old(
                        'responsavel_contrato',
                        $cliente
                            ->responsavel_contrato
                            ?? null
                    )"
                    required
                    maxlength="255"
                />

                <x-ui.input
                    name="email"
                    type="email"
                    label="E-mail de acesso"
                    :value="old(
                        'email',
                        $cliente
                            ->user
                            ?->email
                            ?? null
                    )"
                    required
                    maxlength="255"
                    autocomplete="email"
                />

                <x-ui.select
                    name="status"
                    label="Status de acesso"
                    required
                >
                    @foreach (
                        $statusDisponiveis
                        as $status
                    )
                        <option
                            value="{{ $status->value }}"
                            @selected(
                                old(
                                    'status',
                                    $cliente
                                        ->user
                                        ?->status
                                        ?->value
                                        ?? \App\Enums\StatusUsuario::ATIVO
                                            ->value
                                ) === $status->value
                            )
                        >
                            {{ $status->label() }}
                        </option>
                    @endforeach
                </x-ui.select>

                <x-ui.input
                    name="password"
                    type="password"
                    label="{{ $editando
                        ? 'Nova senha'
                        : 'Senha inicial'
                    }}"
                    :required="!$editando"
                    autocomplete="new-password"
                    help="{{ $editando
                        ? 'Deixe em branco para manter a senha atual.'
                        : null
                    }}"
                />

                <x-ui.input
                    name="password_confirmation"
                    type="password"
                    label="Confirmar senha"
                    :required="!$editando"
                    autocomplete="new-password"
                />
            </div>
        </x-ui.card>

        <div
            class="
                rounded-2xl border
                border-slate-200 bg-slate-50
                p-5 text-sm leading-6
                text-slate-700
            "
        >
            <strong class="block text-slate-900">
                Como o histórico funciona
            </strong>

            Alterar o grupo atual não muda cobranças antigas. Cada cobrança preserva o grupo usado quando foi criada.
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener(
            'DOMContentLoaded',
            function () {
                const tipoPessoa =
                    document.getElementById(
                        'tipo_pessoa'
                    );

                const campoCpf =
                    document.getElementById(
                        'campo-cpf'
                    );

                const campoCnpj =
                    document.getElementById(
                        'campo-cnpj'
                    );

                const cpf =
                    document.getElementById(
                        'cpf'
                    );

                const cnpj =
                    document.getElementById(
                        'cnpj'
                    );

                const grupo =
                    document.getElementById(
                        'grupo_cobranca_id'
                    );

                const lote =
                    document.querySelector(
                        'input[name="cobranca_lote_ativa"]'
                    );

                const somenteNumeros =
                    function (valor) {
                        return valor.replace(
                            /\D/g,
                            ''
                        );
                    };

                const mascaraCpf =
                    function (valor) {
                        return somenteNumeros(
                            valor
                        )
                            .slice(0, 11)
                            .replace(
                                /(\d{3})(\d)/,
                                '$1.$2'
                            )
                            .replace(
                                /(\d{3})(\d)/,
                                '$1.$2'
                            )
                            .replace(
                                /(\d{3})(\d{1,2})$/,
                                '$1-$2'
                            );
                    };

                const mascaraCnpj =
                    function (valor) {
                        return somenteNumeros(
                            valor
                        )
                            .slice(0, 14)
                            .replace(
                                /^(\d{2})(\d)/,
                                '$1.$2'
                            )
                            .replace(
                                /^(\d{2})\.(\d{3})(\d)/,
                                '$1.$2.$3'
                            )
                            .replace(
                                /\.(\d{3})(\d)/,
                                '.$1/$2'
                            )
                            .replace(
                                /(\d{4})(\d)/,
                                '$1-$2'
                            );
                    };

                const atualizarTipoPessoa =
                    function () {
                        const pessoaFisica =
                            tipoPessoa?.value
                            === 'PF';

                        campoCpf?.classList.toggle(
                            'hidden',
                            !pessoaFisica
                        );

                        campoCnpj?.classList.toggle(
                            'hidden',
                            pessoaFisica
                        );

                        if (cpf) {
                            cpf.disabled =
                                !pessoaFisica;

                            cpf.required =
                                pessoaFisica;
                        }

                        if (cnpj) {
                            cnpj.disabled =
                                pessoaFisica;

                            cnpj.required =
                                !pessoaFisica;
                        }
                    };

                const atualizarGrupo =
                    function () {
                        if (!grupo || !lote) {
                            return;
                        }

                        const possuiGrupo =
                            grupo.value !== '';

                        lote.disabled =
                            !possuiGrupo;

                        if (!possuiGrupo) {
                            lote.checked = false;
                        }
                    };

                cpf?.addEventListener(
                    'input',
                    function () {
                        cpf.value =
                            mascaraCpf(
                                cpf.value
                            );
                    }
                );

                cnpj?.addEventListener(
                    'input',
                    function () {
                        cnpj.value =
                            mascaraCnpj(
                                cnpj.value
                            );
                    }
                );

                tipoPessoa?.addEventListener(
                    'change',
                    atualizarTipoPessoa
                );

                grupo?.addEventListener(
                    'change',
                    atualizarGrupo
                );

                if (cpf?.value) {
                    cpf.value =
                        mascaraCpf(
                            cpf.value
                        );
                }

                if (cnpj?.value) {
                    cnpj.value =
                        mascaraCnpj(
                            cnpj.value
                        );
                }

                atualizarTipoPessoa();
                atualizarGrupo();
            }
        );
    </script>
@endpush