@extends('client.layouts.app')

@section('page_title', 'Dashboard')

@section('content_header_title')
{{ __('admin.global.home') }} <small>some statistics</small>
@endsection

@section('content')
<div class="dashboard">
    <div class="container-fluid">
        @if (Auth::user()->isSuperAdmin())
        <h1 class="page-title">{{ __('client.navigation.dashboard') }}</h1>
        <div class="row dashboard__blocks-wrapper">
            @foreach($executionRequests as $request)
            <div class="col-xs-12 col-lg-6 dashboard__block dashboard__block--request">
                <div class="row dashboard__inner-block h-100 mx-0">
                    <div class="col-xs-12 col-md-12 dashboard__block-header d-flex flex-column flex-md-row justify-content-md-between pl-0 pr-0">
                        <h2 class="dashboard__block-type-title">{{__('client.global.execution_time_request')}}</h2>
                        <div class="dashboard__block-cta-wrapper">
                            <a class="dashboard__block-cta-item dashboard__block-cta-item--has-separator" href="{{route('client.processes.edit', ['process' => $request->process])}}">{{ __('client.global.edit') }}</a>
                            <a class="dashboard__block-cta-item" href="{{ route('client.processes') }}">{{ __('client.global.all_processes') }}</a>
                        </div>
                    </div>
                    <div class="col-xs-12 col-md-8 has-border pl-0 pr-0 pb-3 pr-md-3 pb-md-0">
                        <form method="POST" action="{{route('client.processes.confirm_execution_request', ['request' => $request])}}" class="form form--dashboard-request">
                            @csrf
                            <div class="form-group mb-4 form-group--id">
                                <label class="form__label form__label--required mb-0">{{__('client.global.process_id')}}</label>
                                <span class="form__value">
                                    <strong>{{$request->process->code}}</strong>
                                </span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">{{__('client.global.process_name')}}</span>
                                <span class="form__value">{{$request->process->name}}</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">{{__('client.global.client_name')}}</span>
                                <span class="form__value">{{$request->process->client->name}}</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">{{__('client.global.requested_time')}}</span>
                                <span class="form__value">{{date(__('client.dates.global_format_short_time'), strtotime($request->execution_date))}}</span>
                            </div>
                            <div class="form-group mb-0 mt-5">
                                <button type="submit" class="btn btn--blue d-flex justify-content-center align-items-center">
                                    {{ __('client.buttons.confirm') }}
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-xs-12 col-md-4 pl-0 pr-0 pt-3 pl-md-3 pt-md-0">
                        <form method="POST" action="{{route('client.processes.preset_execution_request', ['request' => $request])}}" class="form form--dashboard-request d-flex flex-column justify-content-between h-100">
                            @csrf
                            <div class="form-group mb-md-0 px-0">
                                <div class="h4h-datepicker h4h-datepicker--dashboard position-relative">
                                    <input type="text" name="execution_date" class="form-control" id="etr-1" value="{{date(__('client.dates.global_format_short_time'), strtotime($request->execution_date))}}" placeholder="{{__('client.global.datetime')}}"/>
                                </div>
                            </div>
                            <div class="form-group mb-0 px-0">
                                <button type="submit" class="btn btn--lite-blue btn--full-width d-flex justify-content-center align-items-center">
                                    {{ __('client.buttons.set') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach

            <div class="col-xs-12 col-lg-6 dashboard__block dashboard__block--report">
                <div class="dashboard__inner-block h-100 d-flex flex-column justify-content-between">
                    <div class="dashboard__block-header d-flex flex-column flex-lg-row">
                        <h2 class="dashboard__block-type-title">{{__('client.global.report')}}</h2>
                    </div>
                    <form action="{{route('client.processes.upload_report')}}" class="form form--dashboard-report" id="report-upload" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group form-group--id">
                            <label for="process-code" class="form__label form__label--required">ID</label>
                            <input id="process-code" type="text" class="col-3 form-control d-inline-flex" name="process_code">
                        </div>
                        <div class="form-group mb-0">
                            <span class="form__label">{{__('client.global.process_name')}}</span>
                            <span class="form__value" id="process-name"></span>
                        </div>
                        <div class="form-group mb-4">
                            <span class="form__label">{{__('client.global.client')}}</span>
                            <span class="form__value" id="client-name"></span>
                        </div>
                        <div class="form-group d-flex align-items-center">
                                                        <label for="file-upload" class="label-file-upload">
                                <span>{{__('client.buttons.browse')}}</span>
                                <input type="file" value="{{old($nameField)}}" name="{{$nameField}}" id="file-upload" class="input-file-upload" accept=".xls,.xlsx"/>
                            </label>
                            <span class="uploadFileName"></span>
                            @error($nameField)
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-12 d-flex">
                                <button type="submit" class="btn btn--dark-red d-flex justify-content-center align-items-center">
                                    {{ __('client.buttons.save') }}
                                </button>
                                <button type="button" onclick="" class="btn btn--cancel d-flex justify-content-center align-items-center">
                                    {{ __('client.buttons.cancel') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endif

        @if (Auth::user()->isClientAdmin() || Auth::user()->isClient())
        <div class="row filters filters--dashboard">
            <form action="{{route('client.dashboard')}}" method="post" class="col-12 form form-inline form--filters align-items-start align-items-lg-end flex-column flex-lg-row">
                @csrf
                @if (Auth::user()->isClient())
                <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                    <select class="form-control selectpicker add-process-to-dashboard" id="process_id" name="process_id">
                        <option value="">{{__('client.global.add_process')}}</option>
                        @foreach($allClientProcesses as $process)
                        <option value="{{$process->id}}">{{$process->code }} {{$process->name}}</option>
                        @endforeach
                    </select>
                </div>
                @endif
                @if (Auth::user()->isClientAdmin())
                    <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                        <label for="owners" class="col-form-label">{{__('client.labels.owner')}}</label>
                        <select class="form-control selectpicker" id="owners" name="filter_owners">
                            <option value="">{{__('client.global.all')}}</option>
                            @foreach($owners as $owner)
                                <option value="{{$owner->id}}" {{ $input['filter_owners'] == $owner->id ? 'selected' : '' }}>{{$owner->name}}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                    <select class="form-control selectpicker" id="periods" name="filter_periods">
                        <option value="today" {{$input['filter_periods'] == 'today' ? 'selected' : '' }}>{{__('client.dates.today')}}</option>
                        <option value="yesterday" {{ $input['filter_periods'] == 'yesterday' ? 'selected' : '' }}>{{__('client.dates.yesterday')}}</option>
                        <option value="thisWeek" {{ $input['filter_periods'] == 'thisWeek' ? 'selected' : '' }}>{{__('client.dates.this_week')}}</option>
                        <option value="lastWeek" {{ $input['filter_periods'] == 'lastWeek' ? 'selected' : '' }}>{{__('client.dates.last_week')}}</option>
                        <option value="thisMonth" {{ $input['filter_periods'] == 'thisMonth' ? 'selected' : '' }}>{{__('client.dates.this_month')}}</option>
                        <option value="lastMonth" {{ $input['filter_periods'] == 'lastMonth' ? 'selected' : '' }}>{{__('client.dates.last_month')}}</option>
                        <option value="thisYear" {{ $input['filter_periods'] == 'thisYear' ? 'selected' : '' }}>{{__('client.dates.this_year')}}</option>
                        <option value="customRange" {{ $input['filter_periods'] == 'customRange' ? 'selected' : '' }}>{{__('client.dates.custom_range')}}</option>
                    </select>
                </div>

                <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                    <label for="fromDatepicker" class="col-form-label">{{__('client.global.date_from')}}</label>
                    <div class="h4h-datepicker position-relative" id="fromDatepickerParent">
                        <input type="text" style="width: 230px;" class="form-control" name="filter_date_from" id="fromDatepicker" value="{{ $input['filter_date_from'] }}"/>
                    </div>
                </div>
                <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                    <label for="toDatepicker" class="col-form-label">{{__('client.global.date_to')}}</label>
                    <div class="h4h-datepicker position-relative" id="toDatepickerParent">
                        <input type="text" style="width: 230px;" class="form-control" name="filter_date_to" id="toDatepicker" value="{{ $input['filter_date_to'] }}"/>
                    </div>
                </div>

                <div class="form-group d-flex align-items-start pb-2 pb-lg-5">
                    <button class="btn btn--with-content w-auto" type="submit">
                        <img src="{{ asset('img/filters_submit_btn_background.svg')}}" alt="" />
                    </button>

                    <button class="btn btn--with-content btn--form-clear w-auto" type="button">
                        <img src="{{ asset('img/filters_clear_btn_background.svg')}}" alt="" />
                    </button>
                </div>
                <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3 problem-contact">
                    <div class="h4h position-relative">
                        <button type="button" class="btn btn--blue d-flex justify-content-center align-items-center any-problem" onclick="location.href='mailto:{{ __('client.email.any_problem_email') }}';">
                            {{ __('client.buttons.any_problem') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>

        @foreach($processes as $process)
        <div class="row dashboard__blocks-wrapper dashboard__blocks-wrapper--with-data">
            <div class="col-12 dashboard__block dashboard__block--process-data" data-pie-ready="0" data-process-id="{{$process->id}}">
                <div class="dashboard__inner-block row d-flex flex-column flex-lg-row">
                    @if (Auth::user()->isClient())
                    <div class="col-xs-12 col-lg-12 dashboard__block-delete-cta-wrapper position-relative d-flex justify-content-end">
                        <a href="{{route('client.dashboard.remove_process', ['process' => $process])}}" style="z-index: 10;" class="dashboard__block-delete-cta position-absolute">
                            <!--<img src="{{ asset('img/close_icon.svg')}}" alt="" />-->
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                    @endif
                    <div class="col-xs-12 col-lg-12 dashboard__block-header">
                        <h2 class="dashboard__block-process-id">{{$process->code}} - {{$process->name}}</h2>
                        <h5 class="dashboard__block-process-commands-count">0 {{__('client.global.commands')}}</h5>
                    </div>
                    <div class="col-xs-12 col-lg-5 dashboard__block-chart-data">
                        <canvas id="chart-process-{{$process->id}}" class="chart-canvas"></canvas>
                        <div class="chart-legend-wrapper"></div>
                    </div>
                    <div class="col-xs-12 col-lg-7 dashboard__block-datatable">
                        <div class="table-responsive">
                            <table class="table table--chart-process-data" id="chart-process-table-{{$process->id}}" data-process-id="{{$process->id}}">
                                <thead>
                                    <tr>
                                        <th data-name="created_at">{{__('client.global.date')}}</th>
                                        <th data-name="name">{{__('client.global.statement')}}</th>
                                        <th data-name="status">{{__('client.global.status')}}</th>
                                        <th data-name="reason">{{__('client.global.message')}}</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <div class="dashboard__block-download-report d-none justify-content-end">
                            <a href="{{route('client.processes.download_executions_report', ['process' => $process])}}/?date_from={{$input['filter_date_from']}}&date_to={{$input['filter_date_to']}}" class="download-cta">
                                <img src="{{ asset('img/zip_icon.svg')}}" alt="" />
                                {{__('client.global.download_report')}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        @endif

    </div>
</div>

@endsection

@section('dashboard-scripts')
    <script type="text/javascript" charset="utf8" src="{{ asset('vendor/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript">
        var table;
        var tables = [];
        var filterSelectTimePeriods = $('#periods');

        var initFilterDateRangePickerWithGivenValues = function(valueFrom = null, valueTo = null) {
            var filterFromDatepicker = $('#fromDatepicker');
            var filterToDatepicker = $('#toDatepicker');

            filterFromDatepicker.datetimepicker({
                format: '{{__('client.dates.global_format')}}',
                parentID:'#fromDatepickerParent',
                onShow:function( ct ){
                    this.setOptions({
                        maxDate:$('#toDatepicker').val()?$('#toDatepicker').val():false,
                        formatDate:'{{__('client.dates.global_format')}}',
                    })
                },
                timepicker:false,
                value: valueFrom
            });

            filterToDatepicker.datetimepicker({
                format: '{{__('client.dates.global_format')}}',
                parentID:'#toDatepickerParent',
                onShow:function( ct ){
                    this.setOptions({
                        minDate:$('#fromDatepicker').val()?$('#fromDatepicker').val():false,
                        formatDate:'{{__('client.dates.global_format')}}',
                    })
                },
                timepicker:false,
                value: valueTo
            });
        }

        $(function() {
            // Init all DateTimePickers on Admin Dashboard Blocks
            $('.h4h-datepicker--dashboard input').each(function () {
                $(this).datetimepicker({
                    format: '{{__('client.dates.global_format_short_time')}}',
                    validateOnBlur:true,
                    parentID: $(this).parent(),
                    step: 5
                });
            });

            // Datatables

            $('.table--chart-process-data').each(function() {
                var i = 0;
                var self = $(this);

                var columnDefs = [
                    {
                        targets: i++,
                        data: 'created_at',
                        name: 'created_at',
                        searchable: false,
                    },
                    {
                        targets: i++,
                        data: 'name',
                        name: 'name',
                        searchable: false,
                    },
                    {
                        targets: i++,
                        data: 'status',
                        name: 'status',
                        searchable: false,
                    },
                    {
                        targets: i++,
                        data: 'reason',
                        name: 'reason',
                        searchable: false,
                    }
                ];
                var options = {
                    searching: true,
                    info: false,
                    lengthChange: false,
                    paging: true,
                    pageLength: 5,
                    processing: true,
                    serverSide: true,
                    sDom: 'lrtip',
                    ajax: "{{ route('client.processes.executions') }}/" + $(this).data('process-id') + '?date_from={{$input['filter_date_from']}}&date_to={{$input['filter_date_to']}}',
                    columnDefs: columnDefs,
                    language: {
                        'paginate': {
                        'previous': '<i class="fas fa-chevron-left"></i>',
                        'next': '<i class="fas fa-chevron-right"></i>'
                        }
                    },
                    fnInfoCallback: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
                        return iStart +" - "+ iEnd + " of " + iTotal;
                    },
                    drawCallback: function( settings ) {
                        drawPie(self, settings);
                        var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
                        pagination.toggle(this.api().page.info().pages > 1);
                    }
                };
                table = $(this).DataTable(options);
                tables.push(table);
            });

            function drawPie(self, settings) {
                if (self.parents('.dashboard__block--process-data').data('pie-ready') == 1) return;
                self.parents('.dashboard__block--process-data').data('pie-ready', 1);
                var ctx = self.parents('.dashboard__block--process-data').find('.chart-canvas');
                var totalCommands = self.parents('.dashboard__block--process-data').find('.dashboard__block-process-commands-count');
                var downloadReport = self.parents('.dashboard__block--process-data').find('.dashboard__block-download-report');
                var chartLegendContainer = self.parents('.dashboard__block--process-data').find('.chart-legend-wrapper');
                //var dataFromTheTable = settings.aoData;
                var chartColorsCollection = ['#B8124A','#AA5B5B','#F2B155','#AB8465','#F27B53','#DE567A',
                    '#C5007D','#F35959','#A5548C'];
                var dataFromTheTable;
                $.ajax({
                    dataType: 'json',
                    type: 'GET',
                    data: {'process_id':self.parents('.dashboard__block--process-data').data('process-id'),'date_from':'{{$input['filter_date_from']}}','date_to':'{{$input['filter_date_to']}}'},
                    url: '{{route('client.processes.executions_pie')}}',
                    success: function(resp) {
                        dataFromTheTable = resp.data;
                        var labels = dataFromTheTable.map(function(item) {
                            return `${item.status} ${item.label} (${item.total})`;
                        });

                        var backgroundColor = dataFromTheTable.map(function(item) {
                            return item.status === 'OK' ? '#00A489' : chartColorsCollection[Math.floor(Math.random() * chartColorsCollection.length)];
                        });
                        var totals = dataFromTheTable.map(function(item) {
                            return item.total;
                        });

                        totalCommands.html(resp.total + ' {{__('client.global.commands')}}')
                        if (resp.total > 0) {
                            downloadReport.addClass('d-flex').removeClass('d-none');
                        } else {
                            downloadReport.addClass('d-none').removeClass('d-flex');
                        }

                        var myChart = new Chart(ctx, {
                            type: 'pie',
                            data: {
                                labels,
                                datasets: [{
                                    data: totals,
                                    backgroundColor
                                }],
                            },
                            options: {
                                legend: false
                            }
                        });

                        chartLegendContainer.html(myChart.generateLegend());
                    }
                });

            }

            // Filter DateTimePickers Init
            initFilterDateRangePickerWithGivenValues(new Date('{{date('Y-m-d', strtotime($input['filter_date_from']))}}'), new Date('{{date('Y-m-d', strtotime($input['filter_date_to']))}}'));

            // Filter Select Change Event Logic to prefill Datepicker
            filterSelectTimePeriods.change(function(){
                var value = $(this).val();

                switch(value){
                    case 'today' :
                        var now = moment();
                        var today = now.toDate();
                        initFilterDateRangePickerWithGivenValues(today, today);
                        break;
                    case 'yesterday' :
                        var now = moment();
                        var yesterday = now.subtract(1, 'day').toDate();

                        initFilterDateRangePickerWithGivenValues(yesterday, yesterday);
                        break;
                    case 'thisWeek' :
                        var now = moment();
                        var firstDayOfWeek = now.startOf('isoWeek').toDate();
                        var lastDayOfWeek = now.endOf('isoWeek').toDate();
                        initFilterDateRangePickerWithGivenValues(firstDayOfWeek, lastDayOfWeek);
                        break;
                    case 'lastWeek' :
                        var lastWeekNow = moment().subtract(1, 'weeks');
                        var firstDayOfLastWeek = lastWeekNow.startOf('isoWeek').toDate();
                        var lastDayOfLastWeek = lastWeekNow.endOf('isoWeek').toDate();
                        initFilterDateRangePickerWithGivenValues(firstDayOfLastWeek, lastDayOfLastWeek);
                        break;
                    case 'thisMonth' :
                        var now = moment();
                        var firstDayOfMonth = now.startOf('month').toDate();
                        var lastDayOfMonth = now.endOf('month').toDate();
                        initFilterDateRangePickerWithGivenValues(firstDayOfMonth, lastDayOfMonth);
                        break;
                    case 'lastMonth' :
                        var lastMonthNow = moment().subtract(1, 'month');
                        var firstDayOfLastMonth = lastMonthNow.startOf('month').toDate();
                        var lastDayOfLastMonth = lastMonthNow.endOf('month').toDate();
                        initFilterDateRangePickerWithGivenValues(firstDayOfLastMonth, lastDayOfLastMonth);
                        break;
                    case 'thisYear' :
                        var now = moment();
                        var firstDayOfYear = now.startOf('year').toDate();
                        var lastDayOfYear = now.endOf('year').toDate();
                        initFilterDateRangePickerWithGivenValues(firstDayOfYear, lastDayOfYear);
                        break;
                    default :
                        initFilterDateRangePickerWithGivenValues(new Date(), new Date());
                        break;

                }
            })

            /*$('form.form--filters').submit(function(e) {
                e.preventDefault();
                var keyword = $('#keyword').val();
                var processId = $('#process-id').val();
                var status = $('#status').val();
                var dateRange = $('#fromDatepicker').val() + '-' + $('#toDatepicker').val();
                tables.forEach(function(t, i) {
                    t.search(keyword);
                    t.columns(0).search(processId);
                    t.columns(4).search(dateRange);
                    t.columns(8).search(status);
                    t.draw();
                    console.log(t);
                });
            });*/

        });

        var delayInput;
        // Find process
        $('#process-code').on('keyup', function() {
            if (delayInput) clearTimeout(delayInput);

            delayInput = setTimeout(function() {
                $.ajax({
                    dataType: 'json',
                    type: 'GET',
                    data: {'process_code':$('#process-code').val()},
                    url: '{{route('client.processes.search_by_id')}}',
                    success: function(resp) {
                        $('#client-name').html(resp.client ? resp.client : '-');
                        $('#process-name').html(resp.code ? resp.code + ' ' + resp.name : '-');
                    }
                });
            }, 500);
        });

        $('.add-process-to-dashboard').change(function(event) {
            if ($(this).children("option:selected").val() == '') return;
            window.location = '{{route('client.dashboard.add_process')}}/' + $(this).children("option:selected").val();
        });

        $('#toDatepicker, #fromDatepicker').click(function() {
            $("#periods").val("thisMonth");
            $("#periods").selectpicker('refresh');
            //$("select[name=selValue] option[value='1']").text();
        });
    </script>
@stop