@extends('layouts.app')

@section('breadcrumb')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-primary">Аналитика</h3>
        </div>
    </div>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <strong>@lang('Whoops!')</strong> @lang('There were some problems with your input.')<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form action="{{ route('analytics.filter') }}" method="post" class="form">
                @csrf
                <div class="font-weight-bold">Фильтр</div>
                <div class="form-row">
                    <div class="form-group col-xs-12 col-sm-12 col-md-12">
                        <label>Клиент</label>
                        <select name="clients[]" id="clients" class="form-control" multiple style="width: 100%;">
                            @foreach($selectedClients as $client)
                                <option value="{{ $client->id }}" selected>{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-4">
                        <label>@lang('Responsible')</label>
                        {!! Form::select('agents[]', $agents->pluck('name', 'id'), session('agents'), ['multiple' => 'multiple', 'class' => 'form-control select2', 'style' => 'width: 100%']) !!}
                    </div>
                    <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-4">
                        <label>@lang('Responsible groups')</label>
                        {!! Form::select('groups[]', $groups->pluck('name', 'id'), session('groups'), ['multiple' => 'multiple', 'class' => 'form-control select2', 'style' => 'width: 100%']) !!}
                    </div>
                </div>

                <div class="font-weight-bold">Выбрать период</div>
                <div class="form-row">
                    <div class="form-group required col-lg-6 col-sm-12">
                        <label class="control-label" for="from">начало</label>
                        <input autocomplete="off" required="required" type="text" name="from" class="form-control datetimepicker" id="from" value="{{ old('from') }}">
                    </div>
                    <div class="form-group required col-lg-6 col-sm-12">
                        <label class="control-label" for="to">конец</label>
                        <input autocomplete="off" required="required" type="text" name="to" class="form-control datetimepicker" id="to" value="{{ old('to') }}">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Показать</button>
            </form>
        </div>
    </div>

    @if(!empty($allTickets) || !empty($allTicketsWithIdle) || !empty($solvedTickets) || !empty($byServices) || !empty($idleByHourPeriods) || !empty($solvedByHourPeriods))
        <div class="card">
            <div class="card-body">
                <div class="form-row">
                    @if(!empty($allTickets))
                        <div id="allTickets" class="col-lg-12 col-md-12" style="height: 300px;"></div>
                    @endif
                    @if(!empty($allTicketsWithIdle))
                        <div id="allTicketsWithIdle" class="col-lg-6 col-md-12" style="height: 300px;"></div>
                    @endif
                    @if(!empty($solvedTickets))
                        <div id="solvedTickets" class="col-lg-6 col-md-12" style="height: 300px;"></div>
                    @endif
                </div>
                <div class="form-row">
                    @if(!empty($byServices))
                        <div class="col-lg-12">
                            <div id="byServices" style="height: 500px;"></div>
                            <div class="text-center">по услугам</div>
                        </div>
                    @endif
                    @if(!empty($idleByHourPeriods))
                        <div class="col-lg-6 col-md-12">
                            <div id="idleByHourPeriods" style="height: 500px;"></div>
                            <div class="text-center">простой по часам</div>
                        </div>
                    @endif
                    @if(!empty($solvedByHourPeriods))
                        <div class="col-lg-6 col-md-12">
                            <div id="solvedByHourPeriods" style="height: 500px;"></div>
                            <div class="text-center">время решения по часам</div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
@endsection

@section('head')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet" />
@endsection

@push('scripts')
    <script src="{{ asset('vendor/select2/js/select2.full.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/i18n/ru.js') }}"></script>

    <script type="text/javascript">
        $(function () {
            $('select.select2').select2({
                width:"style"
            });

            $('.datetimepicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
                useCurrent: false
            });

            let from = $('#from');
            let to = $('#to');

            from.on("dp.change", function (e) {
                to.data("DateTimePicker").minDate(e.date);
            });
            to.on("dp.change", function (e) {
                from.data("DateTimePicker").maxDate(e.date);
            });

            $('#clients').select2({
                width: 'style',
                allowClear: false,
                ajax: {
                    cache: true,
                    url: '{{ route('clients.search_by_name') }}',
                    delay: 400,
                    dataType: 'json',
                    data: function (params) {
                        return { name: params.term };
                    },
                    processResults: function (data) {
                        return {
                            results: data.clients
                        };
                    }
                },
                placeholder: 'Поиск клиента',
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 3,
                dropdownAutoWidth: true,
                language: "ru",
                templateResult: formatState,
                templateSelection: formatRepoSelection,
                createTag: function (params) {
                    let term = $.trim(params.term);
                    if (term === '') {
                        return null;
                    }
                    return {
                        id: 'create_' + term,
                        text: term,
                        newTag: true // add additional parameters
                    }
                }
            });
            function formatState (result) {
                if (result.text) {
                    return result.text;
                }
                let html =
                    "<div class='select2-option-client__cont'>"+
                    "<div class='select2-option-client__name'>" + result.name + "</div>"+
                    "<div class='select2-option-client__attr'><span>Тип клиента:</span> " + result.client_type + "</div>";
                if (result.bin !== null || result.iin !== null) {
                    html+=
                        "<div class='select2-option-client__attr'><span>"+
                        (result.bin !== null ? 'БИН' : 'ИИН')+
                        ":</span> " +
                        (result.bin !== null ? result.bin : result.iin) +
                        "</div>";
                }
                if (result.contracts.length > 0) {
                    html +=
                        "<div class='select2-option-client__attr'>"+
                        "<table class='table table-bordered table-striped'>"+
                        "<thead>"+
                        "<tr>"+
                        "<th scope='col'>Лицевой счёт</th>"+
                        "<th scope='col'>Номер договора</th>"+
                        "<th scope='col'>Филиал/Группа</th>"+
                        "<th scope='col'>Адрес</th>"+
                        "<th scope='col'>Контактная информация</th>"+
                        "</tr>"+
                        "</thead>"+
                        "<tbody>";
                    let contract;
                    for (let i = 0; i < result.contracts.length; i++) {
                        contract = result.contracts[i];
                        html+=
                            "<tr>"+
                            "<td>" + contract.dognum + "</td>"+
                            "<td>" + contract.dogcode + "</td>"+
                            "<td>" + contract.filial + "</td>"+
                            "<td>" + contract.address + "</td>"+
                            "<td>" + contract.contacts + "</td>"+
                            "</tr>";
                    }
                    html+=
                        "</tbody>"+
                        "</table>"+
                        "</div>";
                }
                html +=
                    "</div>";
                return html;
            }
            function formatRepoSelection (result)
            {
                if (result.text) {
                    return result.text;
                }
                return result.name;
            }
        });
    </script>
