@extends('layouts.admin')

@section('title', 'Editar Agencia - ' . $agency->name)

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Editar Agencia: {{ $agency->name }}</h3>
            </div>
            <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

                <form id="agencyForm" action="{{ route('admin.agencies.update', $agency->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <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 value="{{ old('name', $agency->name) }}">
                            </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 value="{{ old('email', $agency->email_general) }}">
                            </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 value="{{ old('phone', $agency->phone_primary) }}">
                            </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" value="{{ old('website', $agency->website) }}">
                            </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" value="{{ old('address', $agency->address) }}">
                            </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" {{ old('status', $agency->status) == 'Activa' ? 'selected' : '' }}>✅ Activa</option>
                                    <option value="Inactiva" {{ old('status', $agency->status) == 'Inactiva' ? 'selected' : '' }}>❌ 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">{{ old('description', $agency->description) }}</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 cambiar 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">
                                    @if($agency->logo && str_starts_with($agency->logo, 'data:image'))
                                    <img src="{{ $agency->logo }}" alt="Logo actual"
                                         style="max-width: 200px; max-height: 150px; border-radius: 10px; border: 2px solid #dee2e6;">
                                    @elseif($agency->logo_url)
                                    <img src="{{ $agency->logo_url }}" alt="Logo actual"
                                         style="max-width: 200px; max-height: 150px; border-radius: 10px; border: 2px solid #dee2e6;">
                                    @endif
                                </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-save"></i> Guardar Cambios
                        </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;

@php
$coords = null;
if ($agency->coordinates) {
    $coords = json_decode($agency->coordinates);
}
@endphp

const defaultLocation = {
    lat: {{ $coords->lat ?? 9.249853359774589 }},
    lng: {{ $coords->lng ?? -69.37537642682825 }}
};

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);
    }
}

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

async function initMap() {
    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();

    marker = new AdvancedMarkerElement({
        map: map,
        position: defaultLocation,
        title: "Ubicación de la agencia",
        gmpDraggable: true
    });

    marker.addListener("dragend", function(event) {
        updateCoordinates(event.latLng);
    });

    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