@extends('layouts.admin') {{-- Usa o layout admin --}}

{{-- Define o cabeçalho da página --}}
<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
        {{ __('Adicionar Novo Tema') }}
    </h2>
</x-slot>

@section('content')
<div class="py-1">
    {{-- Ajuste max-w para formulários mais largos se necessário --}}
    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                {{-- Formulário de Criação --}}
                {{-- Importante: enctype="multipart/form-data" é ESSENCIAL para uploads de arquivo --}}
                <form method="POST" action="{{ route('admin.themes.store') }}" enctype="multipart/form-data">
                    @csrf {{-- Token CSRF --}}

                    {{-- Campo Nome --}}
                    <div class="mb-4">
                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Nome do
                            Tema <span class="text-red-500">*</span></label>
                        <input type="text" name="name" id="name" value="{{ old('name') }}"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('name') border-red-500 @enderror"
                            required>
                        @error('name')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Campo Slug --}}
                    <div class="mb-4">
                        <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Slug
                            (URL)</label>
                        <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                            placeholder="Deixe em branco para gerar automaticamente"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('slug') border-red-500 @enderror">
                        @error('slug')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Usado na URL. Apenas letras minúsculas,
                            números, traços e underscores. Será gerado a partir do nome se deixado em branco.</p>
                    </div>

                    {{-- Campo Descrição --}}
                    <div class="mb-4">
                        <label for="description"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">Descrição</label>
                        <textarea name="description" id="description" rows="4"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 @error('description') border-red-500 @enderror">{{ old('description') }}</textarea>
                        @error('description')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        {{-- TODO: Considerar substituir por um editor WYSIWYG simples (ex: TinyMCE, CKEditor) --}}
                    </div>

                    {{-- Campo Imagem de Preview --}}
                    <div class="mb-4">
                        <label for="preview_image"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">Imagem de Preview <span
                                class="text-red-500">*</span></label>
                        <input type="file" name="preview_image" id="preview_image"
                            accept="image/jpeg,image/png,image/webp" {{-- Restringe tipos de arquivo no navegador --}}
                            class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-300
                                           file:mr-4 file:py-2 file:px-4
                                           file:rounded-md file:border-0
                                           file:text-sm file:font-semibold
                                           file:bg-indigo-50 dark:file:bg-indigo-900 file:text-indigo-700 dark:file:text-indigo-300
                                           hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800
                                           @error('preview_image') border border-red-500 rounded-md p-1 @enderror"
                            {{-- Estilo para erro no input file é mais complicado --}} required>
                        @error('preview_image')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Formatos permitidos: JPG, PNG, WebP.
                            Tamanho máximo: 2MB.</p>
                    </div>

                    {{-- Campo Arquivo ZIP do Tema --}}
                    <div class="mb-4">
                        <label for="zip_file" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Arquivo
                            .zip do Tema <span class="text-red-500">*</span></label>
                        <input type="file" name="zip_file" id="zip_file" accept=".zip" class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-300
                                           file:mr-4 file:py-2 file:px-4
                                           file:rounded-md file:border-0
                                           file:text-sm file:font-semibold
                                           file:bg-indigo-50 dark:file:bg-indigo-900 file:text-indigo-700 dark:file:text-indigo-300
                                           hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800
                                            @error('zip_file') border border-red-500 rounded-md p-1 @enderror"
                            required>
                        @error('zip_file')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Arquivo .zip contendo o tema. Tamanho
                            máximo: 50MB.</p>
                    </div>

                    {{-- Campo Status (Ativo/Inativo) --}}
                    <div class="mb-4">
                        <label for="is_active" class="flex items-center">
                            <input type="checkbox" name="is_active" id="is_active" value="1"
                                class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:bg-gray-900 dark:border-gray-700"
                                {{ old('is_active', true) ? 'checked' : '' }}>
                            {{-- Marca por padrão ou se valor antigo for true --}}
                            <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Marcar como Ativo</span>
                        </label>
                        @error('is_active')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>


                    {{-- Botões de Ação --}}
                    <div class="flex items-center justify-end mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
                        {{-- Botão Cancelar --}}
                        <a href="{{ route('admin.themes.index') }}"
                            class="inline-flex items-center px-4 py-2 bg-gray-400 dark:bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-200 uppercase tracking-widest hover:bg-gray-500 dark:hover:bg-gray-500 active:bg-gray-600 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150 mr-4">
                            Cancelar
                        </a>
                        {{-- Botão Salvar --}}
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:border-blue-900 focus:ring ring-blue-300 disabled:opacity-25 transition ease-in-out duration-150">
                            Salvar Tema
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
@endsection