{{--
    Vista DEMOS — Seguimiento y Auditoría de Demos (Branding Deluxe).
    Visualiza el estado de los 21 demos del sistema según los requisitos de
    archivos variables y validación de formularios contra spam (AJAX/reCAPTCHA).
--}}

@push('styles')
<style>
    .demo-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        transition: all 150ms ease;
    }
    .demo-card:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        border-color: #0d6efd;
    }
    .demo-score-badge {
        font-weight: 800;
        font-size: 13px;
        padding: 4px 10px;
        border-radius: 20px;
        text-align: center;
        display: inline-block;
    }
    .demo-score-badge.deluxe { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
    .demo-score-badge.in_progress { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
    .demo-score-badge.incomplete { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

    .file-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        font-size: 10px;
        font-weight: 600;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
    }
    .file-pill.ok { background: #d1fae5; color: #065f46; }
    .file-pill.missing { background: #fee2e2; color: #991b1b; }
    .file-pill.fallback { background: #f3f4f6; color: #4b5563; }

    .recaptcha-warning {
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #b45309;
        font-size: 10px;
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
</style>
@endpush

{{-- Widgets de Resumen Global --}}
<div class="row g-3 mb-4">
    <div class="col-md-3 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-gray-800">{{ $data['totals']['total'] }}</div>
            <div class="fs-8 text-muted fw-semibold">Demos en Catálogo</div>
        </div></div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-success">{{ $data['totals']['deluxe'] }}</div>
            <div class="fs-8 text-muted fw-semibold">Deluxe Ready (100%)</div>
        </div></div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-warning">{{ $data['totals']['in_progress'] }}</div>
            <div class="fs-8 text-muted fw-semibold">En Progreso (≥50%)</div>
        </div></div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-primary">{{ $data['totals']['avg_score'] }}%</div>
            <div class="fs-8 text-muted fw-semibold">Salud Promedio Branding</div>
        </div></div>
    </div>
</div>

{{-- Tabla / Lista de Demos Audita --}}
<div class="card shadow-sm mb-4">
    <div class="card-header border-0 pt-4 pb-2">
        <h3 class="card-title align-items-start flex-column">
            <span class="card-label fw-bold text-gray-900 fs-5"><i class="fas fa-palette text-primary me-2"></i>Seguimiento y Diagnóstico de Plantillas</span>
            <span class="text-muted mt-1 fw-semibold fs-7">Control de adaptadores CSS, Skins, Vistas base y formularios AJAX/reCAPTCHA</span>
        </h3>
    </div>
    <div class="card-body py-3">
        <div class="table-responsive">
            <table class="table align-middle table-row-dashed fs-6 gy-3 mb-0">
                <thead>
                    <tr class="text-start text-gray-500 fw-bold fs-8 text-uppercase">
                        <th>Demo / Tipo</th>
                        <th class="text-center" style="width: 100px;">Readiness Score</th>
                        <th>Archivos Visuales (Layouts)</th>
                        <th>Vistas Base (Fallback/Demo)</th>
                        <th>Módulos Activos (Dynamic Headers)</th>
                        <th>Seguridad reCAPTCHA / AJAX</th>
                        <th class="text-end">Estado</th>
                    </tr>
                </thead>
                <tbody class="text-gray-700">
                    @foreach($data['demos'] as $demo)
                        @php
                            $scoreClass = $demo['score'] === 100 ? 'deluxe' : ($demo['score'] >= 50 ? 'in_progress' : 'incomplete');
                            $badgeClass = $demo['status'] === 'deluxe' ? 'bg-light-success text-success' : ($demo['status'] === 'in_progress' ? 'bg-light-warning text-warning' : 'bg-light-danger text-danger');
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex flex-column">
                                    <span class="fw-bold text-gray-800 fs-6">{{ $demo['label'] }}</span>
                                    <span class="text-muted fs-8"><code>{{ $demo['key'] }}</code> · <span class="badge badge-light-primary py-0 px-2 fs-9 text-uppercase">{{ $demo['type'] }}</span></span>
                                </div>
                            </td>
                            <td class="text-center">
                                <span class="demo-score-badge {{ $scoreClass }}">{{ $demo['score'] }}%</span>
                            </td>
                            <td>
                                {{-- CSS --}}
                                <span class="file-pill {{ $demo['files']['css'] === 'OK' ? 'ok' : 'missing' }}">
                                    <i class="fas {{ $demo['files']['css'] === 'OK' ? 'fa-check' : 'fa-times' }} me-1"></i>CSS
                                </span>
                                {{-- Skin --}}
                                <span class="file-pill {{ $demo['files']['skin'] === 'OK' ? 'ok' : ($demo['files']['skin'] === 'NO MAPPING' ? 'fallback' : 'missing') }}">
                                    <i class="fas {{ $demo['files']['skin'] === 'OK' ? 'fa-check' : 'fa-times' }} me-1"></i>Skin
                                </span>
                                {{-- Header --}}
                                <span class="file-pill {{ $demo['files']['header'] === 'OK' ? 'ok' : 'missing' }}">
                                    <i class="fas {{ $demo['files']['header'] === 'OK' ? 'fa-check' : 'fa-times' }} me-1"></i>Header
                                </span>
                                {{-- Footer --}}
                                <span class="file-pill {{ $demo['files']['footer'] === 'OK' ? 'ok' : 'missing' }}">
                                    <i class="fas {{ $demo['files']['footer'] === 'OK' ? 'fa-check' : 'fa-times' }} me-1"></i>Footer
                                </span>
                            </td>
                            <td>
                                @foreach(['welcome', 'about', 'contact'] as $v)
                                    @php
                                        $vStatus = $demo['views'][$v] ?? 'FALLBACK';
                                        $vClass = $vStatus === 'OK' ? 'ok' : 'fallback';
                                    @endphp
                                    <span class="file-pill {{ $vClass }}" title="{{ $vStatus === 'OK' ? 'Vista específica cargada' : 'Heredado del fallback genérico' }}">
                                        {{ $v }}: {{ $vStatus }}
                                    </span>
                                @endforeach
                            </td>
                            <td>
                                @if(empty($demo['modules']))
                                    <span class="text-muted fs-8">Ninguno requerido</span>
                                @else
                                    @foreach($demo['modules'] as $modName => $modData)
                                        @php
                                            $mClass = $modData['supports_demo'] ? 'ok' : 'missing';
                                        @endphp
                                        <span class="file-pill {{ $mClass }}" title="{{ $modData['supports_demo'] ? 'Soporta este demo' : 'No tiene implementado este demo en su dynamic header' }}">
                                            <i class="fas {{ $modData['supports_demo'] ? 'fa-check' : 'fa-times' }} me-1"></i>{{ $modName }}
                                        </span>
                                    @endforeach
                                @endif
                            </td>
                            <td>
                                @if(empty($demo['recaptcha_check']))
                                    <span class="text-muted fs-8">Sin formularios detectados</span>
                                @else
                                    @php
                                        $allOk = true;
                                        foreach($demo['recaptcha_check'] as $chk) {
                                            if(!$chk['has_recaptcha_class']) $allOk = false;
                                        }
                                    @endphp
                                    @if($allOk)
                                        <span class="badge badge-light-success fs-8"><i class="fas fa-shield text-success me-1"></i> AJAX/reCAPTCHA OK</span>
                                    @else
                                        <div class="recaptcha-warning">
                                            <i class="fas fa-triangle-exclamation"></i>
                                            <span>Falta clase <code>js-recaptcha-form</code> en forms</span>
                                        </div>
                                    @endif
                                @endif
                            </td>
                            <td class="text-end">
                                <span class="badge {{ $badgeClass }} fs-8 fw-bold text-uppercase">{{ $demo['status'] }}</span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="alert alert-dismissible bg-light-primary border border-primary d-flex flex-column flex-sm-row p-5 mb-4" style="border-radius: 12px;">
    <i class="fas fa-circle-info fs-2 text-primary me-sm-4 mb-3 mb-sm-0"></i>
    <div class="d-flex flex-column pe-0 pe-sm-10">
        <h5 class="mb-1 text-gray-900 fw-bold">Eje de Maduración de Demos (Branding Factory)</h5>
        <span class="fs-7 text-gray-700">
            Este panel audita de forma dinámica e interactiva todos los templates visuales. Cada demo que alcanza el 100% (**Deluxe**) garantiza:
            1. Hojas de estilo y skins Porto compiladas y cargadas sin romper compatibilidad.
            2. Headers, Footers y Vistas base adaptadas que previenen pérdida de datos en Laravel.
            3. Seguridad activada contra spam con formularios AJAX configurados con `js-recaptcha-form`.
        </span>
    </div>
</div>