@extends('layouts.app')

@section('title', 'Nova Categoria - Sistema Financeiro')
@section('page-title', 'Nova Categoria')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-medium text-gray-900">Nova Categoria</h2>
                <a href="{{ route('categorias.index') }}" class="text-gray-600 hover:text-gray-800">
                    <i class="fas fa-times"></i>
                </a>
            </div>
        </div>
        
        <form action="{{ route('categorias.store') }}" method="POST" class="p-6 space-y-6">
            @csrf
            
            <!-- Nome -->
            <div>
                <label for="nome" class="block text-sm font-medium text-gray-700 mb-2">
                    Nome da Categoria <span class="text-red-500">*</span>
                </label>
                <input type="text" 
                       id="nome" 
                       name="nome" 
                       value="{{ old('nome') }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('nome') border-red-500 @enderror"
                       placeholder="Digite o nome da categoria"
                       required>
                @error('nome')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Tipo -->
            <div>
                <label for="tipo" class="block text-sm font-medium text-gray-700 mb-2">
                    Tipo <span class="text-red-500">*</span>
                </label>
                <select id="tipo" 
                        name="tipo" 
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('tipo') border-red-500 @enderror"
                        required>
                    <option value="">Selecione o tipo</option>
                    <option value="receita" {{ old('tipo') == 'receita' ? 'selected' : '' }}>Receita</option>
                    <option value="despesa" {{ old('tipo') == 'despesa' ? 'selected' : '' }}>Despesa</option>
                </select>
                @error('tipo')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Cor -->
            <div>
                <label for="cor" class="block text-sm font-medium text-gray-700 mb-2">
                    Cor <span class="text-red-500">*</span>
                </label>
                <div class="flex items-center space-x-3">
                    <input type="color" 
                           id="cor" 
                           name="cor" 
                           value="{{ old('cor', '#3498db') }}"
                           class="h-10 w-20 border border-gray-300 rounded cursor-pointer @error('cor') border-red-500 @enderror"
                           required>
                    <span class="text-sm text-gray-600">Escolha uma cor para identificar a categoria</span>
                </div>
                @error('cor')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Descrição -->
            <div>
                <label for="descricao" class="block text-sm font-medium text-gray-700 mb-2">
                    Descrição
                </label>
                <textarea id="descricao" 
                          name="descricao" 
                          rows="3"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('descricao') border-red-500 @enderror"
                          placeholder="Descrição opcional da categoria">{{ old('descricao') }}</textarea>
                @error('descricao')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
            
            <!-- Status -->
            <div>
                <label class="flex items-center">
                    <input type="checkbox" 
                           name="ativo" 
                           value="1" 
                           {{ old('ativo', true) ? 'checked' : '' }}
                           class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                    <span class="ml-2 text-sm text-gray-700">Categoria ativa</span>
                </label>
            </div>
            
            <!-- Botões -->
            <div class="flex items-center justify-end space-x-3 pt-6 border-t border-gray-200">
                <a href="{{ route('categorias.index') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    Cancelar
                </a>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
                    <i class="fas fa-save mr-2"></i>
                    Salvar Categoria
                </button>
            </div>
        </form>
    </div>
</div>
@endsection