@extends('layouts.master-all')
@push('styles')

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />

<style>
    .activecustom {
        background-color: #B2252E !important;
    }

    .ex3 {
        height: 800px;
        width: auto;
        overflow-y: auto;
    }

    #mapid {
        height: 880px;
    }
    .leaflet-popup-content-wrapper .leaflet-popup-content {
        width: 100px;
}
</style>
@endpush
@section('content')


    <div class="pcoded-main-container">

        <div class="pcoded-wrapper">
            
            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <div class="main-body">
                        <div class="page-wrapper">

                            <div class="page-body">
                                <div class="row">
                                    <div class="col-12">

                                        <div class="card text-center">
                                            <div class="card-header">

                                                <h4 id="timess"></h4>
                                            </div>
                                        </div>
                                    </div>
                                    @foreach($data as $row)
                                    <div class="col-3">

                                        <div class="card text-center">
                                            <div class="card-header">

                                               <img src="{{$row->address}}" width="100%" alt="">
                                            </div>
                                            <h2>{{$row->name}}</h2>
                                        </div>
                                    </div>
                                    @endforeach
                                    <!-- card1 end -->
                                    <!-- Statestics Start -->
                                
                                



                                </div>
                            </div>
                        </div>
                            <!-- Modal HTML -->
                            <div id="myModal" class="modal fade">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            </div>
                                            <div class="modal-body">       
                                                <img width="100%" src="{{asset('assetnew-cctv/banner-welcom-cctv.png')}}" alt="">             
                                            
                                            </div>
                                        </div>
                                    </div>
                                </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="modal  fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content ">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">CCTV KAB BANYUASIN</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <img width="100%" src="" alt="">
                                            </div>
                                      
                                        </div>
                                    </div>
                                </div>
@endsection
@push('scripts')
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
   
    var map = L.map('mapid').setView([{{ config('leaflet.map_center_latitude') }}, {{ config('leaflet.map_center_longitude') }}], {{ config('leaflet.zoom_level') }});

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var markers = L.markerClusterGroup();
    var greenIcon = L.icon({
        iconUrl: '{{asset('asset-cctv/CCTV_RED.png')}}',
        iconSize: [70, 70],
    });

    axios.get('{{ route('api.map.index') }}')
    .then(function (response) {
        var marker = L.geoJSON(response.data, {
            pointToLayer: function(geoJsonPoint, latlng) {
                return L.marker(latlng,{icon:greenIcon}).bindPopup(function (layer) {
                    console.log('s');
                    console.log(layer);
                    return layer.feature.properties.map_popup_content;
                });
            }
        });
        markers.addLayer(marker);
    })
    .catch(function (error) {
        console.log(error);
    });
    map.addLayer(markers);
    function theFunction(element,lat,long,name,address) {
        event.preventDefault();
       
        map.setView([lat, long], 18);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
        var markerd = L.marker([lat, long], {
            elevation: 260.0,
            icon:greenIcon,
            title: name
        }).addTo(map);
        console.log('tes');
        console.log(address);
        markerd.bindPopup('<div class="my-2"><strong>'+name+'</strong><br><div class="my-2"><img class="img-map-cctv" src="'+address+'"width="100%" ></div><br><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="' + address + '">Lihat</button>').openPopup()
    }
    $('#exampleModal').on('show.bs.modal', function(event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-body img').attr('src', recipient)
    })
</script>
<script>
    $('#searchform').on('keyup', function() {
        search();
    });
    search();

    function search() {
        var keyword = $('#searchform').val();
        $.post('{{ route("home.search") }}', {
                _token: $('meta[name="csrf-token"]').attr('content'),
                keyword: keyword
            },
            function(data) {
                table_post_row(data);

            });
    }
    // table row with ajax
    function table_post_row(res) {
        let htmlView = '';
        if (res.employees.length <= 0) {
            htmlView += `
                 <li class="active">
                    <a >
                        <span class="pcoded-mtext" data-i18n="nav.dash.main">Data tidak ditemukan</span>
                    </a>
                </li>`;
        }
        for (let i = 0; i < res.employees.length; i++) {
            
        if(res.employees[i].status == '1'){
            htmlView += `
                    <li class="">
                    <a class="kinda-link" onclick="return theFunction('` + res.employees[i].address + `',`+res.employees[i].latitude+`,`+res.employees[i].longitude+`,'`+res.employees[i].name+`','`+res.employees[i].address+`');" >
                    <span class="pcoded-micon"><i class="ti-control-play"></i><b>D</b></span>
                    <span class="pcoded-mtext" data-i18n="nav.dash.main">` + res.employees[i].name + `</span>
                    <span class="pcoded-mcaret"></span>
                    </a>
                    </li>
                    `;
        }else{
            htmlView += `
                    <li class="">
                    <a class="kinda-link" onclick="return theFunction('` + res.employees[i].address + `',`+res.employees[i].latitude+`,`+res.employees[i].longitude+`,'`+res.employees[i].name+`','`+res.employees[i].address+`');" >
                    <span class="pcoded-micon"><i class="ti-control-play"></i><b>D</b></span>
                    <span class="pcoded-mtext" data-i18n="nav.dash.main">` + res.employees[i].name + `</span>
                   
                    </a>
                    </li>
                    `;
        }
            // if (res.employees[i].name == 'PEMKAB II') {
            //     console.log("error");
            // } else {
            //     htmlView += `
            //         <li class="">
            //         <a class="kinda-link" onclick="return theFunction('` + res.employees[i].address + `',`+res.employees[i].latitude+`,`+res.employees[i].longitude+`,'`+res.employees[i].name+`','`+res.employees[i].address+`');" >
            //         <span class="pcoded-micon"><i class="ti-control-play"></i><b>D</b></span>
            //         <span class="pcoded-mtext" data-i18n="nav.dash.main">` + res.employees[i].name + `</span>
            //         <span class="pcoded-mcaret"></span>
            //         </a>
            //         </li>
            //         `;
            // }



        }
        $('#searchdiv').html(htmlView);
    }

    
</script>
<script>
    // mark as complete
    $(document).on('click', '#searchdiv li ', function() {
        $(this).toggleClass('active activecustom').siblings().removeClass('active activecustom');
    });
</script>
<script>
// $(document).ready(function(){

//     $(window).on('load', function() {
//         $('#myModal').modal('show');
//     });
//     $('#exampleModal').on('hide.bs.modal', function(event) {
//         var modal = $(this)
//         modal.find('.modal-body img').attr('src', '')
//     })
    // $('#exampleModal').on('show.bs.modal', function(event) {
    //     var button = $(event.relatedTarget) // Button that triggered the modal
    //     var recipient = button.data('whatever') // Extract info from data-* attributes
    //     // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    //     // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    //     var modal = $(this)
    //     modal.find('.modal-body img').attr('src', recipient)
    // })
// });
</script>
@endpush