@php
    use Illuminate\Support\Facades\DB;

    // ── Parâmetros ────────────────────────────────────────────────────
    $rawIds  = request('ids', '');
    $modelo  = request('modelo', 'padrao'); // padrao | obreiro | pastor | congregado | pb
    $ids     = array_values(array_filter(array_map('intval', explode(',', $rawIds))));

    // ── Igreja (carregar antes para filtrar membros) ──────────────────
    $igrejas = session('igrejas', []);

    // ── IDs permitidos (somente membros das igrejas da sessão) ───────
    $igrejasInt = array_map('intval', $igrejas);
    // Nota: pluck() não aceita nome qualificado (alias.coluna) — usar só o nome da coluna
    $idsPermitidos = !empty($igrejasInt)
        ? DB::table('cargoxmembroxigreja as cmi')
            ->join('departamentosxigreja as di', 'cmi.idDI', '=', 'di.idDI')
            ->whereIn('cmi.idMembro', $ids)
            ->whereIn('di.idIgreja', $igrejasInt)
            ->distinct()
            ->selectRaw('CAST(cmi.idMembro AS UNSIGNED) as idMembro')
            ->pluck('idMembro')
            ->map('intval')
            ->toArray()
        : $ids;

    // ── Buscar membros (somente os permitidos) ────────────────────────
    $membros = !empty($idsPermitidos)
        ? DB::table('membros as m')
            ->whereIn('m.idMembro', $idsPermitidos)
            ->select('m.idMembro','m.Nome','m.Imagem','m.dtNascimento','m.Tipo','m.CPF')
            ->get()->all()
        : [];
    $igreja  = $igrejas
        ? DB::table('igrejas')->whereIn('idIgreja', $igrejas)->first()
        : null;

    // ── Tipos de membro ───────────────────────────────────────────────
    $tipos = ['E'=>'Membro','F'=>'Congregado','C'=>'Criança','V'=>'Visitante'];

    // Logo URL: usa logo da igreja se disponível, senão fallback do sistema (fundo escuro)
    $_lotLogoPath = (!empty($igreja->Imagem)) ? storage_path('app/public/logos/'.$igreja->Imagem) : null;
    $igrejaLogoUrl = ($_lotLogoPath && file_exists($_lotLogoPath))
        ? asset('storage/logos/'.$igreja->Imagem)
        : asset('images/logo-atos-dark.png');

    // ── Modelo personalizado (custom_{id}) ───────────────────────────
    $modeloCustom = null;
    $customFields = [];
    if (str_starts_with($modelo, 'custom_')) {
        try {
            if (\Illuminate\Support\Facades\Schema::hasTable('credencial_modelos')) {
                $customId     = (int) str_replace('custom_', '', $modelo);
                $modeloCustom = DB::table('credencial_modelos')
                    ->where('idModelo', $customId)
                    ->where('Ativo', 1)
                    ->first();
                if ($modeloCustom && $modeloCustom->ConfigJson) {
                    $customFields = json_decode($modeloCustom->ConfigJson, true) ?? [];
                }
            }
        } catch (\Exception $e) { /* tabela ainda não criada */ }
    }

    // ── Helper: estilo inline para campos do modelo personalizado ────
    $fStyle = function(array $f, bool $isFoto = false): string {
        $s  = 'position:absolute;';
        $s .= 'top:'    . ($f['top']  ?? 0) . '%;';
        $s .= 'left:'   . ($f['left'] ?? 0) . '%;';
        $s .= 'z-index:2;';
        if ($isFoto) {
            $s .= 'width:'  . ($f['w'] ?? 25) . '%;';
            $s .= 'height:' . ($f['h'] ?? 55) . '%;';
            $s .= 'overflow:hidden;border-radius:2px;';
        } else {
            $s .= 'color:'       . ($f['color'] ?? '#ffffff') . ';';
            $s .= 'font-size:'   . ($f['size']  ?? 2) . 'mm;';
            $s .= 'font-weight:' . (!empty($f['bold']) ? 'bold' : 'normal') . ';';
            $s .= 'white-space:nowrap;line-height:1.2;';
            if (!empty($f['align'])) { $s .= 'text-align:' . $f['align'] . ';'; }
        }
        return $s;
    };

    // ── Modelos visuais padrão ────────────────────────────────────────
    $modelos = [
        'padrao'     => [
            'label'   => 'Padrão Azul',
            'bg'      => 'linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)',
            'bgDark'  => '#1e3a8a',
            'accent'  => 'rgba(255,255,255,0.28)',
            'bar'     => 'rgba(255,255,255,0.35)',
        ],
        'obreiro'    => [
            'label'   => 'Obreiro / Líder',
            'bg'      => 'linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%)',
            'bgDark'  => '#0f172a',
            'accent'  => '#d4af37',
            'bar'     => '#d4af37',
        ],
        'pastor'     => [
            'label'   => 'Pastor / Presbitério',
            'bg'      => 'linear-gradient(135deg, #3b0764 0%, #7e22ce 60%, #a855f7 100%)',
            'bgDark'  => '#3b0764',
            'accent'  => '#fde68a',
            'bar'     => '#fde68a',
        ],
        'congregado' => [
            'label'   => 'Congregado',
            'bg'      => 'linear-gradient(135deg, #052e16 0%, #166534 60%, #22c55e 100%)',
            'bgDark'  => '#052e16',
            'accent'  => 'rgba(255,255,255,0.28)',
            'bar'     => 'rgba(255,255,255,0.4)',
        ],
        'pb'         => [
            'label'   => 'P&B (Simples)',
            'bg'      => 'linear-gradient(135deg, #1f2937 0%, #374151 100%)',
            'bgDark'  => '#1f2937',
            'accent'  => 'rgba(255,255,255,0.2)',
            'bar'     => 'rgba(255,255,255,0.3)',
        ],
    ];
    $mc       = $modelos[$modelo] ?? $modelos['padrao'];
    $mcLabel  = $modeloCustom ? $modeloCustom->Nome : $mc['label'];

    // ── Tokens dos membros para QR Code ──────────────────────────────────
    $memberTokens = [];
    try {
        if (\Illuminate\Support\Facades\Schema::hasTable('membros_tokens')) {
            $memberIds = array_values(array_filter(array_map(fn($m) => $m ? (int)$m->idMembro : null, $membros)));
            if (!empty($memberIds)) {
                $existingTokens = DB::table('membros_tokens')
                    ->whereIn('idMembro', $memberIds)
                    ->pluck('token', 'idMembro')
                    ->toArray();
                foreach ($memberIds as $mid) {
                    if (!isset($existingTokens[$mid])) {
                        $newToken = \Illuminate\Support\Str::uuid()->toString();
                        DB::table('membros_tokens')->insert([
                            'idMembro'   => $mid,
                            'token'      => $newToken,
                            'expires_at' => now()->endOfYear()->toDateString(),
                            'created_at' => now(),
                        ]);
                        $memberTokens[$mid] = $newToken;
                    } else {
                        $memberTokens[$mid] = $existingTokens[$mid];
                    }
                }
            }
        }
    } catch (\Exception $e) {}
    $appUrl = rtrim(config('app.url'), '/');

    // ── Montar folhas separadas: TODAS as frentes, depois TODOS os versos ──
    $cardsPerSheet = 8;
    $memberChunks  = array_chunk($membros, $cardsPerSheet);
    $frontSheets   = [];
    $backSheets    = [];
    foreach ($memberChunks as $chunk) {
        while (count($chunk) < $cardsPerSheet) { $chunk[] = null; }
        // Verso espelhado: [0,1][2,3]... → [1,0][3,2]... (alinhamento duplex borda longa)
        $verso = [];
        for ($i = 0; $i < $cardsPerSheet; $i += 2) {
            $verso[] = $chunk[$i + 1] ?? null;
            $verso[] = $chunk[$i]     ?? null;
        }
        $frontSheets[] = $chunk;
        $backSheets[]  = $verso;
    }
    if (empty($frontSheets)) {
        $frontSheets = [array_fill(0, 8, null)];
        $backSheets  = [array_fill(0, 8, null)];
    }
    $totalMembros = count(array_filter($membros));
    $totalFolhas  = count($frontSheets);
    // Verso custom: usa ImagemFundoVerso + campos do verso (cpf, rg, qrcode, etc.)
    $versoImgUrl    = ($modeloCustom && !empty($modeloCustom->ImagemFundoVerso))
        ? asset('storage/' . $modeloCustom->ImagemFundoVerso) : null;
    $versoFields    = ['cpf','rg','dtBatismo','dtRecebimento','dtCadastro','endereco','telefone','qrcode','codigoBarras','assinatura'];
    $fStyleImg = function(array $f): string {
        $s  = 'position:absolute;';
        $s .= 'top:'    . ($f['top']  ?? 0) . '%;';
        $s .= 'left:'   . ($f['left'] ?? 0) . '%;';
        $s .= 'width:'  . ($f['w']   ?? 25) . '%;';
        $s .= 'height:' . ($f['h']   ?? 30) . '%;';
        $s .= 'z-index:2;overflow:hidden;border-radius:3px;';
        return $s; // o div filho com position:absolute;inset:0 cobre 100% deste container
    };
