{{-- New-Unity ERP | setup/complete.blade.php | v4.8 | 13/06/2026 00:00:00 --}}
{{-- v4.8 — Elimina switch legacy Use General Report (formato activo ahora en Invoice Formats). --}}
{{-- v4.7 — Fix layout: Use General Report ocupa col restante tras eliminar campo de color. --}}
{{-- v4.6 — Elimina campo legacy invoice_reports_color del formulario (colores ahora en Invoice Formats). --}}
{{-- v4.5 — Fix autocomplete='off' en campos de dirección fiscal para suprimir popup del navegador. --}}
{{-- v4.4 — Fix modal Settings Saved: elimina salto/brinco al aparecer centrado. --}}
{{-- v4.3 — General Settings: agrega sección Fiscal Address (postal_code, street, colony, city, state, country). --}}
{{-- v2.3 — Campo IVA % (tax_percent) agregado en General Settings (junto a Tax Regime). --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">

    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-file-invoice me-2"></i>Invoice Setup</h1>
            <p class="text-muted mb-0">Configure issuer data to stamp CFDI 4.0 invoices</p>
        </div>
    </div>

    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
            <li class="breadcrumb-item"><a href="{{ route('invoices.index') }}">Billing</a></li>
            <li class="breadcrumb-item active">Invoice Setup</li>
        </ol>
    </nav>

    {{-- Alerts --}}
    @if(!$contributor->certificado || !$contributor->k_key || !$contributor->regime)
        <div class="alert alert-warning alert-dismissible fade show mb-3">
            <i class="fad fa-exclamation-triangle me-2"></i>
            <strong>Attention:</strong>
            @if(!$contributor->k_key || !$contributor->certificado)
                You must upload your Digital Seal Certificate (.cer) and Private Key (.key) to stamp invoices.
            @else
                You must configure the Tax Regime to stamp invoices.
            @endif
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('success'))
    {{-- Modal de confirmación de guardado --}}
    <div class="modal fade" id="modalSaveSuccess" tabindex="-1" data-bs-backdrop="static" style="display:none;">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 420px; margin-top: 0; transform: none;">
            <div class="modal-content" style="border-radius:10px; overflow:hidden; border:none; box-shadow:0 10px 40px rgba(0,0,0,0.15);">
                <div class="modal-header border-0 text-white bg-primary" style="padding:14px 20px;">
                    <div class="d-flex align-items-center">
                        <i class="fad fa-check-circle me-2 fs-5"></i>
                        <h6 class="modal-title mb-0 fw-bold">Settings Saved</h6>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 text-center">
                    <i class="fad fa-info-circle fa-2x text-primary mb-3"></i>
                    <p class="fw-bold mb-1">{{ session('success') }}</p>
                    <p class="text-muted small mb-0">
                        <i class="fad fa-exclamation-circle me-1"></i>
                        Note: Each tab saves independently. Make sure to save each section separately.
                    </p>
                </div>
                <div class="modal-footer border-0 py-2 px-3">
                    <button type="button" class="btn btn-primary btn-sm px-4" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var el = document.getElementById('modalSaveSuccess');
            el.style.display = '';
            var modal = new bootstrap.Modal(el, { backdrop: 'static', keyboard: false });
            // Pequeño delay para que el DOM esté listo y no haya salto
            requestAnimationFrame(function() {
                requestAnimationFrame(function() {
                    modal.show();
                });
            });
        });
    </script>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show mb-3">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-3">
            <strong>Please verify the data:</strong>
            <ul class="mb-0 mt-1">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Tabs --}}
    <ul class="nav nav-tabs mb-0" id="billingTabs" role="tablist">
        <li class="nav-item">
            <button class="nav-link {{ Request::get('tab', 'general') == 'general' ? 'active' : '' }}"
                data-bs-toggle="tab" data-bs-target="#general" type="button">
                <i class="fad fa-building me-1"></i> General Settings
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link {{ Request::get('tab') == 'certificate' ? 'active' : '' }}"
                data-bs-toggle="tab" data-bs-target="#certificate" type="button">
                <i class="fad fa-certificate me-1"></i> Certificate Data
                @if(!$contributor->certificado || !$contributor->k_key)
                    <span class="badge bg-danger ms-1" style="font-size:10px;">!</span>
                @endif
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link {{ Request::get('tab') == 'pac' ? 'active' : '' }}"
                data-bs-toggle="tab" data-bs-target="#pac" type="button">
                <i class="fad fa-server me-1"></i> PAC Configuration
                @if($contributor->test_mode)
                    <span class="badge bg-warning text-dark ms-1" style="font-size:10px;">Test</span>
                @else
                    <span class="badge bg-success ms-1" style="font-size:10px;">Live</span>
                @endif
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ Request::get('tab') == 'formats' ? 'active' : '' }}"
                    data-bs-toggle="tab" data-bs-target="#formats" type="button">
                <i class="fad fa-file-invoice me-1"></i> Invoice Formats
            </button>
        </li>
    </ul>

    <div class="tab-content">

        {{-- TAB 1: General Settings --}}
        <div class="tab-pane fade {{ Request::get('tab', 'general') == 'general' ? 'show active' : '' }}" id="general">
            <div class="card border-top-0 rounded-0 rounded-bottom">
                <div class="card-body">
                    <form action="{{ route('billing.setup.store') }}" method="POST" autocomplete="off">
                        @csrf

                        <h6 class="text-primary mb-3"><i class="fad fa-id-card me-2"></i>Issuer Data</h6>
                        <hr class="mb-4">

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Company Name</label>
                                <input type="text" name="name" class="form-control form-control-sm"
                                    value="{{ $contributor->name }}" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Commercial Name</label>
                                <input type="text" name="commercial_name" class="form-control form-control-sm"
                                    value="{{ $contributor->commercial_name ?? '' }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Tax ID or RFC *</label>
                                <input type="text" name="rfc" class="form-control form-control-sm text-uppercase"
                                    value="{{ $contributor->rfc }}" maxlength="13" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Tax Regime *</label>
                                <input type="hidden" name="tax_regime" id="tax_regime" value="{{ $contributor->regime }}">
                                <input type="text" id="tax_regime_display" class="form-control form-control-sm" readonly
                                    style="cursor:pointer; background:#fff;"
                                    placeholder="Click to select..."
                                    value="{{ $contributor->regime ? $contributor->regime.' - '.optional($fiscalRegimes->firstWhere('code', $contributor->regime))->description : '' }}"
                                    onclick="$('#modalFiscalRegime').modal('show')">
                                <small class="text-muted">
                                    <a href="javascript:void(0)" onclick="$('#modalFiscalRegime').modal('show')">
                                        <i class="fad fa-search me-1"></i>Search tax regime
                                    </a>
                                </small>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">IVA %
                                    <small class="text-muted fw-normal">16% general / 8% frontera</small>
                                </label>
                                <div class="input-group input-group-sm">
                                    <input type="number" name="tax_percent" class="form-control form-control-sm text-end"
                                        value="{{ old('tax_percent', $contributor->tax_percent ?? 16) }}"
                                        min="0" max="100" step="0.01" required>
                                    <span class="input-group-text">%</span>
                                </div>
                                <small class="text-muted">Se aplica en facturas</small>
                            </div>


                        </div>

                        <h6 class="text-warning mb-3 mt-4"><i class="fad fa-map-marker-alt me-2"></i>Fiscal Address</h6>
                        <hr class="mb-4">

                        <div class="row mb-3">
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Postal Code <span class="text-danger">*</span></label>
                                <input type="text" name="postal_code" class="form-control form-control-sm" autocomplete="off"
                                    value="{{ $contributor->postal_code ?? '' }}" maxlength="5" required
                                    placeholder="00000">
                                <small class="text-muted">CP del domicilio fiscal SAT</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Street</label>
                                <input type="text" name="street" class="form-control form-control-sm" autocomplete="off"
                                    value="{{ $contributor->street ?? '' }}" maxlength="100">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">Colony</label>
                                <input type="text" name="colony" class="form-control form-control-sm" autocomplete="off"
                                    value="{{ $contributor->colony ?? '' }}" maxlength="100">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-bold">City</label>
                                <input type="text" name="city" class="form-control form-control-sm" autocomplete="off"
                                    value="{{ $contributor->city ?? '' }}" maxlength="100">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">State</label>
                                <input type="text" name="state" class="form-control form-control-sm" autocomplete="off"
                                    value="{{ $contributor->state ?? '' }}" maxlength="100">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Country</label>
                                <input type="text" name="country" class="form-control form-control-sm" autocomplete="off"
                                    value="{{ $contributor->country ?? 'México' }}" maxlength="100">
                            </div>
                        </div>

                        <h6 class="text-success mb-3 mt-4"><i class="fad fa-list-ol me-2"></i>Series and Folios</h6>
                        <hr class="mb-4">

                        <div class="row mb-3">
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Initial Invoice ID *</label>
                                <input type="number" name="folio_i" class="form-control form-control-sm"
                                    value="{{ $contributor->folio_i ?? 1 }}" min="1" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Initial Invoice Serie</label>
                                <input type="text" name="serie_i" class="form-control form-control-sm"
                                    value="{{ $contributor->serie_i ?? '' }}" maxlength="10">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Initial Credit Note ID *</label>
                                <input type="number" name="folio_e" class="form-control form-control-sm"
                                    value="{{ $contributor->folio_e ?? 1 }}" min="1" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Initial Credit Note Serie</label>
                                <input type="text" name="serie_e" class="form-control form-control-sm"
                                    value="{{ $contributor->serie_e ?? '' }}" maxlength="10">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Initial Payment Complement ID *</label>
                                <input type="number" name="folio_p" class="form-control form-control-sm"
                                    value="{{ $contributor->folio_p ?? 1 }}" min="1" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Initial Payment Complement Serie</label>
                                <input type="text" name="serie_p" class="form-control form-control-sm"
                                    value="{{ $contributor->serie_p ?? '' }}" maxlength="10">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-2">
                                <label class="form-label fw-bold">Initial Consignment Note Serie</label>
                                <input type="text" name="serie_t" class="form-control form-control-sm"
                                    value="{{ $contributor->serie_t ?? '' }}" maxlength="10">
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12 text-end">
                                <a href="{{ route('invoices.index') }}" class="btn btn-secondary btn-sm me-2">Cancel</a>
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fad fa-save me-1"></i>Save
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>

        {{-- TAB 2: Certificate Data --}}
        <div class="tab-pane fade {{ Request::get('tab') == 'certificate' ? 'show active' : '' }}" id="certificate">
            <div class="card border-top-0 rounded-0 rounded-bottom">
                <div class="card-body">
                    <form action="{{ route('billing.setup.store.certificate') }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                        @csrf

                        <h6 class="text-primary mb-3"><i class="fad fa-certificate me-2"></i>Digital Seal Certificate (CSD)</h6>
                        <hr class="mb-4">

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Digital Certificate (.cer) *</label>
                                <input type="file" id="input_certificate" name="digital_certificate"
                                    class="form-control form-control-sm" accept=".cer"
                                    onchange="triggerCertValidation()">
                                @if($contributor->certificado)
                                    <div class="mt-1 p-2 rounded" style="background:#f0fff4; border:1px solid #b7ebc0;">
                                        <small class="text-success fw-bold">
                                            <i class="fad fa-check-circle me-1"></i>Current certificate:
                                        </small>
                                        <br>
                                        <small class="text-muted" style="word-break:break-all; font-size:11px;">
                                            {{ basename($contributor->certificado) }}
                                        </small>
                                    </div>
                                @else
                                    <div class="mt-1 p-2 rounded" style="background:#fff8f0; border:1px solid #fcd9a0;">
                                        <small class="text-warning fw-bold">
                                            <i class="fad fa-exclamation-triangle me-1"></i>No certificate uploaded
                                        </small>
                                    </div>
                                @endif
                                {{-- Datos permanentes del .cer desde BD --}}
                                @if($certData ?? false)
                                    <div id="cert_data_permanent" class="mt-2 p-2 rounded" style="background:#f0fff4; border:1px solid #b7ebc0; font-size:12px;">
                                        <div class="fw-bold text-success mb-1"><i class="fad fa-certificate me-1"></i>Certificate Info</div>
                                        <ul class="list-unstyled mb-0">
                                            <li><span class="text-muted">File:</span> {{ $certData->filename }}</li>
                                            <li><span class="text-muted">RFC:</span> {{ $certData->rfc }}</li>
                                            <li><span class="text-muted">Name:</span> {{ $certData->name }}</li>
                                            <li><span class="text-muted">Valid from:</span> {{ $certData->valid_from?->format('d/m/Y H:i:s') }}</li>
                                            <li><span class="text-muted">Expires:</span> {{ $certData->valid_to?->format('d/m/Y H:i:s') }}</li>
                                            <li>
                                                @if($certData->days_remaining > 0)
                                                    <span class="text-success fw-bold"><i class="fad fa-check-circle me-1"></i>{{ $certData->days_remaining }} days remaining</span>
                                                @else
                                                    <span class="text-danger fw-bold"><i class="fad fa-times-circle me-1"></i>Certificate EXPIRED</span>
                                                @endif
                                            </li>
                                        </ul>
                                    </div>
                                @endif
                                {{-- Datos AJAX al subir nuevo archivo --}}
                                <div id="cert_data" class="mt-2 d-none">
                                    <div class="p-2 rounded" style="background:#f0fff4; border:1px solid #b7ebc0; font-size:12px;">
                                        <div class="fw-bold text-success mb-1"><i class="fad fa-certificate me-1"></i>Certificate Info</div>
                                        <ul class="list-unstyled mb-0">
                                            <li><span class="text-muted">File:</span> <span id="cert_serial"></span></li>
                                            <li><span class="text-muted">RFC:</span> <span id="cert_rfc"></span></li>
                                            <li><span class="text-muted">Name:</span> <span id="cert_name"></span></li>
                                            <li><span class="text-muted">Valid from:</span> <span id="cert_from"></span></li>
                                            <li><span class="text-muted">Expires:</span> <span id="cert_to"></span></li>
                                            <li id="cert_days_row"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Private Key (.key) *</label>
                                <input type="file" id="input_key" name="key_certificate"
                                    class="form-control form-control-sm" accept=".key"
                                    onchange="triggerCertValidation()">
                                @if($contributor->k_key)
                                    <div class="mt-1 p-2 rounded" style="background:#f0fff4; border:1px solid #b7ebc0;">
                                        <small class="text-success fw-bold">
                                            <i class="fad fa-check-circle me-1"></i>Current key:
                                        </small>
                                        <br>
                                        <small class="text-muted" style="word-break:break-all; font-size:11px;">
                                            {{ basename($contributor->k_key) }}
                                        </small>
                                    </div>
                                @else
                                    <div class="mt-1 p-2 rounded" style="background:#fff8f0; border:1px solid #fcd9a0;">
                                        <small class="text-warning fw-bold">
                                            <i class="fad fa-exclamation-triangle me-1"></i>No private key uploaded
                                        </small>
                                    </div>
                                @endif
                                {{-- Datos permanentes del .key desde BD --}}
                                @if($keyData ?? false)
                                    <div id="key_data_permanent" class="mt-2 p-2 rounded" style="background:#f0fff4; border:1px solid #b7ebc0; font-size:12px;">
                                        <div class="fw-bold text-success mb-1"><i class="fad fa-key me-1"></i>Private Key Info</div>
                                        <ul class="list-unstyled mb-0">
                                            <li><span class="text-muted">File:</span> {{ $keyData->filename }}</li>
                                            <li><span class="text-muted">Bits:</span> {{ $keyData->bits }}</li>
                                            <li><span class="text-success fw-bold"><i class="fad fa-check-circle me-1"></i>Password valid ✓</span></li>
                                        </ul>
                                    </div>
                                @endif
                                {{-- Resultado AJAX al subir nueva llave --}}
                                <div id="key_data" class="mt-2 d-none">
                                    <div id="key_data_content" class="p-2 rounded" style="font-size:12px;"></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Password *</label>
                                <input type="password" id="input_password" name="password"
                                    class="form-control form-control-sm"
                                    autocomplete="new-password" required
                                    value="{{ $contributor->password }}"
                                    onchange="triggerCertValidation()">
                                <small class="text-muted">Required to validate and save the private key</small>
                                {{-- Estado validación --}}
                                <div id="validation_status" class="mt-2 d-none"></div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12 text-end">
                                <a href="{{ route('billing.setup.complete') }}" class="btn btn-secondary btn-sm me-2">Cancel</a>
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fad fa-save me-1"></i>Save
                                </button>
                            </div>
                        </div>

                    </form>

                    {{-- ══ TEST CERTIFICATES ═══════════════════════════════════════════ --}}
                    <div class="mt-4">
                        <div class="card border-warning">
                            <div class="card-header bg-warning bg-opacity-10 d-flex align-items-center justify-content-between py-2"
                                 style="cursor:pointer" data-bs-toggle="collapse" data-bs-target="#testCertSection">
                                <span class="fw-bold text-warning">
                                    <i class="fad fa-flask me-2"></i>Test Certificates (SAT — EKU9003173C9)
                                </span>
                                <span class="badge bg-warning text-dark">
                                    {{ $contributor->test_mode ? 'Test Mode ON' : 'Test Mode OFF' }}
                                </span>
                            </div>
                            <div class="collapse {{ $contributor->test_mode ? 'show' : '' }}" id="testCertSection">
                                <div class="card-body pt-3">
                                    <p class="text-muted small mb-3">
                                        <i class="fad fa-info-circle me-1"></i>
                                        Certificados de prueba del SAT. Solo se usan cuando <strong>Test Mode</strong> está activo.
                                        <strong>No reemplazan</strong> los certificados productivos.
                                        &nbsp;|&nbsp; Contraseña default SAT: <code>12345678a</code>
                                    </p>
                                    <form action="{{ route('billing.setup.store.certificate') }}" method="POST"
                                          enctype="multipart/form-data" autocomplete="off">
                                        @csrf
                                        <input type="hidden" name="cert_type" value="test">
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label class="form-label fw-bold">Test Certificate (.cer)</label>
                                                <input type="file" name="digital_certificate"
                                                    class="form-control form-control-sm" accept=".cer">
                                                @if($contributor->test_certificado ?? false)
                                                    <div class="mt-1 p-2 rounded" style="background:#fffbea;border:1px solid #f6cc52;">
                                                        <small class="text-warning fw-bold"><i class="fad fa-check-circle me-1"></i>Current test cert:</small><br>
                                                        <small class="text-muted" style="font-size:11px;word-break:break-all">{{ basename($contributor->test_certificado) }}</small>
                                                    </div>
                                                @else
                                                    <div class="mt-1 p-2 rounded" style="background:#fff8f0;border:1px solid #fcd9a0;">
                                                        <small class="text-warning fw-bold"><i class="fad fa-exclamation-triangle me-1"></i>No test certificate uploaded</small>
                                                    </div>
                                                @endif
                                                {{-- Info del .cer de prueba (igual que productivo) --}}
                                                @if($testCertData ?? false)
                                                    <div class="mt-2 p-2 rounded" style="background:#fffbea;border:1px solid #f6cc52;font-size:12px;">
                                                        <div class="fw-bold text-warning mb-1"><i class="fad fa-flask me-1"></i>Test Certificate Info</div>
                                                        <ul class="list-unstyled mb-0">
                                                            <li><span class="text-muted">File:</span> {{ $testCertData->filename }}</li>
                                                            <li><span class="text-muted">RFC:</span> {{ $testCertData->rfc }}</li>
                                                            <li><span class="text-muted">Name:</span> {{ $testCertData->name }}</li>
                                                            <li><span class="text-muted">Valid from:</span> {{ $testCertData->valid_from?->format('d/m/Y H:i:s') }}</li>
                                                            <li><span class="text-muted">Expires:</span> {{ $testCertData->valid_to?->format('d/m/Y H:i:s') }}</li>
                                                            <li>
                                                                @if(($testCertData->days_remaining ?? 0) > 0)
                                                                    <span class="text-warning fw-bold"><i class="fad fa-check-circle me-1"></i>{{ $testCertData->days_remaining }} days remaining</span>
                                                                @else
                                                                    <span class="text-danger fw-bold"><i class="fad fa-times-circle me-1"></i>EXPIRED</span>
                                                                @endif
                                                            </li>
                                                        </ul>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label fw-bold">Test Private Key (.key)</label>
                                                <input type="file" name="key_certificate"
                                                    class="form-control form-control-sm" accept=".key">
                                                @if($contributor->test_k_key ?? false)
                                                    <div class="mt-1 p-2 rounded" style="background:#fffbea;border:1px solid #f6cc52;">
                                                        <small class="text-warning fw-bold"><i class="fad fa-check-circle me-1"></i>Current test key:</small><br>
                                                        <small class="text-muted" style="font-size:11px;word-break:break-all">{{ basename($contributor->test_k_key) }}</small>
                                                    </div>
                                                @else
                                                    <div class="mt-1 p-2 rounded" style="background:#fff8f0;border:1px solid #fcd9a0;">
                                                        <small class="text-warning fw-bold"><i class="fad fa-exclamation-triangle me-1"></i>No test key uploaded</small>
                                                    </div>
                                                @endif
                                                {{-- Info del .key de prueba --}}
                                                @if($testKeyData ?? false)
                                                    <div class="mt-2 p-2 rounded" style="background:#fffbea;border:1px solid #f6cc52;font-size:12px;">
                                                        <div class="fw-bold text-warning mb-1"><i class="fad fa-key me-1"></i>Test Private Key Info</div>
                                                        <ul class="list-unstyled mb-0">
                                                            <li><span class="text-muted">File:</span> {{ $testKeyData->filename }}</li>
                                                            <li><span class="text-muted">Bits:</span> {{ $testKeyData->bits }}</li>
                                                            <li><span class="text-warning fw-bold"><i class="fad fa-check-circle me-1"></i>Password valid ✓</span></li>
                                                        </ul>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label fw-bold">Password</label>
                                                <input type="password" name="password"
                                                    class="form-control form-control-sm"
                                                    autocomplete="new-password"
                                                    placeholder="12345678a">
                                                <small class="text-muted">Default SAT test: <code>12345678a</code></small>
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <button type="submit" class="btn btn-warning btn-sm">
                                                <i class="fad fa-save me-1"></i>Save Test Certificates
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- ══ FIN TEST CERTIFICATES ══════════════════════════════════════ --}}

                </div>
            </div>
        </div>

        {{-- TAB 3: PAC Configuration --}}
        <div class="tab-pane fade {{ Request::get('tab') == 'pac' ? 'show active' : '' }}" id="pac">
            <div class="card border-top-0 rounded-0 rounded-bottom">
                <div class="card-body">
                    <form action="{{ route('billing.setup.store.pac') }}" method="POST" autocomplete="off">
                        @csrf

                        {{-- Test Mode Switch --}}
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="alert {{ $contributor->test_mode ? 'alert-warning' : 'alert-success' }} d-flex align-items-center">
                                    <div class="form-check form-switch me-3 mb-0">
                                        <input class="form-check-input" type="checkbox" id="test_mode" name="test_mode"
                                            {{ $contributor->test_mode ? 'checked' : '' }}
                                            style="width:3em; height:1.5em;">
                                    </div>
                                    <div>
                                        <strong>{{ $contributor->test_mode ? 'Test Mode Active' : 'Production Mode Active' }}</strong>
                                        <small class="d-block text-muted">
                                            {{ $contributor->test_mode ? 'Switch off when ready to go live' : 'System is using production PAC' }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Test Environment --}}
                        <h6 class="text-warning mb-3"><i class="fad fa-flask me-2"></i>Test Environment</h6>
                        <hr class="mb-4">

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Test RFC</label>
                                <input type="text" name="rfc_pruebas" class="form-control form-control-sm text-uppercase"
                                    value="{{ $contributor->rfc_pruebas ?? '' }}" maxlength="13"
                                    placeholder="RFC used in test mode">
                                <small class="text-muted">RFC used when Test Mode is active</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">PAC Test URL (WSDL)</label>
                                <input type="text" name="pac_url_pruebas" class="form-control form-control-sm"
                                    value="{{ $contributor->pac_url_pruebas ?? '' }}" placeholder="https://...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Test Integrator User</label>
                                <input type="text" name="pac_usuario_pruebas" class="form-control form-control-sm"
                                    value="{{ $contributor->pac_usuario_pruebas ?? '' }}">
                            </div>
                        </div>

                        {{-- Production Environment --}}
                        <h6 class="text-success mb-3"><i class="fad fa-globe me-2"></i>Production Environment</h6>
                        <hr class="mb-4">

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Production RFC</label>
                                <input type="text" class="form-control form-control-sm text-uppercase"
                                    value="{{ $contributor->rfc }}" readonly
                                    style="background:#f8f9fa;">
                                <small class="text-muted">Taken from General Settings</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">PAC Production URL (WSDL)</label>
                                <input type="text" name="pac_url_produccion" class="form-control form-control-sm"
                                    value="{{ $contributor->pac_url_produccion ?? '' }}" placeholder="https://...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">Production Integrator User</label>
                                <input type="text" name="pac_usuario_integrador" class="form-control form-control-sm"
                                    value="{{ $contributor->pac_usuario_integrador ?? '' }}">
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12 text-end">
                                <a href="{{ route('billing.setup.complete') }}" class="btn btn-secondary btn-sm me-2">Cancel</a>
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fad fa-save me-1"></i>Save
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>

        {{-- TAB 4: Invoice Formats --}}
        <div class="tab-pane fade {{ Request::get('tab') == 'formats' ? 'show active' : '' }}" id="formats">
            <div class="card border-top-0 rounded-0 rounded-bottom">
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        <i class="fad fa-info-circle me-1"></i>
                        Select the invoice PDF format for your company. Click a card to activate it.
                    </p>
                    <form action="{{ route('billing.setup.store.format') }}" method="POST">
                        @csrf
                        <div class="row g-3 mb-4">
                            @foreach($formats as $fmt)
                            <div class="col-md-4">
                                <label class="d-block h-100" style="cursor:pointer" onclick="updateFormatCards(this)">
                                    <input type="radio" name="format_id" value="{{ $fmt->id }}"
                                           class="d-none format-radio"
                                           @checked(($contributor->format_id ?? 2) == $fmt->id)>
                                    <div class="card h-100 format-card border-2
                                         {{ ($contributor->format_id ?? 2) == $fmt->id ? 'border-primary bg-primary bg-opacity-5' : 'border-light' }}">
                                        <div class="card-header py-2 text-white text-center fw-bold"
                                             style="background:{{ $fmt->getPrimaryColor() }};font-size:.8rem;">
                                            {{ $fmt->name }}
                                            @if(($contributor->format_id ?? 2) == $fmt->id)
                                                <span class="badge bg-white text-primary ms-1 active-badge" style="font-size:.65rem;">✓ ACTIVE</span>
                                            @endif
                                            <div class="text-white opacity-75 mt-1" style="font-size:.65rem;font-weight:normal;">
                                                <i class="fas fa-file-code me-1"></i>{{ basename(str_replace('.',DIRECTORY_SEPARATOR,$fmt->template_view)) }}.blade.php
                                            </div>
                                        </div>
                                        <div class="card-body p-2">
                                            {{-- Mini preview HTML --}}
                                            @if($fmt->slug == 'standard')
                                                <div style="border:1px solid #ddd;padding:4px;font-size:8px;background:#fff;min-height:90px;">
                                                    <div style="background:#b6b6b6;color:#fff;padding:2px 4px;margin-bottom:3px;font-weight:bold;">INVOICE 3818</div>
                                                    <div style="border-bottom:1px solid #ccc;padding-bottom:2px;margin-bottom:2px;">Emisor / Receptor</div>
                                                    <div style="background:#f5f5f5;padding:2px;margin-bottom:2px;font-size:7px;">QTY | DESC | PRICE | TOTAL</div>
                                                    <div style="text-align:right;font-size:7px;">IVA ___<br><b>Total ___</b></div>
                                                </div>
                                            @elseif($fmt->slug == 'corporate')
                                                <div style="border:1px solid #ddd;padding:4px;font-size:8px;background:#fff;min-height:90px;">
                                                    <div style="background:{{ $fmt->getPrimaryColor() }};color:#fff;padding:2px 4px;margin-bottom:2px;font-weight:bold;">EMPRESA S.A. DE C.V.</div>
                                                    <div style="display:flex;gap:2px;margin-bottom:2px;">
                                                        <div style="flex:1;background:#eee;padding:2px;font-size:7px;text-align:center;">LOGO</div>
                                                        <div style="flex:1;background:#eee;padding:2px;font-size:7px;text-align:center;">SP1</div>
                                                        <div style="flex:1;background:{{ $fmt->getPrimaryColor() }};color:#fff;padding:2px;font-size:7px;text-align:center;font-weight:bold;">#3818</div>
                                                    </div>
                                                    <div style="background:#f5f5f5;padding:2px;font-size:7px;">QTY | DESC | PRICE</div>
                                                    <div style="text-align:right;font-size:7px;margin-top:2px;"><b>Total ___</b></div>
                                                </div>
                                            @else
                                                <div style="border:1px solid #ddd;padding:4px;font-size:8px;background:#fff;min-height:90px;">
                                                    <div style="border-left:3px solid {{ $fmt->getPrimaryColor() }};padding-left:4px;margin-bottom:3px;">
                                                        <b>INVOICE</b> <span style="color:{{ $fmt->getPrimaryColor() }};float:right;">#3818</span>
                                                    </div>
                                                    <div style="display:flex;gap:4px;margin-bottom:2px;font-size:7px;">
                                                        <div style="flex:1;"><b>From:</b> Empresa SA</div>
                                                        <div style="flex:1;"><b>To:</b> Cliente SA</div>
                                                    </div>
                                                    <div style="background:{{ $fmt->getPrimaryColor() }};color:#fff;padding:2px;font-size:7px;font-weight:bold;">ITEMS</div>
                                                    <div style="text-align:right;font-size:7px;margin-top:2px;color:{{ $fmt->getPrimaryColor() }};"><b>TOTAL ___</b></div>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="card-footer py-2 d-flex justify-content-between align-items-center">
                                            <p class="text-muted mb-0" style="font-size:.72rem;">{{ $fmt->description }}</p>
                                            <button type="button"
                                                    class="btn btn-outline-secondary btn-sm py-0 px-2"
                                                    style="font-size:.72rem;"
                                                    onclick="event.stopPropagation(); openPreview('{{ route('billing.setup.preview.format', $fmt) }}', '{{ $fmt->name }}')">
                                                <i class="fas fa-eye me-1"></i>Preview
                                            </button>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        </div>
                        <div class="text-end">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fad fa-save me-1"></i>Save Format Selection
                            </button>
                        </div>
                    </form>

                    {{-- Logos Form (separado para soportar multipart) --}}
                    <hr class="my-4">
                    <h6 class="text-warning mb-3"><i class="fad fa-images me-2"></i>Invoice Logos</h6>
                    <form action="{{ route('billing.setup.store.logos') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-3 mb-3">
                            @php
                            $logoConfig = [
                                'corporate_logo' => ['label'=>'Company Logo',  'maxW'=>170,'maxH'=>50],
                                'sponsor_logo_1' => ['label'=>'Sponsor Logo 1','maxW'=>120,'maxH'=>50],
                                'sponsor_logo_2' => ['label'=>'Sponsor Logo 2','maxW'=>120,'maxH'=>50],
                                'sponsor_logo_3' => ['label'=>'Sponsor Logo 3','maxW'=>120,'maxH'=>50],
                            ];
                            @endphp
                            @foreach($logoConfig as $field => $cfg)
                            <div class="col-md-3">
                                <label class="form-label fw-bold small">
                                    {{ $cfg['label'] }}
                                    <small class="text-muted fw-normal">{{ $cfg['maxW'] }}×{{ $cfg['maxH'] }}px</small>
                                </label>
                                <input type="file" name="{{ $field }}" class="form-control form-control-sm"
                                       accept="image/jpeg,image/png">
                                <small class="text-muted" style="font-size:.7rem;">JPG/PNG — auto-resized</small>
                                <div class="mt-2 p-1 border rounded bg-light d-flex align-items-center justify-content-center"
                                     style="width:100%;height:70px;">
                                    @if($contributor->$field)
                                        <img src="{{ asset('img/billing/company/'.$contributor->$field) }}"
                                             style="max-height:50px;max-width:100%;object-fit:contain;"
                                             onerror="this.style.display='none'">
                                    @else
                                        <i class="fas fa-image fa-lg text-secondary"></i>
                                    @endif
                                </div>
                                @if($contributor->$field)
                                    <small class="text-muted text-truncate d-block w-100" style="font-size:.62rem;">
                                        {{ $contributor->$field }}
                                    </small>
                                @else
                                    <small class="text-muted" style="font-size:.7rem;">No logo</small>
                                @endif
                            </div>
                            @endforeach
                        </div>
                        <div class="text-end">
                            <button type="submit" class="btn btn-warning btn-sm">
                                <i class="fad fa-upload me-1"></i>Upload Logos
                            </button>
                        </div>
                    </form>

                    {{-- ── COLOR SETTINGS ─────────────────────────────── --}}
                    <hr class="my-4">
                    <h6 class="text-info mb-3"><i class="fad fa-palette me-2"></i>Invoice Colors</h6>
                    <form action="{{ route('billing.setup.store.colors') }}" method="POST">
                        @csrf
                        @foreach($formats as $fmt)
                        <div class="card mb-3">
                            <div class="card-header py-2 text-white d-flex justify-content-between align-items-center"
                                 style="background:{{ $fmt->getPrimaryColor() }}">
                                <h6 class="mb-0 small">{{ $fmt->name }}</h6>
                                <small class="opacity-75">{{ $fmt->slug }}</small>
                            </div>
                            <div class="card-body py-2">
                                {{-- Modo de color --}}
                                <div class="mb-2">
                                    <label class="form-label small fw-bold">Color Mode</label>
                                    <div class="d-flex gap-3">
                                        @php $mode = $fmt->settings['color_mode'] ?? 'original'; @endphp
                                        <div class="form-check">
                                            <input class="form-check-input color-mode-radio"
                                                   type="radio" name="formats[{{ $fmt->id }}][color_mode]"
                                                   value="theme" id="mode_theme_{{ $fmt->id }}"
                                                   data-fmt="{{ $fmt->id }}"
                                                   @checked($mode == 'theme')>
                                            <label class="form-check-label small" for="mode_theme_{{ $fmt->id }}">
                                                🎨 Tema del sistema
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input color-mode-radio"
                                                   type="radio" name="formats[{{ $fmt->id }}][color_mode]"
                                                   value="original" id="mode_orig_{{ $fmt->id }}"
                                                   data-fmt="{{ $fmt->id }}"
                                                   @checked($mode == 'original')>
                                            <label class="form-check-label small" for="mode_orig_{{ $fmt->id }}">
                                                🖌️ Diseño original
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input color-mode-radio"
                                                   type="radio" name="formats[{{ $fmt->id }}][color_mode]"
                                                   value="custom" id="mode_custom_{{ $fmt->id }}"
                                                   data-fmt="{{ $fmt->id }}"
                                                   @checked($mode == 'custom')>
                                            <label class="form-check-label small" for="mode_custom_{{ $fmt->id }}">
                                                ⚙️ Personalizado
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                {{-- Color pickers (solo en modo custom) --}}
                                <div id="custom_colors_{{ $fmt->id }}"
                                     style="{{ $mode == 'custom' ? '' : 'display:none;' }}">
                                    <div class="row g-2 mt-1">
                                        @php
                                        $colors = [
                                            ['key'=>'primary_color',      'label'=>'Color Primario',    'icon'=>'🎨'],
                                            ['key'=>'header_color',       'label'=>'Header / Banda',    'icon'=>'🔝'],
                                            ['key'=>'footer_color',       'label'=>'Footer / Pie',      'icon'=>'🔚'],
                                            ['key'=>'folio_color',        'label'=>'Número de Folio',   'icon'=>'#️⃣'],
                                            ['key'=>'text_color',         'label'=>'Texto General',     'icon'=>'✍️'],
                                            ['key'=>'table_header_color', 'label'=>'Header de Tabla',   'icon'=>'📋'],
                                        ];
                                        @endphp
                                        @foreach($colors as $col)
                                        <div class="col-md-2">
                                            <label class="form-label" style="font-size:.7rem;">
                                                {{ $col['icon'] }} {{ $col['label'] }}
                                            </label>
                                            <input type="color"
                                                   class="form-control form-control-color w-100"
                                                   name="formats[{{ $fmt->id }}][{{ $col['key'] }}]"
                                                   value="{{ $fmt->settings[$col['key']] ?? '#7B2032' }}"
                                                   title="{{ $col['label'] }}">
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach

                        <div class="text-end">
                            <button type="submit" class="btn btn-info btn-sm text-white">
                                <i class="fad fa-palette me-1"></i>Save Colors
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>{{-- fin tab-content --}}

