@extends('layouts.app')

@section('content')
<div class="w-full px-4 mx-auto py-10 max-w-[1000px]">
    <h2 class="text-2xl font-semibold mb-6">Crear Tipo de Propiedad</h2>

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

        {{-- Información general --}}
        <div class="grid lg:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm text-gray-600 mb-1">Nombre</label>
                <input type="text" name="name" value="{{ old('name') }}" class="w-full border-gray-300 rounded-md shadow-sm" required>
            </div>
            
            <div>
                <label class="block text-sm text-gray-600 mb-1">Precio Base</label>
                <input type="number" step="0.01" name="price" value="{{ old('price') }}" class="w-full border-gray-300 rounded-md shadow-sm" required>
            </div>


            <div>
                <label class="block text-sm text-gray-600 mb-1">Proyecto Fractional</label>
                <select name="fractional_id" id="fractionalSelect" class="w-full border-gray-300 rounded-md shadow-sm" required>
                    <option value="">Selecciona un proyecto</option>
                    @foreach ($fractionals as $fractional)
                        <option value="{{ $fractional->id }}" data-svg="{{ htmlentities($fractional->svg_data) }}">
                            {{ $fractional->name }}
                        </option>
                    @endforeach
                </select>
            </div>


            
        </div>

        <div class="mb-4">
    <label for="image" class="block text-sm font-medium text-gray-700">Imagen representativa</label>
    <input type="file" name="image" id="image" class="mt-1 block w-full">
    @error('image')
        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>

        {{-- Áreas adicionales --}}
        <div class="grid lg:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm text-gray-600 mb-1">Área Total (m²)</label>
                <input type="number" step="0.01" name="area" value="{{ old('area') }}" class="w-full border-gray-300 rounded-md shadow-sm" required>
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">Área Techada (m²)</label>
                <input type="number" step="0.01" name="area_roofed" value="{{ old('area_roofed') }}" class="w-full border-gray-300 rounded-md shadow-sm">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">Área de Jardín (m²)</label>
                <input type="number" step="0.01" name="area_garden" value="{{ old('area_garden') }}" class="w-full border-gray-300 rounded-md shadow-sm">
            </div>
        </div>


        

        {{-- Precios por mes --}}
        <details class="mt-6 bg-gray-50 p-4 rounded-md shadow-sm open:bg-white open:ring-2 open:ring-blue-100 transition-all">
            <summary class="text-md font-medium cursor-pointer select-none mb-4 text-blue-700">
                📅 Precios por Mes (opcional)
            </summary>

            <div class="grid grid-cols-3 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                @foreach ([
                    'january' => 'Enero',
                    'february' => 'Febrero',
                    'march' => 'Marzo',
                    'april' => 'Abril',
                    'may' => 'Mayo',
                    'june' => 'Junio',
                    'july' => 'Julio',
                    'august' => 'Agosto',
                    'september' => 'Septiembre',
                    'october' => 'Octubre',
                    'november' => 'Noviembre',
                    'december' => 'Diciembre'
                ] as $key => $label)
                    <div>
                        <label class="block text-sm text-gray-600">{{ $label }}</label>
                        <input 
                            type="number" 
                            step="0.01" 
                            inputmode="decimal" 
                            name="price_{{ $key }}" 
                            id="price_{{ $key }}"
                            value="{{ old('price_'.$key) }}" 
                            class="w-full border-gray-300 rounded-md shadow-sm real-price"
                        >
                        <div class="text-sm text-gray-500 mt-1" id="formatted_{{ $key }}"></div>

                    </div>
                @endforeach
            </div>
        </details>

        {{-- Botones --}}
        <div class="flex justify-center gap-4 pt-6">
            <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded hover:bg-indigo-700 transition">
                💾 Guardar
            </button>
            <a href="{{ route('property-types.index') }}" class="bg-gray-200 text-gray-800 px-6 py-2 rounded hover:bg-gray-300 transition">
                ⬅ Cancelar
            </a>
        </div>
    </form>
</div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', function () {
    const formatter = new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN',
        minimumFractionDigits: 2
    });

    document.querySelectorAll('.real-price').forEach(input => {
        const field = input.name;
        const key = field.replace('price_', '');
        const preview = document.getElementById(`formatted_${key}`);

        if (input.value && preview) {
            const num = parseFloat(input.value);
            if (!isNaN(num)) {
                preview.textContent = formatter.format(num);
            }
        }

        input.addEventListener('input', () => {
            const val = parseFloat(input.value);
            if (!isNaN(val) && preview) {
                preview.textContent = formatter.format(val);
            } else if (preview) {
                preview.textContent = '';
            }
        });
    });
});
</script>