@extends('layouts.master')

@section('title', __('outlet.create'))

@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>
    #mapid {
        height: 580px;
    }
</style>
@endpush
@section('content')
<!-- Header -->
<!-- Services -->
<div id="services" class="cards-1 bg-white">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <style>
                    .card {
                        background-color: #ffffff;
                        box-shadow: 15px 20px 33px -5px #75757556;
                    }

                    .card .card-header {
                        background-color: white;
                    }
                </style>
                @foreach($data as $row => $value)

                <div class="card">
                    <div class="card-header">
                        <h2>

                            {{$value['nama']}}
                            @if($value['nama'] == "PEMKAB 2")
                            <button class="btn btn-danger" disabled>Error</button>
                            @else 

                            <button id="btn{{$loop->iteration}}" class="btn btn-primary" onclick="event.preventDefault();
                        if(document.getElementById('cctv{{$loop->iteration}}').getAttribute('src')){
                            document.getElementById('cctv{{$loop->iteration}}').removeAttribute('src');
                            document.getElementById('btn{{$loop->iteration}}').setAttribute('class', 'btn btn-primary');
                            document.getElementById('btn{{$loop->iteration}}').textContent='Lihat';
                        }else{
                            document.getElementById('btn{{$loop->iteration}}').textContent='Selesai';
                            document.getElementById('btn{{$loop->iteration}}').setAttribute('class', 'btn btn-danger');
                            document.getElementById('cctv{{$loop->iteration}}').setAttribute('src', '{{$value['url']}}');
                        }">
                            Lihat</button>
                            @endif

                        </h2>
                    </div>

                        <img id="cctv{{$loop->iteration}}" class="card-img-top" >
                    <div class="card-body">
                        <div class="modal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Modal title</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Modal body text goes here.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                <div id="mapid"></div>

            </div> <!-- end of col -->
        </div> <!-- end of row -->
    </div> <!-- end of container -->
</div> <!-- end of cards-1 -->
<!-- end of services -->
@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) {
                    return layer.feature.properties.map_popup_content;
                });
            }
        });
        markers.addLayer(marker);
    })
    .catch(function (error) {
        console.log(error);
    });
    map.addLayer(markers);

   
</script>
@endpush
@endsection