@extends('layouts.admin')

@section('content')

    @include('admin._partials.breadcrumb')

    <div class="wrapper-content">
        
        @include('admin.includes.alerts')

        <div class="ibox">
            <div class="ibox-content">         

                <div class="float-right text-right mb10">                
                    <div class="mb10">
                        @if ($construction->status == 'A')
                            <span class="label label-primary">Ativa</span>
                        @else
                            <span class="label label-warning">Desativada</span>
                        @endif
                    </div>
                
                    <div>
                        <form action="{{ route('interferencias.obra.destroy', [$construction->id, $interference->id]) }}"
                            method="POST">
                            @csrf
                            @method('DELETE')
                            @can('interferencias-deletar')
                                <section class="progress-demo">
                                    <button type="submit" class="ladda-button btn btn-danger"><i class="far fa-trash-alt"></i>
                                        <i class="fa fa-trash-o"></i> Deletar
                                    </button>
                                </section>    
                            @endcan
                        </form>
                    </div>                
                </div>

                <br>
            
                <h2 class="font-bold no-margins">
                    Obra: {{ $construction->name }}
                </h2>
                <div class="m-t-sm">
                    <div class="row">
                        <div class="col-md-4 font-bold no-margins">
                            {{-- Responsavel: {{ $construction->created_by }} --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ibox">
            <div class="ibox-content">
                <div class="row">
                    <div class="col-sm-6 b-r">
                        <h3 class="mb30">Detalhes da obra</h3>
                        
                        <hr>

                        <div class="mb30">
                            <h4>
                                <strong>Interferência: </strong> {{ $interference->interferenceEvent->title }}
                            </h4>                        
                        </div>                        
                        
                        <div class="font-bold no-margins mb30">
                            <h4>
                                <strong> Status: </strong>

                                <span class="badge-status" style="background-color: {{ $interference->interferenceStatus->color }}">
                                    {{ $interference->interferenceStatus->title }}
                                </span>
                                
                                {{-- @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-danger">Error</span>
                                @endif --}}
                            </h4>
                        </div>                     
                        
                        <div class="mb30">
                            <h4>
                                <Strong>Tipo de interferência:</Strong>
                                @if ($interference->icon_map == 'baixo.png')                                
                                    <img src="{{ url("img/obras/icons/{$interference->icon_map}") }}" alt="{{ $interference->title }}"> 
                                    <span >Baixo Impacto</span>                
                                @elseif ($interference->icon_map == 'medio.png')
                                    <span>Medio Impacto</span>  
                                    <img src="{{ url("img/obras/icons/{$interference->icon_map}") }}" alt="{{ $interference->title }}">               
                                @elseif ($interference->icon_map == 'alto.png')
                                    <span>Alto Impacto</span>
                                    <img src="{{ url("img/obras/icons/{$interference->icon_map}") }}" alt="{{ $interference->title }}">                                             
                                @else
                                    <span class="label label-primary">ERROR</span>
                                @endif
                            </h4>
                        </div>

                        <hr>                                                       
                                      
                        <div class="mb30">
                            <h4>
                                <strong>Data de identificação: </strong>
                                @if ($interference->date_identification == null)
                                    <span>sem data</span>
                                @else                                    
                                    <span>{{ date('d/m/Y', strtotime($interference->date_identification)) }}</span>
                                @endif
                            </h4>
                        </div>

                        <div class="mb30">
                            <h4>
                                <strong>Data comunicação com cliente: </strong>    

                                @if ($interference->date_client == null)
                                    <span>sem data</span>
                                @else
                                    <span>{{ date('d/m/Y', strtotime($interference->date_client)) }} </span>                                    
                                @endif                              

                            </h4>
                        </div>                   
                  

                        <div class="mb30">
                            <h4>
                                <strong>Data da solução: </strong>
                                @if ($interference->date_solution == null)
                                    <span>sem data</span>
                                @else                                     
                                    <span>{{ date('d/m/Y', strtotime($interference->date_solution)) }}</span>                                   
                                @endif
                            </h4>
                        </div>

                        <div class="mb30">
                            <h4>
                                <strong>Dias decorridos: </strong>    

                                @if ($interference->interferenceStatus->id == 1 || $interference->interferenceStatus->id == 3)
                                    {{ $interference->interferenceStatus->title }}
                                @else
                                    </strong> <span class="text-danger">{{ $datePast }}</span> 
                                @endif                            

                            </h4>
                        </div>

                        <hr> 
           
                        <div class="mb30">
                            <h4>  
                              <strong>Descrição da interferência:</strong>   
                            </h4>
                            <textarea name="description" ols="30" rows="4" disabled=""
                                class="form-control">{{ $interference->description}}
                            </textarea>
                        </div>                          

                        <div class="mb30">
                            <h4>  
                              <strong>Descrição do status:</strong>   
                            </h4>
                            <textarea name="description" ols="30" rows="4" disabled=""
                                class="form-control">{{ $interference->description_status}}
                            </textarea>
                        </div> 
                    </div>
                  
                    <div class="col-sm-6">                               
                        <div id="map-in"></div>
                    </div>
                   
                </div>
            </div>
        </div>
         @can('interferencias-log-visualizar')
            <div class="ibox">
                <div class="ibox-content">
                    <h3 class="mb30">Log status</h3>
                    <hr>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover display" id="dataTables" style="width:100%">
                            <thead>
                                <tr>    
                                    <th>Status</th>
                                    <th>Descrição do status</th>
                                    {{-- <th>Status </th> --}}
                                    <th>Usuário</th>                                
                                    <th>Data</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($interferenceLogs as $interferenceLog)
                                <tr>  
                                    {{-- <td>
                                        @if ($interferenceLog->status == 'pendente')
                                            <span class="label label-warning">Pendente</span>
                                        @elseif ($interferenceLog->status == 'solucionado')
                                            <span class="label label-info">Solucionado</span>
                                        @else
                                            <span class="label label-primary">ERROR</span>
                                        @endif
                                    </td> --}}
                                    <td>               
                                        <span class="badge-status" style="background-color: {{ $interferenceLog->color}};" >
                                            {!! $interferenceLog->title !!}
                                        </span>       
                                    </td>
                                    <td>                
                                        {!! $interferenceLog->description !!}           
                                    </td>
                                    <td>                
                                        {!! $interferenceLog->action !!}: {{ $interferenceLog->created_by}}           
                                    </td>
                                    <td>                           
                                        @if ($interferenceLog->created_at == null)
                                            <span>sem data</span>
                                        @else
                                            {{ \Carbon\Carbon::parse($interferenceLog->created_at)->format('d/m/Y - H:i:s')}}
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>                                   
                        </table>
                </div>
                </div>
            </div>
        @endcan
    </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>
        let lat = {{ $interference->latitude }};
        let lng = {{ $interference->longitude }};
        let title = '{{ $interference->interferenceEvent->title }}';       
        let address = '{{ $interference->address }}';
        let iconImg = '{{ url("img/obras/icons/{$interference->icon_map}") }}';
        let interferenceId = '{{ $interference->id }}';
        let constructionId = '{{ $construction->id}}';
        let url = '{{ url("/") }}';
        let status = '{{ $interference->status }}';
        let iconMap = '{{ $interference->icon_map }}';  
        let localization = '{!!$construction->localization!!}';
        let localizationInter = '{!!$interference->localization!!}';
        let dateIdentification = '{{ $interference->date_identification }}'; 
        let dateClient = '{{ $interference->date_client }}'; 
        let dateSolution = '{{ $interference->date_solution }}';
        let inteferenciaStatusId = '{{ $interference->interferenceStatus->id }}'; 
        let interferenceStatusColor = '{{ $interference->interferenceStatus->color }}';    
        let interferenceStatusTitle = '{{ $interference->interferenceStatus->title }}'; 

        function initialize() {
            
            const end = {
                lat: lat,
                lng: lng
            };

            const map = new google.maps.Map(document.getElementById("map-in"), {
                zoom: 15,
                center: end,                  
                // mapTypeControl: true,
                // mapTypeControlOptions: {
                //     position: google.maps.ControlPosition.LEFT_TOP,
                // },
                styles: [{
                    "featureType": "poi",
                    "stylers": [{
                        "visibility": "off"
                    }]
                },{
                    "featureType": "transit.station.bus",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }]
            }); 


            // Mapa principal
            map.data.setStyle({
                strokeColor: "#00FFFF",
                strokeOpacity: 1.5,
                strokeWeight: 3,               
            });  

            // json mapa principal
            // loadPolygons(map);
            map.data.addGeoJson(JSON.parse(localization))
         
            const contentString =
            "<div id='content'>" +

                '<h5>' +
                    '<strong>Identificador: </strong>' + interferenceId  +
                '</h5>' +
              
                '<h3>' +
                    '<strong>Interferência: </strong>' + title  +
                '</h3>' +

                '<hr>' + 

                '<h4>' +
                    '<strong>Status: </strong>' + interferenceStatusTitle +
                '</h4>' +

                '<h4>' +
                    '<strong>Impacto: </strong>' + 
                    iconMap.split('.').slice(0, -1).join('.') +
                    '&nbsp;' +
                    '<img src="' + iconImg + '">' +
                '</h4>' +
            
                '<hr>' + 

                "@can('interferencias-editar')" +
                    '<div lass="form-group">' +
                        '<a class="btn btn-outline btn-success  dim" href="' + url + '/admin/servicos/obras/' + constructionId +'/interferencias/'+ interferenceId +'/editar"><i class="fa fa-edit"></i>Editar</a>' +
                    '</div>' +
                "@endcan" +          

            "</div>";

            const infowindow = new google.maps.InfoWindow({
                content: contentString,
            });

            // 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 (inteferenciaStatusId == "1") {
                iconStatus = '{{ url("img/obras/icons/solucionado.png") }}';
                strokeColorStatus = interferenceStatusColor;                        
                fillColorStatus = interferenceStatusColor; 

            }else if(inteferenciaStatusId == "2"){
                iconStatus = iconImg;
                strokeColorStatus = interferenceStatusColor;                        
                strokeColorStatus = interferenceStatusColor; 

            }else if(inteferenciaStatusId == "3"){
                iconStatus = '{{ url("img/obras/icons/solucionado-ressalva.png") }}';
                strokeColorStatus = interferenceStatusColor;                        
                fillColorStatus = interferenceStatusColor; 

            } else {
                iconStatus = iconImg;
                strokeColorStatus = '#ff0000';                        
                fillColorStatus = '#ff0000'; 
            };  
            

           
            // // validar o status para colorir o mapa
            // if (status == "solucionado") {
            //     iconStatus = '{{ url("img/obras/icons/solucionado.png") }}';
            //     strokeColorStatus = '#006400';                        
            //     fillColorStatus = '#006400'; 
            // } else {
            //     iconStatus = iconImg;
            //     strokeColorStatus = '#ff0000';                        
            //     fillColorStatus = '#ff0000'; 
            // };                         


            // marcador da inteferncia 
            marker = new google.maps.Marker({
                position: end,
                map,
                title: "(Ayers Rock)",
                icon: iconStatus
            });  

            // click mapa
            marker.addListener("click", () => {
                infowindow.open(map, marker);
            });

            // marca o desenho da interferencia
            let inter = new google.maps.Data({
                map: map,
                style: {
                    strokeColor: strokeColorStatus,
                    fillColor: fillColorStatus,
                    strokeOpacity:.8,
                    strokeWeight: 5,                    
                    fillOpacity:.1,
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 0
                    },
                }
            });          
            inter.addGeoJson(JSON.parse(localizationInter)); 

        }
    </script>
@endpush