@extends('adminlte::page')

@section('title', 'Статистика')

@section('plugins.tempusdominusBootstrap4', true)
@section('plugins.Summernote', true)
@section('plugins.BSCustomFileInput', true)
@section('plugins.Datatables', true)
@section('plugins.moment', true)
@section('plugins.daterangepicker', true)
@section('plugins.DatatablesPrint', true)

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3>{{ __('Статистика') }}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="info-box mb-3 bg-success">
                                            <span class="info-box-icon"><i class="fas fa-spinner"></i></span>
                                            <div class="info-box-content">
                                                <span class="info-box-text">Всего новых</span>
                                                <span class="info-box-number" id="total-new">0</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-box mb-3 bg-primary">
                                            <span class="info-box-icon"><i class="fas fa-check"></i></span>
                                            <div class="info-box-content">
                                                <span class="info-box-text">Всего зарегистрировано</span>
                                                <span class="info-box-number" id="total-completed">0</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-box mb-3 bg-danger">
                                            <span class="info-box-icon"><i class="fas fa-exclamation"></i></span>
                                            <div class="info-box-content">
                                                <span class="info-box-text">Всего ошибок</span>
                                                <span class="info-box-number" id="total-failed">0</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="info-box mb-3 bg-info">
                                            <span class="info-box-icon"><i class="fas fa-pause"></i></span>
                                            <div class="info-box-content">
                                                <span class="info-box-text">Всего на паузе</span>
                                                <span class="info-box-number" id="total-paused">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="tbl-items" class="table m-0 table-hover">
                                        <thead>
                                        <tr>
                                            <th>AVR</th>
                                            <th>Страна</th>
                                            <th>Аккаунт</th>
                                            <th style="width: 150px">Статус</th>
                                            <th style="width: 50px">Приоритет</th>
                                            <th style="width: 150px">Дата добавления</th>
                                            <th style="width: 150px">Дата записи</th>
                                            <th style="width: 150px">Выполнено за</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <form id="frm-filter">
                                    <div class="row">
                                        <div class="col-12">
                                            <a href="javascript:void(0)" class="fa-pull-right my-2 btn-toggle-countries" data-status="1" data-status-0-text="Вкл все" data-status-1-text="Выкл все">Выкл все</a>
                                            <div class="clearfix"></div>
                                            @foreach ($regions as $region)
                                                <x-adminlte-card title="{!! $region !!}" collapsible="collapsed" class="history-card">
                                                    <x-slot name="toolsSlot">
                                                        <a href="javascript:void(0)" class="btn-toggle-region" data-region="{!! $region !!}" data-status="1" data-status-0-text="Вкл" data-status-1-text="Выкл">Выкл</a>
                                                    </x-slot>
                                                    @foreach ($countries[$region] as $id => $name)
                                                        <div class="form-check">
                                                            <input type="checkbox" name="country_id" class="chk-country-id" data-region="{!! $region !!}" value="{!! $id !!}" checked />
                                                            {!! $name !!}
                                                        </div>
                                                    @endforeach
                                                </x-adminlte-card>
                                            @endforeach
                                            <hr>
                                        </div>
                                    </div>
                                    <div class="row my-2">
                                        <div class="col-12">
                                            <label>Статус</label>
                                            @foreach (config('parser.client_statuses') as $code => $name)
                                                <div class="form-check">
                                                    <input type="checkbox" name="status" value="{!! $code !!}" checked />
                                                    {!! $name !!}
                                                </div>
                                            @endforeach
                                            <hr>
                                        </div>
                                    </div>
                                    <div class="row my-2">
                                        <div class="col-12">
                                            <label>Период добавления</label>
                                            @php
                                                $config = [
                                                    "startDate" => "js:moment().subtract(30, 'days')",
                                                    "endDate" => "js:moment()",
                                                    "locale" => ["format" => "DD/MM/YYYY"],
                                                ];
                                            @endphp
                                            <x-adminlte-date-range name="date_range" :config="$config" enable-default-ranges="Last 30 Days">
                                                <x-slot name="prependSlot">
                                                    <div class="input-group-text text-primary">
                                                        <i class="fas fa-lg fa-calendar-alt"></i>
                                                    </div>
                                                </x-slot>
                                            </x-adminlte-date-range>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <style>
        .dt-buttons { float: left; }
        .dataTables_info { float: left; }
        .dataTables_length { float: right; margin-top: 10px; }
        .history-card .card-header h3 { cursor: pointer; }
    </style>
@endsection