</div>

{{-- Modal Error Certificado --}}
<div class="modal fade" id="modalCertError" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 420px;">
        <div class="modal-content" style="border-radius:10px; overflow:hidden; border:none; box-shadow:0 10px 40px rgba(0,0,0,0.15);">
            <div class="modal-header border-0 text-white bg-danger" style="padding:14px 20px;">
                <div class="d-flex align-items-center">
                    <i class="fad fa-times-circle me-2 fs-5"></i>
                    <h6 class="modal-title mb-0 fw-bold">Certificate Error</h6>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <i class="fad fa-lock fa-3x text-danger mb-3"></i>
                <p id="cert_error_msg" class="mb-0"></p>
            </div>
            <div class="modal-footer border-0 py-2 px-3">
                <button type="button" class="btn btn-danger btn-sm px-4" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Tax Regime --}}
<div class="modal fade" id="modalFiscalRegime" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 520px;">
        <div class="modal-content" style="border-radius: 10px; overflow: hidden; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.15);">
            <div class="modal-header border-0 text-white bg-primary" style="padding: 14px 20px;">
                <div class="d-flex align-items-center">
                    <i class="fad fa-landmark me-2"></i>
                    <div>
                        <h6 class="modal-title mb-0 fw-bold">Tax Regime</h6>
                        <small class="opacity-75" style="font-size: 11px;">Select the issuer tax regime</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="px-3 pt-3 pb-2 bg-light">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-white border-end-0">
                        <i class="fad fa-search text-muted" style="font-size:12px;"></i>
                    </span>
                    <input type="text" id="searchRegime" class="form-control form-control-sm border-start-0 ps-0"
                        placeholder="Search by code or description..."
                        onkeyup="filterRegimeModal(this.value)">
                </div>
                <small class="text-muted mt-1 d-block" style="font-size:11px;">
                    {{ $fiscalRegimes->count() }} tax regimes available
                </small>
            </div>
            <div class="modal-body p-0 bg-light">
                <div id="regimeList" style="max-height: 300px; overflow-y: auto; padding: 6px 12px 12px;">
                    @foreach($fiscalRegimes as $item)
                        <div class="regime-item d-flex align-items-center px-2 py-2 mb-1 rounded"
                            style="cursor:pointer; background:#fff; border:1px solid #e9ecef; transition: all 0.12s ease; font-size:13px;"
                            data-desc="{{ $item->code }} - {{ $item->description }}"
                            onclick="selectFiscalRegime('{{ $item->code }}', '{{ $item->code }} - {{ addslashes($item->description) }}')"
                            onmouseover="this.style.borderColor='var(--bs-primary)'; this.style.background='#eef2ff'; this.style.transform='translateX(3px)';"
                            onmouseout="this.style.borderColor='#e9ecef'; this.style.background='#fff'; this.style.transform='translateX(0)';">
                            <span class="badge bg-primary me-2" style="font-size:11px; min-width:40px;">{{ $item->code }}</span>
                            <span class="text-dark">{{ $item->description }}</span>
                            <i class="fad fa-chevron-right ms-auto text-muted" style="font-size:11px; opacity:0.4;"></i>
                        </div>
                    @endforeach
                    <div id="noResults" class="text-center py-3 d-none">
                        <p class="text-muted mb-0" style="font-size:13px;">No results found</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 bg-light py-2 px-3">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal de preview --}}
