{% extends "header.html.twig" %}

{% block body_content %}
    <div class="row">
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>{{ active_users }}</h3>
                    <p>Active Users</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>{{ active_sitters }}</h3>
                    <p>Active Sitters</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>{{ completed_bookings }}</h3>
                    <p>Completed Bookings</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>{{ pending_bookings }}</h3>
                    <p>Pending Bookings</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>USD {{ sitter_pending_amount }}</h3>
                    <p>Sitter Pending Amount</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>USD {{ sitter_withdrawal_amount }}</h3>
                    <p>Sitter Withdrawal Amount</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>USD {{ cuddlytails_amount }}</h3>
                    <p>Cuddlytails Earning</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-red">
                <div class="inner">
                    <h3>USD {{ refunded_amount }}</h3>
                    <p>Refunded Amount</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <section class="col-lg-12 connectedSortable">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <li class="pull-left header"><i class="fa fa-inbox"></i>Active Users</li>
                    <li class="pull-right header">
                        <select class="form-control year" style="margin-top:10px;margin-bottom:10px"
                                id="online_user_year">
                            {% for year in year_array %}
                                {% if year == current_year %}
                                    <option value="{{ year }}" selected>{{ year }}</option>
                                {% else %}
                                    <option value="{{ year }}">{{ year }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </li>
                </ul>
                <div class="tab-content no-padding">
                    <div class="chart tab-pane active" id="active-user-chart"
                         style="position: relative; height: 300px;"></div>
                </div>
            </div>
        </section>
    </div>
    <div class="row">
        <section class="col-lg-12 connectedSortable">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <li class="pull-left header"><i class="fa fa-inbox"></i>Users & Sitters</li>
                    <li class="pull-right header">
                        <select class="form-control year" style="margin-top:10px;margin-bottom:10px" id="year">
                            {% for year in year_array %}
                                {% if year == current_year %}
                                    <option value="{{ year }}" selected>{{ year }}</option>
                                {% else %}
                                    <option value="{{ year }}">{{ year }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </li>
                </ul>
                <div class="tab-content no-padding">
                    <div class="chart tab-pane active" id="user-chart"
                         style="position: relative; height: 300px;"></div>
                    <div class="color-view" style="padding:10px">
                        Users: <span style="background:#0b62a4;padding-left:10px">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        Sitters: <span style="background:#7a92a3;padding-left:10px">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="row">
        <section class="col-lg-12 connectedSortable">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <li class="pull-left header"><i class="fa fa-inbox"></i>Services</li>
                    <li class="pull-right header">
                        <select class="form-control year" style="margin-top:10px;margin-bottom:10px" id="service_year">
                            {% for year in year_array %}
                                {% if year == current_year %}
                                    <option value="{{ year }}" selected>{{ year }}</option>
                                {% else %}
                                    <option value="{{ year }}">{{ year }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </li>
                </ul>
                <div class="tab-content no-padding">
                    <div class="chart tab-pane active" id="service-chart"
                         style="position: relative; height: 300px;"></div>
                    <div class="color-view" style="padding:10px">
                        Completed Service: <span
                                style="background:#0b62a4;padding-left:10px">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        Active Service: <span
                                style="background:#7a92a3;padding-left:10px">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </div>
                </div>
            </div>
        </section>
    </div>

{% endblock body_content %}
{% block script_content %}
    <!-- Morris.js charts -->
    <link rel="stylesheet" href="{{ base_url }}/theme/adminlte/bower_components/morris.js/morris.css">
    <script src="{{ base_url }}/theme/adminlte/bower_components/raphael/raphael.min.js"></script>
    <script src="{{ base_url }}/theme/adminlte/bower_components/morris.js/morris.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script>
        $(function () {
            function getChart() {
                $("#user-chart").empty();
                $.ajax({
                    url: '/getUserChart',
                    method: 'POST',
                    data: {
                        year: $('#year').val()
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        Morris.Line({
                            element: 'user-chart',
                            resize: true,
                            data: data,
                            xkey: 'y',
                            ykeys: ['users', 'sitters'],
                            labels: ['Users', 'Sitters'],
                            parseTime: false,
                        })
                    }
                })
            }

            function getServiceChart() {
                $("#service-chart").empty();
                $.ajax({
                    url: '/getServiceChart',
                    method: 'POST',
                    data: {
                        year: $('#service_year').val()
                    },
                    dataType: 'json',
                    success: function (data) {
                        Morris.Line({
                            element: 'service-chart',
                            resize: true,
                            data: data,
                            xkey: 'y',
                            ykeys: ['complete_service', 'active_service'],
                            labels: ['Complete Service', 'Active Service'],
                            parseTime: false,
                        })
                    }
                })
            }

            function getActiveUserChart() {
                $("#active-user-chart").empty();
                $.ajax({
                    url: '/getActiveUserChart',
                    method: 'POST',
                    data: {
                        year: $('#online_user_year').val()
                    },
                    dataType: 'json',
                    success: function (data) {
                        Morris.Line({
                            element: 'active-user-chart',
                            resize: true,
                            data: data,
                            xkey: 'y',
                            ykeys: ['active_user'],
                            labels: ['User'],
                            parseTime: false,
                        })
                    }
                })
            }

            getChart()
            getServiceChart()
            getActiveUserChart()
            $('.year').on('change', function () {
                getChart()
                getServiceChart()
                getActiveUserChart()
            })
        })
    </script>
{% endblock script_content %}