@extends('layouts.mainHiddenMenu')
@push('styles')
<link href='{{asset('css/redtrack.css')}}' rel='stylesheet' />
<link href='{{asset('css/daterangepicker.css')}}' rel='stylesheet' />
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}">
<link href="{{asset('css/beautify-marker-icon.css')}}" rel='stylesheet'/>

<style>

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}

.legend {
    line-height: 18px;
    color: #000;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.9;
}
</style>
<!-- END DataTables-->
@endpush
@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            
            <div class="">
                

                <div class="row p-5">
                    <div class="col-md-12">
                        <div class="col-md-6 mb-4">
                            <div class="col-md-12">
                            <br/>
                                <div class="card-deck">
                                    <div class="card">
                                        <div class="card-header border border-top-0 border-right-0 border-left-0">
                                            {{ __('strings.company_info') }}
                                        </div>
                                        <div class="card-body">
                                            <p  class="mb-1">{{$trip->user->COMPANY_NAME}}</p>
                                            <p class="mb-1">{{$trip->user->COMPANY_ADDRESS}}</p>
                                            <p class="mb-4">{{$trip->user->PHONE_NUMBER}}</p>


                                            <p class="font-weight-bold mb-1">{{__('strings.payment_details')}}</p>
                                            <p class="mb-1"><span class="text-muted">RFC: </span> {{$trip->user->RFC}}</p>
                                            <p class="mb-1"><span class="text-muted">{{__('strings.payment_type')}}: </span> CRÉDITO</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                                
                            <div class="col-md-12">  
                                <div class="card-deck">
                                    <div class="card">
                                        <div class="card-header border border-top-0 border-right-0 border-left-0">
                                            {{ __('strings.trip_info') }}
                                        </div>
                                        <div class="card-body">
                                            <p class="font-weight-bold mb-1">{{__('strings.trip_id')}}: {{$trip->ID_ROUTE}} </p>
                                            <p class="text-muted mb-4" id='created_at'></p>

                                            <p class="font-weight-bold mb-1">{{__('strings.number_of_passengers')}}</p>
                                            <p class="text-muted mb-4">{{$trip->business_trip->PASSENGERS_NUMBER}}</p>

                                            <p class="font-weight-bold mb-1">{{__('strings.service_type')}}</p>
                                            <p class="text-muted mb-4">{{$trip->TRIP_FARE->is_foreign ? __("strings.foreign_trip") : __("strings.normal_trip") }}</p>

                                            <p class="font-weight-bold mb-1">{{__('strings.status')}}</p>
                                            <p class="text-muted mb-4">{{$trip->ROUTE_STATUS}}</p>


                                            <p class="font-weight-bold mb-1">{{__('strings.distance')}}</p>
                                            <p class="text-muted mb-4">{{$trip->TRIP_FARE->km}}</p>


                                            <p class="font-weight-bold mb-1">Total</p>
                                            <p class="text-muted mb-4">{{$trip->TRIP_FARE->rate}}-MXN</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                
                            <div class="col-md-12">
                                <div class="card-deck">
                                    <div class="card">
                                        <div class="card-header border border-top-0 border-right-0 border-left-0">
                                            {{ __('strings.addresses') }}
                                        </div>
                                        <div class="card-body">
                                            <p class="font-weight-bold mb-4">{{__('strings.start_location')}}</p>
                                            @for ($i = 0; $i < count($trip->business_trip->LOCATIONS); $i++)
                                                @if (array_key_exists('start_address'.$i, $trip->business_trip->LOCATIONS))
                                                    <p>{{$i}}. {{ $trip->business_trip->LOCATIONS['start_address'.$i]['employee_number'] ?? null}}, {{ $trip->business_trip->LOCATIONS['start_address'.$i]['passenger'] ?? null}}, {{ $trip->business_trip->LOCATIONS['start_address'.$i]['address']}}</p>
                                                @endif
                                            @endfor


                                            <p class="font-weight-bold mb-4">{{__('strings.end_location')}}</p>
                                            @for ($i = 0; $i < count($trip->business_trip->LOCATIONS); $i++)
                                                @if (array_key_exists('end_address'.$i, $trip->business_trip->LOCATIONS))
                                                    <p>{{$i}}. {{ $trip->business_trip->LOCATIONS['end_address'.$i]['employee_number'] ?? null}}, {{ $trip->business_trip->LOCATIONS['end_address'.$i]['passenger'] ?? null}}, {{ $trip->business_trip->LOCATIONS['end_address'.$i]['address']}}</p>
                                                @endif
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                            </div>

                                <div class="col-md-12">

                                    <div class="card-deck">
                                        <div class="card">
                                            <div class="card-header border border-top-0 border-right-0 border-left-0">
                                                {{ __('strings.driver') }}
                                            </div>
                                            <div class="card-body">
                                                <p class="font-weight-bold mb-1">{{__('strings.name')}}</p>
                                                <p class="mb-1"><span class="text-muted">{{$trip->driver->NAME}}  {{$trip->driver->LAST_NAME}}</span></p>
                                                <p class="font-weight-bold mb-1">Email</p>
                                                <p class="mb-1"><span class="text-muted">{{$trip->driver->EMAIL}}</span></p>
                                                <p class="font-weight-bold mb-1">{{__('strings.phone')}}</p>
                                                <p class="mb-1"><span class="text-muted">{{$trip->driver->PHONE_NUMBER}}</span></p>
                                                <p class="font-weight-bold mb-1">{{__('strings.car_model')}}</p>
                                                <p class="mb-1"><span class="text-muted">{{$trip->driver->CAR_MODEL}}</span></p>
                                                <p class="font-weight-bold mb-1">{{__('strings.eco')}}</p>
                                                <p class="mb-1"><span class="text-muted">{{$trip->driver->ECO}} / {{$trip->driver->NUMBER_PLATE}}</span></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                
                        </div>

                        <div class="col-md-6 mb-4">
                            <div class="panel panel-default">
                                <div class="panel-body" style="width: 50%; height: 100vh;">                    
                                    <div id="map" style="height: 100vh;"></div>                              
                                </div>                
                            </div>
                        </div>
                    </div>

                   
                    <div class="col-md-12 p-5">
                    <div class="card-deck">
                        <div class="card">
                            <div class="card-header border border-top-0 border-right-0 border-left-0">
                                {{ __('strings.qr_log') }}
                            </div>

                            <div class="card-body">
                                <table id="qr_log_table" class="table hover mb-0">
                                <thead class="thead-inverse">
                                    <tr>
                                        <th>Id</th>	               	
                                        <th>{{__('strings.qr_code')}}</th>
                                        <th>{{__('strings.name')}}</th>
                                        <th>{{__('strings.last_name')}}</th>
                                        <th>{{__('strings.taxi_type')}}</th>
                                        <th>Lat</th>
                                        <th>Lng</th>
                                        <th>{{__('strings.created_at')}}</th>
                                        <th>{{__('strings.time')}}</th>
                                    </tr>
                                </table>   
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-12 p-5">
                    <div class="card-deck">
                        <div class="card">
                        <div class="card-header border border-top-0 border-right-0 border-left-0">
                            {{ __('strings.absents') }}
                        </div>
                        <div class="card-body">
                                <table id="absents_table" class="table hover mb-0">
                                    <thead class="thead-inverse">
                                        <tr>
                                            <th>Employee Id</th>	               	
                                            <th>{{__('strings.name')}}</th>
                                            <th>{{__('strings.phone')}}</th>
                                            <th>{{__('strings.address')}}</th>
                                            <th>{{__('strings.created_at')}}</th>
                                            <th>{{__('strings.time')}}</th>
                                        </tr>
                                    </thead>
                                    </thead>
                                </table>    
                            </div>
                        </div>
                    </div>
                </div>
                
                </div>
                

                

        
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min.js')}}" type="text/javascript"></script>
<!-- END DataTables-->
<script src="{{asset('js/daterangepicker.js')}}" type="text/javascript"></script>
<script src="{{asset('js/beautify-marker-icon.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet-realtime.min.js')}}" type="text/javascript"></script>


