@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">
        {{ __('Editar Tema: ') }} {{ $theme->name }}
    </h2>
</x-slot>

@section('content')
<div class="py-1">
    <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 Edição --}}
                <form method="POST" action="{{ route('admin.themes.update', $theme) }}" enctype="multipart/form-data">
                    @csrf {{-- Token CSRF --}}
                    @method('PUT') {{-- Método HTTP correto para atualização --}}

                    {{-- 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', $theme->name) }}"
                            {{-- Preenche com valor antigo ou atual --}}
                            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', $theme->slug) }}"
                            placeholder="Deixe em branco para gerar a partir do nome"
                            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.</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', $theme->description) }}</textarea>
                        @error('description')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </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">Nova Imagem de Preview
                            (Opcional)</label>
                        {{-- Mostra a imagem atual --}}
                        @if($theme->preview_image_path && Storage::disk('public')->exists($theme->preview_image_path))
                        <div class="mt-2 mb-2">
                            <img src="{{ Storage::disk('public')->url($theme->preview_image_path) }}"
                                alt="Preview Atual" class="h-20 w-auto rounded shadow">
                            <span class="text-xs text-gray-500 dark:text-gray-400">Imagem atual</span>
                        </div>
                        @endif
                        <input type="file" name="preview_image" id="preview_image"
                            accept="image/jpeg,image/png,image/webp" 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">
                        @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">Envie uma nova imagem apenas se quiser
                            substituir a atual. Max 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">Novo
                            Arquivo .zip do Tema (Opcional)</label>
                        {{-- Mostra o nome do arquivo atual --}}
                        @if($theme->zip_file_path)
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Arquivo atual: <code
                                class="text-xs">{{ basename($theme->zip_file_path) }}</code></p>
                        {{-- Mostra só o nome do arquivo --}}
                        @endif
                        <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">
                        @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">Envie um novo arquivo .zip apenas se
                            quiser substituir o atual. Max 50MB.</p>
                    </div>

                    {{-- Campo Status (Ativo/Inativo) --}}
                    <div class="mb-4">
                        <label for="is_active" class="flex items-center">
                            {{-- Usamos old() OU o valor atual do tema para decidir se marca --}}
                            <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', $theme->is_active) ? 'checked' : '' }}>
                            <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 (volta para a página de detalhes do tema) --}}
                        <a href="{{ route('admin.themes.show', $theme) }}"
                            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 Alterações --}}
                        <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 Alterações
                        </button>
                    </div>

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