@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4 py-5">
    <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-sm border border-slate-200">
        <h1 class="text-2xl font-bold text-slate-800 mb-6">➕ Cadastrar Novo Imóvel</h1>

        <form action="{{ route('admin.properties.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Código do Imóvel *</label>
                    <input type="text" name="code" value="{{ old('code') }}" placeholder="Ex: AP101" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>

                <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Título do Imóvel *</label>
                    <input type="text" name="title" value="{{ old('title') }}" placeholder="Ex: Apartamento Vista Mar 3 Quartos" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- Finalidade Dinâmica -->
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Finalidade *</label>
                    <select name="business_type" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                        @foreach($businessTypes as $bType)
                            <option value="{{ $bType->slug }}" {{ old('business_type') == $bType->slug ? 'selected' : '' }}>{{ $bType->name }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Tipo de Imóvel Dinâmico -->
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Tipo de Imóvel *</label>
                    <select name="property_type" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                        @foreach($propertyTypes as $pType)
                            <option value="{{ $pType->slug }}" {{ old('property_type') == $pType->slug ? 'selected' : '' }}>{{ $pType->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Status Inicial *</label>
                    <select name="status" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                        <option value="disponivel">Disponível</option>
                        <option value="reservado">Reservado</option>
                        <option value="vendido">Vendido</option>
                        <option value="alugado">Alugado</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Cidade *</label>
                    <input type="text" name="city" value="{{ old('city', 'Niterói') }}" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Bairro *</label>
                    <input type="text" name="neighborhood" value="{{ old('neighborhood') }}" placeholder="Ex: Icaraí" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Endereço</label>
                    <input type="text" name="address" value="{{ old('address') }}" placeholder="Rua Exemplo, 123" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Preço (R$) *</label>
                    <input type="number" step="0.01" name="price" value="{{ old('price') }}" placeholder="980000.00" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Condomínio (R$)</label>
                    <input type="number" step="0.01" name="condo_fee" value="{{ old('condo_fee') }}" placeholder="850.00" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">IPTU (R$)</label>
                    <input type="number" step="0.01" name="tax_fee" value="{{ old('tax_fee') }}" placeholder="300.00" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
                </div>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Descrição Completa</label>
                <textarea name="description" rows="4" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">{{ old('description') }}</textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Foto Principal (Capa)</label>
                    <input type="file" name="featured_image" accept="image/*" class="w-full text-sm text-slate-500 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 file:text-indigo-700 hover:file:bg-indigo-100">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Fotos Adicionais (Galeria)</label>
                    <input type="file" name="images[]" multiple accept="image/*" class="w-full text-sm text-slate-500 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 file:text-indigo-700 hover:file:bg-indigo-100">
                </div>
            </div>

            <div class="flex items-center gap-2 pt-2">
                <input type="checkbox" name="publish_portals" id="publish_portals" value="1" checked class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                <label for="publish_portals" class="text-sm text-slate-700 font-medium">Publicar automaticamente nos Portais (XML / VRSync)</label>
            </div>

            <div class="flex justify-end gap-3 pt-4 border-t border-slate-200">
                <a href="{{ route('admin.properties.index') }}" class="px-4 py-2 bg-slate-200 text-slate-700 rounded-md text-sm font-semibold hover:bg-slate-300">Cancelar</a>
                <button type="submit" class="px-6 py-2 bg-indigo-600 text-white rounded-md text-sm font-semibold hover:bg-indigo-700">Salvar Imóvel</button>
            </div>
        </form>
    </div>
</div>
@endsection