@extends('layouts.admin')

@section('title', 'Registrar Propiedad')

@push('styles')
<style>
    .form-section {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .form-section h4 {
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
        margin-bottom: 20px;
        color: #333;
    }
    .checkbox-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
    }
    .checkbox-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .checkbox-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
    .sub-group {
        margin-left: 26px;
        margin-top: 5px;
    }
    .required::after {
        content: " *";
        color: #dc3545;
    }
    /* Photo preview */
    .photo-preview-item {
        position: relative;
        width: 120px;
        height: 120px;
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #dee2e6;
    }
    .photo-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .photo-preview-item .remove-photo {
        position: absolute;
        top: 5px;
        right: 5px;
        background: rgba(220, 53, 69, 0.9);
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
    }
    .photo-preview-item.primary {
        border-color: #007bff;
        border-width: 3px;
    }
    .photo-preview-item .primary-badge {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 123, 255, 0.85);
        color: white;
        text-align: center;
        font-size: 10px;
        padding: 2px;
    }
    /* Mapa - Protección contra Bootstrap */
    #map {
        height: 400px !important;
        width: 100% !important;
        position: relative;
        z-index: 0 !important;
        background-color: #f0f0f0;
        border: 2px solid #dee2e6;
    }
    .leaflet-container {
        width: 100% !important;
        height: 400px !important;
        z-index: 0 !important;
    }
    .leaflet-tile {
        max-width: none !important;
        max-height: none !important;
    }
    img.leaflet-tile {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-home"></i> Planilla de Captación de Inmuebles
                </h3>
                <div class="card-tools">
                    <a href="{{ route($routePrefix . 'properties.index') }}" class="btn btn-default btn-sm">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                </div>
            </div>

            <form action="{{ route($routePrefix . 'properties.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="card-body">

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- Selecionar Agencia/Agente si es admin --}}
                    @if(auth()->user()->hasRole('admin'))
                    <div class="form-section">
                        <h4><i class="fas fa-building"></i> Asignación</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Agencia</label>
                                    <select name="agency_id" class="form-control @error('agency_id') is-invalid @enderror" required>
                                        <option value="">Seleccione una agencia</option>
                                        @foreach($agencies as $agency)
                                            <option value="{{ $agency->id }}" {{ old('agency_id') == $agency->id ? 'selected' : '' }}>
                                                {{ $agency->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('agency_id')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Asignar a Agente (opcional)</label>
                                    <select name="agent_id" class="form-control @error('agent_id') is-invalid @enderror" id="agentSelect">
                                        <option value="">Sin asignar</option>
                                        {{-- Se llenará con JS según la agencia seleccionada --}}
                                    </select>
                                    @error('agent_id')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Si es agencia, mostrar selector de agente --}}
                    @if(auth()->user()->hasRole('agency_admin') && $agents->count() > 0)
                    <div class="form-section">
                        <h4><i class="fas fa-user-tie"></i> Asignar Agente</h4>
                        <div class="form-group">
                            <label>Asignar a Agente (opcional)</label>
                            <select name="agent_id" class="form-control @error('agent_id') is-invalid @enderror">
                                <option value="">Sin asignar</option>
                                @foreach($agents as $agent)
                                    <option value="{{ $agent->id }}" {{ old('agent_id') == $agent->id ? 'selected' : '' }}>
                                        {{ $agent->full_name }} - {{ $agent->license_number }}
                                    </option>
                                @endforeach
                            </select>
                            @error('agent_id')<span class="invalid-feedback">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    @endif

                    {{-- ========== 1. DATOS DEL PROPIETARIO ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-user"></i> 1. Datos del Propietario (o Apoderado)</h4>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Nombre y Apellido</label>
                                    <input type="text" name="owner_name" class="form-control @error('owner_name') is-invalid @enderror" 
                                           value="{{ old('owner_name') }}" required>
                                    @error('owner_name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="required">Cédula de Identidad / RIF</label>
                                    <input type="text" name="owner_id_number" class="form-control @error('owner_id_number') is-invalid @enderror" 
                                           value="{{ old('owner_id_number') }}" required>
                                    @error('owner_id_number')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Estado Civil</label>
                                    <select name="owner_marital_status" class="form-control @error('owner_marital_status') is-invalid @enderror" required>
                                        <option value="">Seleccione</option>
                                        <option value="soltero" {{ old('owner_marital_status') == 'soltero' ? 'selected' : '' }}>Soltero</option>
                                        <option value="casado" {{ old('owner_marital_status') == 'casado' ? 'selected' : '' }}>Casado</option>
                                        <option value="divorciado" {{ old('owner_marital_status') == 'divorciado' ? 'selected' : '' }}>Divorciado</option>
                                        <option value="viudo" {{ old('owner_marital_status') == 'viudo' ? 'selected' : '' }}>Viudo</option>
                                    </select>
                                    @error('owner_marital_status')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                                <small class="text-muted">Si está casado, se requerirá firma del cónyuge</small>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Teléfono de contacto</label>
                                    <input type="text" name="owner_phone" class="form-control @error('owner_phone') is-invalid @enderror" 
                                           value="{{ old('owner_phone') }}" required>
                                    @error('owner_phone')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Correo electrónico</label>
                                    <input type="email" name="owner_email" class="form-control @error('owner_email') is-invalid @enderror" 
                                           value="{{ old('owner_email') }}">
                                    @error('owner_email')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>¿El propietario se encuentra en Venezuela?</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="owner_in_venezuela" id="ownerInVenYes" value="1" 
                                                   {{ old('owner_in_venezuela', 1) == 1 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="ownerInVenYes">Sí</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="owner_in_venezuela" id="ownerInVenNo" value="0" 
                                                   {{ old('owner_in_venezuela') === '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="ownerInVenNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>¿Existe un Poder Registrado y apostillado?</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="has_power_of_attorney" id="powerYes" value="1" 
                                                   {{ old('has_power_of_attorney') == 1 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="powerYes">Sí</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="has_power_of_attorney" id="powerNo" value="0" 
                                                   {{ old('has_power_of_attorney') === '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="powerNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ========== 2. DATOS BÁSICOS DEL INMUEBLE ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-home"></i> 2. Datos Básicos del Inmueble</h4>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Tipo de Inmueble</label>
                                    <select name="property_type" class="form-control @error('property_type') is-invalid @enderror" required>
                                        <option value="">Seleccione</option>
                                        <option value="casa" {{ old('property_type') == 'casa' ? 'selected' : '' }}>Casa</option>
                                        <option value="apartamento" {{ old('property_type') == 'apartamento' ? 'selected' : '' }}>Apartamento</option>
                                        <option value="townhouse" {{ old('property_type') == 'townhouse' ? 'selected' : '' }}>Townhouse</option>
                                        <option value="local" {{ old('property_type') == 'local' ? 'selected' : '' }}>Local Comercial</option>
                                        <option value="terreno" {{ old('property_type') == 'terreno' ? 'selected' : '' }}>Terreno</option>
                                    </select>
                                    @error('property_type')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Ciudad/Municipio</label>
                                    <input type="text" name="city" class="form-control @error('city') is-invalid @enderror" 
                                           value="{{ old('city') }}" required>
                                    @error('city')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Urbanización</label>
                                    <input type="text" name="urbanization" class="form-control @error('urbanization') is-invalid @enderror" 
                                           value="{{ old('urbanization') }}">
                                    @error('urbanization')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Calle/Avenida</label>
                                    <input type="text" name="street_address" class="form-control @error('street_address') is-invalid @enderror" 
                                           value="{{ old('street_address') }}">
                                    @error('street_address')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Edificio/Conjunto</label>
                                    <input type="text" name="building_name" class="form-control @error('building_name') is-invalid @enderror" 
                                           value="{{ old('building_name') }}">
                                    @error('building_name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Piso</label>
                                    <input type="text" name="floor_number" class="form-control @error('floor_number') is-invalid @enderror" 
                                           value="{{ old('floor_number') }}">
                                    @error('floor_number')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>N° Casa/Apto</label>
                                    <input type="text" name="house_apartment_number" class="form-control @error('house_apartment_number') is-invalid @enderror" 
                                           value="{{ old('house_apartment_number') }}">
                                    @error('house_apartment_number')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Área de Terreno (m²)</label>
                                    <input type="number" step="0.01" name="land_area" class="form-control @error('land_area') is-invalid @enderror" 
                                           value="{{ old('land_area') }}">
                                    @error('land_area')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Área de Construcción (m²)</label>
                                    <input type="number" step="0.01" name="construction_area" class="form-control @error('construction_area') is-invalid @enderror" 
                                           value="{{ old('construction_area') }}">
                                    @error('construction_area')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Antigüedad aproximada (años)</label>
                                    <input type="number" name="antiquity_years" class="form-control @error('antiquity_years') is-invalid @enderror" 
                                           value="{{ old('antiquity_years') }}">
                                    @error('antiquity_years')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-3"></div>
                        </div>

                        <hr>
                        <h5>Distribución</h5>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Total Habitaciones</label>
                                    <input type="number" name="rooms_total" class="form-control" value="{{ old('rooms_total', 0) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Principales</label>
                                    <input type="number" name="rooms_main" class="form-control" value="{{ old('rooms_main', 0) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Auxiliares</label>
                                    <input type="number" name="rooms_auxiliary" class="form-control" value="{{ old('rooms_auxiliary', 0) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Servicio</label>
                                    <input type="number" name="rooms_service" class="form-control" value="{{ old('rooms_service', 0) }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Total Baños</label>
                                    <input type="number" name="bathrooms_total" class="form-control" value="{{ old('bathrooms_total', 0) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Completos</label>
                                    <input type="number" name="bathrooms_full" class="form-control" value="{{ old('bathrooms_full', 0) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Medios baños</label>
                                    <input type="number" name="bathrooms_half" class="form-control" value="{{ old('bathrooms_half', 0) }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Puestos de Estacionamiento</label>
                                    <input type="number" name="parking_spaces" class="form-control" value="{{ old('parking_spaces', 0) }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Tipo de Estacionamiento</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="parking_covered" id="parkCovered" value="1" 
                                                   {{ old('parking_covered') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="parkCovered">Techados</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="parking_uncovered" id="parkUncovered" value="1" 
                                                   {{ old('parking_uncovered') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="parkUncovered">Descubiertos</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Maletero</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="has_storage_room" id="storageRoom" value="1" 
                                                   {{ old('has_storage_room') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="storageRoom">Sí</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ========== 3. SERVICIOS Y AMENIDADES ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-concierge-bell"></i> 3. Servicios y Amenidades</h4>
                        
                        <h5>Agua</h5>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_deep_well" id="deepWell" value="1" {{ old('has_deep_well') ? 'checked' : '' }}>
                                <label for="deepWell">Pozo profundo</label>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Tanque aéreo (Litros)</label>
                                    <input type="number" name="aerial_tank_capacity" class="form-control" value="{{ old('aerial_tank_capacity') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Tanque subterráneo (Litros)</label>
                                    <input type="number" name="underground_tank_capacity" class="form-control" value="{{ old('underground_tank_capacity') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Frecuencia servicio de calle</label>
                                    <input type="text" name="water_service_frequency" class="form-control" placeholder="Ej: 2 veces por semana" 
                                           value="{{ old('water_service_frequency') }}">
                                </div>
                            </div>
                        </div>
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" name="has_hydroniumatic" id="hydroniumatic" value="1" 
                                   {{ old('has_hydroniumatic') ? 'checked' : '' }}>
                            <label class="form-check-label" for="hydroniumatic">Con hidroneumático</label>
                        </div>

                        <hr>
                        <h5>Electricidad</h5>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="has_generator" id="hasGenerator" value="1" 
                                           {{ old('has_generator') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="hasGenerator">Planta eléctrica</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Cobertura planta</label>
                                    <select name="generator_coverage" class="form-control">
                                        <option value="">N/A</option>
                                        <option value="total" {{ old('generator_coverage') == 'total' ? 'selected' : '' }}>Total</option>
                                        <option value="common_areas" {{ old('generator_coverage') == 'common_areas' ? 'selected' : '' }}>Solo áreas comunes</option>
                                        <option value="partial" {{ old('generator_coverage') == 'partial' ? 'selected' : '' }}>Parcial</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Voltaje</label>
                                    <select name="voltage" class="form-control">
                                        <option value="">Seleccione</option>
                                        <option value="110v" {{ old('voltage') == '110v' ? 'selected' : '' }}>110V</option>
                                        <option value="220v" {{ old('voltage') == '220v' ? 'selected' : '' }}>220V</option>
                                        <option value="both" {{ old('voltage') == 'both' ? 'selected' : '' }}>Ambos</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h5>Telecomunicaciones</h5>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Internet</label>
                                    <select name="internet_type" class="form-control">
                                        <option value="">Seleccione</option>
                                        <option value="fiber_optic" {{ old('internet_type') == 'fiber_optic' ? 'selected' : '' }}>Fibra Óptica</option>
                                        <option value="aba_cantv" {{ old('internet_type') == 'aba_cantv' ? 'selected' : '' }}>ABA CANTV</option>
                                        <option value="none" {{ old('internet_type') == 'none' ? 'selected' : '' }}>Ninguno</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Operadora</label>
                                    <input type="text" name="internet_provider" class="form-control" value="{{ old('internet_provider') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Gas</label>
                                    <select name="gas_type" class="form-control">
                                        <option value="">Seleccione</option>
                                        <option value="direct" {{ old('gas_type') == 'direct' ? 'selected' : '' }}>Directo</option>
                                        <option value="cylinder" {{ old('gas_type') == 'cylinder' ? 'selected' : '' }}>Bombona (Cilindro)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="has_cable_tv" id="cableTv" value="1" 
                                           {{ old('has_cable_tv') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="cableTv">Televisión por Cable</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="has_satellite_tv" id="satelliteTv" value="1" 
                                           {{ old('has_satellite_tv') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="satelliteTv">Televisión Satelital</label>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h5>Seguridad y Áreas Comunes</h5>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_24h_security" id="security24" value="1" {{ old('has_24h_security') ? 'checked' : '' }}>
                                <label for="security24">Vigilancia 24/7</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_electric_fence" id="electricFence" value="1" {{ old('has_electric_fence') ? 'checked' : '' }}>
                                <label for="electricFence">Cerco Eléctrico</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_pool" id="pool" value="1" {{ old('has_pool') ? 'checked' : '' }}>
                                <label for="pool">Piscina</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_barbecue_area" id="bbq" value="1" {{ old('has_barbecue_area') ? 'checked' : '' }}>
                                <label for="bbq">Caney/Parrillera</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_playground" id="playground" value="1" {{ old('has_playground') ? 'checked' : '' }}>
                                <label for="playground">Parque Infantil</label>
                            </div>
                        </div>
                    </div>

                    {{-- ========== 4. ESTATUS LEGAL ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-gavel"></i> 4. Estatus Legal</h4>
                        <p class="text-muted">Documentos a solicitar al propietario</p>
                        
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_property_document" id="propDoc" value="1" {{ old('has_property_document') ? 'checked' : '' }}>
                                <label for="propDoc">Documento de Propiedad (Registrado)</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_cadastral_certificate" id="cadastral" value="1" {{ old('has_cadastral_certificate') ? 'checked' : '' }}>
                                <label for="cadastral">Cédula / Ficha Catastral</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_municipal_solvency" id="municipal" value="1" {{ old('has_municipal_solvency') ? 'checked' : '' }}>
                                <label for="municipal">Solvencia Municipal (Derecho de Frente)</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_seniat_certificate" id="seniat" value="1" {{ old('has_seniat_certificate') ? 'checked' : '' }}>
                                <label for="seniat">Certificado Vivienda Principal (Forma 33)</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_utilities_solvency" id="utilities" value="1" {{ old('has_utilities_solvency') ? 'checked' : '' }}>
                                <label for="utilities">Solvencia de Servicios (Corpoelec, Hidrológica, Aseo)</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" name="has_condo_solvency" id="condo" value="1" {{ old('has_condo_solvency') ? 'checked' : '' }}>
                                <label for="condo">Solvencia de Condominio</label>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>¿Cédula a nombre del propietario actual?</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="cadastral_in_owner_name" id="cadastralYes" value="1" 
                                                   {{ old('cadastral_in_owner_name') == 1 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="cadastralYes">Sí</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="cadastral_in_owner_name" id="cadastralNo" value="0" 
                                                   {{ old('cadastral_in_owner_name') === '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="cadastralNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>¿Libre de gravámenes?</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="is_mortgage_free" id="mortgageFreeYes" value="1" 
                                                   {{ old('is_mortgage_free') == 1 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mortgageFreeYes">Sí</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="is_mortgage_free" id="mortgageFreeNo" value="0" 
                                                   {{ old('is_mortgage_free') === '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mortgageFreeNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <div class="form-check mt-4">
                                        <input class="form-check-input" type="checkbox" name="needs_mortgage_release" id="needsRelease" value="1" 
                                               {{ old('needs_mortgage_release') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="needsRelease">Requiere tramitar liberación de hipoteca</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ========== 5. CONDICIONES COMERCIALES ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-dollar-sign"></i> 5. Condiciones Comerciales</h4>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Operación</label>
                                    <select name="operation_type" class="form-control @error('operation_type') is-invalid @enderror" required>
                                        <option value="">Seleccione</option>
                                        <option value="venta" {{ old('operation_type') == 'venta' ? 'selected' : '' }}>Venta</option>
                                        <option value="alquiler" {{ old('operation_type') == 'alquiler' ? 'selected' : '' }}>Alquiler</option>
                                    </select>
                                    @error('operation_type')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Precio ($)</label>
                                    <input type="number" step="0.01" name="price" class="form-control @error('price') is-invalid @enderror" 
                                           value="{{ old('price') }}" required>
                                    @error('price')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Comisión Inmobiliaria (%)</label>
                                    <input type="number" step="0.01" name="commission_percentage" class="form-control" 
                                           value="{{ old('commission_percentage', 5) }}">
                                    <small class="text-muted">Estándar en Venezuela: 5%</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Precio Negociable</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="price_negotiable" id="priceNegYes" value="1" 
                                                   {{ old('price_negotiable', 1) == 1 ? 'checked' : '' }}>
                                            <label class="form-check-label" for="priceNegYes">Sí</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="price_negotiable" id="priceNegNo" value="0" 
                                                   {{ old('price_negotiable') === '0' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="priceNegNo">No (Raya)</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="required">Tipo de Captación</label>
                                    <select name="capture_type" class="form-control @error('capture_type') is-invalid @enderror" required>
                                        <option value="">Seleccione</option>
                                        <option value="exclusiva" {{ old('capture_type') == 'exclusiva' ? 'selected' : '' }}>Exclusiva</option>
                                        <option value="abierta" {{ old('capture_type') == 'abierta' ? 'selected' : '' }}>Abierta (Sin exclusividad)</option>
                                    </select>
                                    @error('capture_type')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Forma de Pago aceptada</label>
                                    <input type="text" name="payment_methods" class="form-control" 
                                           placeholder="Efectivo, Zelle, Transferencia, etc." value="{{ old('payment_methods') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ========== 6. INVENTARIO Y OBSERVACIONES ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-clipboard-list"></i> 6. Inventario y Observaciones</h4>
                        
                        <div class="form-group">
                            <label>¿Se vende amoblado/equipado?</label>
                            <select name="furnished_status" class="form-control">
                                <option value="unfurnished" {{ old('furnished_status', 'unfurnished') == 'unfurnished' ? 'selected' : '' }}>No amoblado</option>
                                <option value="fully_furnished" {{ old('furnished_status') == 'fully_furnished' ? 'selected' : '' }}>Totalmente amoblado</option>
                                <option value="partially_furnished" {{ old('furnished_status') == 'partially_furnished' ? 'selected' : '' }}>Parcialmente (Solo Línea Blanca/Aires)</option>
                                <option value="grey_work" {{ old('furnished_status') == 'grey_work' ? 'selected' : '' }}>Obra limpia / Gris</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Detallar inventario</label>
                            <textarea name="inventory_details" class="form-control" rows="3" 
                                      placeholder="Ej: 3 aires Split, nevera, tope de cocina, campana, juego de recibo">{{ old('inventory_details') }}</textarea>
                        </div>

                        <div class="form-group">
                            <label>Detalles a reparar</label>
                            <textarea name="repair_details" class="form-control" rows="3" 
                                      placeholder="Filtraciones, pintura, etc.">{{ old('repair_details') }}</textarea>
                        </div>

                        <div class="form-group">
                            <label>Observaciones generales</label>
                            <textarea name="observations" class="form-control" rows="3">{{ old('observations') }}</textarea>
                        </div>
                    </div>

                    {{-- ========== 7. MULTIMEDIA ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-camera"></i> 7. Fotos, Videos y Archivos</h4>

                        {{-- Fotos --}}
                        <div class="form-group">
                            <label><i class="fas fa-image"></i> Fotos de la Propiedad</label>
                            <p class="text-muted small">Puede seleccionar múltiples fotos. La primera será la foto principal.</p>
                            <input type="file" name="photos[]" class="form-control" multiple accept="image/*" id="photosInput">
                            <small class="text-muted">Formatos: JPG, PNG, WebP. Máx 5MB por foto.</small>
                            
                            {{-- Preview --}}
                            <div id="photosPreview" class="mt-3" style="display: flex; flex-wrap: wrap; gap: 10px;"></div>
                        </div>

                        <hr>

                        {{-- Video URL --}}
                        <div class="form-group">
                            <label><i class="fas fa-video"></i> Video de la Propiedad (URL externa)</label>
                            <input type="url" name="video_url" class="form-control @error('video_url') is-invalid @enderror"
                                   value="{{ old('video_url') }}"
                                   placeholder="https://www.youtube.com/watch?v=... o https://vimeo.com/...">
                            @error('video_url')<span class="invalid-feedback">{{ $message }}</span>@enderror
                            <small class="text-muted">URL de YouTube o Vimeo</small>
                        </div>

                        <hr>

                        {{-- Videos locales --}}
                        <div class="form-group">
                            <label><i class="fas fa-film"></i> Videos de la Propiedad (Archivos locales)</label>
                            <p class="text-muted small">Puede seleccionar múltiples videos. Se guardarán en el servidor.</p>
                            <input type="file" name="local_videos[]" class="form-control" multiple accept="video/*" id="localVideosInput">
                            <small class="text-muted">Formatos: MP4, AVI, MOV, MKV, WMV, FLV, WebM. Máx 1GB por archivo.</small>
                            
                            {{-- Preview de videos --}}
                            <div id="localVideosPreview" class="mt-3"></div>
                        </div>

                        <hr>

                        {{-- Archivos adjuntos --}}
                        <div class="form-group">
                            <label><i class="fas fa-file-archive"></i> Archivos Adjuntos</label>
                            <input type="file" name="attachments[]" class="form-control" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.zip,.rar">
                            <small class="text-muted">Planos, contratos, certificados, etc. Formatos: PDF, DOC, XLS, ZIP. Máx 10MB por archivo.</small>
                        </div>
                    </div>

                    {{-- ========== 8. UBICACIÓN EN MAPA ========== --}}
                    <div class="form-section">
                        <h4><i class="fas fa-map-marker-alt"></i> 8. Ubicación en Mapa</h4>

                        <p class="text-muted small">Haga clic en el mapa para seleccionar la ubicación exacta de la propiedad o ingrese las coordenadas manualmente.</p>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Latitud</label>
                                    <input type="number" step="any" name="latitude" class="form-control @error('latitude') is-invalid @enderror"
                                           value="{{ old('latitude') }}" id="latitudeInput"
                                           placeholder="Ej: 10.480594">
                                    @error('latitude')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Longitud</label>
                                    <input type="number" step="any" name="longitude" class="form-control @error('longitude') is-invalid @enderror"
                                           value="{{ old('longitude') }}" id="longitudeInput"
                                           placeholder="Ej: -66.883282">
                                    @error('longitude')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Dirección en el Mapa</label>
                                    <input type="text" name="map_address" class="form-control @error('map_address') is-invalid @enderror"
                                           value="{{ old('map_address') }}" id="mapAddressInput"
                                           placeholder="Dirección que aparecerá en el mapa">
                                    @error('map_address')<span class="invalid-feedback">{{ $message }}</span>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- Mapa --}}
                        <div id="map" style="height: 400px; border-radius: 8px; border: 2px solid #dee2e6; margin-top: 10px;"></div>
                        <small class="text-muted"><i class="fas fa-info-circle"></i> Venezuela por defecto. Zoom para ubicar la propiedad.</small>
                    </div>

                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Registrar Propiedad
                    </button>
                    <a href="{{ route($routePrefix . 'properties.index') }}" class="btn btn-default">
                        <i class="fas fa-times"></i> Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{-- Leaflet JS para el mapa (CSS ya está en @push('styles')) --}}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ========== SELECTOR DE AGENTES ==========
    const agencySelect = document.querySelector('select[name="agency_id"]');
    const agentSelect = document.querySelector('select[name="agent_id"]');

    if (agencySelect && agentSelect) {
        agencySelect.addEventListener('change', function() {
            const agencyId = this.value;

            if (agencyId) {
                fetch(`/admin/agency/${agencyId}/agents-list`)
                    .then(response => response.json())
                    .then(data => {
                        agentSelect.innerHTML = '<option value="">Sin asignar</option>';
                        data.forEach(agent => {
                            const option = document.createElement('option');
                            option.value = agent.id;
                            option.textContent = agent.full_name + (agent.license_number ? ' - ' + agent.license_number : '');
                            agentSelect.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error:', error));
            } else {
                agentSelect.innerHTML = '<option value="">Sin asignar</option>';
            }
        });
    }

    // ========== MAPA LEAFLET ==========
    let map = null;
    let marker = null;
    const latInput = document.getElementById('latitudeInput');
    const lngInput = document.getElementById('longitudeInput');
    const mapAddressInput = document.getElementById('mapAddressInput');
    const mapContainer = document.getElementById('map');

    if (mapContainer) {
        // Asegurar dimensiones del contenedor
        mapContainer.style.height = '400px';
        mapContainer.style.width = '100%';

        // Esperar a que Leaflet esté cargado
        function initMapWhenReady() {
            if (typeof L === 'undefined') {
                console.log('Esperando Leaflet...');
                setTimeout(initMapWhenReady, 200);
                return;
            }

            try {
                map = L.map('map', {
                    center: [10.480594, -66.883282],
                    zoom: 6,
                    zoomControl: true
                });

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                    maxZoom: 19
                }).addTo(map);
200);

                // Forzar renderizado adicional después de un segundo para asegurar visibilidad
                setTimeout(function() {
                    map.invalidateSize();
                }, 10
                // Forzar renderizado
                setTimeout(function() {
                    map.invalidateSize();
                }, 100);

                // Si hay coordenadas guardadas
                const oldLat = '{{ old("latitude") }}';
                const oldLng = '{{ old("longitude") }}';
                if (oldLat && oldLng && oldLat !== '') {
                    setMarker(parseFloat(oldLat), parseFloat(oldLng));
                }

                map.on('click', function(e) {
                    setMarker(e.latlng.lat, e.latlng.lng);
                    
                    fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.display_name) {
                                mapAddressInput.value = data.display_name;
                            }
                        })
                        .catch(error => console.log('Error:', error));
                });

                console.log('Mapa inicializado correctamente');

            } catch (err) {
                console.error('Error al inicializar mapa:', err);
            }
        }

        // Intentar inicializar
        setTimeout(initMapWhenReady, 300);
    }

    function setMarker(lat, lng) {
        if (marker) {
            marker.setLatLng([lat, lng]);
        } else {
            marker = L.marker([lat, lng]).addTo(map);
        }
        latInput.value = lat;
        lngInput.value = lng;
    }

    // ========== PREVIEW DE FOTOS ==========
    const photosInput = document.getElementById('photosInput');
    const photosPreview = document.getElementById('photosPreview');

    if (photosInput && photosPreview) {
        photosInput.addEventListener('change', function() {
            photosPreview.innerHTML = '';
            Array.from(this.files).forEach(file => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const div = document.createElement('div');
                    div.className = 'photo-preview-item';
                    div.innerHTML = `<img src="${e.target.result}"><button type="button" class="remove-photo">&times;</button>`;
                    photosPreview.appendChild(div);
                };
                reader.readAsDataURL(file);
            });
        });
    }

    // ========== PREVIEW DE VIDEOS ==========
    const localVideosInput = document.getElementById('localVideosInput');
    const localVideosPreview = document.getElementById('localVideosPreview');

    if (localVideosInput && localVideosPreview) {
        localVideosInput.addEventListener('change', function() {
            localVideosPreview.innerHTML = '';
            Array.from(this.files).forEach(file => {
                const url = URL.createObjectURL(file);
                const div = document.createElement('div');
                div.className = 'mb-2';
                div.innerHTML = `<video src="${url}" controls width="200" style="border-radius: 4px;"></video> <small>${file.name}</small>`;
                localVideosPreview.appendChild(div);
            });
        });
    }
});
</script>
@endpush