@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="d-flex mb-3">
        <div class="btn btn-primary mx-1">
            Résulat de la dernière insertion : {{ Cache::get('last_insert_rdv') ?? 0 }}
        </div>

        <div class="btn btn-primary mx-1">
            Statut : {{ Cache::get('current_insert_rdv') ?? 'Terminé' }}
        </div>

        @if(Cache::get('last_insert_data') !== null)
            {{--            @dd(Cache::get('last_insert_data'))--}}
            <div class="btn btn-primary mx-1" data-toggle="modal" data-target=".last_insert">
                Afficher les résultats de la dernière insertion
            </div>
        @endif
    </div>

    <form class="" action="{{ route('rdv.insertion') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="position-relative form-group"><label for="exampleEmail" class="">Importer un fichier CSV</label>

            <label for="exampleEmail" class=""></label>

            <input class="form-control" type="file" name="file" accept=".csv" required/>

            <button class="mt-1 btn btn-primary">Enregistrer</button>
        </div>
    </form>

    @if (Auth::user()->user_type < 8)
        @php
            $day = date('w');
            $week_start = date('d/m/Y', strtotime('+' . (1 + $day) . ' days'));
            $week_start_en = date('Y-m-d', strtotime('+' . (1 + $day) . ' days'));
            $week_end = date('d/m/Y', strtotime('+' . (7 - $day) . ' days'));
        @endphp
        <div class="form-inline row mb-3">

            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Tranche Horaire</label>
                <select class="form-control select_filter" id="tranche_filter">
                    <option value="">Filtrer par tranche horaire</option>
                    <option value="1">Matin</option>
                    <option value="2">Apres-midi</option>
                    <option value="3">Soir</option>
                </select>
            </div>

            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Filtrer par opération</label>
                <select class="form-control select_filter select2" id="ope_id_filter">
                    <option value="">Filtrer par opération</option>
                    @foreach($operations as $operation)
                        <option value="{{$operation['operation_id'] }}">{{ $operation['operation_title'] }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Région</label>
                <select class="form-control select_filter" id="region_id" data-column="16">
                    <option value="">Filtrer par région</option>
                    @foreach(config('regions.regions') as $key => $region)
                        <option value="{{ $key }}">{{ $region }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Département</label>
                <select class="form-control select_filter" id="departement_code" data-column="19">
                    <option value="">Filtrer par département</option>
                    @foreach(config('regions.departements') as $key => $departement)
                        <option value="{{ $key }}">{{ $key }} - {{ $departement }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Type d'inspection</label>
                <select class="form-control select_filter" id="type_operation_filter" data-column="21">
                    <option value="">Filtrer par type d'opération</option>
                    <option value="BAR-EN-101">BAR-EN-101</option>
                    <option value="BAR-EN-103">BAR-EN-103</option>
                </select>
            </div>

            <div class="mb-2 mb-sm-0 col-12 col-md-3">
                <label for="exampleEmail22" class="mr-sm-2">Précarité</label>
                <select class="form-control select_filter" id="precarite_filter" data-column="20">
                    <option value="">Filtrer par précarité</option>
                    <option value="1">Classiques et précaires</option>
                    <option value="3">Grands Précaires</option>
                </select>
            </div>

            <div id="cancel_filters">
                <i class="fa fa-filter"></i>
                <span class="infobulle"></span>
            </div>
        </div>
    @endif

    <div class="row">

        <div class="col-md-12 col-xl-12" style="margin-bottom: 18px;text-align: center;">

            <div class="row text-center">
            <span class="col-xs-12 m-1" style="margin-right: 10px;"><img
                    src="https://maps.google.com/mapfiles/ms/icons/red-dot.png">BAR-EN-101 Classiques et Précaires</span>
                <span class="col-xs-12 m-1"><img
                        src="https://maps.google.com/mapfiles/ms/icons/blue-dot.png">BAR-EN-101 Grands Précaires</span>

                <span class="col-xs-12 m-1" style="margin-right: 10px;"><img
                        src="https://maps.google.com/mapfiles/ms/icons/green-dot.png">BAR-EN-103 Classiques et Précaires</span>
                <span class="col-xs-12 m-1" style="margin-right: 10px;"><img
                        src="https://maps.google.com/mapfiles/ms/icons/yellow-dot.png">BAR-EN-103 Grands Précaires</span>

            </div>
        </div>

    </div>

    <div class="row offset-md-2">
        @for ($i = 0; $i < 18; $i++)
            <span data-date="{{ date("d/m/Y", strtotime("+ " . $i . " days")) }}"
                  class="add_planning_date btn btn-light col-md-1 col-xs-6 m-1"
                  style="">J+{{ $i }}<div>{{ date("d/m/Y", strtotime("+ " . $i . " days")) }}</div></span>
        @endfor
        <input type="hidden" id="planning_date">
        <input type="hidden" id="liste_inspecteurs">
        <input type="hidden" id="liste_jours">
    </div>

    <div class="row mt-2">
        <div class="col-md-2 col-xl-2">
            <div class="col-md-12">
                <span class="btn btn-warning reinit" id="reinit"
                      style="border:0px;width:90%;background:red">REINITIALISER</span>
                <div style="border:0px;width:9%;"></div>
                <span class="btn btn-warning display_all" id="display_all"
                      style="border:0px;margin-top:5px;margin-bottom:30px;width:90%;">TOUT VOIR</span>
                <div style="border:0px;width:9%;"></div>
                <span class="btn" style="border:0px;margin-top:5px;margin-bottom:5px;width:90%;color:black!important">Cliquez sur le nom d'un inspecteur pour voir ses RDV</span>
                <div style="border:0px;width:9%;"></div>

                @foreach($inspecteurs as $inspecteur)
                    <span class="btn btn-primary get_rdv activate" id="inspecteur_{{ $inspecteur->user_id }}"
                          data-insp_id="{{ $inspecteur->user_id }}" data-color="{{ $inspecteur->color }}"
                          style="border:0px;margin-bottom:5px;width:90%;background:{{ $inspecteur->color }}">{{ $inspecteur->user_firstname }} {{ $inspecteur->user_lastname }}</span>
                    <div class="append_account mb-2" id="append_count_{{ $inspecteur->user_id }}"
                         style="border:0px;min-width:1.5em"></div>
                @endforeach
            </div>

        </div>

        <div class="col-md-8 col-xl-8">
            <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 class="col-md-2 col-xl-2">
            <div class="col-md-12">
                <div id="accordion" class="accordion-wrapper mb-3">
                    @for ($i = 0; $i < 18; $i++)
                        @php
                            $startTimeStamp[$i] = strtotime(date("Y-m-d", strtotime("now")));
                            $endTimeStamp[$i] = strtotime("+ " . $i . " days");

                            $timeDiff[$i] = ($endTimeStamp[$i] - $startTimeStamp[$i]);

                            $numberDays[$i] = $timeDiff[$i] / 86400;  // 86400 seconds in one day

                            // and you might want to convert to integer
                            $numberDays[$i] = intval($numberDays[$i]);
                        @endphp

                        <div class="card">
                            <div id="headingThree" class="card-header show_rdv_date show_rdv"
                                 data-target="#collapseOne{{ $i }}" data-date="{{ $numberDays[$i] }}">
                                <button type="button" data-toggle="collapse" data-target="#collapseOne{{ $i }}"
                                        aria-expanded="false" aria-controls="collapseThree"
                                        class="text-left m-0 p-0 btn btn-link btn-block collapsed">
                                    <h5 class="m-0 p-0 text-center">
                                        <span
                                            class="btn btn-primary mr-2">J+{{ $i }}</span>{{ date("d/m/Y", strtotime("+ " . $i . " days")) }}
                                    </h5>
                                </button>
                            </div>
                            <div data-parent="#accordion" id="collapseOne{{ $i }}" class="collapse " style="">
                                <div class="card-body"
                                     id="card-body-{{ date("dmY", strtotime("+ " . $i . " days")) }}">

                                </div>
                            </div>
                        </div>
                    @endfor
                </div>

            </div>
        </div>

        <div class="col-md-12 col-xl-12">

            <div class="col-md-12">

                <div id='calendar_rdv2'></div>

            </div>

        </div>

    </div>
    <div class="row">
        <div class="col-md-12 col-xl-12">
            <div class="col-md-12">
                @if (Auth::user()->client_id == 0)
                    <div class="main-card mb-3 card">
                        <div class="table-responsive" style="display:none">>
                            <table id="liste_rdv"
                                   class="align-middle mb-0 table table-borderless table-striped table-hover datatable">
                            </table>
                        </div>
                    </div>
                @endif
            </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;
        document.addEventListener('DOMContentLoaded', function () {

            axios.get('/api/rdv/maps', {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
            }).then(response => {
                response.data.forEach((field) => {
                    let date_id = field.date_rdv.replace("/", "");
                    date_id = date_id.replace("/", "");

                    var rdv = '<li onclick="display_form(' + field.rdv_id + ')">';
                    rdv += field.coordonnees;
                    rdv += '<br/>';
                    rdv += 'Horaire : ' + field.start_hour;
                    rdv += '<br/><br/>';
                    rdv += field.type_operation;
                    rdv += '<br/>';
                    rdv += 'Precarite : ' + field.precarite;
                    rdv += '<br/><br/>';
                    rdv += '<strong>Région ' + field.region_name + '</strong>';
                    rdv += '</li>';
                    $('#card-body-' + date_id).append(rdv);

                });
            })

            $(".show_rdv_date").click(function () {
                label = $(this).data('date');
                $($(this).data('target')).hide();

                if ($(this).hasClass('show_rdv')) {

                    callMaps();

                    $(this).removeClass('show_rdv');
                    $(this).addClass('hide_rdv');
                    initialize_map(markers);
                } else {

                    markers = markers.filter(item => {
                        return item.label_id !== label;
                    })

                    $(this).addClass('show_rdv');
                    $(this).removeClass('hide_rdv');
                    initialize_map(markers);
                }

                $('#liste_jours').val('');
                $(".hide_rdv").each(function (index) {

                    if ($('#liste_jours').val() != '') {
                        $('#liste_jours').val($('#liste_jours').val() + ',' + $(this).data('date'));
                    } else {
                        $('#liste_jours').val($(this).data('date'));
                    }

                });

                initialize_map(markers);
            });

            $("#display_all").click(function () {
                $(".desactivate").each(function (index) {
                    for (var i = 0; i < markers.length; i++) {

                        // markers[i].setMap(null);

                        if (markers[i].user_id == $(this).data('insp_id')) {

                            markers[i].setMap(null);
                            markers.splice($.inArray(markers[i], markers), 1);
                        }
                    }

                    $(this).click();
                });
                initialize_map(markers);

                $(".get_rdv").each(function (index) {
                    $(this).click();
                });

            });

            $("#reinit").click(function () {
                $(".desactivate").each(function (index) {
                    for (let i = 0; i < markers.length; i++) {

                        if (markers[i].user_id == $(this).data('insp_id')) {

                            markers[i].setMap(null);
                            markers.splice($.inArray(markers[i], markers), 1);
                        }
                    }

                    $(this).click();
                });

                markers = [];
                const activeBtn = document.querySelectorAll('.hide_rdv');

                activeBtn.forEach((item) => {
                    item.classList.remove('hide_rdv');
                    item.classList.add('show_rdv');
                })

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

            $(".add_planning_date").click(function () {
                var element = this;

                $('#planning_date').val('');
                if ($(element).hasClass('btn-light')) {

                    $(element).addClass('btn-primary');
                    $(element).removeClass('btn-light');

                } else {
                    $(element).addClass('btn-light');
                    $(element).removeClass('btn-primary');

                }

                $(".add_planning_date").each(function (index) {
                    if ($(this).hasClass('btn-primary')) {

                        if ($('#planning_date').val() != '') {
                            $('#planning_date').val($('#planning_date').val() + ',' + $(this).data('date'));
                        } else {
                            $('#planning_date').val($(this).data('date'));
                        }

                    }
                });

                var usersArr = $('#liste_inspecteurs').val().split(",");

                $('#reinit').click();

                $('#liste_inspecteurs').val().split(',').forEach((item) => {
                    $('#inspecteur_' + item).click();
                })

                /*           $(".get_rdv.desactivate").each(function (index) {
                               if ($('#liste_inspecteurs').val().includes($(this).data('insp_id'))) {
                                   $(this).click();
                               }
                           });*/
            });

            $(".get_rdv").click(function () {
                let insp_id = $(this).data('insp_id');
                let dates = $('#planning_date').val();
                let color_id = $(this).data('color');
                let element = this;
                $.ajax({
                    url: '/api/rdv/get_list_rdv',
                    data: {
                        user_id: insp_id, dates: dates, user_type: 5,
                    },
                    type: 'get',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization', `Bearer ${token}`);
                    },
                    success: function (response) {

                        if ($.trim(response) == '') {
                            if ($(element).hasClass('desactivate')) {
                                $('#append_count_' + insp_id).html('');
                                $('#append_count_' + insp_id).css({"background-color": "transparent"});
                                $(element).removeClass('desactivate');
                                $(element).addClass('activate');
                            } else {
                                $('#append_count_' + insp_id).html('0');
                                $('#append_count_' + insp_id).css({"background-color": "" + color_id + ""});
                                $(element).addClass('desactivate');
                                $(element).removeClass('activate');
                            }
                        }

                        if ($(element).hasClass('desactivate')) {

                            markers = markers.filter(item => {
                                return item.user_id !== insp_id;
                            })

                            $(element).removeClass('desactivate');
                            $('#append_count_' + insp_id).html('');
                            $('#append_count_' + insp_id).css({"background-color": "transparent", "width": "0px"});
                        } else {
                            var count = 0;
                            response.forEach(function (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,
                                        operation_title: field.operation_title,
                                        beneficiaire_name: field.beneficiaire_name,
                                        inspecteur: field.inspecteur,
                                        user_id: field.user_id,
                                        label_id: field.label,
                                        coordonnees: field.coordonnees,
                                        type_rapport_desc: field.type_rapport_desc,
                                        type_operation: field.type_operation,
                                        region: field.region,
                                        start_hour: field.start_hour,
                                        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(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 + '</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 + '</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);
                                    });

                                }
                                $('#append_count_' + field.user_id).html(count);
                                $('#append_count_' + field.user_id).css({
                                    "background-color": "#" + field.user_color + "",
                                    "width": "9%"
                                });

                            });
                            $(element).addClass('desactivate');
                        }

                        $('#liste_inspecteurs').val('');
                        $(".desactivate").each(function (index) {
                            if ($(this).hasClass('btn-primary')) {

                                if ($('#liste_inspecteurs').val() != '') {
                                    $('#liste_inspecteurs').val($('#liste_inspecteurs').val() + ',' + $(this).data('insp_id'));
                                } else {
                                    $('#liste_inspecteurs').val($(this).data('insp_id'));
                                }

                            }
                        });

                        initialize_map(markers);
                    },
                    error: function (request, error) {
                    }
                });

            });

            $('#result_table').DataTable({
                "searching": true,
                "ordering": true,
                "sortable": true,
                "pageLength": -1,
                "bLengthChange": false,
                "bInfo": false,
                "bFilter": false,
            });

            /*        document.querySelectorAll('.select_filter').forEach(item => {
                        item.addEventListener('change', function () {
                            callMaps();
                        })
                    });*/
        });

        function callMaps() {
            axios.get('/api/rdv/maps', {
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                params: {
                    tranche: document.getElementById('tranche_filter').value,
                    operation: document.getElementById('ope_id_filter').value,
                    region: document.getElementById('region_id').value,
                    departement: document.getElementById('departement_code').value,
                    type: document.getElementById('type_operation_filter').value,
                    precarite: document.getElementById('precarite_filter').value,
                }
            }).then(response => {
                let count = 0;
                initialize_map(markers);
                response.data.forEach((field) => {
                    if (parseInt(field.label) >= 0) {
                        count = parseInt(count) + 1;
                    }

                    if (field.lat > 0 && parseInt(field.label) === label && 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,
                            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|d036a1',
                            },

                            // 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(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);
                        });

                    }
                });
            });
        }

        function display_form(a) {

            $.ajax({
                url: '/api/rdv/show/' + a,
                type: 'get',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
                },
                success: function (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').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 initMap() {
            var bounds = new google.maps.LatLngBounds();

            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);
        }

        function initialize_map(markers) {
            initMap();
            markers.forEach(marker => {
                marker.setMap(null);
                marker.setMap(map);
            })
        }

        function getFormattedDate(date) {
            let year = date.getFullYear();
            let month = (1 + date.getMonth()).toString().padStart(2, '0');
            let day = date.getDate().toString().padStart(2, '0');

            return day + '/' + month + '/' + year;
        }

    </script>

@endsection

@section('modal')
    @include('modals.rdv.edit_rdv')

    @if(Cache::get('last_insert_data') !== null)
        @include('modals.rdv.last_insert')
    @endif
@endsection