@php
    $assinatura =
        $assinatura
        ?? null;

    $clienteAtual =
        old(
            'cliente_id',
            $assinatura?->cliente_id
            ?? $clienteSelecionado
            ?? ''
        );

    $contratoAtual =
        old(
            'contrato_id',
            $assinatura?->contrato_id
            ?? $contratoSelecionado
            ?? ''
        );

    $valorAtual =
        old(
            'valor',
            $assinatura
                ? number_format(
                    (float) $assinatura->valor,
                    2,
                    ',',
                    '.'
                )
                : ''
        );

    $multaAtual =
        old(
            'multa_percentual',
            $assinatura
                ? number_format(
                    (float) $assinatura
                        ->multa_percentual,
                    2,
                    ',',
                    '.'
                )
                : '0,00'
        );

    $jurosAtual =
        old(
            'juros_mora_percentual',
            $assinatura
                ? number_format(
                    (float) $assinatura
                        ->juros_mora_percentual,
                    4,
                    ',',
                    '.'
                )
                : '0,0000'
        );

    $descontoAtual =
        old(
            'desconto_valor',
            $assinatura
                ? number_format(
                    (float) $assinatura
                        ->desconto_valor,
                    2,
                    ',',
                    '.'
                )
                : '0,00'
        );

    $vinculadaAsaas =
        filled(
            $assinatura?->gateway_subscription_id
        );
@endphp

