@extends('layouts.admin')

@section('title', 'Agencias Inmobiliarias')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Listado de Agencias</h3>
                <div class="card-tools">
                    <a href="{{ route('admin.agencies.create') }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> Nueva Agencia
                    </a>
                </div>
            </div>
            <div class="card-body">
                @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                @endif

                @if($agencies->count() === 0)
                <p class="text-muted text-center">No hay agencias registradas aún.</p>
                @else
                <div class="row">
                    @foreach($agencies as $agency)
                    <div class="col-md-4 mb-4">
                        <div class="card h-100">
                            <div class="card-header text-center py-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 140px;">
                                @if($agency->logo && str_starts_with($agency->logo, 'data:image'))
                                <img src="{{ $agency->logo }}" alt="{{ $agency->name }}"
                                     class="rounded-circle"
                                     style="width: 80px; height: 80px; object-fit: cover; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
                                @else
                                <div class="rounded-circle bg-white bg-opacity-25 d-flex align-items-center justify-content-center mx-auto"
                                     style="width: 80px; height: 80px; font-size: 32px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
                                    🏢
                                </div>
                                @endif
                            </div>
                            <div class="card-body">
                                <h5 class="card-title text-center">{{ $agency->name }}</h5>
                                <p class="card-text">
                                    <i class="fas fa-envelope text-primary"></i> {{ $agency->email_general }}<br>
                                    <i class="fas fa-phone text-primary"></i> {{ $agency->phone_primary }}<br>
                                    @if($agency->website)
                                    <i class="fas fa-globe text-primary"></i> <a href="{{ $agency->website }}" target="_blank">{{ $agency->website }}</a><br>
                                    @endif
                                    @if($agency->address)
                                    <i class="fas fa-map-marker-alt text-primary"></i> {{ $agency->address }}<br>
                                    @endif
                                    <span class="badge {{ $agency->status === 'Activa' ? 'bg-success' : 'bg-danger' }}">
                                        {{ $agency->status }}
                                    </span>
                                </p>
                                @if($agency->coordinates)
                                <button class="btn btn-info btn-sm w-100" onclick="showAgencyMap({{ $agency->coordinates }})">
                                    <i class="fas fa-map"></i> Ver en mapa
                                </button>
                                @endif
                            </div>
                            <div class="card-footer">
                                <a href="{{ route('admin.agency.agents.index', $agency->id) }}" class="btn btn-info btn-sm w-100 mb-2">
                                    <i class="fas fa-users"></i> Agentes ({{ $agency->agents_count ?? $agency->agents->count() }})
                                </a>
                                <div class="d-flex gap-2">
                                    <a href="{{ route('admin.agencies.edit', $agency->id) }}" class="btn btn-warning btn-sm w-100">
                                        <i class="fas fa-edit"></i> Editar
                                    </a>
                                    <form action="{{ route('admin.agencies.destroy', $agency->id) }}" method="POST" class="d-inline w-100">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm w-100" onclick="return confirm('¿Estás seguro de eliminar esta agencia?')">
                                            <i class="fas fa-trash"></i> Eliminar
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal para ver mapa -->
<div class="modal fade" id="mapModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Ubicación de la Agencia</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="modalMap" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>

<script>
async function showAgencyMap(coordinates) {
    const coords = typeof coordinates === 'string' ? JSON.parse(coordinates) : coordinates;
    
    document.getElementById('modalTitle').textContent = 'Ubicación de la Agencia';
    const modal = new bootstrap.Modal(document.getElementById('mapModal'));
    modal.show();
    
    setTimeout(async () => {
        const { Map } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
        
        const modalMap = new Map(document.getElementById("modalMap"), {
            zoom: 15,
            center: { lat: parseFloat(coords.lat), lng: parseFloat(coords.lng) },
            mapId: "DEMO_MAP_ID"
        });
        
        new AdvancedMarkerElement({
            map: modalMap,
            position: { lat: parseFloat(coords.lat), lng: parseFloat(coords.lng) },
            title: 'Agencia'
        });
    }, 500);
}
</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"></script>
@endif
@endsection