{% extends '@EasyAdmin/page/content.html.twig' %}



{% block page_actions %}

    <div class="form-group" style="margin-top: -30px; margin-right: 10px">

        <select class="form-control" id="selectedDate" onchange="getStat()">
            {% for date in dates %}
                <option value="{{ date }}">{{ date }}</option>
            {% endfor %}


        </select>
    </div>



    <div class="form-group" style="margin-top: -30px; margin-right:20px">

        <select class="form-control" id="selectedMonth" onchange="getStat()">



            <option value="01" {% if  currentMonth=="01" %}

                selected
            {% endif %} >
                January</option>
            <option value="02"
                    {% if  currentMonth=="02" %}
            selected
                    {% endif %}>Febuary</option>
            <option value="03"
                    {% if  currentMonth=="03" %}

                        selected
                    {% endif %}
            >March</option>
            <option value="04"
                    {% if  currentMonth=="04" %}
                        selected
                    {% endif %}
            >April</option>
            <option value="05"
                    {% if  currentMonth=="05" %}
                        selected
                    {% endif %}
            >May</option>
            <option value="06"
                    {% if  currentMonth=="06" %}
                        selected
                    {% endif %}
            >June</option>
            <option value="07"
                    {% if  currentMonth=="07" %}
                        selected
                    {% endif %}
            >July</option>
            <option value="08"
                    {% if  currentMonth=="08" %}
                        selected
                    {% endif %}
            >August</option>
            <option value="09"
                    {% if  currentMonth=="09" %}
                        selected
                    {% endif %}
            >September</option>
            <option value="10"
                    {% if  currentMonth=="10" %}
                        selected
                    {% endif %}
            >October</option>
            <option value="11"
                    {% if  currentMonth=="11" %}
                        selected
                    {% endif %}
            >November</option>
            <option value="12"
                    {% if  currentMonth=="12" %}
                        selected
                    {% endif %}
            >December</option>
        </select>
    </div>

    <button type="button" style="margin-top: -20px" class="btn btn-primary">
      <i class="fa fa-bell"></i>  Notifications <span class="badge badge-light">{{ notification }}</span>
    </button>


{% endblock %}

