@extends('layouts.admin')

@section('content')

@include('admin._partials.breadcrumb')

<div class="wrapper-content">   

    <form action="{{ route('interferencias.obra.store', $construction->id) }}" class="form" method="POST">
        @csrf
        @include('admin.servicos.obras.interferencias._partials.form')
    </form>
  
    <div class="ibox-content mb10">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" id="dataTables" class="display"
                style="width:100%">
                <thead>
                    <tr>
                        <th>Identificador</th>
                        <th>Interferência</th>
                        <th>Tipo de Interferência</th>
                        <th>Status</th>
                        <th>Data de identificação</th>
                        <th>Data comunicação com cliente</th>
                        <th>Data da solução</th>
                        <th>Dias decorridos</th>                                
                        <th>Opções</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($interferenceList as $interference)
                    <tr>
                        <td>
                            {{ $interference->id }}
                        </td>
                        <td>     
                            <a  href="javascript:void(0);" onclick="searchInter( {{$interference->latitude}}, {{$interference->longitude}});" >
                                {{ $interference->interferenceEvent->title }}
                            </a>                           
                        </td>                          
                        <td>
                            @if ($interference->icon_map == 'baixo.png')                              
                                <img src="{{ url("img/obras/icons/{$interference->icon_map}") }}" alt="{{ $interference->title }}">
                                <span class="">Baixo Impacto</span>
                            @elseif ($interference->icon_map == 'medio.png')                                    
                                <img src="{{ url("img/obras/icons/{$interference->icon_map}") }}" alt="{{ $interference->title }}">
                                <span class="">Medio Impacto</span>
                            @elseif ($interference->icon_map == 'alto.png')                                    
                                <img src="{{ url("img/obras/icons/{$interference->icon_map}") }}" alt="{{ $interference->title }}"> 
                                <span class="">Alto Impacto</span>                                   
                            @else
                                <span class="label label-primary">ERROR</span>
                            @endif
                        </td>

                        <td>                         
                            <span class="badge-status" style="background-color: {{ $interference->interferenceStatus->color }};">
                                {{ $interference->interferenceStatus->title }}
                            </span>
                        </td>
                        {{-- <td>                          --}}
                            {{-- @if ($interference->status == 'pendente')
                                <span class="label label-warning">Pendente</span>
                            @elseif ($interference->status == 'solucionado')
                                <span class="label label-info">Solucionado</span>
                            @else
                                <span class="label label-primary">ERROR</span>
                            @endif --}}

                            {{-- @if ($interference->status == 'pendente')
                                <span class="label label-warning">Pendente</span>
                            @elseif ($interference->status == 'solucionado')
                                <span class="label label-info">Solucionado</span>
                            @elseif ($interference->status == 'solucionado com resalva')
                                <span class="label label-primary">Solucionado com resalva</span>
                            @else
                                <span class="label label-primary">ERROR</span>
                            @endif --}}
                        {{-- </td> --}}
                        <td>                
                            @if ($interference->date_identification == null)
                                <span>sem data</span>
                            @else
                                {{ date('d/m/Y', strtotime($interference->date_identification)) }}  
                            @endif
                        </td>
                        <td>                           
                            @if ($interference->date_client == null)
                                <span>sem data</span>
                            @else
                                {{ date('d/m/Y', strtotime($interference->date_client)) }}                                 
                            @endif               
                        </td>
                        <td>                                              
                            @if ($interference->date_solution == null)
                                <span>sem data</span>
                            @else
                                {{ date('d/m/Y', strtotime($interference->date_solution)) }}    
                            @endif
                        </td> 

                        <td>

                            @if ($interference->interferenceStatus->id == 1 || $interference->interferenceStatus->id == 3)
                                {{ $interference->interferenceStatus->title }}
                            @else
                                <strong class="text-danger">
                                    @php
                                        $dateIdentification = new DateTime($interference->date_client);
                                        $dateCurrent = new DateTime('now');
                                        $datePast = $dateIdentification->diff($dateCurrent);
                                        // echo $datePast->format('%R%a Dias decorridos:');
                                        echo $datePast->format('Dias decorridos: %a');                                        
                                    @endphp
                                <strong>
                            @endif

                        </td>    
                        
                        
                        <td class="width=20px;">

                            @can('interferencias-editar')
                                <a href="{{ route('interferencias.obra.edit', [$construction->id, $interference->id]) }}"
                                    class="btn btn-info">Editar
                                </a>
                            @endcan
                           
                            @can('interferencias-detalhes')
                                <a href="{{ route('interferencias.obra.show', [$construction->id, $interference->id]) }}"
                                    class="btn btn-warning">Detalhes
                                </a>
                            @endcan
                        </td>                       
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th>Identificador</th>
                        <th>Interferência</th>
                        <th>Tipo de interferencia</th>
                        <th>Status</th>
                        <th>Data de identificação</th> 
                        <th>Data comunicação com cliente</th>
                        <th>Data da solução</th>
                        <th>Dias decorridos</th>                         
                        <th>Opções</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