<script type="text/javascript">
    let qrTable;
    let absentsTable;
    var route = @json($trip);
    let map;
    $(document).ready(function() {
        console.log("document ready !");
        //setting language for moment.js
        moment.locale('es');
        getTripInfo('{{$token}}');
        
        $('#created_at').html(moment.utc('{{$trip->CREATED_AT}}').local().format('YYYY-MM-DD HH:mm'));
        initMap();
        initTables();
 });

 function initMap() {

    // initialize map
    map = new L.map('map',{preferCanvas:true, attributionControl: false});
    // load mapbox tiles
    L.tileLayer("{{config('app.map_style')}}", {
        maxZoom: 18,
    }).addTo(map);
    // initialize map view
    map.setView([{{$trip->BEGIN_LATITUDE}}, {{$trip->BEGIN_LONGITUDE}}], 14);

    // full screen support to map view
    $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        map.invalidateSize();
    });

    $(window).resize(function () {
        map.invalidateSize();
    });

    var legend = L.control({position: 'bottomright'});

    legend.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 10, 20, 50, 100, 200, 500, 1000],
            labels = [];

            div.innerHTML += '<i><div class="beautify-marker doughnut" style="background-color: rgb(76, 175, 80); color: rgb(30, 179, 0); border-color: rgb(255, 255, 255); border-width: 3px; border-style: solid; width: 20px; height: 20px;"></div></i> &ndash;  {{__("strings.start_location")}} <br><br>';
            div.innerHTML += '<i><div class="beautify-marker doughnut" style="background-color: rgb(244, 67, 54); color: rgb(30, 179, 0); border-color: rgb(255, 255, 255); border-width: 3px; border-style: solid; width: 20px; height: 20px;"></div></i> &ndash;  {{__("strings.end_location")}} <br><br>';
            div.innerHTML += '<i><div class="beautify-marker rectangle" style="background-color: #42a5f5; color: rgb(30, 179, 0); border-color: rgb(255, 255, 255); border-width: 2px; border-style: solid; width: 20px; height: 10px; margin-top:5px"></div></i> &ndash;  {{__("strings.route")}} <br><br>';
            div.innerHTML += '<i><img src="https://localhost/com.quiq.producer/public/css/images/marker-icon.png" style="margin-left:3px; width: 15px; height: 22px;"></i> ' + ' &ndash;  {{__("strings.qr_log")}}<br><br>';

        return div;
    };

    legend.addTo(map);


    var realtime = L.realtime({
        url: "{{Auth::user()->getREST()}}trips/info/realtime?token={{$trip->TOKEN ?? null}}",
        crossOrigin: true,
        type: 'json'
    }, {
        interval:  15000,
        pointToLayer: function (feature, latlng) {
            return  L.marker(latlng, {
                icon: driverMarkerIcon, 
                rotationAngle: feature.properties.last_location.BEARING
            })
            .bindTooltip('<strong>Conductor: ' + feature.properties.trip.driver.NAME + '<br>'
                            + 'Vehículo: ' + feature.properties.trip.driver.CAR_MODEL + '<br> Placas:  ' + feature.properties.trip.driver.NUMBER_PLATE + "</strong>" ,
                    {permanent: true,offset: [0,-26], direction: 'top'});
        }
    }).addTo(map);
    
    realtime.on('update', function(e) {
        //map.fitBounds(realtime.getBounds(), {maxZoom: 3});
        for(var id in e.features) { 
            var properties = e.features[id].properties;
            realtime.getLayer(id).setRotationAngle(properties.last_location.BEARING);
            //drawRoute(realtime.getLayer(id).getLatLng(), properties.trip);
            break;
        }
    });
 }

 function drawMapObjects(trip){
    const locations = trip?.business_trip?.LOCATIONS;

    // draw start, end locations
    if(locations) {
        for (var key in locations) {
            // skip loop if the property is from prototype
            if (!locations.hasOwnProperty(key)) continue;

            let value = locations[key];
            let tooltip = "{{__('strings.start_location')}}" + key.replace(/^\D+/g, '');
            let popup = "<strong>{{__('strings.employees_details')}}</strong><br>"
                         + value.employee_number + "<br>"
                         + value.passenger_department + "<br>"
                         + value.address + "<br>";
            // start marker style
            let options = {
                iconShape: 'doughnut',
                backgroundColor: "#4CAF50",
                borderColor: '#ffffff',
                borderWidth: 3,
                iconSize: [20, 20],
            };
            if(key.includes('end_address')) { 
                tooltip = "{{__('strings.end_location')}}" + key.replace(/^\D+/g, '');
                // end marker style
                options = {
                    iconShape: 'doughnut',
                    backgroundColor: "#F44336",
                    borderColor: '#ffffff',
                    borderWidth: 3,
                    iconSize: [20, 20],
                  };
            }
            let marker = L.marker([value.lat, value.lng], { icon: L.BeautifyIcon.icon(options)}).addTo(map).bindTooltip("<strong>" + tooltip +"</strong>",{permanent: true}).bindPopup(popup);

            marker.on('mouseover', function () {
                marker.openPopup();
            });

            marker.on('mouseout', function () {
                marker.closePopup();
            });
            
        }
    }

    // draw polyline used to estimated the price of trip
    const geometry = trip?.notification?.DATA?.geometry?.geometry;
    if(geometry) {
        const geoJson =  L.geoJson(geometry,{
                style: {
                    weight: 8,
                    color: "#42a5f5"
                }
        }).addTo(map); 
        map.fitBounds(geoJson.getBounds(),{padding:[25,25]});
    }

    // draw qr scans
    const qrScans = trip?.qr_scans;
    if(qrScans) {
        L.geoJson({
                    type:"FeatureCollection",
                    features: qrScans.map(item => ({
                        geometry: {
                            type: "Point",
                            coordinates: [item.lng, item.lat]
                        },
                        type: "Feature",
                        properties: {
                            popupContent: "<strong>{{__('strings.employees_details2')}}</strong><br>"
                                            + item.employee_name + "<br>"
                                            + item.employee_lastname + "<br>"
                                            + item.trip_type + "<br>" 
                                            + moment(item.gps_time).local().format('YYYY-MM-DD HH:mm')
                        },
                        id: item.id
                    }))
                } , {
                    pointToLayer: function (feature, latlng) {
                        return L.marker(latlng);
                    },
                    onEachFeature: function (feature, layer) {
                        if (feature.properties && feature.properties.popupContent) {
                            layer.bindPopup(feature.properties.popupContent);
                        }            

                        layer.on('mouseover', function () {
                            layer.openPopup();
                        });

                        layer.on('mouseout', function () {
                            layer.closePopup();
                        });
                    }
                }).addTo(map); 
    }
 }