{% block main %}

    <style>
        .z-depth-3{
            background-color: #fff;

            -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(104, 159, 89, 0.73), 0 3px 5px -1px rgba(0,0,0,0.3);
            box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(77, 162, 135, 0.47);

            border-radius: 1px;
        }
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 320px;
            max-width: 800px;
            margin: 1em auto;
        }

        .highcharts-data-table table {
            font-family: Verdana, sans-serif;
            border-collapse: collapse;
            border: 1px solid #ebebeb;
            margin: 5px auto;
            text-align: center;
            width: 100%;
            max-width: 500px;
        }

        .highcharts-data-table caption {
            padding: 1em 0;
            font-size: 1.2em;
            color: #555;
        }

        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }

        .highcharts-data-table td,
        .highcharts-data-table th,
        .highcharts-data-table caption {
            padding: 0.5em;
        }

        .highcharts-data-table thead tr,
        .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }

        .highcharts-data-table tr:hover {
            background: #f1f7ff;
        }

        input[type="number"] {
            min-width: 50px;
        }

    </style>
    <div class="container">

        <div class="row" style="margin-top: -20px; margin-bottom: 10px">
            <div class="col-sm-12" style="margin-top: -20px">

                <h4>Hi, {{ user.firstName }}</h4>

            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-3 "  >


                <div class="row   ">

                    <div class="col-sm-12 col-md-10 z-depth-3 card  ">
                        <div class="row  align-items-center" style="">
                            <div class="col-sm-12 align-self-center ">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <i class="fa align-self-center  fa-building"  style="color:green; font-size: 40px; margin: 10px"></i>
                                    </div>
                                    <div class="col-sm-8">
                                        <h6 style="margin-top: 10px; position: relative; float: right">Companies</h6>
                                        <h4 class="align-self-center" style="margin-top: 30px; margin-right: 10px; right: 0;  position: absolute; float: right">{{ companies|length }}</h4>

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

                        </div>
                    </div>

                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-3 ">


                <div class="row   ">

                    <div class="col-sm-12 col-md-10 z-depth-3 card offset-md-2 ">
                        <div class="row  align-items-center" style="">
                            <div class="col-sm-12 align-self-center ">
                               <div class="row">
                                   <div class="col-sm-3">
                                       <i class="fa align-self-center  fa-address-book-o"  style="color:dodgerblue;font-size: 40px; margin: 10px"></i>
                                   </div>
                                   <div class="col-sm-8">
                                       <h6 style="margin-top: 10px;  position: relative; float: right">Buildings</h6>
                                       <h4 class="align-self-center" style=" margin-top: 30px; margin-right: 10px; right: 0;  position: absolute;">{{ buildings|length }}</h4>

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

                        </div>
                    </div>

                </div>
            </div>

            <div class="col-sm-12 col-md-6 col-lg-3 ">

                <div class="row   ">

                    <div class="col-sm-12 col-md-10 z-depth-3 card offset-md-2 ">
                        <div class="row  align-items-center" style="">
                            <div class="col-sm-12 align-self-center ">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <i class="fa align-self-center  fa-users"  style="color:darkcyan;font-size: 40px; margin: 10px"></i>
                                    </div>
                                    <div class="col-sm-8">
                                        <h6 style="margin-top: 10px;  position: relative; float: right">Users</h6>
                                        <h4 class="align-self-center" style="margin-top: 30px; margin-right: 10px; right: 0;  position: absolute;">
                                            {{ users|length }}</h4>

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

                        </div>
                    </div>

                </div>


            </div>
            <div class="col-sm-12 col-md-6 col-lg-3 ">

                <div class="row   ">

                    <div class="col-sm-12 col-md-10 z-depth-3 card offset-md-2 ">
                        <div class="row  align-items-center" style="">
                            <div class="col-sm-12 align-self-center ">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <i class="fa align-self-center  fa-dollar"  style="color:gold;font-size: 40px; margin: 10px"></i>
                                    </div>
                                    <div class="col-sm-8">
                                        <h6 style="margin-top: 10px;  position: relative; float: right">Income (Xaf)</h6>
                                        <h4 class="align-self-center" style=" margin-top: 30px; margin-right: 10px; right: 0;  position: absolute;">
                                            {{ income|number_format(2, '.', ',') }}
                                        </h4>

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

                        </div>
                    </div>

                </div>


            </div>
        </div>


        <div class="row" style="margin-top: 20px">

            <div class="col-sm-12 col-md-6 col-lg-8">
                <img id="loadingLine" src="{{ asset("img/loading.gif") }}" alt="" style="max-height: 200px" class="d-none">

                <figure class="highcharts-figure">
                    <div id="container-line"></div>
                    <p class="highcharts-description">

                    </p>
                </figure>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                <img id="loadingPie" src="{{ asset("img/loading.gif") }}" alt="" style="max-height: 200px" class="d-none">

                <figure class="highcharts-figure">
                    <div id="container-pie"></div>
                    <p class="highcharts-description">

                       </p>
                </figure>
            </div>
        </div>


        <div class="row" style="margin-bottom: 30px">

            <table class="table datagrid  col-sm-12 " >
                <thead>
                <tr>
                    <td>#ID</td>
                    <td>Booking</td>
                    <td>Created At</td>
                    <td>Action</td>

                </tr>
                </thead>
                <tbody>
                {% set i=0 %}
                {% for data in bookings %}

                   {% if(i < 5) %}

                    <tr class="z-depth-3" style="margin: 10px">
                        <td >{{ data.id }}</td>
                        <td >{{ data }}</td>
                        <td >{{ data.createdAt|date("F j, Y H:i") }}</td>
                        <td>

                            {% if data.hasVue %}
                            <a href="{{ path('display_booking_room', { 'booking_id': data.id }) }}" onclick="checkBooking({{ data.id }})" data-toggle="modal" data-target="#booking_{{ data.id }}" id="btn_booking_{{ data.id }}" class="">
                                <i class="fa fa-eye-slash red" style="color: red; font-size: 20px"></i>
                            </a>
                                {%endif %}

                            {% if data.hasVue==false %}
                            <a href="{{ path('display_booking_room', { 'booking_id': data.id }) }}" onclick="checkBooking({{ data.id }})" data-toggle="modal" data-target="#booking_{{ data.id }}" id="btn_booking_{{ data.id }}" class="">
                                <i class="fa fa-eye grey" style="color: deepskyblue; font-size: 25px"></i>
                            </a>
                                {%endif %}

                        </td>
                    </tr>
                       {%  set i=i+1 %}


                    {%endif %}
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}




