@php
    $titulo =
        $titulo
        ?? 'Cobranças';

    $descricao =
        $descricao
        ?? null;

    $cobrancas =
        $cobrancas
        ?? collect();

    $tipoData =
        $tipoData
        ?? 'vencimento';

    $mensagemVazia =
        $mensagemVazia
        ?? 'Nenhuma cobrança encontrada.';

    $rotaTodos =
        $rotaTodos
        ?? route(
            'admin.cobrancas.index'
        );
@endphp

<x-ui.card
    :title="$titulo"
    :description="$descricao"
    :padding="false"
>
    <x-slot name="actions">
        <a
            href="{{ $rotaTodos }}"
            class="
                inline-flex items-center gap-1
                text-sm font-semibold text-indigo-600
                transition hover:text-indigo-800
            "
        >
            Ver todas

            <svg
                class="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="m9 18 6-6-6-6"
                />
            </svg>
        </a>
    </x-slot>

    @if ($cobrancas->isEmpty())
        <div
            class="
                flex min-h-48 flex-col items-center
                justify-center px-6 py-10 text-center
            "
        >
            <div
                class="
                    flex h-12 w-12 items-center
                    justify-center rounded-2xl
                    bg-slate-100 text-slate-400
                "
            >
                <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="M9 14.25 11.25 16.5 15 12.75m-8.25 7.5h10.5A2.25 2.25 0 0 0 19.5 18V6A2.25 2.25 0 0 0 17.25 3.75H6.75A2.25 2.25 0 0 0 4.5 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
                    />
                </svg>
            </div>

            <p
                class="
                    mt-4 text-sm font-semibold
                    text-slate-700
                "
            >
                {{ $mensagemVazia }}
            </p>
        </div>
    @else
        <div class="divide-y divide-slate-100">
            @foreach ($cobrancas as $cobranca)
                <a
                    href="{{ route(
                        'admin.cobrancas.show',
                        $cobranca
                    ) }}"
                    class="
                        group flex flex-col gap-4 px-5 py-4
                        transition hover:bg-slate-50
                        sm:flex-row sm:items-center
                        sm:justify-between
                    "
                >
                    <div
                        class="
                            flex min-w-0 items-start gap-3
                        "
                    >
                        <div
                            @class([
                                'mt-0.5 flex h-10 w-10 flex-shrink-0',
                                'items-center justify-center rounded-xl',
                                'bg-emerald-100 text-emerald-600' =>
                                    $cobranca->status_variant ===
                                        'success',
                                'bg-red-100 text-red-600' =>
                                    $cobranca->status_variant ===
                                        'danger',
                                'bg-amber-100 text-amber-600' =>
                                    $cobranca->status_variant ===
                                        'warning',
                                'bg-sky-100 text-sky-600' =>
                                    $cobranca->status_variant ===
                                        'info',
                                'bg-indigo-100 text-indigo-600' =>
                                    $cobranca->status_variant ===
                                        'primary',
                                'bg-slate-100 text-slate-500' =>
                                    !in_array(
                                        $cobranca->status_variant,
                                        [
                                            'success',
                                            'danger',
                                            'warning',
                                            'info',
                                            'primary',
                                        ],
                                        true
                                    ),
                            ])
                        >
                            <svg
                                class="h-5 w-5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="1.8"
                                    d="M2.25 8.25h19.5m-18 0V6A2.25 2.25 0 0 1 6 3.75h12A2.25 2.25 0 0 1 20.25 6v12A2.25 2.25 0 0 1 18 20.25H6A2.25 2.25 0 0 1 3.75 18V8.25Zm3.75 6h3m-3 3h6"
                                />
                            </svg>
                        </div>

                        <div class="min-w-0">
                            <p
                                class="
                                    truncate font-semibold
                                    text-slate-900
                                    group-hover:text-indigo-700
                                "
                            >
                                {{ $cobranca->cliente->nome }}
                            </p>

                            <p
                                class="
                                    mt-0.5 truncate text-xs
                                    text-slate-500
                                "
                            >
                                {{ $cobranca->seu_numero }}

                                @if ($cobranca->contrato)
                                    ·
                                    {{ $cobranca->contrato->numero }}
                                @endif
                            </p>
                        </div>
                    </div>

                    <div
                        class="
                            flex items-center justify-between
                            gap-4 pl-14 sm:pl-0
                        "
                    >
                        <div class="text-right">
                            <p
                                class="
                                    text-sm font-bold
                                    text-slate-900
                                "
                            >
                                @if (
                                    $tipoData === 'pagamento'
                                    && $cobranca
                                        ->valor_pago_formatado
                                )
                                    {{ $cobranca
                                        ->valor_pago_formatado
                                    }}
                                @else
                                    {{ $cobranca
                                        ->valor_formatado
                                    }}
                                @endif
                            </p>

                            <p
                                class="
                                    mt-0.5 text-xs
                                    text-slate-500
                                "
                            >
                                @if ($tipoData === 'pagamento')
                                    Pago em
                                    {{ $cobranca->data_pagamento
                                        ?->format('d/m/Y')
                                        ?? '—'
                                    }}
                                @else
                                    Vence em
                                    {{ $cobranca->data_vencimento
                                        ?->format('d/m/Y')
                                        ?? '—'
                                    }}
                                @endif
                            </p>
                        </div>

                        <x-ui.badge
                            :variant="
                                $cobranca->status_variant
                            "
                        >
                            {{ $cobranca
                                ->status_exibicao
                            }}
                        </x-ui.badge>
                    </div>
                </a>
            @endforeach
        </div>
    @endif
</x-ui.card>