@push('js')
    <script>
        $(function() {
            //https://stackoverflow.com/questions/32692618/how-to-export-all-rows-from-datatables-using-ajax
            /* For Export Buttons available inside jquery-datatable "server side processing" - Start
            - due to "server side processing" jquery datatble doesn't support all data to be exported
            - below function makes the datatable to export all records when "server side processing" is on */

            function newexportaction(e, dt, button, config) {
                var self = this;
                var oldStart = dt.settings()[0]._iDisplayStart;
                dt.one('preXhr', function (e, s, data) {
                    // Just this once, load all data from the server...
                    data.start = 0;
                    data.length = 2147483647;
                    dt.one('preDraw', function (e, settings) {
                        // Call the original action function
                        if (button[0].className.indexOf('buttons-copy') >= 0) {
                            $.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
                        } else if (button[0].className.indexOf('buttons-excel') >= 0) {
                            $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
                                $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
                                $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
                        } else if (button[0].className.indexOf('buttons-csv') >= 0) {
                            $.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
                                $.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
                                $.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
                        } else if (button[0].className.indexOf('buttons-pdf') >= 0) {
                            $.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
                                $.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
                                $.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
                        } else if (button[0].className.indexOf('buttons-print') >= 0) {
                            $.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
                        }
                        dt.one('preXhr', function (e, s, data) {
                            // DataTables thinks the first item displayed is index 0, but we're not drawing that.
                            // Set the property to what it was before exporting.
                            settings._iDisplayStart = oldStart;
                            data.start = oldStart;
                        });
                        // Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
                        setTimeout(dt.ajax.reload, 0);
                        // Prevent rendering of the full data to the DOM
                        return false;
                    });
                });
                // Requery the server with the new one-time export settings
                dt.ajax.reload();
            };
            //For Export Buttons available inside jquery-datatable "server side processing" - End

            var dataTable = $('#tbl-items').DataTable({
                processing: true,
                serverSide: true,
                retrieve: true,
                ajax: {
                    url: '/stats/load',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: function(d) {
                        d.form = $('form#frm-filter').serializeArray();
                    }
                },
                order: [[0, 'asc']],
                dom: 'Bfrtipl',
                buttons: [{
                    "extend": 'copy',
                    "text": '<i class="fa fa-regular fa-copy"></i>',
                    "titleAttr": 'Copy',
                    "action": newexportaction,
                    "className": 'btn btn-default',
                },
                    {
                        "extend": 'excel',
                        "text": '<i class="fa fa-regular fa-file-excel"></i>',
                        "titleAttr": 'Excel',
                        "action": newexportaction,
                        "className": 'btn btn-primary',
                    },
                    {
                        "extend": 'csv',
                        "text": '<i class="fa fa-regular fa-file-csv"></i>',
                        "titleAttr": 'CSV',
                        "action": newexportaction,
                        "className": 'btn btn-default',
                    },
                    {
                        "extend": 'pdf',
                        "text": '<i class="fa fa-regular fa-file-pdf"></i>',
                        "titleAttr": 'PDF',
                        "action": newexportaction,
                        "className": 'btn btn-default',
                    },
                    {
                        "extend": 'print',
                        "text": '<i class="fa fa-regular fa-print"></i>',
                        "titleAttr": 'Print',
                        "action": newexportaction,
                        "className": 'btn btn-default',
                    }],
            });
            getTotalData();
            $("form#frm-filter :input").change(function() {
                dataTable.ajax.reload();
                getTotalData();
            });
            $(document).on('click', '.history-card .card-header h3', function () {
                $(this).closest('.history-card').find('.btn-tool').click();
            });
            $(document).on('click', '.btn-toggle-countries', function () {
                var toggleStatus = 1 - parseInt($(this).data('status'));
                $(this).data('status', toggleStatus);
                $(this).text($(this).data('status-' + toggleStatus + '-text'));
                $('.chk-country-id').each(function() {
                    $(this).prop('checked', toggleStatus);
                });
                dataTable.ajax.reload();
                getTotalData();
            });
            $(document).on('click', '.btn-toggle-region', function () {
                var toggleStatus = 1 - parseInt($(this).data('status'));
                var region = $(this).data('region');
                $(this).data('status', toggleStatus);
                $(this).text($(this).data('status-' + toggleStatus + '-text'));
                $('.chk-country-id[data-region="' + region + '"]').each(function() {
                    $(this).prop('checked', toggleStatus);
                });
                dataTable.ajax.reload();
                getTotalData();
            });
        });
        function getTotalData()
        {
            $.post(
                '/stats/total',
                {
                    _token: '{!! csrf_token() !!}',
                    form: $('form#frm-filter').serializeArray()
                }
            ).done(function(response) {
                if (response.success === true) {
                    $('#total-new').html(response.new);
                    $('#total-completed').html(response.completed);
                    $('#total-failed').html(response.failed);
                    $('#total-paused').html(response.paused);
                }
            });
        }
    </script>
@endpush