@extends('layouts.admin')

@section('title', 'Registro de Agencias')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Nueva Agencia Inmobiliaria</h3>
            </div>
            <div class="card-body">
                @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
                @endif

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

                <form id="agencyForm" action="{{ route('admin.agencies.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>🏢 Nombre de la Agencia *</label>
                                <input type="text" name="name" id="name" class="form-control" required placeholder="Ej: Inmobiliaria Central">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>📧 Email *</label>
                                <input type="email" name="email" id="email" class="form-control" required placeholder="contacto@agencia.com">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>🔒 Contraseña de acceso *</label>
                                <input type="password" name="password" id="password" class="form-control" required placeholder="Mínimo 8 caracteres" minlength="8">
                                <small class="text-muted">Esta contraseña será usada para que la agencia inicie sesión</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>🔒 Confirmar Contraseña *</label>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" required placeholder="Repite la contraseña" minlength="8">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>📞 Teléfono *</label>
                                <input type="tel" name="phone" id="phone" class="form-control" required placeholder="+34 600 000 000">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>🌐 Sitio Web</label>
                                <input type="url" name="website" id="website" class="form-control" placeholder="https://www.agencia.com">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>📍 Dirección</label>
                                <input type="text" name="address" id="address" class="form-control" placeholder="Calle, número, ciudad, código postal">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>⭐ Estado</label>
                                <select name="status" id="status" class="form-control">
                                    <option value="Activa">✅ Activa</option>
                                    <option value="Inactiva">❌ Inactiva</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>📝 Descripción</label>
                                <textarea name="description" id="description" class="form-control" rows="3" placeholder="Descripción de la agencia inmobiliaria..."></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>🖼️ Logo de la Agencia</label>
                                <div class="card border-dashed p-4 text-center" style="cursor: pointer;" onclick="document.getElementById('logoInput').click()">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                    <p class="mb-1">Haz clic para subir el logo</p>
                                    <p class="text-muted small">Formatos: JPG, PNG, GIF (Max 2MB)</p>
                                    <input type="file" name="logo" id="logoInput" accept="image/*" style="display: none;" onchange="previewLogo(this)">
                                </div>
                                <div class="mt-3 text-center" id="logoPreview"></div>
                                <input type="hidden" name="logo_base64" id="logo_base64" value="">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>🗺️ Ubicación en Google Maps</label>
                        <div class="card">
                            <div class="card-body p-0">
                                <div id="map" style="height: 400px;"></div>
                            </div>
                        </div>
                        <div class="mt-2 d-flex gap-2">
                            <button type="button" class="btn btn-secondary" onclick="getCurrentLocation()">
                                📍 Mi Ubicación Actual
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="searchAddress()">
                                🔍 Buscar Dirección
                            </button>
                        </div>
                        <div class="alert alert-info mt-2">
                            <strong>Coordenadas:</strong> <span id="lat">-</span>, <span id="lng">-</span>
                        </div>
                        <input type="hidden" name="latitude" id="latitude" value="">
                        <input type="hidden" name="longitude" id="longitude" value="">
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-check"></i> Registrar Agencia
                        </button>
                        <a href="{{ route('admin.agencies.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Volver al listado
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
let map;
let marker;
let geocoder;

// Previsualizar logo
function previewLogo(input) {
    if (input.files && input.files[0]) {
        const file = input.files[0];
        
        if (file.size > 2 * 1024 * 1024) {
            alert('El archivo es demasiado grande. Máximo 2MB');
            input.value = '';
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('logo_base64').value = e.target.result;
            document.getElementById('logoPreview').innerHTML = `
                <img src="${e.target.result}" alt="Logo preview" 
                     style="max-width: 200px; max-height: 150px; border-radius: 10px; border: 2px solid #dee2e6;">
                <button type="button" class="btn btn-sm btn-danger mt-2" onclick="removeLogo()">
                    <i class="fas fa-trash"></i> Eliminar logo
                </button>
            `;
        };
        reader.readAsDataURL(file);
    }
}

// Eliminar logo
function removeLogo() {
    document.getElementById('logoInput').value = '';
    document.getElementById('logo_base64').value = '';
    document.getElementById('logoPreview').innerHTML = '';
}

// Inicializar Google Maps con Advanced Markers
async function initMap() {
    const defaultLocation = { lat: 9.249853359774589, lng: -69.37537642682825 }; // Ubicación por defecto
    
    // Importar la librería de mapas
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    
    map = new Map(document.getElementById("map"), {
        zoom: 13,
        center: defaultLocation,
        mapId: "DEMO_MAP_ID"
    });
    
    geocoder = new google.maps.Geocoder();
    
    // Crear marcador avanzado
    marker = new AdvancedMarkerElement({
        map: map,
        position: defaultLocation,
        title: "Ubicación de la agencia",
        gmpDraggable: true
    });
    
    // Escuchar eventos de arrastre
    marker.addListener("dragend", function(event) {
        updateCoordinates(event.latLng);
    });
    
    // Escuchar clics en el mapa
    map.addListener("click", function(event) {
        marker.position = event.latLng;
        updateCoordinates(event.latLng);
    });
    
    updateCoordinates(defaultLocation);
}

function updateCoordinates(position) {
    const lat = typeof position.lat === 'function' ? position.lat() : position.lat;
    const lng = typeof position.lng === 'function' ? position.lng() : position.lng;
    
    document.getElementById('latitude').value = lat;
    document.getElementById('longitude').value = lng;
    document.getElementById('lat').textContent = lat.toFixed(6);
    document.getElementById('lng').textContent = lng.toFixed(6);
    
    getAddressFromCoordinates(lat, lng);
}

function getAddressFromCoordinates(lat, lng) {
    const latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
    geocoder.geocode({ location: latlng }, function(results, status) {
        if (status === 'OK' && results[0]) {
            document.getElementById('address').value = results[0].formatted_address;
        }
    });
}

function getCurrentLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            const pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            map.setCenter(pos);
            marker.position = pos;
            updateCoordinates(pos);
        }, function() {
            alert("Error: No se pudo obtener la ubicación.");
        });
    } else {
        alert("Error: Tu navegador no soporta geolocalización.");
    }
}

function searchAddress() {
    const address = prompt("Ingresa la dirección a buscar:", document.getElementById('address').value);
    if (address) {
        geocoder.geocode({ address: address }, function(results, status) {
            if (status === 'OK') {
                map.setCenter(results[0].geometry.location);
                marker.position = results[0].geometry.location;
                updateCoordinates(results[0].geometry.location);
            } else {
                alert("No se encontró la dirección: " + status);
            }
        });
    }
}
</script>

@if(config('services.google.maps_api_key'))
<script async src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_api_key') }}&libraries=maps,marker&v=beta&callback=initMap"></script>
@else
<script>
console.error('Google Maps API key no configurada. Añade GOOGLE_MAPS_API_KEY en tu archivo .env');
</script>
@endif
@endsection