@extends('platform.layout')

@section('back')
<a href="{{ route('platform.map') }}" class="btn btn-light shadow position-absolute start-0 top-0 ms-2 mt-2" style="z-index:1050;">
    <i class="fa fa-refresh"></i>
</a>
<button class="btn btn-light shadow position-absolute end-0 top-0 me-2 mt-2" style="z-index:1050;" data-bs-toggle="modal" data-bs-target="#select-modal">
    <i class="fa fa-search"></i>
</button>
@endsection

@section('content')
    <div class="w-100" style="position:absolute; top:-56px; left:0; height:calc(100% + 56px);">
        <div id="map" class="w-100 h-100"></div>
        <div class="position-absolute shadow position-absolute end-0 bottom-0 bg-white p-2 rounded border border-3 border-gray me-2 mb-2" style="z-index:1050;">
            <div class="form-check form-switch">
                <label class="form-check-label" for="cctv-toggle">
                    <img src="{{ asset('statics/map-icons/cctv.png') }}" height="20">
                </label>
                <input class="form-check-input" type="checkbox" role="switch" id="cctv-toggle" />
            </div>
        </div>
    </div>
    <div id="cctv-modal" class="modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content overflow-hidden p-2">
                <div class="ratio ratio-16x9 rounded">
                    <video id="cctv-video" class="video" controls autoplay muted></video>
                </div>
            </div>
        </div>
    </div>
    <div id="select-modal" class="modal" tabindex="-1">
        <div class="modal-dialog modal-lg" style="margin-top:60px;">
            <div class="modal-content overflow-hidden p-2">
                <select id="select-marker" class="form-select"></select>
            </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/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.3.0/select2-bootstrap-5-theme.min.css" integrity="sha512-z/90a5SWiu4MWVelb5+ny7sAayYUfMmdXKEAbpj27PfdkamNdyI3hcjxPxkOPbrXoKIm7r9V2mElt5f1OtVhqA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/promise-polyfill/8.3.0/polyfill.min.js" integrity="sha512-310GmPyrxvjHYxcTy7HdjCN7EYL9ou4DldEiu1oABpNFUcEbPfcESbQ+4lZBIAsYb2KuKjJpvWaDxQUINj4I8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></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://hlsjs.video-dev.org/dist/hls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js" integrity="sha512-RtZU3AyMVArmHLiW0suEZ9McadTdegwbgtiQl5Qqo9kunkVg1ofwueXD8/8wv3Af8jkME3DDe3yLfR8HSJfT2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.5.0/mqtt.min.js" integrity="sha512-jRy2TVmjNUHUFX+0ioDrGWOb1pRBtZclqSmHHzHlHE4jRew5jgIK+qWf1M/tYadC6yzY9MXAVxYLbR9WQZPsbQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(()=>{
    'use strict';

    /* Setup MAP */
    const map = L.map('map',{
        attribution: '',
        zoom: 13,
        zoomControl: false
    });

    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition((position) => {
            map.setView([position.coords.latitude, position.coords.longitude]);
        });
    }

    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);

    const baseLayers = {
        'JAWG MAP': JawgTileLayer,
        'OpenStreet Map': OsmTileLayer,
        'Google Map': GoogleStreetTileLayer
    };
    const vehiclesGroupLayer = L.featureGroup().addTo(map);
    const cctvGroupLayer = L.featureGroup();
    const overlays = {
        'Vehicles': vehiclesGroupLayer,
        'CCTV'  : cctvGroupLayer
    };
    // L.control.zoom({ position: 'bottomright' }).addTo(map);
    L.control.layers(baseLayers, {}, {
        position: 'bottomleft'
    }).addTo(map);
    /* End Setup MAP */

    /* Setup Cctv */
    let hls = new Hls();
    const cctvModalEl       = document.getElementById('cctv-modal');
    const cctvVideoEl       = document.getElementById('cctv-video');
    const cctvModal         = new bootstrap.Modal(cctvModalEl, { keyboard: false });
    cctvModalEl.addEventListener('hidden.bs.modal',(e)=>{
        if (Hls.isSupported()) {
            hls.stopLoad();
        } else {
            cctvVideoEl.src = ``;
        }
    });

    const cctvData = {!! json_encode($cctv ?? []) !!};
    cctvData.forEach((row)=>{
        let latLng = new L.LatLng(parseFloat(row.latitude), parseFloat(row.longitude));
        let marker = L.marker(latLng).setIcon(
            L.icon({
                iconUrl: `{{ asset('statics/map-icons/cctv.png') }}`,
                iconSize: [25, 25]
            })
        ).addTo(cctvGroupLayer);

        marker.on('click', (e)=>{
            let videoSrc    = String(row.url);
            if (Hls.isSupported()) {
                let streamID    = row.url.split(`/`).pop();
                videoSrc = `https://rtsp.itn.net.id/play/hls/${streamID}/index.m3u8?_=${Math.random()}`;
                hls.loadSource(videoSrc);
                hls.attachMedia(cctvVideoEl);
            } else if (cctvVideoEl.canPlayType('application/vnd.apple.mpegurl')) {
                cctvVideoEl.src = videoSrc + `?_=${Math.random()}`;
            }
            cctvModal.show();
        });
    });

    $(`#cctv-toggle`).on({
        change(e){
            if(e.currentTarget.checked){
                cctvGroupLayer.addTo(map)
            } else {
                cctvGroupLayer.removeFrom(map)
            }
        }
    });
    /* End Setup Cctv */

    /* Setup Device */
    const USER_ID           = String(`{{ auth()->user()->profile->foxlogger_id ?? '' }}`).trim();
    const selectModal       = new bootstrap.Modal('#select-modal');
    const vehiclesMarker    = [];
    function buildVehicleMarker(gps){
        let engineIsOn  = (parseInt(gps.engine) == 1);
        let content     = String(`
            <div class="d-flex align-items-center" style="width:300px;">
                <div class="text-${(engineIsOn ? 'success' : 'secondary')} me-3 fs-1">
                    ${ gps.type == 'MOTORBIKE' ? `<i class="fa-solid fa-motorcycle"></i>` : `<i class="fa fa-fw fa-taxi"></i>` }
                </div>
                <div class="">
                    <p class="fw-bold m-0 fs-5">${gps.name}</p>
                    <dl class="row mb-0 text-muted">
                        <dt class="col-4 fw-normal">Movement</dt>
                        <dd class="col-8 mb-0">: ${gps.movement}</dd>
                        <dt class="col-4 fw-normal">Engine</dt>
                        <dd class="col-8 mb-0">: ${engineIsOn ? 'Hidup' : 'Mati'}</dd>
                        <dt class="col-4 fw-normal">Speed</dt>
                        <dd class="col-8 mb-0">: ${gps.speed} Km/Jam</dd>
                    </dl>
                </div>
                <div class="text-center mt-2">
                    <a href="{{ route('platform.vehicles.index') }}/${gps.imei}" class="btn btn-primary text-white btn-sm ">Show Detail</a>
                </div>
            </div>
        `).trim();
        let type        = (gps.type == 'MOTORBIKE') ? 'motorbike' : 'car';
        let iconURL     = `{{ asset('statics/images/map-icons') }}/${type}-${(engineIsOn ? 'on.png' : 'off.png')}`;
        let latLng      = new L.LatLng(parseFloat(gps.lat), parseFloat(gps.lng));

        if(vehiclesMarker[gps.imei] == undefined){
            vehiclesMarker[gps.imei] = L.Marker
                .movingMarker([latLng, latLng], [300], { autostart: true,})
                .bindTooltip(`<small>${gps.name}</small>`, {
                    permanent: true,
                    direction: 'top',
                    offset : L.point(0, -15)
                }).addTo(vehiclesGroupLayer);
        } else {
            vehiclesMarker[gps.imei].moveTo(latLng, 5000);
        }
        vehiclesMarker[gps.imei]
            .bindPopup(content)
            .setIcon(
                L.icon({
                    iconUrl:  iconURL,
                    iconSize: [30, 30],
                })
            );
    }
    $.ajax({
        url : `https://terminalapi.foxlogger.info/dataGPSHA?key=${USER_ID}`,
        headers : {
            'Content-Type'  : 'application/json',
            'Accept'        : 'application/json',
            'Authorization' : 'Bearer 023khjsdH7123j30-whjdf1-0sadkD2023jh43-0dfkvu123G712j0dfkj3'
        },
        dataType : 'json',
        success(response){
            if(typeof response == 'object'){
                let dataSelect = [];
                response.forEach((row)=>{
                    dataSelect.push({
                        id : row.vehicle_id,
                        text : row.license_plate_no
                    });
                    buildVehicleMarker({
                        imei : row.vehicle_id,
                        name : row.license_plate_no,
                        type : row.type,
                        engine : row.status_engine,
                        movement : row.status,
                        speed : row.speed,
                        lat : row.lat,
                        lng : row.lng
                    });
                });
                $(`#select-marker`).select2({
                    theme   : 'bootstrap-5',
                    width   : '100%',
                    data    : dataSelect,
                    allowClear : true,
                    placeholder : 'Select Vehicles',
                    dropdownParent: $('#select-modal')
                }).on({
                    'select2:select' : (e) => {
                        let data = e.params.data;
                        let marker = vehiclesMarker[data.id];
                        if(marker != undefined){
                            map.setView(marker.getLatLng(), 20);
                        }
                        selectModal.hide();
                    } 
                });
            }
            map.fitBounds(vehiclesGroupLayer.getBounds());
        }
    });
    /* End Setup Device*/

    /* Update GPS Device */
    const client = mqtt.connect('wss://mqtt.foxlogger.app/mqtt:21002',{
        clientId: 'mqtt_dikedo_' + Math.random().toString(16).substr(2, 8),
        username: 'foxlist',
        password: 'pecellele2021'
    });
    client.on('reconnect', () => {
        console.log('MQTT Reconnecting...');
    });
    client.on('error', (err) => {
        console.log('MQTT Connection error: ', err)
        client.end();
    });
    client.on('connect', () => {
        console.log('MQTT Connected');
    });
    client.subscribe('{{ auth()->user()->profile->foxlogger_id ?? '' }}');
    client.on('message', function (topic, message) {
        let row    = JSON.parse(message.toString());
        // console.log(row);
        buildVehicleMarker({
            imei : row.imei,
            name : row.nopl,
            type : row.unty,
            engine : row.eng,
            movement : row.sts,
            lat : row.lat,
            lng : row.lng,
            speed : row.spd
        });
    });
});
</script>
@endpush