@extends('layouts.admin.theme')

@section('title', env('APP_NAME') . ' :: ' . __('Gerenciador de Temas'))

@section('content')
    <link rel="stylesheet" href="{{ asset('pmar/css/temas.css') }}">
    
    <div class="card shadow-sm">
        @php $headLine = "<i class='fa-solid fa-palette'></i> " . __('Gerenciador de Temas'); @endphp
        @include('components.buttons._headLineButtonsBackAdd', [
            'headLine' => __($headLine),
            'routeBack' => 'admin.dashboard',
            'routeBackParams' => [],
            'nameBack' => __('Voltar'),
            'routeAdd' => 'admin.temas.create',
            'routeAddParams' => [],
            'nameAdd' => __('Novo tema'),
            'permission' => 'GERENCIADOR_DE_TEMAS',
        ])

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

            <div class="row mb-4">
                <div class="col-12">
                    <div class="alert alert-info d-flex align-items-center">
                        <i class="fa-solid fa-info-circle me-2"></i>
                        <div>
                            <strong>{{ __('Como usar:') }}</strong>
                            {{ __('Crie temas personalizados para campanhas especiais ou ajuste as cores do portal. O tema ativo será aplicado automaticamente ao portal público e/ou ao painel administrativo.') }}
                        </div>
                    </div>
                </div>
            </div>

            <x-tables._table
                :thead="[
                    '#',
                    __('Nome'),
                    __('Status'),
                    __('Ações'),
                ]"
                :pagination="$temas->links()"
            >
                <x-slot name="body">
                    @forelse ($temas as $index => $tema)
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td class="text-center">
                                <div class="d-flex align-items-center justify-content-center gap-2">
                                    <strong>{{ $tema->name }}</strong>
                                    @if ($tema->is_default)
                                        <span class="badge bg-primary">{{ __('Padrão') }}</span>
                                    @endif
                                    @if ($tema->isDarkModeTheme())
                                        <span class="dark-mode-theme-indicator" title="{{ __('Tema de Modo Noturno - Acessibilidade') }}">
                                            <i class="fa-solid fa-moon"></i>
                                            {{ __('Noturno') }}
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="d-flex flex-column gap-1 align-items-center">
                                    @if ($tema->is_active_public)
                                        <span class="badge bg-success">
                                            <i class="fa-solid fa-globe me-1"></i> {{ __('Portal Público') }}
                                        </span>
                                    @endif
                                    @if ($tema->is_active_admin)
                                        <span class="badge bg-info">
                                            <i class="fa-solid fa-user-shield me-1"></i> {{ __('Painel Admin') }}
                                        </span>
                                    @endif
                                    @if (!$tema->is_active_public && !$tema->is_active_admin)
                                        <span class="badge bg-secondary">{{ __('Inativo') }}</span>
                                    @endif
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="d-flex gap-2 justify-content-center align-items-center flex-wrap">
                                    @include('components.buttons._editButton', [
                                        'route' => 'admin.temas.edit',
                                        'id' => [$tema->id],
                                        'fontawesome' => '<i class="fa-solid fa-pencil"></i>',
                                        'title' => __('Editar'),
                                        'permission' => 'GERENCIADOR_DE_TEMAS',
                                    ])

                                    @if (!$tema->is_default)
                                        <form action="{{ route('admin.temas.activate', $tema) }}" method="POST" class="d-inline" id="activate-form-{{ $tema->id }}">
                                            @csrf
                                            <input type="hidden" name="apply_public" id="apply_public_{{ $tema->id }}" value="1">
                                            <input type="hidden" name="apply_admin" id="apply_admin_{{ $tema->id }}" value="1">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input theme-switch" 
                                                       type="checkbox" 
                                                       role="switch" 
                                                       id="switch-{{ $tema->id }}"
                                                       {{ ($tema->is_active_public || $tema->is_active_admin) ? 'checked' : '' }}
                                                       onchange="
                                                           var isChecked = this.checked;
                                                           document.getElementById('apply_public_{{ $tema->id }}').value = isChecked ? '1' : '0';
                                                           document.getElementById('apply_admin_{{ $tema->id }}').value = isChecked ? '1' : '0';
                                                           document.getElementById('activate-form-{{ $tema->id }}').submit();
                                                       "
                                                       style="width: 3rem; height: 1.5rem; cursor: pointer;">
                                            </div>
                                        </form>
                                    @endif

                                    @if (!$tema->is_default && !$tema->is_active_public && !$tema->is_active_admin)
                                        @include('components.buttons._deleteButton', [
                                            'message' => __('* Este tema será excluído e esta ação não poderá ser desfeita, deseja continuar?'),
                                            'route' => 'admin.temas.destroy',
                                            'id' => [$tema->id],
                                            'fontawesome' => '<i class="fa-solid fa-trash"></i>',
                                            'title' => __('Excluir'),
                                            'permission' => 'GERENCIADOR_DE_TEMAS',
                                        ])
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                <i class="fa-solid fa-palette fa-2x mb-2 d-block"></i>
                                {{ __('Nenhum tema cadastrado até o momento.') }}
                            </td>
                        </tr>
                    @endforelse
                </x-slot>
            </x-tables._table>

        </div>
    </div>
@endsection