@extends('main')

@section('content')
<style>
.journey-wrapper {
    margin-top: 40px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 20px;
}

.journey-box {
    width: 180px;
    height: 180px;
    border: 1px solid #e2b99a;
    border-radius: 5px;
    background: #fff;
    padding: 15px;
    display: inline-block;
    vertical-align: top;
}

.journey-img {
    height: 45px;
    object-fit: contain;
}

.journey-title {
    font-size: 15px;
    color: #333;
    margin-top: 8px;
}

.journey-arrow {
    height: 50px;
    margin: 0 15px;
}

</style>
<div class="row clearfix">
    <div class="col-sm-12">
        <div class="card">

            <div class="card-header bg-light">
                <h4 class="card-title">QR Journey Report</h4>
            </div>

            <div class="card-body text-center">

                <hr>

                <div class="table-responsive mt-4">
                    <table id="journeyTable" class="table table-bordered table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>S/N</th>
                                <th>QR Code</th>
                                <th>Latitude</th>
                                <th>Longitude</th>
                                <th>Date & Time</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($data as $i => $value)
                            <tr>
                                <td>{{ $i+1 }}</td>
                                <td>{{ basename($value->qrcode) }}</td>
                                <td>{{ $value->latitude }}</td>
                                <td>{{ $value->longitude }}</td>
                                <td>{{ $value->created_at }}</td>
                                 <td>
                                   <button 
                                        class="btn btn-sm btn-primary show-map-btn"
                                        data-lat="{{ $value->latitude }}"
                                        data-lng="{{ $value->longitude }}"
                                    >
                                        Show in Map
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>

                    </table>
                </div>

                <hr>

                <div class="journey-wrapper d-flex justify-content-center align-items-center">

                    @foreach($data as $scan)
                    
                        <div class="journey-box text-center mx-3">
                            <img src="{{ asset('images/location.png') }}" class="journey-img">

                            <div class="journey-title mt-2">
                                <strong>Lat:</strong> {{ $scan->latitude ?? 'N/A' }} <br>
                                <strong>Lng:</strong> {{ $scan->longitude ?? 'N/A' }}
                            </div>

                            <small class="text-muted d-block mt-2">
                                {{ \Carbon\Carbon::parse($scan->created_at)->format('d-M-Y h:i A') }}
                            </small>
                        </div>

                        @if(!$loop->last)
                            <img src="{{ asset('images/right.png') }}" class="journey-arrow">
                        @endif

                    @endforeach

                </div>

                <hr>

                <h4 class="text-center mt-4">Map View</h4>

                <div id="map" style="height: 500px; width: 100%; border:1px solid #ccc;"></div>


            </div>

        </div>
    </div>
</div>

@stop



@section('script')
<script>
$(document).ready(function () {
    $('#journeyTable').DataTable({
        dom: 'Bfrtip',
        buttons: ['excel']
    });
});
var map = L.map('map').setView([20.5937, 78.9629], 5);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
}).addTo(map);

var journeyCoords = [
    @foreach($data as $p)
        [{{ $p->latitude }}, {{ $p->longitude }}],
    @endforeach
];

var polyline = L.polyline(journeyCoords, { color: 'blue', weight: 4 }).addTo(map);

journeyCoords.forEach(function(coord, index) {
    L.marker(coord).addTo(map)
        .bindPopup("Point " + (index+1));
});

map.fitBounds(polyline.getBounds());

$(document).on('click', '.show-map-btn', function () {
    var lat = $(this).data('lat');
    var lng = $(this).data('lng');

    map.setView([lat, lng], 16);

    L.marker([lat, lng]).addTo(map)
        .bindPopup("Selected Location").openPopup();

    $('html, body').animate({
        scrollTop: $("#map").offset().top - 100
    }, 800);
});

</script>
@stop