@extends('layouts.admin.theme')

@section('title', env('APP_NAME') . ' :: ' . __('Novo 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> " . __('Novo 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.store') }}" method="POST" id="themeForm" enctype="multipart/form-data">
                @csrf

                <div class="row mb-4">
                    <div class="col-md-6">
                        <label for="name" class="form-label fw-bold">{{ __('Nome do tema') }} <span class="text-danger">*</span></label>
                        <input type="text" id="name" name="name" class="form-control"
                               value="{{ old('name') }}" required
                               placeholder="{{ __('Ex: Tema Natalino, Novembro Azul, etc.') }}">
                        <small class="text-muted">{{ __('Dê um nome descritivo para identificar este tema.') }}</small>
                    </div>
                    <div class="col-md-6">
                        <label for="logo" class="form-label fw-bold">{{ __('Logo do tema') }}</label>
                        <input type="file" id="logo" name="logo" class="form-control" accept="image/*">
                        <small class="text-muted">
                            {{ __('Opcional. Formatos aceitos: PNG, JPG, SVG, WebP. Máx: 2MB.') }}
                        </small>
                        <div class="mt-2 d-flex align-items-center">
                            <span class="me-2 text-muted small">{{ __('Preview:') }}</span>
                            <img id="logoPreview" src="{{ asset('pmar/assets/img/logo-pmar.png') }}"
                                 alt="{{ __('Preview da logo') }}"
                                 class="img-thumbnail"
                                 style="max-height: 60px; background: #f8f9fa;">
                        </div>
                    </div>
                </div>

                {{-- 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-6">
                                        <label for="accessibility_logo" class="form-label fw-bold">{{ __('Logo de 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-6">
                                        <div class="d-flex align-items-center">
                                            <span class="me-2 text-muted small">{{ __('Preview:') }}</span>
                                            <div class="p-2 rounded" style="background: #1e1e1e;">
                                                <img id="accessibilityLogoPreview" src="{{ asset('pmar/assets/img/logo-angra-branco.svg') }}"
                                                     alt="{{ __('Preview da logo de acessibilidade') }}"
                                                     class="img-thumbnail border-0"
                                                     style="max-height: 60px; background: transparent;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="my-4">

                <h5 class="mb-4">
                    <i class="fa-solid fa-palette me-2"></i>
                    {{ __('Configuração de Cores') }}
                </h5>

                @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();
                @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
                                    $defaultValue = $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="{{ old('colors.' . $key, $defaultValue) }}"
                                                   data-text-input="text_{{ $key }}">
                                            <input type="text"
                                                   class="form-control theme-color-text"
                                                   id="text_{{ $key }}"
                                                   name="colors[{{ $key }}]"
                                                   value="{{ old('colors.' . $key, $defaultValue) }}"
                                                   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 tema') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection