@extends('layouts.master')

@section('content')
    <div class="app-content-fullscreen">
        <div class="w-100 h-100 position-relative">
            <div id="map" class="w-100 h-100"></div>
            <div class="position-absolute shadow position-absolute start-50 bottom-0 translate-middle-x bg-white p-2 rounded border border-3 border-gray mb-2"
                style="z-index:1050;">
                <div class="form-check form-check-inline form-switch">
                    <label class="form-check-label" for="vehicle-toggle"><i class="fa fa-taxi"></i></label>
                    <input class="form-check-input" type="checkbox" role="switch" id="vehicle-toggle" checked />
                </div>

                <div class="form-check form-check-inline form-switch">
                    <label class="form-check-label" for="cctv-toggle"><i class="fa fa-video"></i></label>
                    <input class="form-check-input" type="checkbox" role="switch" id="cctv-toggle" />
                </div>
            </div>
        </div>
        <x-map-toolbar />
        <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>
@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" />
@endpush

@push('style')
    {{-- <style>
.leaflet-touch .leaflet-control-layers {
    border:0;
}
.leaflet-control-layers.leaflet-control .leaflet-control-layers-toggle {
    width:auto;
    height:auto;
    background-image: none;
    border:0 !important;
    color:#333;
}
.leaflet-control-layers.leaflet-control.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display:none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    font-size:16px;
    font-weight:600;
    padding:10px;
}
.leaflet-control-layers-separator {
    margin:10px;
}
</style> --}}
@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://cdn.jsdelivr.net/npm/hls.js@latest"></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>
        jQuery.expr[':'].contains = function(a, i, m) {
            return jQuery(a).text().toLowerCase()
                .indexOf(m[3].toLowerCase()) >= 0;
        };

        $(() => {
            'use strict';

            /* Setup Map */
            const defaultLatLng = new L.LatLng({{ settings('map.center.latitude', -5.4227731) }},
                {{ settings('map.center.longitude', 105.2537459) }});
            const map = L.map('map', {
                attribution: '',
                zoom: 13,
                zoomControl: false,
                center: defaultLatLng
            });

            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 = {
                'CCTV': cctvGroupLayer,
                'Vehicles': vehiclesGroupLayer,
            };
            L.control.zoom({
                position: 'bottomright'
            }).addTo(map);
            L.control.layers(baseLayers, {}, {
                position: 'bottomleft'
            }).addTo(map);
            /* End Setup Map */

            /* Setup CCtv */
            const cctvModalEl = document.getElementById('cctv-modal');
            const cctvVideoEl = document.getElementById('cctv-video');
            const cctvModal = new bootstrap.Modal(cctvModalEl, {
                keyboard: false
            });

            let hls = new Hls();
            cctvModalEl.addEventListener('hidden.bs.modal', (e) => {
                if (Hls.isSupported()) {
                    hls.stopLoad();
                } else {
                    cctvVideoEl.src = ``;
                }
            });
            $.ajax({
                url: `{{ route('api.cctvs.index') }}?paginate=0`,
                dataType: 'json',
                success(response) {
                    if (typeof response.data == 'object') {
                        response.data.forEach((row) => {
                            let latLng = new L.LatLng(parseFloat(row.lat), parseFloat(row.lng));
                            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();
                            });

                            let $html = $(`
                                <div id="cctv-${row.id}" class="card border-0 shadow mb-2"  style="cursor:pointer;">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="text-secondary me-2">
                                                <i class="fa fa-fw fa-video"></i>
                                            </div>
                                            <div class="lh-1">
                                                <p class="fw-bold m-0" style="font-size:16px;margin-bottom:5px !important;">${row.name}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `).click((e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                map.setView(latLng, 18);
                            });
                            $(`#cctv-container`).append($html);
                        });
                    }
                }
            })
            $(`#cctv-toggle`).on({
                change(e) {
                    if (e.currentTarget.checked) {
                        cctvGroupLayer.addTo(map)
                    } else {
                        cctvGroupLayer.removeFrom(map)
                    }
                }
            });
            $('#input-search-cctv').keyup((e) => {
                let term = $(e.target).val();
                if (term != '') {
                    $(`#cctv-container > div`).not(`:contains("${term}")`).hide();
                } else {
                    $(`#cctv-container`).children().show();
                }
            });
            /* End Setup CCtv */

            /* Setup Device */
            const USER_ID = String(`{{ settings('foxlogger.account.id') ?? 0 }}`).trim();
            const vehiclesMarker = [];
            const vehiclesContainer = $(`#vehicles-container`);
            vehiclesContainer.on('load-content', (e) => {
                $(e.currentTarget).find(`.btn-center`).click((event) => {
                    let markerId = $(event.currentTarget).attr(`data-marker-id`);
                    map.setView(vehiclesMarker[`${markerId}`].getLatLng(), 18);
                });
            });

            function buildVehicleContent(gps) {
                let engineIsOn = (parseInt(gps.engine) == 1);
                let html = 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">Status</dt>
                                <dd class="col-8 mb-0">: ${gps.movement}</dd>
                                <dt class="col-4 fw-normal">Mesin</dt>
                                <dd class="col-8 mb-0">: ${engineIsOn ? 'Hidup' : 'Mati'}</dd>
                                <dt class="col-4 fw-normal">Kecepatan</dt>
                                <dd class="col-8 mb-0">: ${gps.speed} Km/Jam</dd>
                            </dl>
                        </div>
                    </div>
                `).trim();
                return html;
            }

            function buildVehicleMarker(gps) {
                let engineIsOn = (parseInt(gps.engine) == 1);
                let content = buildVehicleContent(gps);
                let type = (gps.type == 'MOTORBIKE') ? 'motorbike' : 'police-car';
                let iconURL = `{{ asset('statics/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],
                        })
                    );
            }

            function buildVehicleCard(gps) {
                let engineIsOn = (parseInt(gps.engine) == 1);
                let type = (gps.type == 'MOTORBIKE') ? 'motorbike' : 'police-car';
                let iconURL = `{{ asset('statics/map-icons') }}/${type}-${(engineIsOn ? 'on.png' : 'off.png')}`;
                let card = `
                <div id="vehicle-${gps.imei}" class="card border-0 shadow mb-2">
                    <div class="card-body">${buildVehicleContent(gps)}</div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
                            <div class="d-inline-flex gap-1">
                                @hasanyrole('Root|Super Admin|Admin')
                                <a href="tel:${gps.phone}" class="btn btn-light shadow"><i class="fa-solid fa-volume-high"></i></a>
                                @endrole
                                @hasanyrole('Root|Super Admin')
                                <a href="sms:${gps.phone}?&body=RELAY%2C0%23" class="btn btn-light shadow"><i class="fa-solid fa-power-off text-success"></i></a>
                                <a href="sms:${gps.phone}?&body=RELAY%2C1%23" class="btn btn-light shadow"><i class="fa-solid fa-power-off text-danger"></i></a>
                                @endrole
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-light btn-center shadow w-auto" data-marker-id="${gps.imei}">
                                    <i class="fa-solid fa-arrows-to-circle"></i><small class="ms-1">Lihat Posisi Map</small>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                `;
                vehiclesContainer.append(card);
            }
            $.ajax({
                url: `{{ route('devices.index') }}`,
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                dataType: 'json',
                success(response) {
                    if (typeof response == 'object') {
                        response?.data.forEach((row) => {
                            let gps = {
                                imei: row.imei,
                                name: row.gps_name,
                                type: row.vehicle_type,
                                engine: row.last_engine,
                                movement: row.movement_status,
                                speed: row.last_speed,
                                lat: row.last_latitude,
                                lng: row.last_longitude,
                                phone: row.simcard_number,
                            };
                            buildVehicleCard(gps);
                            buildVehicleMarker(gps);
                        });
                        vehiclesContainer.trigger('load-content');
                    }
                    map.fitBounds(vehiclesGroupLayer.getBounds());
                }
            });
            $(`#vehicle-toggle`).on({
                change(e) {
                    if (e.currentTarget.checked) {
                        vehiclesGroupLayer.addTo(map)
                    } else {
                        vehiclesGroupLayer.removeFrom(map)
                    }
                }
            });
            /* End Setup Device*/

            /* Update GPS Device */
            const client = mqtt.connect('{{ config('foxlogger.mqtt_host') }}:{{ config('foxlogger.mqtt_port') }}', {
                clientId: 'mqtt_polresta_' + 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');
            });
            const topic = '{{ json_decode(session('foxlogger_user'))?->id }}';
            client.subscribe(topic);
            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,
                    phone: row.halo
                });
            });
            /* End Update GPS Device */
        });
    </script>
@endpush