@extends('platform.layout')

@section('back')
<a href="{{ route('platform.vehicles.index') }}" class="btn btn-light shadow position-absolute start-0 top-0 ms-2 mt-2" style="z-index:1050;">
    <i class="fa fa-arrow-left"></i>
</a>
@endsection

@section('content')
<div class="w-100 h-100 overflow-y-auto">
    <div class="container py-3">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div class="text-center lh-1 mb-3">
                    <h3 id="gps_name" class="fw-bolder mb-0">GPS Name</h3>
                    <p id="gps_imei" class="mb-0">GPS Imei</p>
                </div>
                <div class="mb-3">
                    <form action="{{ route('platform.vehicles.timeline', ['imei'=>$imei]) }}">
                        <div class="input-group">
                            <input id="date" type="text" class="form-control" value="{{ $date ?? date('Y-m-d') }}" name="date"/>
                            <button class="btn btn-primary"><i class="fa fa-refresh"></i></button>
                        </div>
                    </form>
                </div>
                <div class="card sticky-top">
                    <div class="card-body">
                        <div class="w-100 position-relative">
                            <div class="ratio ratio-1x1">
                                <div id="map" class="w-100 h-100"></div>
                            </div>
                            <div id="loader" class="d-none w-100 h-100 d-flex align-items-center justify-content-center position-absolute top-0 start-0 bg-white bg-opacity-75" style="z-index:1050;">
                                <div class="text-center">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p>Please wait ..</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div id="timeline" class="timeline"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha512-h9FcoyWjHcOcmEVkxOfTLnmZFWIH0iZhZT1H2TbOq55xssQGEJHEaIm+PgoUaZbRvQTNTluNOEfb1ZRy6D3BOw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@push('js')
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="{{ asset('statics/library/leaflet-trackplayer.umd.cjs') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.5/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js" integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
class VehicleTimelineData {

    constructor(data) {
        this.source = data;
        this.setSteps(data);
        return this;
    }

    setSteps(data){
        let steps = [];
        data.forEach((current, index)=>{
            let last    = steps.length > 1 ? steps.length - 1 : 0;
            let prev    = steps[last];
            let hasSameLocation = prev != undefined ? (moment(current.time).diff(moment(prev.time), 'minutes')  <= 5) : false;

            if(prev != undefined){
                console.log(moment(current.time).diff(moment(prev.time), 'minutes'));
            }

            if(hasSameLocation == false){
                steps.push({
                    time    : current.time,
                    lat     : current.lat,
                    lng     : current.long,
                    engine  : current.engi,
                    addr    : current.addr
                });
            }
        });
        this.steps = steps;
        return this;
    }

    getSteps(){
        return this.steps;
    }
}
$(()=>{
    'use strict'
    $("#date").flatpickr();
    async function getDevice(){
        try {
            const response = await $.ajax({
                url : `https://api-v2.foxlogger.app/user_datas?imei.eq={{ $imei }}`,
                headers : {
                    'Content-Type'  : 'application/json',
                    'Accept'        : 'application/json',
                    'Authorization' : 'Bearer 023khjsdH7123j30-whjdf1-0sadkD2023jh43-0dfkvu123G712j0dfkj3'
                },
            });
            if(typeof response.data == 'object'){
                let data = response.data[0];
                $(`#gps_name`).html(data.gps_name);
                $(`#gps_imei`).html(data.imei);
                return response.data;
            }
        } catch (error) {
            return null;
        }
    }
    getDevice();

    const deviceCoordinates = { lat : 0, lng : 0 };
    const map = L.map('map',{
        attribution: '',
        center: [deviceCoordinates.lat, deviceCoordinates.lng],
        zoom: 13,
        zoomControl: false
    });
    const JawgTileLayer = L.tileLayer('https://tile.jawg.io/jawg-light/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
        attribution: '',
        accessToken: 'GhJ3i9TeSKFbfMoRrh0XXkHRlhALG9PVqpkggJEmeAFq6QBHz2z47dmZ9pQre0j4',
        maxZoom: 18
    });
    const OsmTileLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '',
        maxZoom: 18
    });
    const GoogleStreetTileLayer = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
        attribution: '',
        subdomains:['mt0','mt1','mt2','mt3'],
        maxZoom: 18
    }).addTo(map);

    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition((position) => {
            map.setView([position.coords.latitude, position.coords.longitude]);
        });
    }
    L.control.layers({
        'JAWG MAP': JawgTileLayer,
        'OpenStreet Map': OsmTileLayer,
        'Google Map': GoogleStreetTileLayer
    }, {}, {
        position: 'bottomleft'
    }).addTo(map);

    $.ajax({
        url: encodeURI(`https://api-v2.foxlogger.app/web-tracker-staging/report-rollback`),
        data: {
            user_id : {{ auth()->user()->profile->foxlogger_id ?? 0 }},
            imei : '{{ $imei ?? '' }}',
            time1 : `{{ $date ?? date('Y-m-d') }} 00:00:00`,
            time2 : `{{ $date ?? date('Y-m-d') }} 23:59:59`,
        },
        headers : {
            'Content-Type'  : 'application/json',
            'Accept'        : 'application/json',
            'Authorization' : 'Bearer 023khjsdH7123j30-whjdf1-0sadkD2023jh43-0dfkvu123G712j0dfkj3'
        },
        beforeSend(){
            $(`#loader`).removeClass('d-none');
        },
        success(response){
            $(`#loader`).addClass('d-none');
            let path = [];
            response.data.forEach((row)=>{
                path.push(new L.LatLng(parseFloat(row.lat), parseFloat(row.lng)));
            });
            map.fitBounds(path);
            let track = new L.TrackPlayer(path, {
                speed: 12000,
                marker: L.marker(path[0], {
                    icon: L.icon({
                        iconSize: [27, 54],
                        iconUrl: `{{ asset('statics/library/car.png') }}`,
                        iconAnchor: [13.5, 27],
                    })
                }),
            }).addTo(map);
            track.start();
        },
        error(){
            $(`#loader`).addClass('d-none');
            Swal.fire({
                icon: "error",
                title: "Failed load data",
                showConfirmButton: false,
                timer: 4000
            });
        }
    });

    $.ajax({
        url: encodeURI(`https://api-v2.foxlogger.app/web-tracker-staging/report-history`),
        data: {
            user_id : {{ auth()->user()->profile->foxlogger_id ?? 0 }},
            imei : '{{ $imei ?? '' }}',
            time1 : `{{ $params->date ?? date('Y-m-d') }} 00:00:00`,
            time2 : `{{ $params->date ?? date('Y-m-d') }} 23:59:59`,
        },
        headers : {
            'Content-Type'  : 'application/json',
            'Accept'        : 'application/json',
            'Authorization' : 'Bearer 023khjsdH7123j30-whjdf1-0sadkD2023jh43-0dfkvu123G712j0dfkj3'
        },
        success(response){
            let timeline = (new VehicleTimelineData(response.data)).getSteps();
            timeline.forEach((step)=>{
                let time = moment(step.time).locale('id');
                $(`#timeline`).append(`<div class="timeline-item">
                    <div class="time text-center">
                        <p class="fw-bold lh-1 fs-3 mb-0">${time.format('HH:mm')}</p>
                        <span class="text-small">${time.format('DD MMM YY')}</span>
                    </div>
                    <div class="pb-3">
                        <h5 class="fw-bold lh-1 mb-1">Mesin : ${step.engine}</h5>
                        <p class="text-small lh-1">${step.addr}</p>
                    </div>
                </div>`);
            })
        }
    });
});
</script>
@endpush