{% block body_javascript %}

        {{ parent() }}

    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>


    <script type="text/javascript">


        function checkBooking(bookingId){

            $("#exampleModal").attr("id","booking_"+bookingId);

            $('#booking_'+bookingId).on('shown.bs.modal', function () {

            })

            $('#btn_booking_'+bookingId).on('click', function(e) {
                e.preventDefault();

                $('#booking_'+bookingId).modal({ backdrop: true, keyboard: true })
                    .on('click', '#modal-import-button', function () {
                        let importForm = $('#btn_booking_'+bookingId);
                        importForm.attr('action');
                        $('#btn_booking_'+bookingId).triggerHandler('click');

                    });

            });

        }
        $(document).ready(function(){


            setCookie(
                "connected_user",
                "{{ user.lastName }} {{ user.firstName }}"
                ,1);


            setCookie(
                "connected_user_id",
                "{{ user.id }}"
                ,1);


            $(".user-name").html("{{ user.lastName }} {{ user.firstName }}")


        });



        var dataPie=[],i=0, dataDisplay, total=0;
        {% for data in arrayOfChart %}
        dataDisplay=0
        {% set items = data.data %}
        {% for item in items %}
        dataDisplay+={{ item }};

        {% endfor %}

        total+=dataDisplay;
        dataPie[i]={name: "{{ data.name }}", y:dataDisplay};

        i++;
        {% endfor %}

        Highcharts.chart('container-pie', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Proportion Per Company ('+formatNumber(total)+'Xaf)',
                align: 'left'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data:dataPie
            }]
        });

        var dataChart=[],i =0, categories=[];

        var z=0;

        {% for item in days %}
        categories[z]="{{ item }}";

        z++
        {% endfor %}

        {% for data in arrayOfChart %}
        var j=0,data=[];
        {% set items = data.data %}
        {% for item in items %}
        data[j]={{ item }};
        j++
        {% endfor %}

        dataChart[i]={"name": "{{ data.name }}", "data":data};

        i++;
        {% endfor %}


        Highcharts.chart('container-line', {

            title: {
                text: 'Total revue On {{ desc }} ('+formatNumber(total)+"Xaf)",
                align: 'left'
            },

            tooltip: {
                pointFormat: '{series.name}: <b>{point.y} Xaf</b>'
            },

            subtitle: {
                text: 'By partner. Source: <a href="#!" ">Loger.cm</a>.',
                align: 'left'
            },

            yAxis: {

                title: {
                    text: 'Total Booking'
                }
            },

            xAxis: {
                categories:categories,
                showLabel: false,
                enable: false,
                labels: {
                    format: '{value}',
                    enable: false,
                },
            },



            plotOptions: {
                series: {
                    cursor: 'pointer',
                    className: 'popup-on-click',
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series:dataChart,

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }

        });

        function formatNumber(number)
        {
            number = number.toFixed(2) + '';
            x = number.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? '.' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + ',' + '$2');
            }
            return x1 + x2;
        }
    </script>


    <script type="text/javascript">

        function getStat() {

            var selectedMonth =$("#selectedMonth").val() ,
                selectedDate=$("#selectedDate").val();

            var months="January";
            if(selectedMonth=="02"){
                months="Febuary"
            }else if(selectedMonth=="03"){
                months="March"
            }else if(selectedMonth=="04"){
                months="April"
            }else if(selectedMonth=="05"){
                months="May"
            }else if(selectedMonth=="06"){
                months="June"
            }else if(selectedMonth=="07"){
                months="July"
            }else if(selectedMonth=="08"){
                months="August"
            }else if(selectedMonth=="09"){
                months="September"
            }else if(selectedMonth=="10"){
                months="October"
            }else if(selectedMonth=="11"){
                months="November"
            }else if(selectedMonth=="12"){
                months="December"
            }

            $.ajax({
                method: "POST",
                tryCount  : 0,
                retryLimit  : 4,
                "url": "{{ path("getStat") }}",
                "headers": {
                    "Content-Type":  "application/json",

                },
                data: JSON.stringify({


                    "year": selectedDate,
                    "month": selectedMonth,
                }),

                beforeSend:function () {

                    $("#loadingLine").removeClass("d-none");
                    $("#loadingPie").removeClass("d-none");


                    $("#container-line").addClass("d-none");
                    $("#container-pie").addClass("d-none");
                },
                success: function(data){
                    $("#loadingLine").addClass("d-none");
                    $("#loadingPie").addClass("d-none");

                    $("#container-line").removeClass("d-none");
                    $("#container-pie").removeClass("d-none");

                    console.log(data);

                    var dataChart=[],i =0, categories=[];

                    var z=0;

                    {% for item in days %}
                    categories[z]="{{ item }}";

                    z++
                    {% endfor %}

                    var total=0;
                    var dataPie=[]

                    for(i=0; i<data.length; i++){

                        var pieTotal=0;
                        for(j=0; j<data[i].data.length; j++){
                            total+=data[i].data[j];
                            pieTotal+=data[i].data[j];
                        }

                        dataPie[i]={"name": data[i].name, y:pieTotal};

                    }

                    console.log(dataPie);

                    Highcharts.chart('container-line', {

                        title: {
                            text: 'Total revue On '+months+' '+selectedDate+' ('+formatNumber(total)+"Xaf)",
                            align: 'left'
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.y} Xaf</b>'
                        },
                        subtitle: {
                            text: 'By partner. Source: <a href="#!" ">Loger.cm</a>.',
                            align: 'left'
                        },

                        yAxis: {

                            title: {
                                text: 'Total Booking'
                            }
                        },

                        xAxis: {
                            categories:categories,
                            showLabel: false,
                            enable: false,
                            labels: {
                                format: '{value}',
                                enable: false,
                            },
                        },



                        plotOptions: {
                            series: {
                                cursor: 'pointer',
                                className: 'popup-on-click',
                                marker: {
                                    lineWidth: 1
                                }
                            }
                        },

                        series:data,

                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                    }
                                }
                            }]
                        }

                    });

                    Highcharts.chart('container-pie', {
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie'
                        },
                        title: {
                            text: 'Proportion Per Company ('+formatNumber(total)+'Xaf) '+months+' '+selectedDate,
                            align: 'left'
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        accessibility: {
                            point: {
                                valueSuffix: '%'
                            }
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                                }
                            }
                        },
                        series: [{
                            name: 'Brands',
                            colorByPoint: true,
                            data:dataPie
                        }]
                    });



                },
                error:function (xhr, textStatus, errorThrown) {

                    $("#loadingLine").addClass("d-none");
                    $("#loadingPie").addClass("d-none");

                    $("#container-line").removeClass("d-none");
                    $("#container-pie").removeClass("d-none");

                }

            });


        }
    </script>

{% endblock %}