function initTables() {
    
    // initialize trips table
    qrTable = $('#qr_log_table').DataTable({
        data: route.qr_scans,
        searching: false,
        paging: false,
        lengthMenu: [[10, 50, 100], [10, 50, 100]],
        columns: [
            { data: 'employee_id', name: 'employee_id',  defaultContent: "NA"},
            { data: 'qr_code', name: 'qr_code',  defaultContent: "NA"},
            { data: 'employee_name', name: 'employee_name',  defaultContent: "NA"},
            { data: 'employee_lastname', name: 'employee_lastname',  defaultContent: "NA"},
            { data: 'trip_type', name: 'trip_type',  defaultContent: "NA"},
            { data: 'lat', name: 'lat',  defaultContent: "NA"},
            { data: 'lng', name: 'lng',  defaultContent: "NA"},
            { data: 'gps_time', name: 'created_at', render: function(data, type, row, meta) {
                    return moment(data).local().format('YYYY-MM-DD');
                },  defaultContent: "NA"
            }, 
            { data: 'gps_time', name: 'created_at', render: function(data, type, row, meta) {
                        return moment(data).local().format('HH:mm:ss');
                },  defaultContent: "NA"
            },  
        ],
        dom: 'Bfrtip',
        order: [],
        "language": {
                "url": "{!! asset('datatables/languages/spanish.json') !!}"
        }
    });

    absentsTable = $('#absents_table').DataTable({
        data: route.absents,
        searching: false,
        paging: false,
        lengthMenu: [[10, 50, 100], [10, 50, 100]],
        columns: [
            { data: 'id', name: 'id',  defaultContent: "NA"},
            { data: 'user_name', name: 'user_name',  defaultContent: "NA"},
            { data: 'user_phone', name: 'user_phone',  defaultContent: "NA"},
            { data: 'user_department', name: 'user_department',  defaultContent: "NA"},
            { data: 'created_at', name: 'created_at', render: function(data, type, row, meta) {
                    return moment.utc(data).local().format('YYYY-MM-DD');
                },  defaultContent: "NA"
            }, 
            { data: 'created_at', name: 'created_at', render: function(data, type, row, meta) {
                        return moment.utc(data).local().format('HH:mm:ss');
                },  defaultContent: "NA"
            },  
        ],
        dom: 'Bfrtip',
        order: [],
        "language": {
                "url": "{!! asset('datatables/languages/spanish.json') !!}"
        }
    });
}


function updateTables(trip) {
    qrTable.clear().rows.add(trip.qr_scans).draw();
    absentsTable.clear().rows.add(trip.absents).draw();
}

function getTripInfo(  ) {
        $.showPreloader("{{__('strings.processing_request')}}");

        $.post("{{Auth::user()->getREST()}}trips/info", {
            token: '{{$token}}'
        }, function(response) {
            const {trip} = response;
            $.hidePreloader();
            updateTables(trip);
            drawMapObjects(trip);
        }).fail(function(err) {
            $.hidePreloader();
            if(err.responseJSON) {
                $.alert(err.responseJSON.message);
            } else {
                $.alert("{{__('strings.error_message')}}");  
            }
        });
}
</script>
@endpush