@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">{{ $groups[$activeGroup]['name'] }}</h1>
                <p class="page-subtitle">{{ $groups[$activeGroup]['description'] }}</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">
        @foreach($groups as $groupKey => $group)
            <a href="{{ route('settings.index', $groupKey) }}" 
               class="nav-item {{ $activeGroup === $groupKey ? 'active' : '' }}">
                <i class="{{ $group['icon'] }}"></i>
                <span>{{ $group['name'] }}</span>
            </a>
        @endforeach
    </div>

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

            <div class="settings-grid">
                @foreach($settings as $setting)
                    <div class="setting-field">
                        <label for="{{ $setting->key }}" class="field-label">
                            {{ $setting->description }}
                        </label>

                        @switch($setting->type)
                            @case('textarea')
                                <textarea 
                                    class="form-textarea @error('settings.' . $setting->key) error @enderror" 
                                    id="{{ $setting->key }}" 
                                    name="settings[{{ $setting->key }}]"
                                    rows="4"
                                    placeholder="Digite o texto aqui..."
                                >{{ old("settings.{$setting->key}", $setting->value) }}</textarea>
                                @break

                            @case('code')
                                <div class="code-editor-wrapper">
                                    <textarea 
                                        class="form-textarea code-editor @error('settings.' . $setting->key) error @enderror" 
                                        id="{{ $setting->key }}" 
                                        name="settings[{{ $setting->key }}]"
                                        rows="10"
                                        placeholder="Digite o código aqui..."
                                        spellcheck="false"
                                        data-language="{{ str_contains($setting->key, 'css') ? 'css' : (str_contains($setting->key, 'js') ? 'javascript' : 'html') }}"
                                    >{{ old("settings.{$setting->key}", $setting->value) }}</textarea>
                                    <div class="code-editor-info">
                                        <span class="code-language">
                                            {{ str_contains($setting->key, 'css') ? 'CSS' : (str_contains($setting->key, 'js') ? 'JavaScript' : 'HTML') }}
                                        </span>
                                    </div>
                                </div>
                                @break

                            @case('select')
                                @php
                                    // Para telegram.read_frequency, gera opções filtradas pelo plano do usuário
                                    $currentVal = old("settings.{$setting->key}", $setting->value);
                                    $user = auth()->user();
                                    $plan = $user->plan;

                                    $allIntervals = [
                                        '*/3 * * * *'  => 'A cada 3 minutos (Max)',
                                        '*/5 * * * *'  => 'A cada 5 minutos',
                                        '*/10 * * * *' => 'A cada 10 minutos',
                                        '*/15 * * * *' => 'A cada 15 minutos',
                                    ];

                                    // Filtra opções pelo plano do usuário
                                    if ($plan && $setting->key === 'telegram.read_frequency') {
                                        $minInterval = $plan->min_read_interval_minutes;
                                        $allowedIntervals = array_filter(
                                            $allIntervals,
                                            fn($label, $cron) => (int) filter_var($cron, FILTER_SANITIZE_NUMBER_INT) >= $minInterval,
                                            ARRAY_FILTER_USE_BOTH
                                        );
                                    } else {
                                        $allowedIntervals = $allIntervals;
                                    }
                                @endphp
                                <select class="form-input" id="{{ $setting->key }}" name="settings[{{ $setting->key }}]">
                                    @foreach($allowedIntervals as $cron => $label)
                                        <option value="{{ $cron }}" {{ $currentVal === $cron ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @if($plan && $setting->key === 'telegram.read_frequency')
                                    <p class="field-hint">Plano {{ $plan->name }}: frequência mínima de {{ $plan->min_read_interval_minutes }} minutos</p>
                                @endif
                                @break

                            @case('boolean')
                                @php $boolVal = old("settings.{$setting->key}", $setting->value); @endphp
                                <div class="form-check form-switch mt-2">
                                    {{-- campo hidden garante que 0 seja enviado quando desmarcado --}}
                                    <input type="hidden" name="settings[{{ $setting->key }}]" value="0">
                                    <input class="form-check-input"
                                           type="checkbox"
                                           role="switch"
                                           id="{{ $setting->key }}"
                                           name="settings[{{ $setting->key }}]"
                                           value="1"
                                           {{ $boolVal ? 'checked' : '' }}>
                                    <label class="form-check-label" for="{{ $setting->key }}">
                                        {{ $boolVal ? 'Habilitado' : 'Desabilitado' }}
                                    </label>
                                </div>
                                @break

                            @case('password')
                                <div class="password-input-wrapper">
                                    <input 
                                        type="password" 
                                        class="form-input password-input @error('settings.' . $setting->key) error @enderror" 
                                        id="{{ $setting->key }}" 
                                        name="settings[{{ $setting->key }}]"
                                        value="{{ old("settings.{$setting->key}", $setting->value) }}"
                                        placeholder="••••••••"
                                    >
                                    <button class="password-toggle-btn" type="button" onclick="togglePassword('{{ $setting->key }}')">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                                @break

                            @case('color')
                                <div class="color-input-wrapper">
                                <input 
                                    type="color" 
                                        class="color-input @error('settings.' . $setting->key) error @enderror" 
                                    id="{{ $setting->key }}" 
                                    name="settings[{{ $setting->key }}]"
                                    value="{{ old("settings.{$setting->key}", $setting->value) }}"
                                >
                                    <span class="color-value">{{ old("settings.{$setting->key}", $setting->value) }}</span>
                                </div>
                                @break

                            @case('image')
                                <div class="image-upload-area" onclick="document.getElementById('{{ $setting->key }}').click();">
                                    <input 
                                        type="file" 
                                        class="image-input @error('settings.' . $setting->key) error @enderror" 
                                        id="{{ $setting->key }}" 
                                        name="settings[{{ $setting->key }}]"
                                        accept="image/*"
                                        onchange="previewImage(this, '{{ $setting->key }}-preview')"
                                        style="display: none;"
                                    >
                                    <div class="image-upload-content" id="{{ $setting->key }}-upload-content">
                                        <div class="upload-icon">
                                            <i class="bi bi-cloud-upload"></i>
                                        </div>
                                        <div class="upload-text">
                                            <p>Clique para selecionar uma imagem</p>
                                            <span>PNG, JPG até 2MB</span>
                                        </div>
                                    </div>
                                    
                                    <!-- Preview da nova imagem -->
                                    <div class="image-preview" id="{{ $setting->key }}-preview" style="display: none;">
                                        <img class="preview-image" alt="Preview">
                                        <div class="preview-overlay">
                                            <div class="preview-actions">
                                                <button type="button" class="btn-change" onclick="document.getElementById('{{ $setting->key }}').click();">
                                                    <i class="bi bi-pencil"></i> Alterar
                                                </button>
                                                <button type="button" class="btn-remove" onclick="removePreview('{{ $setting->key }}')">
                                                    <i class="bi bi-trash"></i> Remover
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    @if($setting->value)
                                        <div class="current-image" id="{{ $setting->key }}-current">
                                            @php
                                                $logoHeight = null;
                                                if (str_contains($setting->key, 'logo') && !str_contains($setting->key, 'height')) {
                                                    $logoHeight = \App\Models\Setting::get('appearance.logo_height_backend', '40');
                                                }
                                            @endphp
                                            <img src="{{ asset('storage/' . $setting->value) }}" 
                                                 alt="Imagem atual" 
                                                 class="current-image-preview"
                                                 style="{{ $logoHeight ? 'height: ' . $logoHeight . 'px; width: auto;' : 'max-height: 80px;' }}">
                                            <span class="current-image-label">Imagem atual</span>
                                        </div>
                                    @endif
                                </div>
                                @break

                            @default
                                <input 
                                    type="{{ $setting->type }}" 
                                    class="form-input @if(str_contains($setting->key, 'phone') || str_contains($setting->key, 'whatsapp')) phone @endif @error('settings.' . $setting->key) error @enderror" 
                                    id="{{ $setting->key }}" 
                                    name="settings[{{ $setting->key }}]"
                                    value="{{ old("settings.{$setting->key}", $setting->value) }}"
                                    placeholder="Digite o valor aqui..."
                                >
                        @endswitch

                        @error("settings.{$setting->key}")
                            <div class="field-error">
                                {{ $message }}
                            </div>
                        @enderror

                        @if($setting->type == 'image' && $setting->value)
                            <div class="field-hint">
                                Deixe em branco para manter a imagem atual
                            </div>
                        @endif
                    </div>
                @endforeach
            </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;
    }

    .settings-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .setting-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .field-label {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        margin: 0;
    }

    .form-input, .form-textarea {
        background: var(--background-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 14px;
        color: var(--text-primary);
        transition: all 0.2s ease;
        outline: none;
        font-family: inherit;
    }

    .form-input:focus, .form-textarea:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .form-input::placeholder, .form-textarea::placeholder {
        color: var(--text-muted);
    }

    .form-input.error, .form-textarea.error {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

    .form-textarea {
        resize: vertical;
        min-height: 100px;
    }

    /* Password Input */
    .password-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: var(--background-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .password-input-wrapper:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .password-input {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        flex: 1;
    }

    .password-toggle-btn {
        background: none;
        border: none;
        padding: 12px;
        color: var(--text-muted);
        cursor: pointer;
        border-radius: 0 7px 7px 0;
        transition: color 0.2s ease;
    }

    .password-toggle-btn:hover {
        color: var(--text-secondary);
    }

    /* Color Input */
    .color-input-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--background-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 8px 12px;
        transition: all 0.2s ease;
    }

    .color-input-wrapper:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .color-input {
        width: 48px;
        height: 32px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        background: none;
    }

    .color-value {
        font-size: 14px;
        color: var(--text-primary);
        font-family: 'Monaco', 'Consolas', monospace;
        flex: 1;
    }

    /* Code Editor */
    .code-editor-wrapper {
        position: relative;
    }

    .code-editor {
        font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.5;
        background: #1e1e1e;
        color: #d4d4d4;
        border-color: #404040;
    }

    .code-editor:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .code-editor-info {
        position: absolute;
        top: 8px;
        right: 12px;
        pointer-events: none;
    }

    .code-language {
        background: rgba(255, 255, 255, 0.1);
        color: #d4d4d4;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Image Upload */
    .image-upload-area {
        border: 2px dashed var(--border-color);
        border-radius: 8px;
        padding: 32px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        background: var(--background-secondary);
    }

    .image-upload-area:hover {
        border-color: var(--primary-color);
        background: var(--background-tertiary);
    }

    .image-upload-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .upload-icon {
        width: 64px;
        height: 64px;
        background: var(--background-tertiary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--text-muted);
    }

    .upload-text p {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        margin: 0;
    }

    .upload-text span {
        font-size: 14px;
        color: var(--text-muted);
    }

    .image-preview {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
    }

    .preview-image {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px;
    }

    .preview-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .image-preview:hover .preview-overlay {
        opacity: 1;
    }

    .preview-actions {
        display: flex;
        gap: 12px;
    }

    .btn-change, .btn-remove {
        padding: 8px 16px;
        border-radius: 6px;
        border: none;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .btn-change {
        background: var(--primary-color);
        color: white;
    }

    .btn-change:hover {
        background: var(--primary-hover);
    }

    .btn-remove {
        background: #ef4444;
        color: white;
    }

    .btn-remove:hover {
        background: #dc2626;
    }

    .current-image {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 16px;
        padding: 16px;
        background: var(--background-tertiary);
        border-radius: 8px;
    }

    .current-image-preview {
        border-radius: 6px;
        box-shadow: var(--shadow-sm);
    }

    .current-image-label {
        font-size: 14px;
        color: var(--text-muted);
        font-weight: 500;
    }

    /* Error and Success States */
    .field-error {
        color: #ef4444;
        font-size: 12px;
        font-weight: 500;
        margin-top: 4px;
    }

    .field-hint {
        color: var(--text-muted);
        font-size: 12px;
        margin-top: 4px;
    }

    /* 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;
        }

        .settings-grid {
            gap: 24px;
        }

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

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

        .modern-form {
            padding: 20px;
        }

        .upload-icon {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

        .image-upload-area {
            padding: 20px;
        }

        .current-image {
            flex-direction: column;
            text-align: center;
        }
    }
</style>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
function togglePassword(id) {
    const input = document.getElementById(id);
    const icon = input.nextElementSibling.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    }
}

// Update color value display and apply colors in real time
document.addEventListener('DOMContentLoaded', function() {
    const colorInputs = document.querySelectorAll('.color-input');
    colorInputs.forEach(input => {
        const valueSpan = input.nextElementSibling;
        input.addEventListener('input', function() {
            valueSpan.textContent = this.value;
            
            // Aplica cores em tempo real se for uma cor da aparência
            if (this.id.includes('primary_color')) {
                document.documentElement.style.setProperty('--primary-color', this.value);
                document.documentElement.style.setProperty('--primary-hover', this.value + 'dd');
            } else if (this.id.includes('secondary_color')) {
                document.documentElement.style.setProperty('--text-secondary', this.value);
            }
        });
    });
});

$(document).ready(function() {
    var SPMaskBehavior = function (val) {
        return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
    },
    spOptions = {
        onKeyPress: function(val, e, field, options) {
            field.mask(SPMaskBehavior.apply({}, arguments), options);
        }
    };

    $('.phone').mask(SPMaskBehavior, spOptions);
});

// Funções para preview de imagem
function previewImage(input, previewId) {
    const file = input.files[0];
    const previewContainer = document.getElementById(previewId);
    const uploadContent = document.getElementById(input.id + '-upload-content');
    const currentImage = document.getElementById(input.id + '-current');
    
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewImg = previewContainer.querySelector('.preview-image');
            previewImg.src = e.target.result;
            
            // Mostra o preview e esconde outros elementos
            previewContainer.style.display = 'block';
            uploadContent.style.display = 'none';
            if (currentImage) {
                currentImage.style.display = 'none';
            }
        };
        reader.readAsDataURL(file);
    }
}

function removePreview(inputId) {
    const input = document.getElementById(inputId);
    const previewContainer = document.getElementById(inputId + '-preview');
    const uploadContent = document.getElementById(inputId + '-upload-content');
    const currentImage = document.getElementById(inputId + '-current');
    
    // Limpa o input
    input.value = '';
    
    // Esconde o preview e mostra o upload content
    previewContainer.style.display = 'none';
    uploadContent.style.display = 'block';
    
    // Mostra a imagem atual se existir
    if (currentImage) {
        currentImage.style.display = 'flex';
    }
}
</script>
@endpush