@extends('layouts.app')

@section('title', 'Tools')

@section('content')
    <style>
        .spinner {
            margin: 100px auto 0;
            width: 70px;
            text-align: center;
        }

        .spinner>div {
            width: 18px;
            height: 18px;
            background-color: #1ab394 !important;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes sk-bouncedelay {

            0%,
            80%,
            100% {
                -webkit-transform: scale(0)
            }

            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes sk-bouncedelay {

            0%,
            80%,
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            40% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
            }
        }

        .mes {
            color: #ed5565;
            list-style-type: none;
        }

        .tooltipsy {
            padding: 10px;
            max-width: 200px;
            color: #303030;
            background-color: #f5f5b5;
            border: 1px solid #deca7e;
        }

        .flex-container {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        .flex-item {
            background-color: #fff;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .flex-item:hover {

            border: 4px solid #adc;
            cursor: pointer;

        }

        .flex-item>span {

            width: 100%;

            color: #1ab394;
            /* margin: 17%; */
            font-size: small;
            font-weight: 700;
        }

        .headtitle {
            width: 100%;
            display: inline-block;
            padding: 10px 0 10px 0;
            background: #1ab394;
            color: #fff;
            font-size: medium;
        }

        .activeclass {
            border-bottom: 4px solid #adc;
            padding-bottom: 1.1%;

        }

        .cessata:hover {
            border: 4px solid red;
        }

        .cessata>span {
            color: red;
        }


        .attiva>span {
            color: 1ab394;
        }

        .attiva:hover {
            border: 4px solid #1ab394;
        }

    </style>
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>Agenti</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a>Agenti</a>
                </li>
                <li>
                    <a href='/agenti/anagrafiche'> elenco</a>
                </li>
                <li class="active">
                    <strong>{{ $agente->Nome }}</strong>
                </li>
            </ol>
        </div>

    </div>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row equal">
            <div class="col-md-12">

                <div class="ibox">
                    <div class="ibox-content">
                        <h2><i class="fa fa-lg fa-suitcase" aria-hidden="true"></i>&nbsp;Dettaglio Agente
                            {{ $agente->Nome }}
                        </h2>
                        <br><br>
                        <div class="tabs-container">
                            <ul class="nav nav-tabs">
                                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"><i
                                            class="fa fa-user"></i> Dettagli Agente</a></li>
                                <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false"><i
                                            class="fa fa-map"></i>Provvigioni</a></li>
                                <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false"><i
                                            class="fa fa-map"></i>Dati Agente</a></li>


                            </ul>

                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="panel-body">
                                        @include('agenti.agenteCollegamenti_statistiche')
                                    </div>
                                </div>
                                <div id="tab-2" class="tab-pane">
                                    <div class="panel-body">
                                        @include('agenti.agenteCollegamenti_provvigioni')
                                    </div>
                                </div>
                                <div id="tab-3" class="tab-pane">
                                    <div class="panel-body">
                                        @include('agenti.agenteCollegamenti_anagrafica')
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>


        </div>

    </div>


    <div class="modal fade in" id="modalinvito" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">


            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>

                    <h4 class="modal-title">Invito a Fatturare</h4>

                </div>
                <div class="modal-body">
                    <iframe id="documentView" src="" download="invito.pdf" width="100%" height="550" frameborder="0"
                        kwframeid="1"></iframe>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Chiudi</button>

                </div>

            </div>

        </div>
    </div>


    <div class="modal fade in" id="modalbonus" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">


            <div class="modal-content animated fadeIn">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">Close</span></button>

                    <h4 class="modal-title">Aggiungi Bonus</h4>

                </div>
                <div class="modal-body">

                    <form method="POST" id="from_bonus">
                        <div class="row">
                            <input type="hidden" id="datacalcolo" name="data_calcolo">
                            <input type="hidden" id="agente" name="agente">

                            <div class="col-md-4"><label>Bonus da aggiungere al saldo</label> <input id="bonus"
                                    type="number" name="bonus" placeholder="inserisci bonus" class="form-control"
                                    value=""></div>

                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Chiudi</button>
                    <button type="button" onclick="submitBonusCalcolo()" class="btn btn-warning"
                        data-dismiss="modal">Modifica</button>

                </div>

            </div>

        </div>
    </div>


@endsection

@section('scripts')

    <script>
        tbldata = [];
        tblArchivio = $('#tableArchivioProvvigioni').dataTable({
            pageLength: 10,
            bSort: false,
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });

        $('#tableprovvigioni').dataTable({
            pageLength: 10,
            bSort: false,
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });


        $('#tableutenze').dataTable({
            pageLength: 5,
            bSort: true,
            select: true,
            "scrollY": "300px",
            "processing": true,
            "serverSide": true,
            "ajax": "/api/elencoUtenzeAgenteByCode?code=" + $('input[name="agente_codice"]').val(),
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf'
            ],
            initComplete: function(row, data) {
                //console.log(data.recordsTotal);
                $('#insoluticount').html(data.recordsTotal);
            }
        });

        $('#tablefatture').dataTable({
            pageLength: 5,
            bSort: true,
            select: true,
            "processing": true,
            "serverSide": true,
            "ajax": "/api/elencoFattureAgenteByCode?code=" + $('input[name="agente_codice"]').val(),
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf'
            ],
            initComplete: function(row, data) {
                //console.log(data.recordsTotal);
                $('#insoluticount').html(data.recordsTotal);
            }
        });



        $('#tableAmministratori').dataTable({
            pageLength: 10,
            bSort: true,
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf'
            ]
        });

        $('#tableInsoluti').dataTable({
            pageLength: 5,
            bSort: true,
            select: true,
            "scrollY": "300px",
            "processing": true,
            "serverSide": true,
            "ajax": "/api/elencoInsolutiAgenteByCode?code=" + $('input[name="agente_codice"]').val(),
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf'
            ],
            initComplete: function(row, data) {
                //console.log(data.recordsTotal);
                $('#insoluticount').html(data.recordsTotal);
            }
        });


        function createGraph(attive, cessate, abbandono, contesto) {
            var doughnutData = {
                labels: ["Attive", "Cessate"],
                datasets: [{
                    data: [attive, cessate],
                    backgroundColor: ["#a3e1d4", "#dedede"]
                }]
            };


            var doughnutOptions = {
                responsive: true
            };

            if (myChart) {
                myChart.destroy();
            }
            var ctx4 = document.getElementById("doughnutChart").getContext("2d");
            ctx4.clearRect(0, 0, ctx4.width, ctx4.height);

            myChart = new Chart(ctx4, {
                type: 'doughnut',
                data: doughnutData,
                options: doughnutOptions
            });
            $('#precentuale').html('percentuale di abbandono filtrata su ' + contesto + ' ' + abbandono + ' %');
        }

        function elaboraBonus(e) {
            console.log(e);
            $('#bonus').val($(e).data('bonusvalue'));
            $('#datacalcolo').val($(e).data('calcolo'));
            $('#agente').val($(e).data('agente'));


        }

        function submitBonusCalcolo() {


            $.post('/agenti/provvigioni/AddBonus', $('#from_bonus').serialize()).done(function(data) {
                cerca();
            });;


        }



        function populateTable() {
            tblArchivio.fnDestroy();
            tbl = '';
            $.each(tbldata, function(key, val) {

                val.Residenziale = $.isNumeric(val.Residenziale) ? val.Residenziale : 0;
                val.Business = $.isNumeric(val.Business) ? val.Business : 0;
                val.Condomini = $.isNumeric(val.Condomini) ? val.Condomini : 0;
                totale = val.Residenziale + val.Condomini + val.Business + val.bonus;
                codice = $('input[name="agente_codice"]').val();
                datanew = key.replace('/', '-').replace('/', '-');
                tbl += "<tr  data-codice='" + codice + "' data-nominativo='" + $(
                        'input[name="provvigione[agente_Descrizione]"]').val() + "' data-data_invito='" + key +
                    "' data-totale_residenziale='" + val.Residenziale + "' data-totale_business='" + val.Business +
                    "' data-totale_condomini='" + val.Condomini + "' data-totale_fatturato='" + totale +
                    "' data-totale_bonus='" + val.bonus + "'>" +
                    "<td>" + key + "</td>" +
                    "<td>" + val.Residenziale + "</td>" +
                    "<td>" + val.Business + "</td>" +
                    "<td>" + val.Condomini + "</td>" +
                    "<td>" + val.bonus + "</td>" +
                    "<td>" + totale.toFixed(2) + "</td>" +

                    "<td><div style='display:inline-flex!important' class='col-md-12'><a onClick='elaboraBonus(this)' style='margin: 2px;' class='btn btn-success pull-right' data-toggle='modal' data-target='#modalbonus' data-agente='" +
                    codice + "' data-calcolo='" + key + "' data-bonusValue='" + val.bonus +
                    "' ><i class='fa fa-plus'></i></a><a style='margin: 2px;' class='btn btn-success pull-right' download href='/uploads/calcoliProvvigioni/" +
                    codice + "/" + datanew +
                    "/calcolo.xls'><i class='fa fa-file'></i></a><button style='margin: 2px;' type='button' class='btn btn-danger pull-right' style='' onclick='deleteCalcolo(this)'><i class='fa fa-trash'></i></button><button style='margin: 2px;' type='button'  class='btn btn-warning pull-right' style=''><i class='fa fa-money'></i></button><button style='margin: 2px;' type='button'  data-toggle='modal' data-target='#modalinvito' class='btn btn-primary pull-right' style=''><i class='fa fa-envelope-open-o' aria-hidden='true'></i></button></div></td>" +
                    "</tr>";
            });
            $('#tableArchivioProvvigioni').find('tbody').empty().append(tbl);

        }

        function deleteCalcolo(e) {
            $('#loaded_pan').hide();
            $('#load_pan').show();
            var obj = $(e).parents('tr');
            var data_invito = $(obj).data('data_invito');
            var codice = $(obj).data('codice');
            console.log(obj);

            $.post("/agenti/anagrafiche/detail/deletecalcolo", {
                _token: $('meta[name="csrf-token"]').attr('content'),
                data: data_invito,
                codice: codice
            }, function(data) {
                cerca();
                $('#loaded_pan').fadeIn();
                $('#load_pan').hide();
            });

        }


        function cerca() {

            $.getJSON("/api/agenti/archivioCalcoloProvvigioni", {
                    codice: $('input[name="provvigione[codice_agente]"]').val()
                })
                .done(function(json) {
                    tbldata = json;
                    populateTable();
                })
                .fail(function(jqxhr, textStatus, error) {
                    var err = textStatus + ", " + error;
                    console.log("Request Failed: " + err);
                });
        }

        $(document).ready(function() {
            attive = $('#attive').val();
            cessate = $('#cessate').val();
            var doughnutData = {
                labels: ["Attive", "Cessate"],
                datasets: [{
                    data: [attive, cessate],
                    backgroundColor: ["#a3e1d4", "#dedede"]
                }]
            };


            var doughnutOptions = {
                responsive: true
            };

            var listini = null;
            var lunghezzaListini = 0;
            var inizioListino = 0;
            var toExclude = null;
            var data = null;


            var ctx4 = document.getElementById("doughnutChart").getContext("2d");
            new Chart(ctx4, {
                type: 'doughnut',
                data: doughnutData,
                options: doughnutOptions
            });
            cerca();
            $('#modalinvito').on('show.bs.modal', function(e) {
                var obj = $(e.relatedTarget).parents('tr');
                var agente_nominativo = $(obj).data('nominativo');
                var data_invito = $(obj).data('data_invito');
                var totale_residenziale = $(obj).data('totale_residenziale');
                var totale_business = $(obj).data('totale_business');
                var totale_condomini = $(obj).data('totale_condomini');
                var totale_fatturato = $(obj).data('totale_fatturato');
                var totale_bonus = $(obj).data('totale_bonus');
                var href = "/agenti/provvigioni/elaboraInvito?agente_nominativo=" + agente_nominativo
                    .replace("&", "%26") + "&data_invito=" + data_invito + "&totale_residenziale=" +
                    totale_residenziale + "&totale_business=" + totale_business + "&totale_condomini=" +
                    totale_condomini + "&totale_bonus=" + totale_bonus + "&totale_fatturato=" +
                    totale_fatturato;


                document.getElementById('documentView').src = href;

            });

            function storeData(data) {

                // CODE RAFFAELE
                // console.log ("DEBUG RAF");
                // console.log (data);

                var form = $('#form_calcolo');
                $('#message_calcolo').html('Ci siamo quasi..Memorizzo i dati');
                $("#agenti_p2").html(60.00 + '%');
                $("#agenti_p2").css('width', 60.00 + '%').attr('aria-valuenow', 100);
                $('#step1').hide();
                $('#step2').show();
                $('#step3').hide();
                $.ajax({
                    type: "POST",
                    url: "/agenti/provvigioni/storeData",
                    data: {
                        codice_agente: $('[name="provvigione[codice_agente]"]').val(),
                        dataInizio: $('[name="provvigione[dataInizio]"]').val(),
                        calcolo: JSON.stringify(data)
                    },

                    success: function(data) {
                        $('#message_calcolo').html(
                            'Dati memorizzati correttamente,provvedo al recupero del fil xls...');
                        $("#agenti_p2").html(66.00 + '%');
                        $("#agenti_p2").css('width', 66 + '%').attr('aria-valuenow', 66);
                        getXls(data);

                    }

                });

            }

            function getXls(data) {
                var form = $('#form_calcolo');
                $('#step1').hide();
                $('#step2').hide();
                $('#step3').show();

                $.ajax({
                    type: "POST",
                    url: "/agenti/provvigioni/getXls",
                    data: {
                        codice_agente: $('[name="provvigione[codice_agente]"]').val(),
                        dataInizio: $('[name="provvigione[dataInizio]"]').val(),
                        nominativo: $('[name="provvigione[agente_Descrizione]"]').val(),
                        calcolo: JSON.stringify(data)
                    },
                    xhrFields: {
                        responseType: 'blob'
                    },

                    success: function(data) {
                        $('#message_calcolo').html('tutto fatto');
                        $("#agenti_p2").html(100.00 + '%');
                        $("#agenti_p2").css('width', 100 + '%').attr('aria-valuenow', 100);

                        $('#calcolo').removeAttr('disabled');
                        $('#calcolo').html('CALCOLA');
                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(data);
                        a.href = url;
                        a.download = 'calcolo.xls';
                        a.click();
                        window.URL.revokeObjectURL(url);
                        cerca();
                        $('#loaded_pan').fadeIn();
                        $('#load_pan').hide();
                        $('#myModal').toggle();
                        listini = null;
                        lunghezzaListini = 0;
                        inizioListino = 0;
                        toExclude = null;
                        data = null;
                        toastr.success('tutto sembra essere andato bene!',
                            'Calcolo del piano provvigionale Completato!');
                    }

                });

            }

            function elaborateCalcoloListino() {
                $('#step1').show();
                $('#step2').hide();
                $('#step3').hide();

                $('#message_calcolo').html('Calcolo il listino associato n:' + (inizioListino + 1) + " su " +
                    lunghezzaListini);
                $("#agenti_p2").html(33.00 + inizioListino + '%');
                $("#agenti_p2").css('width', (33.00 + inizioListino) + '%').attr('aria-valuenow', 100);
                $.ajax({
                    type: "POST",
                    url: "/agenti/provvigioni/elaborateCalcoloListino",
                    data: {
                        codice_agente: $('[name="provvigione[codice_agente]"]').val(),
                        nominativo: $('[name="provvigione[agente_Descrizione]"]').val(),
                        dataInizio: $('[name="provvigione[dataInizio]"]').val(),
                        listino: JSON.stringify(listini[0]),
                        data: JSON.stringify(elaborazione),
                        toExclude: JSON.stringify(toExclude)
                    },

                    success: function(data) {
                        elaborazione = data;
                        listini.shift();
                        inizioListino++;
                        if (listini.length > 0) {
                            elaborateCalcoloListino();
                        } else {
                            storeData(elaborazione);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        elaborateCalcoloListino();
                    }

                });

            }

            function eseguiCalcolo() {
                var form = $('#form_calcolo');
                $('#step1').show();
                $('#step2').hide();
                $('#step3').hide();


                $.ajax({
                    type: "POST",
                    url: form.attr('action'),
                    data: form.serialize(),

                    success: function(data) {
                        console.log(data);

                        $('#message_calcolo').html(
                            'Il calcolo è stato elaborato con successo..provvedo ad memorizzare i dati..'
                        );
                        $("#agenti_p2").html(33.00 + '%');
                        $("#agenti_p2").css('width', 33 + '%').attr('aria-valuenow', 33);
                        listini = data.rules;
                        lunghezzaListini = listini.length;
                        elaborazione = data.data;
                        toExclude = data.toExclude;
                        elaborateCalcoloListino();
                        //storeData(data);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $('#message_calcolo').html(
                            'Si è verificato un problema con il calcolo,provvedo nuovamente a rielaborarlo...'
                        );
                        $("#agenti_p2").html(0.00 + '%');
                        $("#agenti_p2").css('width', 0 + '%').attr('aria-valuenow', 0);
                        eseguiCalcolo();
                    }

                });
            }

            $('#dettagli-list').fadeIn();
            $('#load').hide();
            $('#calcolo').on('click', function() {
                $('#calcolo').attr('disabled', 'disabled');

                $('#loaded_pan').hide();
                $('#load_pan').show();
                $('#myModal').toggle();
                $('#message_calcolo').html('Eseguo il calcolo delle provvigioni..');
                $("#agenti_p2").html(0 + '%');
                $("#agenti_p2").css('width', 0 + '%').attr('aria-valuenow', 0);
                eseguiCalcolo();
            });
        });
    </script>

@endsection