@endsection


@push('scripts-maps')
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initialize&libraries=drawing,places,geometry&v=weekly&language=pt-BR&region=BR"
        async defer>    
    </script>
@endpush

@push('scripts')
    <script>
        var localization = '{!!$construction->localization!!}';    
       
        function initialize() {  
 
            // carrega geometricamete o geojson
            let latLng =  JSON.parse(localization);
  
            // divide por 2 a quantidade de coodinates 
            let LatLngDiv = ((latLng.features[0].geometry.coordinates.length / 2)|0);
            
            // console.log(calcLatLng);

            // variavel com as coodintes em lat e lng 
            let LatDiv  =  latLng.features[0].geometry.coordinates[LatLngDiv][1]
            let LngDiv  =  latLng.features[0].geometry.coordinates[LatLngDiv][0]
                
            
            map = new google.maps.Map(document.getElementById("map-in"), {
                zoom: 14,
                center: new google.maps.LatLng(
                    LatDiv, 
                    LngDiv 
                ),
                mapTypeControl: true,
                    animation: google.maps.Animation.DROP,
                    mapTypeControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_TOP,
                },
                styles: [{
                    "featureType": "poi",
                    "stylers": [{
                        "visibility": "off"
                    }]
                },{
                    "featureType": "transit.station.bus",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }]
            });                 

            // mapa da obra
            let mapConst = new google.maps.Data({
                map: map,
                style: {
                    strokeColor: "#00FFFF",
                    strokeOpacity: 1.5,
                    strokeWeight: 3,
                }
            });   
            mapConst.addGeoJson(JSON.parse(localization)); 

            // constante para carregar o marcador
            const bounds = new google.maps.LatLngBounds(); 

             // Multiple Markers informacoes para marcador
             var markers = [
                @foreach($interferenceList as $interferenceList)
                    [
                        {{ $interferenceList->latitude  }}, //0
                        {{ $interferenceList->longitude }}, //1
                        '{{ url("img/obras/icons/{$interferenceList->icon_map}") }}', //2
                        '{{ $interferenceList->interferenceEvent->title }}', //3
                        '{{ $interferenceList->address }}', //4
                        '{{ $construction->id}}', //5
                        '{{ $interferenceList->id}}', //6
                        '{{ url("/") }}', //7
                        // '{{ $interferenceList->status }}', //8
                        '{{ $interferenceList->interferenceStatus->title }}', //8
                        '{{ $interferenceList->icon_map}}', //9                        
                        '{!! $interferenceList->localization  !!}', //10
                        '{{ $interferenceList->color}}', //11
                        '{{ $interferenceList->date_identification}}', //12
                        '{{ $interferenceList->date_client}}', //13
                        '{{ $interferenceList->date_solution}}', //14
                        '{{ $interferenceList->id}}', //15
                        '{{ $interferenceList->interference_status_id }}', //16
                        '{{ $interferenceList->interferenceStatus->color }}', //17
                    ],
                @endforeach
            ];
            
            /* 
            / Percorra a matriz de marcadores e coloque cada um no mapa  
            / marcador unico
            */
            for( i = 0; i < markers.length; i++ ) {
                
                var position = new google.maps.LatLng(markers[i][0], markers[i][1]);   

                // variavel para if status 
                let iconStatus; //variavel icon
                let strokeColorStatus; //variavel color linha
                let fillColorStatus; // variavel color linha

                // validar o status para colorir o mapa 


                // if (markers[i][16] == "1") {
                //     iconStatus = '{{ url("img/obras/icons/solucionado.png") }}';
                //     strokeColorStatus = 'green';                        
                //     fillColorStatus = 'green'; 
                // } else {
                //     iconStatus = markers[i][2];
                //     strokeColorStatus = 'red';                        
                //     fillColorStatus = 'red'; 
                // };           



                // status solucionado 
                if (markers[i][16] == "1") {
                    iconStatus = '{{ url("img/obras/icons/solucionado.png") }}';
                    strokeColorStatus = markers[i][17];                        
                    fillColorStatus = markers[i][17]; 

                } else if (markers[i][16] == "2") {
                    iconStatus = markers[i][2];
                    strokeColorStatus = markers[i][17];                        
                    fillColorStatus = markers[i][17]; 

                } else if (markers[i][16] == "3") {
                    iconStatus = '{{ url("img/obras/icons/solucionado-ressalva.png") }}';
                    strokeColorStatus = markers[i][17];                        
                    fillColorStatus = markers[i][17]; 

                } else {
                    iconStatus = markers[i][2];
                    strokeColorStatus = 'red';                        
                    fillColorStatus = 'red'; 
                };

                // if (markers[i][16] == "1") {
                //     iconStatus = '{{ url("img/obras/icons/solucionado.png") }}';
                //     strokeColorStatus = '#006400';                        
                //     fillColorStatus = '#006400'; 
                // } else {
                //     iconStatus = markers[i][2];
                //     strokeColorStatus = '#ff0000';                        
                //     fillColorStatus = '#ff0000'; 
                // }; 

                // marcador da inteferencias
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    icon: iconStatus,
                    animation: google.maps.Animation.DROP
                    // title: markers[i][3]
                });
                              

                // Conteudo para InfoWindow
                const contentString =
                "<div id='content'>" +                   
                    '<h5>' +
                        '<span>Identificador: </span>' + markers[i][15] +
                    '</h5>' +

                    '<h3>' +
                        '<span>Interferência: </span>' + markers[i][3] +
                    '</h3>' +

                    '<hr>' +  

                    '<h4>' +
                        '<span>Status: </span>' + markers[i][8] +
                    '</h4>' +

                    '<h4>' +
                        '<span>Impacto: </span>' + 
                        markers[i][9].split('.').slice(0, -1).join('.') + 
                        '&nbsp;' +
                        '<img src="' + markers[i][2] + '">' +              
                    '</h4>' + 
                 
                    '<h4>' +
                        '<span>Data de identificação: </span>' + markers[i][12].split("-").reduce(function(p, c){ return c + "/" +p }) + 
                    '</h4>' +

                    '<h4>' +
                        '<span>Data comunicação com cliente: </span>' + markers[i][13].split("-").reduce(function(p, c){ return c + "/" +p }) +
                    '</h4>' +

                    '<h4>' +
                        '<span>Data da solução: </span>' + markers[i][14].split("-").reduce(function(p, c){ return c + "/" +p }) +
                    '</h4>' +

                    '<hr>' +  
                    // '<button  type="button"><i class="fa fa-info-circle"></i></button>' +     
                                
                    '<div class="form-group">' +
                        "@can('interferencias-editar')" +
                            '<a class="btn btn-outline btn-success  dim" href="' + markers[i][7] + '/admin/servicos/obras/' + markers[i][5] +'/interferencias/'+ markers[i][6] +'/editar"><i class="fa fa-edit"></i> Editar</a>' +
                        "@endcan" +    
                        '&nbsp;' +
                        "@can('interferencias-detalhes')" +
                            '<a class="btn btn-outline btn-primary dim" href="' + markers[i][7] + '/admin/servicos/obras/' + markers[i][5] +'/interferencias/'+ markers[i][6] +'"><i class="fa fa-info-circle"></i> Detalhes</a>' +
                        "@endcan" +  
                        // '<a href="http://gestao.tecpav.com.br/admin/servicos/obras/'+ markers[i][5] +'/interferencias/'+ markers[i][6] +'">Detalhes</a>' +
                    '</div>' +
                "</div>";

                var infoWindow = new google.maps.InfoWindow(), marker, i;

                // Permitir que cada marcador tenha uma janela de informações
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        // infoWindow.setContent(markers[i][3]);
                        infoWindow.setContent(contentString);
                        infoWindow.open(map, marker);
                    }
                })(marker, i));   
                
                
                // linhas da inteferencia
                let inter = new google.maps.Data({
                    map: map,
                    style: {
                        strokeColor: strokeColorStatus,                        
                        fillColor: fillColorStatus,
                        strokeWeight: 5,
                        icon: {
                            path: google.maps.SymbolPath.CIRCLE,
                            scale: 0
                        },
                        // strokeOpacity: 8,
                        // fillOpacity: 3,
                    }
                }); 
                inter.addGeoJson(JSON.parse(markers[i][10]));   
            
                // var infowindowInter = new google.maps.InfoWindow();
                
                // inter.addListener('click', function(event) {
                //     let id = event.feature.getProperty('ID');
                //     let name = event.feature.getProperty('HORZ_ORG');
                //     if (typeof id == "undefined") id = event.feature.getProperty('letter');
                //     if (typeof name == "undefined") name = event.feature.getProperty('color');
                //     let html = id + " " + name;
                //     infowindowInter.setContent(contentString); // show the html variable in the infowindow
                //     infowindowInter.setPosition(event.latLng);
                //     infowindowInter.setOptions({
                //     pixelOffset: new google.maps.Size(0, 0)
                //     }); // move the infowindow up slightly to the top of the marker icon
                //     infowindowInter.open(map);
                // });  

            };         


            let markerSearch = new google.maps.Marker({
                position: {
                    lat: LatDiv,
                    lng: LngDiv
                },
                map: map,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 0
                },                
                // draggable: true
            });

            const searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));

            map.controls[google.maps.ControlPosition.TOP_CENTER].push(
                document.getElementById("searchmap")
            );

            google.maps.event.addListener(searchBox, 'places_changed', function() {

                let places = searchBox.getPlaces();
                // console.log(places);
                let bounds = new google.maps.LatLngBounds();
                // console.log(bounds);
                let i, place;
                // console.log(markerSearch)

                for (i = 0; place = places[i]; i++) {
                    bounds.extend(place.geometry.location);
                    markerSearch.setPosition(place.geometry.location);                
                }

                map.fitBounds(bounds);
                map.setZoom(20);
            });
            
            // google.maps.event.addListener(marker, 'position_changed', function() {

            //     let lat = marker.getPosition().lat();
            //     let lng = marker.getPosition().lng();

            //     // $('#latitude_a').val(lat);
            //     // $('#longitude_a').val(lng);
            // }); 

            // map.data.setControls(['Polygon']);

            @can('interferencias-adicionar')
                map.data.setControls(['Point', 'LineString', 'Polygon']);
                map.data.setStyle({
                    editable: true,
                    draggable: true,
                    fillColor: "#000000",
                    fillOpacity: 7,
                    strokeWeight: 5,
                }); 
            @endcan

            bindDataLayerListeners(map.data);   
        
            load(map);
            save(map);
            clean(map);           
        }   
            

        function clean(map) {
            localStorage.removeItem('geoCreateObra');
            localStorage.removeItem('geoEditObra'); 
            localStorage.removeItem('geoCreateInter');
            localStorage.removeItem('geoEditInter');              
            load(map);           
        };
  
    
        // Apply listeners to refresh the GeoJson display on a given data layer.
        function bindDataLayerListeners(dataLayer) {
            dataLayer.addListener('addfeature', saveData);
            dataLayer.addListener('removefeature', saveData);
            dataLayer.addListener('setgeometry', saveData);
        }

        function load(map) {
            var data = JSON.parse(localStorage.getItem('geoCreateInter'));
            // console.log(map);

            map.data.forEach(function (f) {
                map.data.remove(f);
            });
            map.data.addGeoJson(data)
        }

        function saveData() {
            map.data.toGeoJson(function (json) {
                // localStorage.setItem('geoCreateInter', JSON.stringify(json));
                initControls(json);
            });
        }

        function save() {
            google.maps.event.addDomListener(
                document.getElementById("save"), "click", function () { 
                    map.data.toGeoJson(function (json) {
                        // localStorage.setItem('geoCreateInter', JSON.stringify(json));
                        
                        let local = JSON.stringify(json); 
                        let latLng = JSON.parse(local);                     

                        // $('#localization').val(local);  


                        if( local == '{"type":"FeatureCollection","features":[]}'){
                            // alert('Você tem que demarcar uma area no mapa')
                            console.log('error');
                        }else{
                            $('#localization').val(local); 
                        }   

                        // console.log(latLng.features[0].geometry.coordinates);

                        if(latLng.features[0].geometry.type == 'Point'){   
                            $('#latitude').val(latLng.features[0].geometry.coordinates[1]);
                            $('#longitude').val(latLng.features[0].geometry.coordinates[0])
                            // alert(latLng.features[0].geometry.type);
                            // console.log(latLng.features[0].geometry.coordinates[1]);
                            // console.log(latLng.features[0].geometry.coordinates[0]);
                        }else if(latLng.features[0].geometry.type == 'LineString'){                            
                            $('#latitude').val(latLng.features[0].geometry.coordinates[0][1]);
                            $('#longitude').val(latLng.features[0].geometry.coordinates[0][0])
                            // alert(latLng.features[0].geometry.type);
                            // console.log(latLng.features[0].geometry.coordinates[0][1]);
                            // console.log(latLng.features[0].geometry.coordinates[0][0]);
                        }else if(latLng.features[0].geometry.type == 'Polygon'){
                            $('#latitude').val(latLng.features[0].geometry.coordinates[0][0][1]);
                            $('#longitude').val(latLng.features[0].geometry.coordinates[0][0][0])
                            // alert(latLng.features[0].geometry.type);
                            // console.log(latLng.features[0].geometry.coordinates[0][0][1]);
                            // console.log(latLng.features[0].geometry.coordinates[0][0][0]);
                        }else{
                            alert('error');
                        }
                      
                        // console.log(latLng.features[0].geometry.type);

                        // limpar localStorage 
                        localStorage.setItem('geoCreateInter', JSON.stringify(json));
                        localStorage.removeItem('geoCreateInter');
                    });              
                    // var data = JSON.parse(localStorage.getItem('geoCreateInter'));
                    // console.log(data);                    
                    // $('#localization').val(data);
                }
            );
        }


        function initControls(data)
        {
            var sel = document.getElementById('polyList');
            sel.options.length = 0;

            for (var i = 0; i < data.features.length; i++) {
                var opt = document.createElement('option');
                opt.value = i;
                opt.innerHTML = opt.value;
                // opt.innerHTML = data.features[i].geometry.type;
                // opt.value = i;
                sel.appendChild(opt);
            }

            document.getElementById("btnDelete").disabled = (data.features.length === 0); 
            document.getElementById("btnDelete").onclick = function(){
                var selIdx = sel.options[sel.selectedIndex].value; //get poly index 
                data.features.splice(parseInt(selIdx), 1);   

                //reload 
                // window.location=document.URL
                localStorage.setItem('geoCreateInter', JSON.stringify(data));
                initControls(data);  
                load(map);   
            };
        } 


        // pesquisar Interferencia pela tabela
        function searchInter(lat, lng) {

            const position = { lat: lat, lng: lng };   

            const marker = new google.maps.Marker({
                position: position,
                map,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 0
                },                          
            });

            var bounds = new google.maps.LatLngBounds();

            bounds.extend(position); 

            map.fitBounds(bounds);
            map.setZoom(20);
            
        }  

    </script>
@endpush