@php
    // foreach ($drivers as $driver) {
    //     printf('Found subcollection with id: %s' . PHP_EOL, $driver->id());
    // }

    // var_dump(auth()->user()->name);
    // die;
@endphp

@extends('main-layout')

@section('container')
    

    <div class="nav-scroller bg-body shadow-sm">
    </div>

    <main class="container-fluid">
        <div class="row p-5 my-2">
            <div class="col-2 my-3 mx-1 p-3 bg-body rounded shadow-sm">
                <h6 class="border-bottom pb-2 mb-0">Driver List</h6>
                    <div class="list-group my-2">
                        @foreach ($drivers as $driver)                            
                            <a href="#" class="list-group-item list-group-item-action get-data" data-id="{{ $driver->id() }}" >{{ $driver->id() }}</a>
                        @endforeach
                    </div>
            </div>
            <div class="col my-3 mx-1 p-3 bg-body rounded shadow-sm" id="map">
            </div>
        </div>
    </main>


        <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

    <script>
        $(document).on("click", ".get-data", function(){
            const id = this.getAttribute("data-id");
            console.log(id)
            $.ajax({
                type: 'GET', 
                url: '/get-location/'+ id,
                dataType: 'json',
                success: function (data) {
                    const lat_longi = data.location.lat +","+ data.location.longi
                    const map_iframe = `<iframe frameborder="0" style="border:0;width:100%;height:25rem;" src="https://www.google.com/maps?q=${lat_longi}&hl=es;z=14&output=embed" allowfullscreen> </iframe>`
                                        
                    // console.log(data.location);
                    
                    $("#map").empty();
                    $('#map').append(map_iframe);  
                },
                error:function(data){ 
                    console.log(data);
                }
            });
        }); 
    </script>

@endsection