<div class="modal fade" id="formatPreviewModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title"><i class="fas fa-eye me-1"></i>Format Preview: <span id="previewFormatName"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="height:75vh;">
                <iframe id="previewIframe" src="" style="width:100%;height:100%;border:none;"></iframe>
            </div>
            <div class="modal-footer py-1">
                <small class="text-muted me-auto">Showing last invoice with this format applied.</small>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



{{-- Modal de preview --}}
<div class="modal fade" id="formatPreviewModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title"><i class="fas fa-eye me-1"></i>Format Preview: <span id="previewFormatName"></span></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="height:75vh;">
                <iframe id="previewIframe" src="" style="width:100%;height:100%;border:none;"></iframe>
            </div>
            <div class="modal-footer py-1">
                <small class="text-muted me-auto">Showing last invoice with this format applied.</small>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Preview PDF --}}
<div class="modal fade" id="modalPreviewPdf" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:90vw;">
        <div class="modal-content" style="height:90vh;">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0">
                    <i class="fad fa-file-pdf me-2 text-danger"></i>
                    Format Preview: <span id="previewFormatName" class="text-primary"></span>
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="flex:1;overflow:hidden;">
                <iframe id="previewPdfFrame" src=""
                        style="width:100%;height:100%;border:none;min-height:75vh;">
                </iframe>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
