@extends('layouts.app',[
'class' => '',
'folderActive' => '',
'elementActive' => 'maps-rdv'
])

@section('head_supplement')
    <style>
        .hide_rdv {
            background: #3f6ad8;
            color: white;
        }

        .hide_rdv button h5 {

            color: white !important;
        }

        .card-body li {
            list-style: none;
            margin-bottom: 15px;
            border-bottom: 1px solid #ccc;
            padding: 8px;
            padding-bottom: 15px;
            cursor: pointer;
        }

        .card-body li:hover {
            background: #ccc;
            color: black;
        }

        h5.m-0.p-0 {
            color: black;
        }

        .btn-light {
            color: black !important;
        }

        .append_account {
            background: transparent;
            border-radius: 100%;
            /* min-width: 9%; */
            /* max-width: 9%; */
            color: white;
            padding: 1%;
            margin-left: 1%;
            display: inline-block;
            text-align: center;
        }

        .desactivate {

            border: 1px solid black !important;
            animation: OK 1s infinite;
        }

        @keyframes OK {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }

            100% {
                opacity: 1;
            }
        }

        .labels {
            color: white;
            background-color: red;
            font-family: "Lucida Grande", "Arial", sans-serif;
            font-size: 10px;
            text-align: center;
            width: 10px;
            white-space: nowrap;
        }

        .modif_rdv input,
        .modif_rdv select {
            max-width: 80%;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
@endsection

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="fas fa-calendar-alt icon-gradient bg-arielle-smile"> </i>
                </div>
                <div>
                    RDV
                    <div class="page-title-subheading">
                        Liste des rdv à placer
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">


            <input type="checkbox" class="filter" id="demandes_filter" value="1">
            <label for="demandes_filter" class="mr-sm-2">Voir les demandes</label>

        </div>


        <div class="form-group">


            <input type="checkbox" class="filter" id="rdv_filter" value="1">
            <label for="rdv_filter" class="mr-sm-2">Voir les RDV à placer</label>

        </div>


    </div>


    <div class="form-inline row">
        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="" class="mr-sm-2">Filtrer par type d'inspection</label>

            <select id="type_inspection" class="form-control filter select2" multiple>
                <option value="">Choisir un type d'inspection</option>
                @foreach (config('types.type_rapport') as $key => $type)
                    <option value="{{ $key }}">{{ $type }}</option>
                @endforeach
            </select>
        </div>

        <div class="filters mb-2 mb-sm-0 col-12 col-md-3">

            <label for="inspecteur_filter" class="mr-sm-2">Inspecteur</label>

            <select class="form-control select_filter select2 filter" id="inspecteur_filter" data-column="4"
                multiple="multiple">
                <option value="">Filtrer par inspecteur</option>
                <option value="-1">Voir tous les inspecteurs</option>
                @foreach ($users as $user)
                    <option value="{{ $user->user_id }}">{{ $user->user_firstname }} {{ $user->user_lastname }}
                    </option>
                @endforeach
            </select>

        </div>

        <div class="filters mb-2 mb-sm-0 col-12 col-md-3">

            <label for="inspecteur_filter" class="mr-sm-2">Dates</label>

            <select class="form-control select_filter select2 filter" id="dates" data-column="4" multiple="multiple">

                @for ($i = 0; $i < 8; $i++)
                    <option value="{{ date('d/m/Y', strtotime('+ ' . $i . ' days')) }}">J+{{ $i }}
                        {{ date('d/m/Y', strtotime('+ ' . $i . ' days')) }}</option>
                @endfor



            </select>

        </div>

    </div>

    <div class="row mt-2">


        <div class="col-md-12 col-xl-12">
            <div class="col-md-12">
                <div id="map_rdv" style="min-height:700px;height:700px;max-width: 100%;min-width: 100%;"></div>
            </div>
        </div>


    </div>


    <script type="text/javascript" src="{{ asset('js/datatables.js') }}"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap&libraries=&v=weekly"
        defer></script>

    <script>
        let markers = [];
        let label;
        let values = '';
        document.addEventListener('DOMContentLoaded', function() {
            callMarker();
            initialize_map(markers);
            initMap();


            $('.filter').change(function(e) {

                callAll();

            });

            // $(document).on('change', '.filter', function(){
            //    callAll();
            // });



            // $( ".filter" ).one( "change", function( event ) {
            //    callAll();
            // });


        });


        function callAll() {



            callMarker();
            initialize_map(markers);
            initMap();
        }






        function initMap() {
            var mapProp = {
                center: new google.maps.LatLng(46.7111, 1.7191),
                zoom: 6,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_rdv'), mapProp);
            // map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementsByClassName("new_rdv"));
        }


        function initialize_map(markers) {
            initMap();
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }

            $.each(markers, function(i, field) {

                markers[i].setMap(map);

            });


        }

        function callMarker() {
            markers = [];

            axios.get('/api/demandes/maps', {
                headers: {
                    'Authorization': `Bearer ${token}`,
                },
                params: {
                    type: $('#type_inspection').val()
                }
            }).then(response => {


                let inspecteurs = response.data.inspecteurs;

                response.data['demandes'].forEach(item => {


                    if (item.demande_id) {

                        let marker = new google.maps.Marker({
                            position: new google.maps.LatLng(parseFloat(item.lat), parseFloat(item
                                .lng)),
                            animation: google.maps.Animation.DROP,
                            map: map,
                            customInfo: item.demande_id,
                            id: 'marker' + item.demande_id,

                            labelClass: "labels",
                            label: {
                                text: '.',
                                color: "#FFFFFF",
                                fontSize: "20px",
                                fontWeight: "bold",
                                labelClass: "labels",

                            },
                            icon: {
                                labelOrigin: new google.maps.Point(10,
                                11), // Set this value for position of lable on marker...
                                url: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|d036a1',
                            },

                            // icon:'https://maps.google.com/mapfiles/ms/icons/'+field.color_icon+'-dot.png',
                        });



                        if ($('#demandes_filter').is(':checked')) {

                            markers.push(marker);
                        }


                        google.maps.event.addListener(marker, 'click', function() {

                            var infos = (this.customInfo);

                            this.setIcon(
                            'https://maps.google.com/mapfiles/ms/icons/orange-dot.png');
                            display_form(infos);
                        });

                        (function(_map, _marker) {
                            $('#rdv_' + item.demande_id).on('mouseover', function(e) {
                                _marker.setAnimation(google.maps.Animation.BOUNCE);
                            });
                            $('#rdv_' + item.demande_id).on('mouseout', function(e) {
                                _marker.setAnimation(null);
                            });
                        })(map, marker);
                    }
                })
                initialize_map(markers);


                var values = ($('#inspecteur_filter').val());

                if (response.data.inspecteurs) {
                    $('#inspecteur_filter').html('');

                    var $dropdown = $("#inspecteur_filter");

                    $dropdown.append($("<option />").val("").text("Choisir un inspecteur"));

                    $.each(response.data.inspecteurs, function() {

                        $dropdown.append($("<option />").val(this.user_id).text(this.user_firstname + ' ' +
                            this.user_lastname));

                    });

                    $dropdown.val(values);


                }


            });



            axios.get('/api/rdv/maps', {
                headers: {
                    'Authorization': `Bearer ${token}`,
                },
                params: {

                    type_inspection: $('#type_inspection').val(),
                    dates: $('#dates').val(),

                }
            }).then(response => {
                let count = 0;

                response.data.forEach((field) => {
                    if (parseInt(field.label) >= 0) {
                        count = parseInt(count) + 1;
                    }



                    if ($('#rdv_filter').is(':checked')) {


                        if (field.lat > 0 && parseInt(field.label) >= 0) {

                            let marker = new google.maps.Marker({
                                position: new google.maps.LatLng(parseFloat(field.lat), parseFloat(
                                    field.lng)),
                                animation: google.maps.Animation.DROP,
                                map: map,
                                customInfo: field.rdv_id,
                                id: 'marker' + field.rdv_id,
                                dpt: field.dpt,
                                date_rdv: field.date_rdv,
                                label_id: field.label,
                                operation_title: field.operation_title,
                                operation_id: field.operation_id,
                                beneficiaire_name: field.beneficiaire_name,
                                inspecteur: field.inspecteur,
                                user_id: field.user_id,
                                coordonnees: field.coordonnees,
                                type_rapport_desc: field.type_rapport_desc,
                                type_operation: field.type_operation,
                                region: field.region,
                                start_hour: field.start_hour,
                                label_id: field.label,
                                precarite: field.precarite,

                                labelClass: "labels",
                                label: {
                                    text: '' + field.label + '',
                                    color: "#FFFFFF",
                                    fontSize: "20px",
                                    fontWeight: "bold",
                                    labelClass: "labels",

                                },
                                icon: {
                                    labelOrigin: new google.maps.Point(10,
                                    11), // Set this value for position of lable on marker...
                                    url: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|3f6ad8',
                                },

                                // icon: 'https://maps.google.com/mapfiles/ms/icons/' + field.color_icon + '-dot.png',
                            });




                            markers.push(marker);



                            google.maps.event.addListener(marker, 'click', function() {

                                var infos = (this.customInfo);

                                this.setIcon(
                                    'https://maps.google.com/mapfiles/ms/icons/orange-dot.png');
                                display_form_rdv(infos);
                            });

                            (function(_map, _marker) {
                                $('#rdv_' + field.rdv_id).on('mouseover', function(e) {
                                    _marker.setAnimation(google.maps.Animation.BOUNCE);
                                });
                                $('#rdv_' + field.rdv_id).on('mouseout', function(e) {
                                    _marker.setAnimation(null);
                                });
                            })(map, marker);
                            var preca = marker.precarite;
                            if (marker.precarite == 1) {
                                var preca = 'Classique';
                            }
                            if (marker.precarite == 2) {
                                var preca = 'Précaire';
                            }
                            if (marker.precarite == 3) {
                                var preca = 'Grand Précaire';
                            }

                            var contentString = '<div id="content">' +
                                '<div id="siteNotice">' +
                                '</div>' +
                                '<p style="width:100%;background:#3a87ad;color:white;padding:3px"><strong style="font-size:large">' +
                                marker.inspecteur + marker.label_id + '</strong></p>' +
                                '<div id="bodyContent">' +
                                '<p>RDV DU ' + marker.date_rdv + ' à ' + marker.start_hour + '</br>' +
                                '<p>' + marker.type_operation + '</br>' +
                                '<p>Précarité : ' + preca + '</br>' +
                                '<p>' + marker.coordonnees + '</p>' +
                                '<p><strong style="font-weight:bold;color:black;font-size:14px"> OPERATION : ' +
                                marker.operation_title + (marker.operation_title == 'null' ? 'oooo' : '') +
                                '</strong></p>' +
                                '</div>' +
                                '</div>';

                            var infowindow = new google.maps.InfoWindow({
                                content: contentString,
                                shouldFocus: false,
                            });
                            marker.addListener('mouseover', function() {
                                infowindow.open(map, marker);
                            });

                            marker.addListener('mouseout', function() {
                                infowindow.close(map, marker);
                            });

                        }
                    }

                });

            });



            if ($('#inspecteur_filter').val() != '') {

                axios.get('/api/rdv/get_list_rdv', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                    },
                    params: {

                        user_id: $('#inspecteur_filter').val(),
                        dates: $('#dates').val(),

                    }
                }).then(response => {
                    let count = 0;

                    response.data.forEach((field) => {
                        if (parseInt(field.label) >= 0) {
                            count = parseInt(count) + 1;
                        }






                        if (field.lat > 0 && parseInt(field.label) >= 0) {



                            let marker = new google.maps.Marker({
                                position: new google.maps.LatLng(parseFloat(field.lat), parseFloat(
                                    field.lng)),
                                animation: google.maps.Animation.DROP,
                                map: map,
                                customInfo: field.rdv_id,
                                id: 'marker' + field.rdv_id,
                                dpt: field.dpt,
                                date_rdv: field.date_rdv,
                                label_id: field.label,
                                operation_title: field.operation_title,
                                operation_id: field.operation_id,
                                beneficiaire_name: field.beneficiaire_name,
                                inspecteur: field.inspecteur,
                                user_id: field.user_id,
                                coordonnees: field.coordonnees,
                                type_rapport_desc: field.type_rapport_desc,
                                type_operation: field.type_operation,
                                region: field.region,
                                start_hour: field.start_hour,
                                label_id: field.label,
                                precarite: field.precarite,

                                labelClass: "labels",
                                label: {
                                    text: '' + field.label + '',
                                    color: "#FFFFFF",
                                    fontSize: "20px",
                                    fontWeight: "bold",
                                    labelClass: "labels",

                                },
                                icon: {
                                    labelOrigin: new google.maps.Point(10,
                                    11), // Set this value for position of lable on marker...
                                    url: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' +
                                        field.user_color,
                                },

                                // icon: 'https://maps.google.com/mapfiles/ms/icons/' + field.color_icon + '-dot.png',
                            });




                            markers.push(marker);



                            google.maps.event.addListener(marker, 'click', function() {

                                var infos = (this.customInfo);

                                this.setIcon(
                                    'https://maps.google.com/mapfiles/ms/icons/orange-dot.png');
                                display_form_rdv(infos);
                            });

                            (function(_map, _marker) {
                                $('#rdv_' + field.rdv_id).on('mouseover', function(e) {
                                    _marker.setAnimation(google.maps.Animation.BOUNCE);
                                });
                                $('#rdv_' + field.rdv_id).on('mouseout', function(e) {
                                    _marker.setAnimation(null);
                                });
                            })(map, marker);
                            var preca = marker.precarite;
                            if (marker.precarite == 1) {
                                var preca = 'Classique';
                            }
                            if (marker.precarite == 2) {
                                var preca = 'Précaire';
                            }
                            if (marker.precarite == 3) {
                                var preca = 'Grand Précaire';
                            }

                            var contentString = '<div id="content">' +
                                '<div id="siteNotice">' +
                                '</div>' +
                                '<p style="width:100%;background:#3a87ad;color:white;padding:3px"><strong style="font-size:large">' +
                                marker.inspecteur + '</strong></p>' +
                                '<div id="bodyContent">' +
                                '<p>RDV DU ' + marker.date_rdv + ' à ' + marker.start_hour + '</p></br>';

                            if (marker.type_operation) {
                                contentString += '<p>' + marker.type_operation + '</p></br>';
                            }
                            contentString += '<p style="color:black;font-weight:700"><strong>' + marker
                                .type_rapport_desc + '</strong></p></br>';

                            if (marker.precarite > 0) {
                                contentString += '<p>Précarité : ' + preca + '</p></br>';
                            }

                            contentString += '<p>' + marker.coordonnees + '</p>';
                            if (marker.operation_id > 0) {
                                contentString +=
                                    '<p><strong style="font-weight:bold;color:black;font-size:14px"> OPERATION : ' +
                                    marker.operation_title + (marker.operation_title == 'null' ? 'oooo' :
                                        '') + '</strong></p>';
                            }
                            contentString += '</div>' +
                                '</div>';

                            var infowindow = new google.maps.InfoWindow({
                                content: contentString,
                                shouldFocus: false,
                            });
                            marker.addListener('mouseover', function() {
                                infowindow.open(map, marker);
                            });

                            marker.addListener('mouseout', function() {
                                infowindow.close(map, marker);
                            });


                        }

                    });



                    initialize_map(markers);

                });


            }
















            initialize_map(markers);

        }




        function display_form(a) {

            $.ajax({
                url: '/api/demandes/' + a,
                type: 'get',
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
                },
                success: function(output) {



                    console.log(output.demande_id)
                    $('#demande_id').val(output.demande_id);
                    $('#goto').attr('href', '/demandes/' + output.demande_id);
                    $('#surface').val(output.surface);
                    $('#chantier').val(output.debut_chantier);
                    $('#visite').val(output.date_souhaitee);
                    $('#isolant').val(output.type_isolant);
                    $('#marque').val(output.marque);
                    $('#epaisseur').val(output.epaisseur);
                    $('#devis').val(output.reference_devis);
                    $('#raison_social').val(output.raison_sociale);
                    $('#rdv_observations').val(output.rdv_observations);
                    // document.getElementById('demande_id').value = output.demande_id;
                    // document.getElementById('goTo').href = '/demandes/' + output.demande_id;
                    // document.getElementById('surface').value = output.surface;
                    // document.getElementById('chantier').value = output.debut_chantier;
                    // document.getElementById('visite').value = output.date_souhaitee;
                    // document.getElementById('isolant').value = output.type_isolant;
                    // document.getElementById('marque').value = output.marque;
                    // document.getElementById('epaisseur').value = output.epaisseur;
                    // document.getElementById('devis').value = output.reference_devis;
                    // document.getElementById('raison_social').value = output.raison_sociale;
                    // document.getElementById('rdv_observations').value = output.rdv_observations;
                    $('.proprietaire_name').val(output.proprietaire_name);
                    $('.proprietaire_adresse').val(output.proprietaire_adresse + ' ' + output.proprietaire_cp +
                        ' ' + output.proprietaire_ville);
                    $('.proprietaire_tel').val(output.tel_contact_intervention);

                    output.type_demande.forEach(type => {
                        // document.getElementById('type_' + type).checked = 'true';
                        $('#type_' + type).attr('checked', true)
                    })
                    if (output.nature_renovation) {
                        // document.getElementById('type_travaux_area').style.display = 'block';
                        $('#type_travaux_area').css("display", "block")
                        output.nature_renovation.forEach(type => {
                            $('#' + type).attr('checked', true)
                            // document.getElementById(type).checked = 'true';
                        })
                    }


                    $('.inspecteur_rdv').html('');

                    var $dropdown = $(".inspecteur_rdv");

                    $dropdown.append($("<option />").val("").text("Choisir un inspecteur"));

                    $.each(output.inspecteurs, function() {
                        $dropdown.append($("<option />").val(this.user_id).text(this.user_firstname +
                            ' ' + this.user_lastname));
                    });

                    $dropdown.select2({
                        dropdownParent: $('.new_rdv')
                    });

                    $('.inspecteur_rdv').val(output.user_id);




                    $('.new_rdv').modal('show');
                }
            });


        }

        function display_form_rdv(a) {

            $.ajax({
                url: '/api/rdv/show/' + a,
                type: 'get',
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
                },
                success: function(output) {
                    console.log(output);
                    $('#date_rdv').val(output.date_fr);
                    $('#rdv_id').val(output.rdv_id);
                    $('#heure_rdv').val(output.heure);
                    $('#minutes_rdv').val(output.minutes);
                    $('#proprietaire_name').val(output.proprietaire_name);
                    $('#proprietaire_adresse').val(output.proprietaire_adresse);
                    $('#proprietaire_tel').val(output.proprietaire_tel);
                    $('#rdv_observations').val(output.rdv_observations);


                    $('#inspecteur_rdv').html('');

                    var $dropdown = $("#inspecteur_rdv");

                    $dropdown.append($("<option />").val("").text("Choisir un inspecteur"));

                    $.each(output.inspecteurs, function() {
                        $dropdown.append($("<option />").val(this.user_id).text(this.user_firstname +
                            ' ' + this.user_lastname));
                    });

                    $dropdown.select2({
                        dropdownParent: $('.modif_rdv')
                    });

                    $('#inspecteur_rdv').val(output.user_id);

                    $('.modif_rdv').modal('toggle');
                }
            });

            $('#modif_rdv_validation2').click(function() {
                var id = $('#rdv_id').val()
                if ($('#date_rdv').val() === '') {
                    toastr.error('La date ne peux pas être vide !')
                    return;
                }

                axios.get('/api/rdv/update_rdv', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                    params: {
                        rdv_id: id,
                        date_rdv: $('#date_rdv').val(),
                        statut_rdv: $('#statut_rdv').val(),
                        type_rdv: $('#type_rdv').val(),
                        heure_rdv: $('#heure_rdv').val(),
                        minutes_rdv: $('#minutes_rdv').val(),
                        inspecteur_rdv: $('#inspecteur_rdv').val(),
                        rdv_observations: $('#rdv_observations').val(),
                    },
                }).then(response => {
                    $('.modif_rdv').modal('hide');

                    markers.forEach((item) => {
                        if (item.customInfo == id) {
                            item.setIcon('https://www.google.com/mapfiles/marker_green.png');
                        }
                    })

                });
            });
        }




        function submit() {
            let id = $('#demande_id').val()
            axios.post('/api/demandes/store', {
                demande_id: id,
                date_rdv: $('#date_rdv').val(),
                heure_rdv: $('#heure_rdv').val(),
                minutes_rdv: $('#minutes_rdv').val(),
                inspecteur_rdv: $('#inspecteur_rdv').val(),
                rdv_observations: $('#rdv_observations').val(),
                user_id: '{{ Auth::user()->user_id }}',
            }, {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
            }).then(response => {

                if (response.data === 'success') {
                    toastr.success('Rdv correctement pris !');
                }
                $('.new_rdv').modal('hide');

                document.getElementById('demande_id').value = '';
                document.getElementById('goTo').href = '';
                document.getElementById('surface').value = '';
                document.getElementById('chantier').value = '';
                document.getElementById('visite').value = '';
                document.getElementById('isolant').value = '';
                document.getElementById('marque').value = '';
                document.getElementById('epaisseur').value = '';
                document.getElementById('devis').value = '';
                document.getElementById('raison_social').value = '';
                document.getElementById('proprietaire_name').value = '';
                document.getElementById('proprietaire_adresse').value = '';
                document.getElementById('proprietaire_tel').value = '';
                document.getElementById('date_rdv').value = '';
                document.getElementById('heure_rdv').value = '08';
                document.getElementById('minutes_rdv').value = '00';
                document.getElementById('inspecteur_rdv').value = '-1';

                markers.forEach(item => {
                    if (item.id === 'marker' + id) {
                        item.setMap(null);
                    }
                });

            });
        }
    </script>
@endsection

@section('modal')
    @include('modals.rdv.edit_rdv')
    @include('modals.demandes.new_rdv')
    @if (Cache::get('last_insert_data') !== null)
        @include('modals.rdv.last_insert')
    @endif
@endsection