{{--
    @intent Submódulo 4 — Features (Controle de Acessibilidade e Elementos Especiais)
    @description Liga/desliga recursos especiais do portal: VLibras, barra eMAG, LAI e futuros toggles.
    @vars $userConfigs (array), $layoutConfigs (Collection)
--}}
@extends('v2-cms::layouts.app', [
    'title'    => 'Features',
    'subtitle' => 'Editor Estrutural'
])

@section('page-breadcrumbs')
    <nav aria-label="Breadcrumb">
        <ol class="breadcrumb bg-transparent p-0 mb-0 small">
            <li class="breadcrumb-item"><a href="{{ route('v2.cms.dashboard') }}" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('v2.supportconfigs.index') }}" class="text-decoration-none">Suporte</a></li>
            <li class="breadcrumb-item"><a href="{{ route('v2.structural-editor.theme') }}" class="text-decoration-none">Landing Page</a></li>
            <li class="breadcrumb-item active" aria-current="page">Recursos</li>
        </ol>
    </nav>
@endsection

@section('content')
    <main role="main" class="v2-cms-module-container">

        <header class="v2-page-header mb-4">
            <div class="row">
                <div class="col-12">
                    <p class="text-muted">
                        Controle global para ativar/desativar elementos especiais do portal.
                        Atualmente: VLibras, Barra de Acessibilidade eMAG e Painel LAI.
                    </p>
                </div>
            </div>
        </header>

        <section class="v2-main-content" aria-label="Painel de features">
            @include('flash::message')

            <div class="grid gap-4" style="--bs-columns: 1;">

                {{-- ─────────────────────────────────────────────────────────────
                    Card Único — Toggles de Acessibilidade
                    Expansível: novos toggles podem ser adicionados aqui no futuro.
                    ─────────────────────────────────────────────────────────────--}}
                <div class="card shadow-sm border-0 g-col-1">
                    <div class="card-header bg-light py-3 px-4 border-bottom-0">
                        <h5 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
                            <i class="bi bi-universal-access text-primary"></i> Controles de Acessibilidade
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="alert alert-info d-flex gap-3 p-3 mb-4 border-0 shadow-sm" role="alert">
                            <i class="bi bi-info-circle-fill fs-4 flex-shrink-0" aria-hidden="true"></i>
                            <div>
                                <p class="mb-0">
                                    Ative ou desative recursos especiais do portal. Cada toggle é independente
                                    e o efeito é imediato em todas as páginas públicas.
                                </p>
                            </div>
                        </div>

                        <form action="{{ route('v2.structural-editor.features.save') }}" method="POST">
                            {{ csrf_field() }}
                            <input type="hidden" name="tab" value="features">

                            <div class="row g-4">
                                {{-- VLibras --}}
                                <div class="col-md-4">
                                    <div class="card border-0 bg-light h-100">
                                        <div class="card-body text-center p-4">
                                            <i class="bi bi-hand-index-thumb fs-1 text-primary mb-3 d-block"></i>
                                            <div class="form-check form-switch d-flex justify-content-center mb-2">
                                                <input type="hidden" name="vlibras_enabled" value="0">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                       id="vlibras_enabled" name="vlibras_enabled" value="1"
                                                       style="transform: scale(1.3);"
                                                       {{ !empty($userConfigs['vlibras_enabled']) ? 'checked' : '' }}>
                                            </div>
                                            <label class="form-check-label fw-bold" for="vlibras_enabled">
                                                VLibras
                                            </label>
                                            <div class="form-text mt-2">
                                                Widget de tradução para LIBRAS. Exibe o ícone flutuante "V" no canto inferior direito.
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Barra de Acessibilidade eMAG --}}
                                <div class="col-md-4">
                                    <div class="card border-0 bg-light h-100">
                                        <div class="card-body text-center p-4">
                                            <i class="bi bi-eye fs-1 text-success mb-3 d-block"></i>
                                            <div class="form-check form-switch d-flex justify-content-center mb-2">
                                                <input type="hidden" name="accessibility_bar_enabled" value="0">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                       id="accessibility_bar_enabled" name="accessibility_bar_enabled" value="1"
                                                       style="transform: scale(1.3);"
                                                       {{ !empty($userConfigs['accessibility_bar_enabled']) ? 'checked' : '' }}>
                                            </div>
                                            <label class="form-check-label fw-bold" for="accessibility_bar_enabled">
                                                Barra eMAG
                                            </label>
                                            <div class="form-text mt-2">
                                                Barra superior com atalhos de acessibilidade: alto contraste,
                                                tamanho de fonte, dislexia e guia de leitura.
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Painel LAI --}}
                                <div class="col-md-4">
                                    @php
                                        $laiEnabled = true;
                                        if ($layoutConfigs instanceof \Illuminate\Support\Collection && $layoutConfigs->has('lai_enabled')) {
                                            $laiPayload = $layoutConfigs['lai_enabled']->payload ?? [];
                                            $laiEnabled = isset($laiPayload['enabled']) ? (bool) $laiPayload['enabled'] : true;
                                        }
                                    @endphp
                                    <div class="card border-0 bg-light h-100">
                                        <div class="card-body text-center p-4">
                                            <i class="bi bi-shield-check fs-1 text-warning mb-3 d-block"></i>
                                            <div class="form-check form-switch d-flex justify-content-center mb-2">
                                                <input type="hidden" name="lai_enabled" value="0">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                       id="lai_enabled" name="lai_enabled" value="1"
                                                       style="transform: scale(1.3);"
                                                       {{ $laiEnabled ? 'checked' : '' }}>
                                            </div>
                                            <label class="form-check-label fw-bold" for="lai_enabled">
                                                Painel LAI
                                            </label>
                                            <div class="form-text mt-2">
                                                Painel "Acesso à Informação" (Lei de Acesso à Informação)
                                                exibido no rodapé de todas as páginas.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Widget Flutuante de Acessibilidade --}}
                            <div class="row g-4 mt-2">
                                <div class="col-md-4">
                                    <div class="card border-0 bg-light h-100">
                                        <div class="card-body text-center p-4">
                                            <i class="bi bi-universal-access-circle fs-1 text-info mb-3 d-block"></i>
                                            <div class="form-check form-switch d-flex justify-content-center mb-2">
                                                <input type="hidden" name="accessibility_widget_enabled" value="0">
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                       id="accessibility_widget_enabled" name="accessibility_widget_enabled" value="1"
                                                       style="transform: scale(1.3);"
                                                       {{ !empty($userConfigs['accessibility_widget_enabled']) ? 'checked' : '' }}>
                                            </div>
                                            <label class="form-check-label fw-bold" for="accessibility_widget_enabled">
                                                Widget Acessibilidade
                                            </label>
                                            <div class="form-text mt-2">
                                                Menu flutuante no lado esquerdo com botões de contraste, fonte,
                                                dislexia, guia de leitura, entre outros. Ícone também aparece na barra.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- ──────────────────────────────────────────────────
                                Área reservada para futuros toggles
                                Basta adicionar novas colunas .col-md-4 no grid acima.
                                ─────────────────────────────────────────────────--}}

                            <div class="mt-4 pt-3 border-top d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary fw-bold px-4 d-inline-flex align-items-center gap-2">
                                    <i class="bi bi-save"></i> Salvar Features
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- ─────────────────────────────────────────────────────────────
                    Card informativo — Arquitetura de Features
                    ─────────────────────────────────────────────────────────────--}}
                <div class="card shadow-sm border-0 g-col-1">
                    <div class="card-body p-4">
                        <div class="alert alert-info d-flex gap-3 p-3 mb-0 border-0" role="alert">
                            <i class="bi bi-diagram-3 fs-4 flex-shrink-0" aria-hidden="true"></i>
                            <div>
                                <h4 class="alert-heading h6 fw-bold mb-1">Arquitetura de Features</h4>
                                <p class="mb-0 small text-secondary">
                                    Os toggles de acessibilidade são armazenados em <code>v2_portal_configs</code>
                                    (via <code>UserConfigsService</code>). O toggle LAI está em <code>v2_layout_base_configs</code>
                                    como chave <code>lai_enabled</code>. O Widget de Acessibilidade é controlado por
                                    <code>accessibility_widget_enabled</code> e funciona independente da barra.
                                    Futuras features podem seguir qualquer um dos
                                    patterns — este submódulo é o ponto central de controle.
                                </p>
                            </div>
                        </div>
                </div>
            </div>

            @include('v2-cms::partials.activity-footer', [
                'model' => new \V2\Modules\Support\StructuralLandingEditor\Models\StructuralPortalContent()
            ])

        </div>
    </section>

    </main>
@endsection