@extends('layouts.digitar')

@section('Breadcrumbs')
    {!! Breadcrumbs::render('parameters.list') !!}
@endsection

@section('content')
    <div class="the-box row rounded">
        <!-- Coluna da esquerda: Informações do chamado -->
        <div class="col-md-5">
            <div class="card-header text-dark">
                <h4 class="mb-4 mt-4">Informações do Chamado</h4>
            </div>
            <div id="infoChamado" class="p-3">
                <p><strong>Nome:</strong> {{ $chamado->nome ?? 'Não informado' }}</p>
                <ul class="list-group list-group-flush" id="listaEndereco">
                    <li class="list-group-item"><strong>Rua:</strong> <span id="rua">Carregando...</span></li>
                    <li class="list-group-item"><strong>Bairro:</strong> <span id="bairro">Carregando...</span></li>
                    <li class="list-group-item"><strong>Cidade:</strong> <span id="cidade">Carregando...</span></li>
                    <li class="list-group-item"><strong>Estado:</strong> <span id="estado">Carregando...</span></li>
                    <li class="list-group-item"><strong>CEP:</strong> <span id="cep">Carregando...</span></li>
                </ul>
            </div>
        </div>

        <!-- Coluna da direita: Mapa -->
        <div class="col-md-7">
            <div id="leafletMap" style="height: 400px; width: 100%; border-radius:8px;"></div>
        </div>

        <!-- Leaflet CSS e JS -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const latitude = parseFloat(@json($chamado->latitude));
                const longitude = parseFloat(@json($chamado->longitude));
                const chamadoId = @json($chamado->id);

                if (!isNaN(latitude) && !isNaN(longitude)) {
                    const map = L.map('leafletMap').setView([latitude, longitude], 16);

                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; OpenStreetMap contributors'
                    }).addTo(map);

                    L.marker([latitude, longitude]).addTo(map)
                        .bindPopup('Chamado #' + chamadoId)
                        .openPopup();

                    // Geocodificação reversa com Nominatim
                    fetch(
                            `https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&addressdetails=1`
                            )
                        .then(response => response.json())
                        .then(data => {
                            const address = data.address;
                            document.getElementById('rua').textContent = address.road || 'Não informado';
                            document.getElementById('bairro').textContent = address.suburb || address
                                .neighbourhood || 'Não informado';
                            document.getElementById('cidade').textContent = address.city || address.town || address
                                .village || 'Não informado';
                            document.getElementById('estado').textContent = address.state || 'Não informado';
                            document.getElementById('cep').textContent = address.postcode || 'Não informado';
                        })
                        .catch(error => {
                            console.error("Erro ao buscar endereço:", error);
                            document.querySelectorAll('#listaEndereco span').forEach(el => {
                                el.textContent = 'Erro';
                            });
                        });
                } else {
                    alert("Coordenadas inválidas ou ausentes para o chamado ID " + chamadoId);
                }
            });
        </script>
    </div>
@endsection