@extends('layouts.master')

@section('content')
<div class="container-xxl py-3 h-100">
    <div class="text-center">
        <p class="mb-0">Laporan</p>
        <h3 class="fw-bolder">Lini Masa</h3>
    </div>
    <div class="row align-items-stretch ">
        <div class="col-md-7">
            <div class="sticky-top">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="ratio ratio-16x9">
                            <div id="map" class="w-100 h-100"></div>
                        </div>
                    </div>
                </div>
                <form action="{{ route('timeline') }}" method="GET" class="row align-items-end g-2 mb-3">
                    <input type="hidden" name="user_id" value="{{ settings('foxlogger.account.id') }}" />
                    <div class="col-md-4">
                        <div class="form-floating">
                            <input id="date" name="date" type="text" class="form-control" placeholder="Pilih Tanggal" value="{{ $params->date ?? '' }}">
                            <label for="date">Tanggal</label>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="input-group">
                            <div class="form-floating">
                                <select id="imei" class="form-select" placeholder="Pilih Kendaraan" name="imei">
                                    @foreach ($vehicles as $vehicle)
                                    <option value="{{ $vehicle->vehicle_id }}" @selected($vehicle->vehicle_id == ($params->imei ?? ''))>{{ $vehicle->license_plate_no }}</option>                                    
                                    @endforeach
                                </select>
                                <label for="imei">Pilih Kendaraan</label>
                            </div>
                            <button class="btn btn-primary">Tampilkan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-5">
            <div class="card">
                <div class="card-body">
                    <div id="timeline" class="timeline"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.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" />
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" integrity="sha512-puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjtwXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
<script src="https://cdn.jsdelivr.net/npm/Leaflet-MovingMaker@0.0.1/MovingMarker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js" integrity="sha512-4F1cxYdMiAW98oomSLaygEwmCnIP38pb4Kx70yQYqRwLVCs3DbRumfBq82T08g/4LJ/smbFGFpmeFlQgoDccgg==" 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;
    }
}

$(()=>{
    flatpickr.localize(flatpickr.l10ns.id);
    const date = $(`#date`).flatpickr({
        altInput: true,
        altFormat: "d F Y",
        dateFormat: "Y-m-d",
    });
    const defaultLatLng = new L.LatLng(
        {{ settings('map.center.latitude', '-5.4227731') }}, 
        {{ settings('map.center.longitude', '105.2537459') }}
    );
    const map = new L.Map('map', {
        center: defaultLatLng,
        zoom: 15,
        minZoom: 1,
    });
    const JawgTileLayer = L.tileLayer('https://tile.jawg.io/jawg-light/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
        attribution: '',
        accessToken: 'GhJ3i9TeSKFbfMoRrh0XXkHRlhALG9PVqpkggJEmeAFq6QBHz2z47dmZ9pQre0j4',
        maxZoom: 22
    }).addTo(map);

    $.ajax({
        url: encodeURI(`https://api-v2.foxlogger.app/web-tracker-staging/report-history`),
        data: {
            user_id : {{ $params->user_id ?? 0 }},
            imei : '{{ $params->imei ?? '' }}',
            time1 : `{{ $params->date ?? date('Y-m-d') }} 00:00:00`,
            time2 : `{{ $params->date ?? date('Y-m-d') }} 23:59:59`,
        },
        headers : {
            'Authorization' : `Bearer {{ settings('foxlogger.api.access-token') }}`,
            'Content-Type': 'application/json'
        },
        success(response){
            let timeline = (new VehicleTimelineData(response.data)).getSteps();
            console.log(timeline);
            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>`);
            })
        }
    });

    let coordinates     = [];
    let durations       = [];
    $.ajax({
        url: encodeURI(`https://api-v2.foxlogger.app/web-tracker-staging/report-rollback`),
        data: {
            user_id : {{ $params->user_id ?? 0 }},
            imei : '{{ $params->imei ?? '' }}',
            time1 : `{{ $params->date ?? date('Y-m-d') }} 00:00:00`,
            time2 : `{{ $params->date ?? date('Y-m-d') }} 23:59:59`,
        },
        headers : {
            'Authorization' : `Bearer {{ settings('foxlogger.api.access-token') }}`,
            'Content-Type': 'application/json'
        },
        success(response){
            response.data.forEach((row)=>{
                coordinates.push(new L.LatLng(parseFloat(row.lat), parseFloat(row.lng)));
                coordinates.push(new L.LatLng(parseFloat(row.lat), parseFloat(row.lng)));
                durations.push(100);
            });
            let vehicle = L.Marker.movingMarker(
                coordinates, durations, 
                { autostart: true }
            ).addTo(map);
            vehicle.setIcon(
                L.icon({
                    iconUrl: `{{ asset('statics/map-icons/police-car-on.png') }}`,
                    iconSize: [ 30 ]
                })
            );
            L.polyline(coordinates, {color: 'green'}).addTo(map);
            vehicle.on('move',(e)=>{
                map.panTo(e.latlng, map.getZoom());
            });
        }
    });
});
</script>
@endpush