@extends('layouts.app')

@section('content')
<div class="settings-container">
    <!-- Header da página -->
    <div class="page-header">
        <div class="page-header-content">
            <div class="page-title-section">
                <h1 class="page-title">Menu</h1>
                <p class="page-subtitle">Configurações de visibilidade do menu</p>
            </div>
            <a href="{{ route('admin.dashboard') }}" class="btn-modern btn-outline">
                <i class="bi bi-arrow-left"></i>
                <span>Voltar</span>
            </a>
        </div>
    </div>

    <!-- Menu de navegação entre grupos -->
    <div class="settings-nav">
        @php
            $groups = \App\Models\Setting::GROUPS;
            $activeGroup = 'menu';
        @endphp
        @foreach($groups as $groupKey => $group)
            @php
                $menuKeyMap = [
                    'email' => 'config_email_enabled',
                    'seo' => 'config_seo_enabled',
                    'analytics' => 'config_analytics_enabled',
                    'social' => 'config_redes_sociais_enabled',
                    'contact' => 'config_contato_enabled',
                    'appearance' => 'config_aparencia_enabled',
                    'security' => 'config_seguranca_enabled',
                    'integrations' => 'config_integracoes_enabled',
                    'customization' => 'config_personalizacao_enabled'
                ];
                
                $configKey = $menuKeyMap[$groupKey] ?? null;
                $isEnabled = $configKey ? (\App\Models\Setting::get('menu.' . $configKey, '1') == '1') : true;
            @endphp
            @if($isEnabled)
            <a href="{{ route('settings.index', $groupKey) }}" 
               class="nav-item {{ $activeGroup === $groupKey ? 'active' : '' }}">
                <i class="{{ $group['icon'] }}"></i>
                <span>{{ $group['name'] }}</span>
            </a>
            @endif
        @endforeach
    </div>

    <!-- Formulário de configurações -->
    <div class="form-card">
        <form action="{{ route('settings.update', 'menu') }}" method="POST" class="modern-form">
            @csrf
            @method('PUT')

            <div class="form-section">
                <h3 class="section-title">Configurações de Visibilidade do Menu</h3>
                <div class="form-fields">
                    <!-- SEÇÃO: MÓDULOS FIXOS -->
                    @php
                        $fixedModules = [
                            ['slug' => 'users', 'name' => 'Usuários', 'icon' => 'bi bi-people'],
                            ['slug' => 'roles', 'name' => 'Papéis',  'icon' => 'bi bi-lock'],
                            ['slug' => 'amazon_affiliate', 'name' => 'Amazon Affiliate', 'icon' => 'bi bi-amazon'],
                            ['slug' => 'affiliate_footers', 'name' => 'Textos de Rodapé', 'icon' => 'bi bi-card-text'],
                            ['slug' => 'settings', 'name' => 'Configurações', 'icon' => 'bi bi-gear']
                        ];
                    @endphp

                    <h4 class="subsection-title">Módulos Principais</h4>
                    @foreach($fixedModules as $module)
                    <div class="setting-field">
                        <label for="{{ $module['slug'] }}_enabled" class="field-label">
                            <i class="{{ $module['icon'] }}"></i>
                            Exibir menu {{ $module['name'] }}
                        </label>
                        <div class="switch-wrapper">
                            <label class="switch">
                                <input type="checkbox" 
                                       id="{{ $module['slug'] }}_enabled" 
                                       name="menu[{{ $module['slug'] }}_enabled]" 
                                       value="1" 
                                       {{ \App\Models\Setting::get('menu.' . $module['slug'] . '_enabled', '1') == '1' ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                    @endforeach

                    <!-- Seção Configurações -->
                    <h4 class="subsection-title">Configurações</h4>
                    <div class="submenu-group">
                        <h5 class="submenu-title">
                            <i class="bi bi-gear"></i>
                            Configurações do Sistema
                        </h5>
                        <div class="setting-field submenu-item">
                            <label for="config_email_enabled" class="field-label">
                                <i class="bi bi-envelope"></i>
                                Exibir E-mail
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_email_enabled" name="menu[config_email_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_email_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_seo_enabled" class="field-label">
                                <i class="bi bi-search"></i>
                                Exibir SEO
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_seo_enabled" name="menu[config_seo_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_seo_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_analytics_enabled" class="field-label">
                                <i class="bi bi-graph-up"></i>
                                Exibir Analytics
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_analytics_enabled" name="menu[config_analytics_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_analytics_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_redes_sociais_enabled" class="field-label">
                                <i class="bi bi-share"></i>
                                Exibir Redes Sociais
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_redes_sociais_enabled" name="menu[config_redes_sociais_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_redes_sociais_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_contato_enabled" class="field-label">
                                <i class="bi bi-telephone"></i>
                                Exibir Contato
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_contato_enabled" name="menu[config_contato_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_contato_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_aparencia_enabled" class="field-label">
                                <i class="bi bi-palette"></i>
                                Exibir Aparência
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_aparencia_enabled" name="menu[config_aparencia_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_aparencia_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_seguranca_enabled" class="field-label">
                                <i class="bi bi-shield-check"></i>
                                Exibir Segurança
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_seguranca_enabled" name="menu[config_seguranca_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_seguranca_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_integracoes_enabled" class="field-label">
                                <i class="bi bi-plug"></i>
                                Exibir Integrações
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_integracoes_enabled" name="menu[config_integracoes_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_integracoes_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_personalizacao_enabled" class="field-label">
                                <i class="bi bi-sliders"></i>
                                Exibir Personalização
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_personalizacao_enabled" name="menu[config_personalizacao_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_personalizacao_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-field submenu-item">
                            <label for="config_credenciais_afiliados_enabled" class="field-label">
                                <i class="bi bi-link-45deg"></i>
                                Exibir Credenciais de Afiliados
                            </label>
                            <div class="switch-wrapper">
                                <label class="switch">
                                    <input type="checkbox" id="config_credenciais_afiliados_enabled" name="menu[config_credenciais_afiliados_enabled]" value="1" 
                                           {{ \App\Models\Setting::get('menu.config_credenciais_afiliados_enabled', '1') == '1' ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Ações do formulário -->
            <div class="form-actions">
                <button type="submit" class="btn-modern btn-primary">
                    <i class="bi bi-save"></i>
                    <span>Salvar Alterações</span>
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    /* FORÇAR ALINHAMENTO À ESQUERDA - SOBRESCREVENDO TODOS OS ESTILOS */
    body .content-main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    .settings-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .page-header {
        margin-bottom: 32px;
    }

    .page-header-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 24px;
    }

    .page-title-section {
        flex: 1;
    }

    .settings-nav {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .settings-nav .nav-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        text-decoration: none;
        color: #495057;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .settings-nav .nav-item:hover {
        background: #e9ecef;
        color: #212529;
        text-decoration: none;
    }

    .settings-nav .nav-item.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

    .settings-nav .nav-item i {
        font-size: 16px;
    }

    .page-title {
        font-size: 32px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 8px 0;
        letter-spacing: -0.025em;
    }

    .page-subtitle {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

    .btn-modern {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 500;
        font-size: 14px;
        text-decoration: none;
        border: 1px solid transparent;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    .btn-primary {
        background: var(--primary-color);
        color: white;
        box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
        background: var(--primary-hover);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        color: white;
    }

    .btn-outline {
        background: transparent;
        border-color: var(--border-color);
        color: var(--text-secondary);
    }

    .btn-outline:hover {
        background: var(--background-tertiary);
        color: var(--text-primary);
    }

    .form-card {
        background: var(--card-bg);
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .modern-form {
        padding: 32px;
    }

    .form-section {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 24px 0;
        letter-spacing: -0.025em;
    }

    .subsection-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 24px 0 16px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--primary-color);
        letter-spacing: -0.025em;
    }

    .subsection-title:first-child {
        margin-top: 0;
    }

    .submenu-group {
        margin: 24px 0;
        background: var(--background-secondary);
        border-radius: 8px;
        padding: 20px;
        border: 1px solid var(--border-subtle);
    }

    .submenu-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;
        letter-spacing: -0.015em;
    }

    .submenu-title i {
        color: var(--primary-color);
    }

    .form-fields {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .setting-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 0;
        border-bottom: 1px solid var(--border-subtle);
        min-height: 52px;
        position: relative;
    }

    .setting-field:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .setting-field.submenu-item {
        padding: 16px 0;
        margin-left: 20px;
    }

    .field-label {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        cursor: pointer;
        max-width: calc(100% - 60px);
        text-align: left;
    }

    .field-label i {
        color: var(--text-muted);
        width: 16px;
        text-align: center;
        margin-left: 10px;
        margin-right: 2px;
    }

    .field-description {
        display: block;
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
        margin-left: 34px;
        font-weight: 400;
        line-height: 1.4;
    }

    /* Switch Toggle */
    .switch-wrapper {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: auto;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--border-color);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 24px;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: white;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input:checked + .slider {
        background: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    input:checked + .slider:before {
        transform: translateX(20px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    input:focus + .slider {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
    }

    /* Hover effects */
    .switch:hover .slider {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .switch:hover input:checked + .slider {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
    }

    /* Form Actions */
    .form-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: 32px;
        border-top: 1px solid var(--border-subtle);
        margin-top: 40px;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .settings-container {
            padding: 16px !important;
        }

        .page-header-content {
            flex-direction: column;
            align-items: stretch;
        }

        .page-title {
            font-size: 24px;
        }

        .modern-form {
            padding: 24px;
        }

        .setting-field {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .setting-field.submenu-item {
            margin-left: 0;
            padding-left: 16px;
            border-left: 3px solid var(--primary-color);
            background: var(--background-tertiary);
            border-radius: 4px;
        }

        .switch-wrapper {
            justify-content: flex-end;
        }

        .btn-modern {
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .settings-container {
            padding: 12px !important;
        }
        
        .page-title {
            font-size: 20px;
        }

        .modern-form {
            padding: 20px;
        }

        .submenu-group {
            padding: 16px;
        }
    }

    /* CORREÇÃO ESPECÍFICA PARA ALINHAMENTO */
    .setting-field .field-label {
        margin-right: 60px !important;
        text-align: left !important;
    }

    .setting-field .switch-wrapper {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .setting-field .field-description {
        margin-right: 60px !important;
        text-align: left !important;
    }
</style>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Adicionar feedback visual aos switches
    $('.switch input[type="checkbox"]').on('change', function() {
        const $slider = $(this).siblings('.slider');
        const $field = $(this).closest('.setting-field');
        
        // Adicionar animação de feedback
        $field.addClass('switching');
        setTimeout(() => {
            $field.removeClass('switching');
        }, 200);
        
        // Mostrar indicador de alteração pendente
        if (!$('body').find('.save-indicator').length) {
            $('<div class="save-indicator">Alterações pendentes - não se esqueça de salvar!</div>')
                .appendTo('body')
                .fadeIn();
        }
    });
    
    // Remover indicador quando salvar
    $('.modern-form').on('submit', function() {
        $('.save-indicator').fadeOut();
        
        // Adicionar loading no botão
        const $btn = $(this).find('button[type="submit"]');
        const originalText = $btn.html();
        $btn.html('<div class="spinner"></div> Salvando...').prop('disabled', true);
        
        // Em caso de erro, restaurar o botão
        setTimeout(() => {
            $btn.html(originalText).prop('disabled', false);
        }, 5000);
    });
    
    // Auto-save em 30 segundos se houver alterações
    let hasChanges = false;
    let autoSaveTimer = null;
    
    $('.switch input[type="checkbox"]').on('change', function() {
        hasChanges = true;
        
        // Cancelar timer anterior
        if (autoSaveTimer) {
            clearTimeout(autoSaveTimer);
        }
        
        // Configurar novo timer
        autoSaveTimer = setTimeout(() => {
            if (hasChanges) {
                $('.modern-form').submit();
            }
        }, 30000); // 30 segundos
    });
});
</script>