@extends('layouts.admin.theme')

@section('title', env('APP_NAME') . ' :: ' . __('Editar Tema'))

@section('content')
    <link rel="stylesheet" href="{{ asset('pmar/css/temas.css') }}">
    <script src="{{ asset('pmar/js/themes.js') }}" defer></script>

    <div class="card shadow-sm">
        @php $headLine = "<i class='fa-solid fa-palette'></i> " . __('Editar Tema'); @endphp
        @include('components.buttons._headLineButtonsBackAdd', [
            'headLine' => __($headLine),
            'routeBack' => 'admin.temas.index',
            'routeBackParams' => [],
            'nameBack' => __('Voltar'),
            'routeAdd' => null,
            'routeAddParams' => [],
            'nameAdd' => '',
            'permission' => 'GERENCIADOR_DE_TEMAS',
        ])

        <div class="card-body">
            @include('errors.messageFlash')

            <form action="{{ route('admin.temas.update', $tema) }}" method="POST" id="themeForm" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="name" class="form-label fw-bold">{{ __('Nome do tema') }}</label>
                        @if($tema->is_default)
                            {{-- Campo hidden para garantir que o valor seja enviado quando readonly --}}
                            <input type="hidden" name="name" value="{{ $tema->name }}">
                            <input type="text" id="name" class="form-control" value="{{ $tema->name }}" readonly>
                            <small class="text-muted">
                                <i class="fa-solid fa-info-circle"></i>
                                {{ __('O nome do tema padrão não pode ser alterado.') }}
                            </small>
                        @else
                            <input type="text" id="name" name="name" class="form-control"
                                   value="{{ old('name', $tema->name) }}">
                        @endif
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-bold d-block">{{ __('Ativação') }}</label>
                        <div class="d-flex gap-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="apply_public" name="apply_public"
                                       {{ old('apply_public', $tema->is_active_public) ? 'checked' : '' }}>
                                <label class="form-check-label" for="apply_public">
                                    <i class="fa-solid fa-globe me-1"></i>
                                    {{ __('Portal Público') }}
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="apply_admin" name="apply_admin"
                                       {{ old('apply_admin', $tema->is_active_admin) ? 'checked' : '' }}>
                                <label class="form-check-label" for="apply_admin">
                                    <i class="fa-solid fa-user-shield me-1"></i>
                                    {{ __('Painel Admin') }}
                                </label>
                            </div>
                        </div>
                        <small class="text-muted">{{ __('Marque onde este tema deve ser aplicado.') }}</small>
                    </div>
                </div>

                {{-- Seção de Logo --}}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h6 class="card-title mb-3">
                                    <i class="fa-solid fa-image me-2"></i>
                                    {{ __('Logo do Tema') }}
                                </h6>
                                <div class="row align-items-center">
                                    <div class="col-md-4 text-center mb-3 mb-md-0">
                                        <label class="d-block text-muted small mb-2">{{ __('Logo atual:') }}</label>
                                        <img id="logoPreview"
                                             src="{{ $tema->logo_url }}"
                                             alt="{{ __('Logo do tema') }}"
                                             class="img-thumbnail"
                                             style="max-height: 80px; background: #fff;">
                                        @if($tema->hasCustomLogo())
                                            <div class="mt-2">
                                                <span class="badge bg-success">
                                                    <i class="fa-solid fa-check me-1"></i>
                                                    {{ __('Logo personalizada') }}
                                                </span>
                                            </div>
                                        @else
                                            <div class="mt-2">
                                                <span class="badge bg-secondary">
                                                    <i class="fa-solid fa-info-circle me-1"></i>
                                                    {{ __('Logo padrão') }}
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <label for="logo" class="form-label fw-bold">{{ __('Nova logo') }}</label>
                                                <input type="file" id="logo" name="logo" class="form-control" accept="image/*">
                                                <small class="text-muted">
                                                    {{ __('Formatos aceitos: PNG, JPG, SVG, WebP. Máx: 2MB.') }}
                                                </small>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-end">
                                                @if($tema->hasCustomLogo())
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="1" id="remove_logo" name="remove_logo">
                                                        <label class="form-check-label text-danger" for="remove_logo">
                                                            <i class="fa-solid fa-trash me-1"></i>
                                                            {{ __('Remover logo') }}
                                                        </label>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Seção de Logo de Acessibilidade --}}
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h6 class="card-title mb-3">
                                    <i class="fa-solid fa-universal-access me-2"></i>
                                    {{ __('Logo para Modo Noturno (Acessibilidade)') }}
                                </h6>
                                <p class="text-muted small mb-3">
                                    {{ __('Logo alternativa exibida quando o modo noturno está ativo. Se não definida, será usada a logo principal do tema.') }}
                                </p>
                                <div class="row align-items-center">
                                    <div class="col-md-4 text-center mb-3 mb-md-0">
                                        <label class="d-block text-muted small mb-2">{{ __('Logo atual (acessibilidade):') }}</label>
                                        <div class="p-2 rounded" style="background: #1e1e1e;">
                                            <img id="accessibilityLogoPreview"
                                                 src="{{ $tema->accessibility_logo_url }}"
                                                 alt="{{ __('Logo de acessibilidade do tema') }}"
                                                 class="img-thumbnail border-0"
                                                 style="max-height: 80px; background: transparent;">
                                        </div>
                                        @if($tema->hasCustomAccessibilityLogo())
                                            <div class="mt-2">
                                                <span class="badge bg-success">
                                                    <i class="fa-solid fa-check me-1"></i>
                                                    {{ __('Logo personalizada') }}
                                                </span>
                                            </div>
                                        @else
                                            <div class="mt-2">
                                                <span class="badge bg-secondary">
                                                    <i class="fa-solid fa-info-circle me-1"></i>
                                                    {{ __('Usando logo principal') }}
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <label for="accessibility_logo" class="form-label fw-bold">{{ __('Nova logo (acessibilidade)') }}</label>
                                                <input type="file" id="accessibility_logo" name="accessibility_logo" class="form-control" accept="image/*">
                                                <small class="text-muted">
                                                    {{ __('Recomendado: Logo clara/branca para fundo escuro. Formatos: PNG, SVG, WebP. Máx: 2MB.') }}
                                                </small>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-end">
                                                @if($tema->hasCustomAccessibilityLogo())
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="1" id="remove_accessibility_logo" name="remove_accessibility_logo">
                                                        <label class="form-check-label text-danger" for="remove_accessibility_logo">
                                                            <i class="fa-solid fa-trash me-1"></i>
                                                            {{ __('Remover') }}
                                                        </label>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="my-4">

                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0">
                        <i class="fa-solid fa-palette me-2"></i>
                        {{ __('Configuração de Cores') }}
                    </h5>
                    {{-- Botão que abre modal de confirmação para reset - evita formulário aninhado --}}
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#resetThemeModal">
                        <i class="fa-solid fa-rotate-left"></i> {{ __('Reverter ao padrão') }}
                    </button>
                </div>

                @php
                    $colorGroups = [
                        'portal' => [
                            'title' => __('Cores do Portal e Admin'),
                            'description' => __('Cores principais que afetam o portal público e o painel administrativo'),
                            'colors' => [
                                'primary' => __('Cor primária'),
                                'waves-background' => __('Background das ondas'),
                                'topo-nav-background' => __('Topo / Navegação'),
                                'card-title' => __('Título de cards'),
                                'home-links' => __('Links da home'),
                                'subtitle-home' => __('Subtítulos da home'),
                                'link-help' => __('Links de ajuda'),
                                'home-social' => __('Redes sociais'),
                                'link-help-text' => __('Texto de ajuda'),
                                'galeria-background' => __('Background da galeria'),
                                'pontos-turisticos-title' => __('Título pontos turísticos'),
                                'footer-background' => __('Rodapé portal'),
                                'defaultBar-background' => __('Barra superior padrão'),
                            ]
                        ],
                        'admin' => [
                            'title' => __('Cores do Painel Admin'),
                            'description' => __('Cores específicas da sidebar e elementos do painel administrativo'),
                            'colors' => [
                                'primary-admin' => __('Primária Admin'),
                                'secondary-admin' => __('Secundária Admin'),
                            ]
                        ],
                        'base' => [
                            'title' => __('Cores Base do Sistema'),
                            'description' => __('Cores fundamentais usadas em todo o sistema'),
                            'colors' => [
                                'secondary' => __('Secondary'),
                                'tertiary' => __('Tertiary'),
                                'success' => __('Success'),
                                'info' => __('Info'),
                                'warning' => __('Warning'),
                                'danger' => __('Danger'),
                                'white' => __('White'),
                                'soft' => __('Soft'),
                                'dark' => __('Dark'),
                                'gray' => __('Gray'),
                            ]
                        ],
                        'grays' => [
                            'title' => __('Tons de Cinza'),
                            'description' => __('Escala de cinzas para textos e backgrounds'),
                            'colors' => [
                                'gray-50' => __('Gray 50'),
                                'gray-100' => __('Gray 100'),
                                'gray-200' => __('Gray 200'),
                                'gray-300' => __('Gray 300'),
                                'gray-400' => __('Gray 400'),
                                'gray-500' => __('Gray 500'),
                                'gray-600' => __('Gray 600'),
                                'gray-700' => __('Gray 700'),
                                'gray-800' => __('Gray 800'),
                                'gray-900' => __('Gray 900'),
                            ]
                        ],
                        'extras' => [
                            'title' => __('Cores Adicionais'),
                            'description' => __('Cores complementares para elementos específicos'),
                            'colors' => [
                                'softGray' => __('Soft gray'),
                                'snowWhite' => __('Snow white'),
                                'positive' => __('Positive'),
                                'royal-blue' => __('Royal blue'),
                                'purple' => __('Purple'),
                                'pink' => __('Pink'),
                                'orange' => __('Orange'),
                                'yellow' => __('Yellow'),
                                'green' => __('Green'),
                                'teal' => __('Teal'),
                                'indigo' => __('Indigo'),
                                'brown' => __('Brown'),
                                'red' => __('Red'),
                                'cake-blue' => __('Cake blue'),
                            ]
                        ],
                        'hover' => [
                            'title' => __('Variantes Hover'),
                            'description' => __('Cores para estados hover de botões e links'),
                            'colors' => [
                                'primary-hover' => __('Primary hover'),
                                'secondary-hover' => __('Secondary hover'),
                                'purple-hover' => __('Purple hover'),
                                'pink-hover' => __('Pink hover'),
                                'orange-hover' => __('Orange hover'),
                            ]
                        ],
                        'scroll' => [
                            'title' => __('Scrollbar'),
                            'description' => __('Cores da barra de rolagem'),
                            'colors' => [
                                'scrollbar_track' => __('Trilho da scrollbar'),
                                'scrollbar_thumb' => __('Barra da scrollbar'),
                            ]
                        ],
                        'dark_mode' => [
                            'title' => __('Modo Noturno (Acessibilidade)'),
                            'description' => __('Cores específicas para o modo noturno - recurso de acessibilidade para melhor conforto visual'),
                            'icon' => 'fa-moon',
                            'colors' => [
                                'dark-mode-body-bg' => __('Fundo do corpo'),
                                'dark-mode-card-bg' => __('Fundo dos cards'),
                                'dark-mode-section-bg' => __('Fundo das seções'),
                                'dark-mode-header-bg' => __('Fundo do cabeçalho'),
                                'dark-mode-footer-bg' => __('Fundo do rodapé'),
                                'dark-mode-input-bg' => __('Fundo dos campos'),
                                'dark-mode-text-primary' => __('Texto principal'),
                                'dark-mode-text-secondary' => __('Texto secundário'),
                                'dark-mode-text-muted' => __('Texto discreto'),
                                'dark-mode-heading' => __('Títulos'),
                                'dark-mode-link' => __('Links'),
                                'dark-mode-link-hover' => __('Links (hover)'),
                                'dark-mode-border' => __('Bordas'),
                                'dark-mode-border-light' => __('Bordas claras'),
                                'dark-mode-primary' => __('Cor primária'),
                                'dark-mode-primary-hover' => __('Primária (hover)'),
                                'dark-mode-accent' => __('Cor de destaque'),
                                'dark-mode-nav-bg' => __('Fundo da navegação'),
                                'dark-mode-nav-link' => __('Links da navegação'),
                                'dark-mode-nav-hover' => __('Nav. (hover)'),
                                'dark-mode-success' => __('Sucesso'),
                                'dark-mode-warning' => __('Alerta'),
                                'dark-mode-danger' => __('Erro'),
                                'dark-mode-info' => __('Informação'),
                                'dark-mode-scrollbar-track' => __('Trilho scrollbar'),
                                'dark-mode-scrollbar-thumb' => __('Barra scrollbar'),
                                'dark-mode-waves-color' => __('Cor das ondas'),
                            ]
                        ],
                    ];

                    $defaultColors = \App\Http\Resources\Admin\ThemeResource::getSystemDefaultColors();
                    $currentColors = $tema->colors ?? [];
                @endphp

                @foreach ($colorGroups as $groupKey => $group)
                    <div class="theme-color-group">
                        <h6>
                            @if(isset($group['icon']))
                                <i class="fa-solid {{ $group['icon'] }} me-2"></i>
                            @else
                                <i class="fa-solid fa-circle me-2"></i>
                            @endif
                            {{ $group['title'] }}
                            @if($groupKey === 'dark_mode')
                                <span class="badge bg-info ms-2">{{ __('Acessibilidade') }}</span>
                            @endif
                        </h6>
                        <p class="text-muted small mb-3">{{ $group['description'] }}</p>

                        <div class="row g-3">
                            @foreach ($group['colors'] as $key => $label)
                                @php
                                    $value = old('colors.' . $key, $currentColors[$key] ?? $defaultColors[$key] ?? '#ffffff');
                                @endphp
                                <div class="col-md-6 col-lg-4">
                                    <div class="theme-color-item">
                                        <label for="color_{{ $key }}" class="form-label">
                                            {{ $label }}
                                            <small class="text-muted">({{ $key }})</small>
                                        </label>
                                        <div class="theme-color-inputs">
                                            <input type="color"
                                                   class="form-control form-control-color theme-color-picker"
                                                   id="color_{{ $key }}"
                                                   value="{{ $value }}"
                                                   data-text-input="text_{{ $key }}">
                                            <input type="text"
                                                   class="form-control theme-color-text"
                                                   id="text_{{ $key }}"
                                                   name="colors[{{ $key }}]"
                                                   value="{{ $value }}"
                                                   placeholder="#FFFFFF"
                                                   pattern="^#[0-9A-Fa-f]{6}$"
                                                   data-color-picker="color_{{ $key }}">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach

                <div class="mt-4 d-flex justify-content-between align-items-center">
                    <a href="{{ route('admin.temas.index') }}" class="btn btn-secondary">
                        <i class="fa-solid fa-times"></i> {{ __('Cancelar') }}
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa-solid fa-save"></i> {{ __('Salvar alterações') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Modal para confirmação de reset de tema - fora do formulário principal para evitar aninhamento --}}
    <div class="modal fade" id="resetThemeModal" tabindex="-1" aria-labelledby="resetThemeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resetThemeModalLabel">
                        <i class="fa-solid fa-rotate-left me-2"></i>
                        {{ __('Reverter ao Padrão') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Fechar') }}"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('Tem certeza que deseja reverter as cores deste tema para os valores padrão?') }}</p>
                    <p class="text-muted small mb-0">
                        @if ($tema->default_colors)
                            {{ __('As cores serão restauradas para os valores originais salvos deste tema.') }}
                        @else
                            {{ __('As cores serão restauradas para os valores padrão do sistema.') }}
                        @endif
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fa-solid fa-times"></i> {{ __('Cancelar') }}
                    </button>
                    <form action="{{ route('admin.temas.resetTheme', $tema) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-warning">
                            <i class="fa-solid fa-rotate-left"></i> {{ __('Confirmar') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection