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

@section('head_supplement')

@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="metismenu-icon fas fa-calendar-alt icon-gradient bg-arielle-smile"> </i>
                </div>
                <div>
                    Demandes
                    <div class="page-title-subheading">
                        Carte de la liste des demandes en attente de traitement
                    </div>
                </div>
            </div>
        </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" class="form-control">
                <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>

    <div class="row mt-2">
        <div id="map_rdv" style="min-height:700px;height:700px;max-width: 100%;min-width: 100%;"></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 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 = [];

        $("#display_all").click(function () {
            $(".desactivate").each(function (index) {
                for (var 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();
            });
            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();
        });

        document.getElementById('type').addEventListener('change', callMarker);

        function callMarker() {
            markers = [];

            axios.get('/api/demandes/maps', {
                headers: {
                    'Authorization': `Bearer ${token}`,
                },
                params: {
                    type: document.getElementById('type').value,
                }
            }).then(response => {
                response.data.forEach(item => {
                    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',
                    });
                    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);
            });
        }

        function display_form(a) {

            $.ajax({
                url: '/api/demandes/' + a,
                type: 'get',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
                },
                success: function (output) {
                    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;
                    document.getElementById('proprietaire_name').value = output.proprietaire_name;
                    document.getElementById('proprietaire_adresse').value = output.proprietaire_adresse + ' ' + output.proprietaire_cp + ' ' + output.proprietaire_ville;
                    document.getElementById('proprietaire_tel').value = output.tel_contact_intervention;

                    output.type_demande.forEach(type => {
                        document.getElementById('type_' + type).checked = 'true';
                    })
                    if (output.nature_renovation) {
                        document.getElementById('type_travaux_area').style.display = 'block';
                        output.nature_renovation.forEach(type => {
                            document.getElementById(type).checked = 'true';
                        })
                    }

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


        }

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

            });
        }

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

        }

        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 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>
    <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('modal')
    @include('modals.demandes.new_rdv')
@endsection