@endpush

@push('scripts')
    <script src="{{ asset('js/amcharts4/core.js') }}"></script>
    <script src="{{ asset('js/amcharts4/charts.js') }}"></script>
    <script src="{{ asset('js/amcharts4/themes/animated.js') }}"></script>
    <script src="{{ asset('js/amcharts4/lang/ru_RU.js') }}"></script>
    <script>
        am4core.useTheme(am4themes_animated);
    </script>
@endpush

<!-- XY Charts -->
@push('scripts')
    <script>
        let createXYChart = function (elementId, items, YaxisTitle) {
            if (items.length == 0) {
                return false;
            }
            let value, date, data = [];
            for (let index in items) {
                date = new Date(items[index]['date']);
                value = items[index]['value'];
                data.push({date:date, value: value});
            }

            let chart = am4core.create(elementId, am4charts.XYChart);
            chart.data = data;

            // Create axes
            let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.dataFields.category = "date";
            // dateAxis.title.text = "период";
            dateAxis.renderer.minGridDistance = 45;

            let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
            valueAxis.dataFields.category = "value";
            valueAxis.title.text = YaxisTitle;

            // Create series
            let series = chart.series.push(new am4charts.ColumnSeries());
            series.dataFields.valueY = "value";
            series.dataFields.dateX = "date";
            series.tooltipText = "{value}";
            series.tooltip.pointerOrientation = "vertical";

            chart.cursor = new am4charts.XYCursor();
            chart.scrollbarX = new am4core.Scrollbar();

            return chart;
        };

        createXYChart("allTickets", {!! json_encode($allTickets) !!}, 'кол-во тикетов');
        createXYChart("allTicketsWithIdle", {!! json_encode($allTicketsWithIdle) !!}, 'время простоя (часы)');
        createXYChart("solvedTickets", {!! json_encode($solvedTickets) !!}, 'время решения (часы)');
    </script>
@endpush

<!-- Pie Charts -->
@push('scripts')
    <script>
        let createPieChart = function (elementId, items) {
            if (items.length == 0) {
                return false;
            }
            let chart = am4core.create(elementId, am4charts.PieChart);
            chart.data = items;

            // Add a legend
            chart.legend = new am4charts.Legend();
            chart.legend.position = "right";

            // Let's cut a hole in our Pie chart the size of 40% the radius
            // chart.innerRadius = am4core.percent(40);

            let pieSeries = chart.series.push(new am4charts.PieSeries());
            pieSeries.dataFields.value = "count";
            pieSeries.dataFields.category = "label";

            // Changing legend value
            chart.legend.valueLabels.template.text = "{value.value}";

            // Put a thick white border around each Slice
            pieSeries.slices.template.stroke = am4core.color("#ffffff");
            pieSeries.slices.template.strokeWidth = 1;
            pieSeries.slices.template.strokeOpacity = 1;

            pieSeries.labels.template.disabled = true;
            pieSeries.ticks.template.disabled = true;

            return chart;
        };

        createPieChart("byServices", {!! json_encode($byServices) !!});
        createPieChart("idleByHourPeriods", {!! json_encode($idleByHourPeriods) !!});
        createPieChart("solvedByHourPeriods", {!! json_encode($solvedByHourPeriods) !!});
    </script>
@endpush