@endphp
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Credenciais em Lote — {{ $mc['label'] }}</title>
    <style>
        /* ── Reset ── */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, Helvetica, sans-serif; background: #e5e7eb; color: #111; }

        /* ── CSS Custom Properties (modelo dinâmico) ── */
        :root {
            --card-bg:     {{ $mc['bg'] }};
            --card-dark:   {{ $mc['bgDark'] }};
            --card-accent: {{ $mc['accent'] }};
            --card-bar:    {{ $mc['bar'] }};
        }

        /* ═════════════════════════════════════════════
           BARRA DE CONTROLES (apenas tela)
        ═════════════════════════════════════════════ */
        .controls {
            position: fixed; top: 0; left: 0; right: 0; z-index: 200;
            background: var(--card-dark);
            padding: 10px 20px;
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
        }
        .ctrl-title { font-size: 14px; font-weight: bold; color: #fff; }
        .ctrl-info  { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 2px; }
        .ctrl-btn {
            background: #fff; color: var(--card-dark);
            border: none; padding: 8px 22px;
            border-radius: 8px; font-size: 13px; font-weight: bold;
            cursor: pointer; white-space: nowrap;
        }
        .ctrl-btn:hover { background: #f1f5f9; }
        .ctrl-back {
            color: rgba(255,255,255,0.7); font-size: 13px;
            text-decoration: none;
        }
        .ctrl-back:hover { color: #fff; }

        .content { padding-top: 56px; }

        /* ── Instrução (apenas tela) ── */
        .instrucao {
            max-width: 620px; margin: 14px auto;
            background: #fef9c3; border: 1px solid #fde047;
            border-radius: 8px; padding: 10px 14px;
            font-size: 11.5px; color: #713f12; line-height: 1.5;
        }
        .instrucao strong { color: #92400e; }

        /* ── Rótulo de página (apenas tela) ── */
        .page-label {
            text-align: center; font-size: 10px; font-weight: bold;
            color: #6b7280; letter-spacing: 2px; text-transform: uppercase;
            padding: 14px 0 6px;
        }
        .page-divider {
            width: 200px; margin: 12px auto;
            border: none; border-top: 2px dashed #d1d5db;
        }
        .page-hint {
            text-align: center; font-size: 10px; color: #9ca3af;
            padding: 2px 0 12px;
        }
        .sheet-pair-label {
            text-align: center; font-size: 9px; color: #d1d5db;
            letter-spacing: 3px; text-transform: uppercase;
            padding: 20px 0 4px;
        }

        /* ═════════════════════════════════════════════
           FOLHA A4
        ═════════════════════════════════════════════ */
        .sheet {
            width: 210mm;
            min-height: 297mm;
            background: #fff;
            margin: 0 auto 6px;
            padding: 14mm 15mm;
            box-shadow: 0 3px 20px rgba(0,0,0,0.15);
            position: relative;
        }

        /* ═════════════════════════════════════════════
           GRADE DE CREDENCIAIS
        ═════════════════════════════════════════════ */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(2, 85.6mm);
            grid-auto-rows: 53.98mm;
            gap: 2.5mm 4mm;
        }

        /* ── Célula ── */
        .card-cell {
            width: 85.6mm; height: 53.98mm;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }
        .card-cell.empty {
            border: 1px dashed #e5e7eb;
        }

        /* Guias de corte (pontilhado sutil entre cards) */
        @media screen {
            .card-cell { outline: 0.5px dashed #cbd5e1; }
        }

        /* ═════════════════════════════════════════════
           FRENTE DA CREDENCIAL
        ═════════════════════════════════════════════ */
        .card-frente {
            width: 100%; height: 100%;
            background: var(--card-bg);
            color: #ffffff;
            padding: 3.5mm 4mm 2.5mm;
            display: flex; flex-direction: column;
            position: relative; overflow: hidden;
        }

        /* Ornamentos circulares de fundo */
        .card-frente::before {
            content: '';
            position: absolute; top: -12mm; right: -10mm;
            width: 30mm; height: 30mm;
            border-radius: 50%;
            background: rgba(255,255,255,0.07);
            pointer-events: none;
        }
        .card-frente::after {
            content: '';
            position: absolute; bottom: -14mm; left: -12mm;
            width: 34mm; height: 34mm;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
            pointer-events: none;
        }

        /* Barra de destaque (topo) */
        .card-accent-bar {
            position: absolute; top: 0; left: 0; right: 0;
            height: 1mm;
            background: var(--card-bar);
        }

        /* Topo: nome da igreja + tipo */
        .card-topo {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 1.2mm; position: relative; z-index: 1; flex-shrink: 0;
        }
        .card-topo-esq { display: flex; align-items: center; gap: 1.8mm; }
        .card-logo { font-size: 11px; line-height: 1; }
        .card-igreja-nome {
            font-size: 4.8px; font-weight: bold;
            text-transform: uppercase; letter-spacing: 0.6px;
            opacity: 0.9; line-height: 1.3;
            max-width: 38mm; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        }
        .card-tipo {
            font-size: 4.2px; font-weight: bold;
            text-transform: uppercase; letter-spacing: 0.3px;
            background: var(--card-accent);
            padding: 0.8px 3px; border-radius: 8px;
            white-space: nowrap; flex-shrink: 0;
        }

        /* Divisor */
        .card-div { height: 0.25mm; background: rgba(255,255,255,0.25); margin: 1mm 0; flex-shrink: 0; }

        /* Corpo: foto + dados */
        .card-corpo {
            display: flex; gap: 3mm; flex: 1; align-items: center;
            position: relative; z-index: 1; overflow: hidden;
        }
        .card-foto {
            width: 23mm; height: 30mm;
            border: 0.8px solid rgba(255,255,255,0.45);
            border-radius: 3px; overflow: hidden;
            background: rgba(255,255,255,0.1);
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .card-foto img { width: 100%; height: 100%; object-fit: cover; }
        .card-foto-ph  { font-size: 15px; opacity: 0.4; }

        .card-dados { flex: 1; min-width: 0; }
        .f-label {
            font-size: 4.2px; text-transform: uppercase;
            letter-spacing: 0.4px; opacity: 0.62; margin-bottom: 0.4mm;
        }
        .f-valor {
            font-size: 6.2px; font-weight: bold; margin-bottom: 2.8mm;
            line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        }
        .f-valor.nome {
            font-size: 7px; white-space: normal;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            margin-bottom: 2.5mm;
        }
        .f-valor.reg { font-size: 5.8px; opacity: 0.8; letter-spacing: 0.5px; }

        /* Rodapé */
        .card-rodape {
            font-size: 3.8px; opacity: 0.5; text-align: center;
            border-top: 0.25mm solid rgba(255,255,255,0.2);
            padding-top: 1.2mm; position: relative; z-index: 1; flex-shrink: 0;
        }

        /* ═════════════════════════════════════════════
           VERSO DA CREDENCIAL
        ═════════════════════════════════════════════ */
        .card-verso {
            width: 100%; height: 100%;
            background: #fff;
            border: 0.4mm solid #e5e7eb;
            border-radius: 5px;
            padding: 3mm 4mm;
            display: flex; flex-direction: column;
            align-items: center; justify-content: space-between;
            text-align: center;
        }

        .verso-top { width: 100%; }
        .verso-logo-icon { font-size: 13px; color: var(--card-dark); margin-bottom: 0.8mm; }
        .verso-nome-igreja {
            font-size: 5.5px; font-weight: bold;
            text-transform: uppercase; letter-spacing: 0.8px;
            color: var(--card-dark);
        }
        .verso-div { height: 0.3mm; background: var(--card-dark); margin: 1.2mm 0; opacity: 0.2; }
        .verso-endereco {
            font-size: 4.5px; color: #4b5563; line-height: 1.6;
            min-height: 8mm;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }

        .verso-aviso {
            font-size: 4.2px; color: #6b7280; font-style: italic;
            border-top: 0.3mm dashed #e5e7eb;
            border-bottom: 0.3mm dashed #e5e7eb;
            padding: 1.8mm 1mm;
            width: 100%;
            line-height: 1.5;
        }

        .verso-rodape { width: 100%; }
        .verso-validade { font-size: 3.8px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; }
        .verso-assinatura {
            margin-top: 2mm;
            border-top: 0.25mm solid #d1d5db;
            padding-top: 0.8mm;
            font-size: 3.8px; color: #9ca3af;
        }

        /* QR + Barcode no verso padrão */
        .verso-codes {
            display: flex;
            gap: 2mm;
            align-items: stretch;
            width: 100%;
            margin: 1.5mm 0 0.5mm;
        }
        .verso-qr {
            width: 13mm; height: 13mm;
            background: #fff;
            padding: 1mm;
            border-radius: 3px;
            border: 0.4mm solid #d1d5db;
            flex-shrink: 0;
            overflow: hidden;
            display: flex; align-items: center; justify-content: center;
        }
        .verso-qr img {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }
        .verso-qr canvas { display: none !important; }
        .verso-barcode {
            flex: 1;
            min-width: 0;
            background: #fff;
            padding: 1mm 1.5mm;
            border-radius: 3px;
            border: 0.4mm solid #d1d5db;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .verso-barcode svg {
            display: block;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }

        /* ═════════════════════════════════════════════
           IMPRESSÃO
        ═════════════════════════════════════════════ */
        @media print {
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
            body { background: #fff; }

            .controls,
            .instrucao,
            .page-label,
            .page-divider,
            .page-hint,
            .sheet-pair-label { display: none !important; }

            .content { padding-top: 0; }

            .sheet {
                width: 210mm; min-height: 297mm;
                margin: 0; padding: 14mm 15mm;
                box-shadow: none;
            }

            /* Cada .sheet inicia nova página */
            .sheet + .sheet { page-break-before: always; }

            .card-cell { outline: 0.2mm dashed #d1d5db; }
        }

        @page { size: A4 portrait; margin: 0; }
    </style>
</head>
<body>

{{-- ── Barra de Controles ── --}}
<div class="controls">
    <div>
        <div class="ctrl-title">🖨️ Credenciais em Lote — {{ $mcLabel }}</div>
        <div class="ctrl-info">
            {{ $totalMembros }} credencial(is) &bull;
            {{ $totalFolhas }} folha(s) A4 &bull;
            Frente e verso
            @if(!$modeloCustom)
                &bull; Modelos: {{ implode(' / ', array_column($modelos, 'label')) }}
            @else
                &bull; <span style="color:#a5b4fc;">Modelo personalizado da igreja</span>
            @endif
        </div>
    </div>
    <div style="display:flex;align-items:center;gap:14px;">
        {{-- Seletor de modelo --}}
        <div style="font-size:11px;color:rgba(255,255,255,0.7);">
            Modelo:
            @foreach($modelos as $key => $m)
                @if($key !== $modelo)
                    <a href="{{ request()->fullUrlWithQuery(['modelo' => $key]) }}"
                       style="color:#93c5fd;margin-left:6px;text-decoration:none;">{{ $m['label'] }}</a>
                @else
                    <span style="color:#fff;margin-left:6px;font-weight:bold;text-decoration:underline;">{{ $m['label'] }}</span>
                @endif
            @endforeach
        </div>
        <a href="javascript:history.back()" class="ctrl-back">← Voltar</a>
        <button class="ctrl-btn" onclick="window.print()">🖨️ Imprimir / Salvar PDF</button>
    </div>
</div>

<div class="content">

    {{-- Instrução --}}
    <div class="instrucao">
        <strong>Como imprimir frente e verso:</strong>
        Na janela de impressão, ative <em>"Imprimir em ambos os lados"</em> com
        <em>"Virar na borda longa"</em> (orientação retrato). As colunas do verso já foram
        reposicionadas automaticamente para alinhamento perfeito ao virar a folha.
        Para salvar PDF, imprima para arquivo sem duplex.
    </div>

    {{-- ════════════════════════════════════════════
         TODAS AS FRENTES
    ════════════════════════════════════════════ --}}
    @foreach($frontSheets as $sheetIdx => $front)

        @if($totalFolhas > 1)
            <div class="sheet-pair-label">── Frente {{ $sheetIdx + 1 }} / {{ $totalFolhas }} ──</div>
        @endif
        <div class="page-label">FOLHA {{ $sheetIdx + 1 }} &bull; FRENTE</div>
        <div class="sheet">
            <div class="card-grid">
                @foreach($front as $m)
                    <div class="card-cell {{ is_null($m) ? 'empty' : '' }}">
                        @if($m)
                        @if($modeloCustom && !empty($customFields))
                        {{-- ── Modelo Personalizado ── --}}
                        @php
                            $bgUrl = $modeloCustom->ImagemFundo
                                ? asset('storage/' . $modeloCustom->ImagemFundo)
                                : null;
                            $nascFormatado = ($m->dtNascimento && $m->dtNascimento !== '0000-00-00')
                                ? \Carbon\Carbon::parse($m->dtNascimento)->format('d/m/Y')
                                : '—';
                            $regFormatado  = '#' . str_pad($m->idMembro, 6, '0', STR_PAD_LEFT);
                            $fieldValues   = [
                                'foto'        => null, // tratado separado
                                'nomeIgreja'  => $igreja->Nome ?? '',
                                'tipo'        => $tipos[$m->Tipo] ?? 'Membro',
                                'nome'        => strtoupper($m->Nome),
                                'nascimento'  => $nascFormatado,
                                'registro'    => $regFormatado,
                                'rodape'      => 'Emitido ' . now()->format('d/m/Y'),
                            ];
                        @endphp
                        <div style="width:100%;height:100%;position:relative;overflow:hidden;border-radius:5px;
                                    @if($bgUrl) background:url('{{ $bgUrl }}') center/cover no-repeat;
                                    @else background:#1e3a8a; @endif">
                            @foreach($customFields as $fKey => $fData)
                                @if($fKey === 'foto')
                                    @php $fs = $fStyle($fData, true); @endphp
                                    <div style="{{ $fs }}">
                                        @if($m->Imagem)
                                            <img src="{{ asset('storage/fotos/'.$m->Imagem) }}"
                                                 alt="{{ $m->Nome }}"
                                                 style="width:100%;height:100%;object-fit:cover;">
                                        @else
                                            <div style="width:100%;height:100%;background:rgba(255,255,255,0.15);
                                                        display:flex;align-items:center;justify-content:center;
                                                        font-size:10px;color:rgba(255,255,255,0.5);">👤</div>
                                        @endif
                                    </div>
                                @elseif(isset($fieldValues[$fKey]))
                                    @php $fs = $fStyle($fData, false); @endphp
                                    <div style="{{ $fs }}">{{ $fieldValues[$fKey] }}</div>
                                @endif
                            @endforeach
                        </div>
                        @else
                        {{-- ── Modelo Padrão ── --}}
                        <div class="card-frente">
                            <div class="card-accent-bar"></div>
                            <div class="card-topo">
                                <div class="card-topo-esq">
                                    <img src="{{ $igrejaLogoUrl }}" class="card-logo" style="height:11px;width:auto;object-fit:contain;vertical-align:middle;">
                                    <span class="card-igreja-nome">{{ $igreja->Nome ?? 'Igreja' }}</span>
                                </div>
                                <span class="card-tipo">{{ $tipos[$m->Tipo] ?? 'Membro' }}</span>
                            </div>
                            <div class="card-div"></div>
                            <div class="card-corpo">
                                <div class="card-foto">
                                    @if($m->Imagem)
                                        <img src="{{ asset('storage/fotos/'.$m->Imagem) }}" alt="{{ $m->Nome }}">
                                    @else
                                        <span class="card-foto-ph">👤</span>
                                    @endif
                                </div>
                                <div class="card-dados">
                                    <div class="f-label">Nome Completo</div>
                                    <div class="f-valor nome">{{ strtoupper($m->Nome) }}</div>

                                    <div class="f-label">Nascimento</div>
                                    <div class="f-valor">
                                        @if($m->dtNascimento && $m->dtNascimento !== '0000-00-00')
                                            {{ \Carbon\Carbon::parse($m->dtNascimento)->format('d/m/Y') }}
                                        @else —
                                        @endif
                                    </div>

                                    <div class="f-label">Nº Registro</div>
                                    <div class="f-valor reg">#{{ str_pad($m->idMembro, 6, '0', STR_PAD_LEFT) }}</div>
                                </div>
                            </div>
                            <div class="card-rodape">
                                Emitido {{ now()->format('d/m/Y') }} &bull; {{ $igreja->Nome ?? '' }}
                            </div>
                        </div>
                        @endif
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach

    {{-- Separador tela entre frentes e versos --}}
    <hr class="page-divider">
    <div class="page-hint">↑ Imprima as FRENTES primeiro &nbsp;│&nbsp; Depois vire as folhas e imprima os VERSOS ↓</div>

    {{-- ════════════════════════════════════════════
         TODOS OS VERSOS
    ════════════════════════════════════════════ --}}
    @foreach($backSheets as $sheetIdx => $back)

        @if($totalFolhas > 1)
            <div class="sheet-pair-label">── Verso {{ $sheetIdx + 1 }} / {{ $totalFolhas }} ──</div>
        @endif
        <div class="page-label">FOLHA {{ $sheetIdx + 1 }} &bull; VERSO</div>
        <div class="sheet">
            <div class="card-grid">
                @foreach($back as $m)
                    <div class="card-cell {{ is_null($m) ? 'empty' : '' }}">
                        @if($m)
                        @if($modeloCustom && $versoImgUrl)
                        {{-- ── Verso Personalizado (com imagem de fundo) ── --}}
                        @php
                            $versoFieldValues = [
                                'cpf'           => $m->CPF ? 'CPF: '.$m->CPF : null,
                                'rg'            => null, // não está no select padrão do lote
                                'dtBatismo'     => null, // requereria join histórico
                                'dtRecebimento' => null,
                                'dtCadastro'    => null,
                                'endereco'      => null,
                                'telefone'      => null,
                            ];
                        @endphp
                        <div style="width:100%;height:100%;position:relative;overflow:hidden;border-radius:5px;background:url('{{ $versoImgUrl }}') center/cover no-repeat;">
                            @foreach($versoFields as $fKey)
                                @if(isset($customFields[$fKey]) && !empty($customFields[$fKey]['visible']))
                                    @php $fData = $customFields[$fKey]; @endphp
                                    @if(in_array($fKey, ['qrcode','codigoBarras','assinatura']))
                                        {{-- campos de imagem do verso --}}
                                        <div style="{{ $fStyleImg($fData) }}">
                                            @if($fKey === 'qrcode')
                                                @php
                                                    $qrToken  = $memberTokens[$m->idMembro] ?? null;
                                                    $qrUrl    = $qrToken
                                                        ? $appUrl.'/membro/'.$qrToken
                                                        : $appUrl.'/portal?id='.$m->idMembro;
                                                @endphp
                                                {{-- Wrapper branco uniforme nos 4 lados --}}
                                                <div style="width:100%;height:100%;background:#fff;padding:8%;box-sizing:border-box;border-radius:3px;display:flex;align-items:center;justify-content:center;">
                                                    <div data-qr-url="{{ $qrUrl }}"
                                                         style="display:flex;align-items:center;justify-content:center;"></div>
                                                </div>
                                            @elseif($fKey === 'codigoBarras')
                                                {{-- Wrapper branco uniforme nos 4 lados --}}
                                                <div style="width:100%;height:100%;background:#fff;padding:8%;box-sizing:border-box;border-radius:3px;display:flex;align-items:center;justify-content:center;overflow:hidden;">
                                                    <svg data-barcode="{{ $m->idMembro }}" style="max-width:100%;max-height:100%;width:auto;height:auto;display:block;"></svg>
                                                </div>
                                            @endif
                                        </div>
                                    @elseif(isset($versoFieldValues[$fKey]) && $versoFieldValues[$fKey])
                                        <div style="{{ $fStyle($fData, false) }}">{{ $versoFieldValues[$fKey] }}</div>
                                    @endif
                                @endif
                            @endforeach
                        </div>
                        @else
                        {{-- ── Verso Padrão ── --}}
                        <div class="card-verso">
                            <div class="verso-top">
                                <img src="{{ $igrejaLogoUrl }}" class="verso-logo-icon" style="height:13px;width:auto;object-fit:contain;">
                                <div class="verso-nome-igreja">{{ $igreja->Nome ?? 'Igreja' }}</div>
                                <div class="verso-div"></div>
                                <div class="verso-endereco">
                                    @if(!empty($igreja->Telefone)) <span>Tel: {{ $igreja->Telefone }}</span> @endif
                                    @if(!empty($igreja->Email))    <span>{{ $igreja->Email }}</span> @endif
                                    @if(empty($igreja->Telefone) && empty($igreja->Email))
                                        <span style="font-style:italic;opacity:0.5;">Secretaria da Igreja</span>
                                    @endif
                                </div>
                            </div>
                            <div class="verso-aviso">
                                Esta credencial é de uso pessoal e intransferível.<br>
                                Em caso de perda, comunique à secretaria da igreja.
                            </div>
                            <div class="verso-rodape">
                                @php
                                    $qrTokenPad = $memberTokens[$m->idMembro] ?? null;
                                    $qrUrlPad   = $qrTokenPad
                                        ? $appUrl.'/membro/'.$qrTokenPad
                                        : $appUrl.'/portal?id='.(int)$m->idMembro;
                                @endphp
                                <div class="verso-codes">
                                    <div class="verso-qr"
                                         data-qr-url="{{ $qrUrlPad }}">
                                    </div>
                                    <div class="verso-barcode">
                                        <svg data-barcode="{{ $m->idMembro }}" style="width:100%;height:auto;"></svg>
                                    </div>
                                </div>
                                <div class="verso-validade" style="margin-top:1mm;">Válida para o ano de {{ now()->year }}</div>
                                <div class="verso-assinatura">Assinatura do Responsável</div>
                            </div>
                        </div>
                        @endif
                        @endif
                    </div>
                @endforeach
            </div>
        </div>

    @endforeach

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script>
window.addEventListener('load', function () {

    // ── QR Codes ──────────────────────────────────────────────────────────
    document.querySelectorAll('[data-qr-url]').forEach(function (el) {
        var url = el.getAttribute('data-qr-url');
        if (!url) return;

        // Calcula o tamanho em pixels do container (sobe até achar dimensão real)
        var ref = el;
        var w = 0, h = 0, tries = 0;
        while (tries++ < 6) {
            w = ref.offsetWidth;
            h = ref.offsetHeight;
            if (w > 0 && h > 0) break;
            if (!ref.parentElement) break;
            ref = ref.parentElement;
        }
        // Usa o menor lado para garantir QR quadrado dentro do container
        var size = 70;

        el.innerHTML = '';
        new QRCode(el, {
            text: url,
            width: size,
            height: size,
            correctLevel: QRCode.CorrectLevel.M
        });

        // Esconde canvas (QRCode.js cria canvas + img — só img é necessária)
        // Não redimensiona via CSS para não distorcer o QR
        var canvas = el.querySelector('canvas');
        if (canvas) canvas.style.display = 'none';
    });

    // ── Códigos de Barras ─────────────────────────────────────────────────
    document.querySelectorAll('[data-barcode]').forEach(function (el) {
        var val = el.getAttribute('data-barcode');
        if (!val) return;
        JsBarcode(el, String(val).padStart(6, '0'), {
            format: 'CODE128',
            displayValue: true,
            fontSize: 5,
            height: 18,
            margin: 0,
            textMargin: 1,
            lineColor: '#1f2937'
        });
        // JsBarcode define width/height fixos como atributo — remove height
        // para o viewBox controlar a escala proporcional via CSS
        el.removeAttribute('height');
        el.removeAttribute('width');
        el.style.width  = '100%';
        el.style.height = 'auto';
    });
});
</script>
</body>
</html>