<div class="space-y-6">
    <x-ui.card
        title="Vínculo da assinatura"
        description="Selecione o cliente e, opcionalmente, o contrato relacionado."
    >
        <div
            class="
                grid grid-cols-1 gap-5
                lg:grid-cols-2
            "
        >
            @if ($vinculadaAsaas)
                <input
                    type="hidden"
                    name="cliente_id"
                    value="{{ $assinatura->cliente_id }}"
                >
            @endif

            <x-ui.select
                name="cliente_id"
                label="Cliente"
                required
                :disabled="$vinculadaAsaas"
                help="{{ $vinculadaAsaas
                    ? 'O cliente não pode ser alterado depois da ativação no Asaas.'
                    : null
                }}"
            >
                <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>

            <x-ui.select
                name="contrato_id"
                label="Contrato relacionado"
                help="O contrato é opcional, mas ajuda na organização e conciliação."
            >
                <option value="">
                    Sem contrato relacionado
                </option>

                @foreach ($contratos as $contrato)
                    <option
                        value="{{ $contrato->id }}"
                        data-cliente-id="{{ $contrato->cliente_id }}"
                        @selected(
                            (string) $contratoAtual ===
                                (string) $contrato->id
                        )
                    >
                        {{ $contrato->numero }}
                        — {{ $contrato->titulo }}
                        — {{ $contrato->cliente->nome }}
                    </option>
                @endforeach
            </x-ui.select>
        </div>
    </x-ui.card>

    <x-ui.card
        title="Configuração da recorrência"
        description="Defina valor, periodicidade e primeira data de vencimento."
    >
        <div
            class="
                grid grid-cols-1 gap-5
                md:grid-cols-2
            "
        >
            <div class="md:col-span-2">
                <x-ui.textarea
                    name="descricao"
                    label="Descrição"
                    :value="old(
                        'descricao',
                        $assinatura?->descricao
                    )"
                    :rows="3"
                    required
                    help="A descrição será utilizada nas cobranças geradas pelo Asaas."
                />
            </div>

            <x-ui.input
                name="valor"
                label="Valor recorrente"
                :value="$valorAtual"
                required
                inputmode="decimal"
                placeholder="0,00"
            />

            <x-ui.select
                name="ciclo"
                label="Periodicidade"
                required
            >
                @foreach ($ciclos as $valor => $label)
                    <option
                        value="{{ $valor }}"
                        @selected(
                            old(
                                'ciclo',
                                $assinatura?->ciclo
                                ?? 'MONTHLY'
                            ) === $valor
                        )
                    >
                        {{ $label }}
                    </option>
                @endforeach
            </x-ui.select>

            <x-ui.select
                name="forma_pagamento"
                label="Forma de pagamento"
                required
                help="Cliente escolhe permite que o pagador selecione entre os meios habilitados no Asaas."
            >
                @foreach (
                    $formasPagamento
                    as $valor => $label
                )
                    <option
                        value="{{ $valor }}"
                        @selected(
                            old(
                                'forma_pagamento',
                                $assinatura
                                    ?->forma_pagamento
                                ?? 'UNDEFINED'
                            ) === $valor
                        )
                    >
                        {{ $label }}
                    </option>
                @endforeach
            </x-ui.select>

            <x-ui.input
                name="proximo_vencimento"
                type="date"
                label="{{ $vinculadaAsaas
                    ? 'Próximo vencimento'
                    : 'Primeiro vencimento'
                }}"
                :value="old(
                    'proximo_vencimento',
                    $assinatura
                        ?->proximo_vencimento
                        ?->format('Y-m-d')
                    ?? today()->addDays(5)
                        ->format('Y-m-d')
                )"
                required
                help="{{ $vinculadaAsaas
                    ? 'A alteração afeta a próxima cobrança ainda não gerada.'
                    : 'A primeira cobrança recorrente utilizará esta data.'
                }}"
            />

            <x-ui.input
                name="data_encerramento"
                type="date"
                label="Data final da recorrência"
                :value="old(
                    'data_encerramento',
                    $assinatura
                        ?->data_encerramento
                        ?->format('Y-m-d')
                )"
                help="Opcional. Após essa data, novas cobranças não serão geradas."
            />

            <x-ui.input
                name="maximo_cobrancas"
                type="number"
                label="Máximo de cobranças"
                :value="old(
                    'maximo_cobrancas',
                    $assinatura
                        ?->maximo_cobrancas
                )"
                min="1"
                max="10000"
                help="Opcional. Limita a quantidade total de cobranças da recorrência."
            />
        </div>
    </x-ui.card>

    <x-ui.card
        title="Condições financeiras"
        description="Essas condições serão aplicadas às cobranças recorrentes."
    >
        <div
            class="
                grid grid-cols-1 gap-5
                sm:grid-cols-2 xl:grid-cols-4
            "
        >
            <x-ui.input
                name="multa_percentual"
                label="Multa (%)"
                :value="$multaAtual"
                required
                inputmode="decimal"
            />

            <x-ui.input
                name="juros_mora_percentual"
                label="Juros ao mês (%)"
                :value="$jurosAtual"
                required
                inputmode="decimal"
            />

            <x-ui.input
                name="desconto_valor"
                label="Desconto fixo"
                :value="$descontoAtual"
                required
                inputmode="decimal"
            />

            <x-ui.input
                name="dias_limite_desconto"
                type="number"
                label="Dias limite do desconto"
                :value="old(
                    'dias_limite_desconto',
                    $assinatura
                        ?->dias_limite_desconto
                    ?? 0
                )"
                min="0"
                max="365"
                required
            />
        </div>
    </x-ui.card>

    <x-ui.card title="Observações internas">
        <x-ui.textarea
            name="observacoes"
            label="Observações"
            :value="old(
                'observacoes',
                $assinatura?->observacoes
            )"
            :rows="4"
            help="Este conteúdo não será enviado ao Asaas."
        />
    </x-ui.card>

    @if ($vinculadaAsaas)
        <x-ui.card
            title="Atualização das cobranças pendentes"
            description="Por padrão, alterações afetam somente as próximas cobranças ainda não geradas."
        >
            <label
                class="
                    flex cursor-pointer items-start gap-3
                    rounded-2xl border border-amber-200
                    bg-amber-50 p-4
                "
            >
                <input
                    type="checkbox"
                    name="atualizar_cobrancas_pendentes"
                    value="1"
                    @checked(
                        old(
                            'atualizar_cobrancas_pendentes'
                        )
                    )
                    class="
                        mt-1 rounded border-amber-300
                        text-amber-600
                        focus:ring-amber-500
                    "
                >

                <span>
                    <span
                        class="
                            block font-semibold
                            text-amber-950
                        "
                    >
                        Aplicar também às cobranças pendentes
                    </span>

                    <span
                        class="
                            mt-1 block text-sm
                            leading-6 text-amber-800
                        "
                    >
                        Marque somente quando desejar alterar,
                        no Asaas, as cobranças pendentes que já
                        foram geradas por esta assinatura.
                    </span>
                </span>
            </label>
        </x-ui.card>
    @endif
</div>

@push('scripts')
    <script>
        document.addEventListener(
            'DOMContentLoaded',
            () => {
                const cliente =
                    document.getElementById(
                        'cliente_id'
                    );

                const contrato =
                    document.getElementById(
                        'contrato_id'
                    );

                if (!cliente || !contrato) {
                    return;
                }

                const filtrarContratos = () => {
                    const clienteId =
                        cliente.value;

                    Array.from(
                        contrato.options
                    ).forEach((option) => {
                        if (!option.value) {
                            option.hidden = false;
                            return;
                        }

                        const pertence =
                            !clienteId
                            || option.dataset
                                .clienteId ===
                                clienteId;

                        option.hidden =
                            !pertence;

                        if (
                            option.selected
                            && !pertence
                        ) {
                            contrato.value = '';
                        }
                    });
                };

                cliente.addEventListener(
                    'change',
                    filtrarContratos
                );

                filtrarContratos();
            }
        );
    </script>
@endpush