function openPreview(url, name){
    document.getElementById('previewFormatName').textContent = name;
    document.getElementById('previewPdfFrame').src = url;
    new bootstrap.Modal(document.getElementById('modalPreviewPdf')).show();
}
// Color mode toggle
document.querySelectorAll('.color-mode-radio').forEach(function(radio){
    radio.addEventListener('change', function(){
        var fmtId = this.dataset.fmt;
        var pickers = document.getElementById('custom_colors_' + fmtId);
        if(this.value === 'custom'){
            pickers.style.display = '';
        } else {
            pickers.style.display = 'none';
        }
    });
});
function updateFormatCards(clickedLabel){
    // Pequeño delay para que el radio se marque primero
    setTimeout(function(){
        document.querySelectorAll('.format-card').forEach(function(c){
            c.classList.remove('border-primary','bg-primary','bg-opacity-5','shadow');
            c.classList.add('border-light');
            var b = c.querySelector('.active-badge');
            if(b) b.remove();
        });
        var radio = clickedLabel ? clickedLabel.querySelector('.format-radio') : document.querySelector('.format-radio:checked');
        if(!radio || !radio.checked) return;
        var card = clickedLabel.querySelector('.format-card');
        if(!card) return;
        card.classList.add('border-primary','bg-primary','bg-opacity-5','shadow');
        card.classList.remove('border-light');
        var hdr = card.querySelector('.card-header');
        if(hdr && !hdr.querySelector('.active-badge')){
            var b = document.createElement('span');
            b.className = 'badge bg-white text-primary ms-1 active-badge';
            b.style.fontSize = '.65rem';
            b.textContent = '✓ ACTIVE';
            hdr.appendChild(b);
        }
    }, 50);
}
function filterRegimeModal(val) {
    var items = document.querySelectorAll('#regimeList .regime-item');
    var q = val.toLowerCase();
    var found = 0;
    items.forEach(function(item) {
        var desc = item.getAttribute('data-desc').toLowerCase();
        if (desc.includes(q)) { item.style.display = ''; found++; }
        else { item.style.display = 'none'; }
    });
    var noResults = document.getElementById('noResults');
    if (noResults) noResults.classList.toggle('d-none', found > 0);
}

function selectFiscalRegime(code, label) {
    var input = document.getElementById('tax_regime_display');
    var hidden = document.getElementById('tax_regime');
    if (input) input.value = label;
    if (hidden) hidden.value = code;
    var modal = bootstrap.Modal.getInstance(document.getElementById('modalFiscalRegime'));
    if (modal) modal.hide();
}

function previewFormat(url, name){
    document.getElementById('previewFormatName').textContent = name;
    document.getElementById('previewIframe').src = url;
    new bootstrap.Modal(document.getElementById('formatPreviewModal')).show();
}
</script>
@endsection

@endsection