@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 Plano') }}
    </h2>
</x-slot>

@section('content')
<div class="py-1">
    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8"> {{-- Max width menor para forms --}}
        <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 --}}
                <form method="POST" action="{{ route('admin.plans.store') }}">
                    @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
                            Plano <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">Identificador na URL (letras, números,
                            traços). Será gerado do nome se vazio.</p>
                    </div>

                    {{-- Campo Preço --}}
                    <div class="mb-4">
                        <label for="price" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Preço (R$)
                            <span class="text-red-500">*</span></label>
                        <input type="number" name="price" id="price" step="0.01" min="0"
                            {{-- step e min para valores monetários --}} value="{{ old('price', '0.00') }}"
                            {{-- Default 0.00 --}}
                            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('price') border-red-500 @enderror"
                            required>
                        @error('price')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Campo Intervalo --}}
                    <div class="mb-4">
                        <label for="interval"
                            class="block text-sm font-medium text-gray-700 dark:text-gray-300">Intervalo/Duração <span
                                class="text-red-500">*</span></label>
                        {{-- Opção 1: Campo de Texto (mais flexível para o backend) --}}
                        <input type="text" name="interval" id="interval" value="{{ old('interval', 'month') }}"
                            {{-- Default 'month' --}} placeholder="Ex: month, year, lifetime, 30_days, etc."
                            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('interval') border-red-500 @enderror"
                            required>

                        {{-- Opção 2: Select (mais restritivo, mas consistente) --}}
                        {{--
                             <select name="interval" id="interval" 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('interval') border-red-500 @enderror" required>
                                 <option value="month" {{ old('interval', 'month') == 'month' ? 'selected' : '' }}>Mensal
                        (month)</option>
                        <option value="year" {{ old('interval') == 'year' ? 'selected' : '' }}>Anual (year)</option>
                        <option value="lifetime" {{ old('interval') == 'lifetime' ? 'selected' : '' }}>Vitalício
                            (lifetime)</option>
                        <option value="30_days" {{ old('interval') == '30_days' ? 'selected' : '' }}>30 Dias (30_days)
                        </option>
                        {{-- Adicione outros intervalos comuns --}}
                        {{-- </select>
                             --}}

                        @error('interval')
                        <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">Define a recorrência ou duração (usado
                            para calcular expiração). Exemplos: month, year, lifetime, 15_days.</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="3"
                            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
                    </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 --}}
                            <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.plans.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 Plano
                        </button>
                    </div>

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