@extends('layouts.admin')
@section('title','ODP')
@section('navtitle','Pelanggan ODP')
@section('content')
    <div class="card">
        <div class="card-body p-1">
            <div id="mapx"></div>
        </div>
    </div>
@endsection
@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/3.0.2/Control.FullScreen.min.css">
    <style>
        #mapx{ min-height:75vh; width:100%; }
        a[href="https://leafletjs.com"]{display:none !important;}
    </style>
@endpush
@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/3.0.2/Control.FullScreen.min.js"></script>
    <script>
        var map = L.map('mapx',{
            fullscreenControl: true,
            fullscreenControlOptions: {
                position: 'topleft'
            } 
        }).setView([ -8.2871930000, 113.5577370000], 15);
        var popup = L.popup();
        var pl = {!!json_encode($pl)!!};
        var odp = {!!json_encode($odp)!!};
        var ref = "{{$ref}}";
        var markers = [];
        var icons = {
            w : mapIcons('http://maps.google.com/mapfiles/kml/paddle/wht-blank-lv.png',{iconAnchor:[7,7]}),
            b : mapIcons('http://maps.google.com/mapfiles/kml/paddle/blu-blank-lv.png',{iconAnchor:[7,7]}),
            y : mapIcons('http://maps.google.com/mapfiles/kml/paddle/ylw-blank-lv.png',{iconAnchor:[7,7]}),
            f : mapIcons('http://maps.google.com/mapfiles/kml/pal2/icon13.png',{iconAnchor:[15,23]}),
            fs : mapIcons('http://maps.google.com/mapfiles/kml/pal2/icon5.png',{iconAnchor:[16,20]}),
        }
        function mapIcons(url,opt={}){
            if(opt){
                opt.iconUrl = url;
            }else{
                opt = {iconUrl:url};
            }
            return L.icon(opt);
        }
        L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            maxZoom: 20,
            minZoom: 10
        }).addTo(map);
        function createMarkerPl(){
            pl.forEach((x,i)=>{
                let icon = icons.w;
                if(x.odp){
                    icon = (x.odp==ref)?icons.b:icons.y;
                }
                let marker = new L.Marker([x.lat,x.long],{icon:icon}).on('click', ()=>markerClick(i)).addTo(map);
                markers.push(marker);
            });
        }
        function createMarkerODP(){
            odp.forEach((x,i)=>{
                let icon = (x.id==ref)?icons.fs:icons.f;
                let mo = new L.Marker([x.lat,x.long],{icon:icon}).on('click', ()=>markerODPClick(x)).addTo(map);
                if(x.id==ref){
                    setTimeout(() => {
                        map.setView([x.lat, x.long], 18);
                        mo.fire('click'); 
                    }, 500);
                }
            });
        }

        function markerODPClick(d){
            let konten = `
                    <div class="mb-2 fw-bold">ODP</div>
                    <div class="mb-2">${d.nama}</div>
                `;
            if(d.id!=ref){
                konten+=`
                    <a href="${d.link}" class="btn btn-primary btn-sm text-white w-100" title="Pilih ODP"><i class="bx bx-show"></i></a>
                `;
            }
            popup.setLatLng([d.lat,d.long]).setContent(konten).openOn(map);
        }
        function markerClick(i){
            let d = pl[i];
            console.log(i,d);
            let konten = `<div class="fw-bold mb-2">${d.id} ${d.nama}</div>`;
            if(d.odp==ref){
                konten+=`<button type="button" class="btn btn-sm btn-danger btn-remove-pl" onclick="removePl(${i})" title="unlink odp"><i class="bx bx-unlink"></i></button>`;
            }else{
                konten+=`<button type="button" class="btn btn-sm btn-success btn-add-pl" onclick="addPl(${i})" title="link to odp"><i class="bx bx-plus"></i></button>`;
            }
            popup.setLatLng([d.lat,d.long]).setContent(konten).openOn(map);
        }

        function addPl(i){
            let dpl = pl[i];
            let marker = markers[i];
            popup.setContent('loading...');
            setTimeout(() => { popup.openOn(map); }, 200);
            $.ajax({
                url: '{{route("odp.pelanggan.add")}}', type: 'POST', data:{odp:ref,pl:dpl.id}, dataType: 'JSON',
                complete: ()=>setTimeout(() => { marker.fire('click') }, 600),
                success:(r)=>{
                    if(r.success){
                        marker.setIcon(icons.b);
                        pl[i].odp = ref;
                    }else{
                        bsAlert.error('ERROR',`Data Pelanggan ${dpl.id} ${dpl.nama} GAGAL diperbarui`);
                    }
                }
            });
        }
        function removePl(i){
            let dpl = pl[i];
            let marker = markers[i];
            popup.setContent('loading...');
            setTimeout(() => { popup.openOn(map); }, 200);
            $.ajax({
                url: '{{route("odp.pelanggan.remove")}}', type: 'POST', data:{pl:dpl.id}, dataType: 'JSON',
                complete: ()=>setTimeout(() => { marker.fire('click') }, 600),
                success:(r)=>{
                    if(r.success){
                        marker.setIcon(icons.w);
                        pl[i].odp = '';
                    }else{
                        bsAlert.error('ERROR',`Data Pelanggan ${dpl.id} ${dpl.nama} GAGAL diperbarui`);
                    }
                }
            });
        }

        setTimeout(() => {
            createMarkerPl();
            createMarkerODP();
        }, 300);
    </script>
@endpush