@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">
            <!--<div class="col-xs-12 col-lg-6 dashboard__block dashboard__block--request">
                <div class="dashboard__inner-block h-100">
                    <div class="dashboard__block-header d-flex flex-column flex-md-row justify-content-md-between">
                        <h2 class="dashboard__block-type-title">Execution Time Request</h2>
                        <div class="dashboard__block-cta-wrapper">
                            <a class="dashboard__block-cta-item dashboard__block-cta-item--has-separator" href="#">{{ __('client.global.edit') }}</a>
                            <a class="dashboard__block-cta-item" href="{{ route('client.processes') }}">{{ __('client.global.all_processes') }}</a>
                        </div>
                    </div>
                    <form action="" class="d-flex flex-column flex-md-row form form--dashboard-request">
                        <div class="col-xs-12 col-md-8 has-border pl-0 pr-0 pb-3 pr-md-3 pb-md-0">
                            <div class="form-group mb-4 form-group--id">
                                <label class="form__label form__label--required mb-0">ID</label>
                                <span class="form__value">
                                    <strong>ACME20023455</strong>
                                </span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Process Name:</span>
                                <span class="form__value">Lorem Ipsum</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Client:</span>
                                <span class="form__value">Acme International s.r.l</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Requested Time:</span>
                                <span class="form__value">17.07.2020 16:30</span>
                            </div>
                            <div class="form-group mb-0 mt-5">
                                <button type="submit" class="btn btn--blue btn--full-width d-flex justify-content-center align-items-center">
                                    {{ __('client.buttons.confirm') }}
                                </button>
                            </div>
                        </div>
                        <div class="col-xs-12 d-flex flex-column justify-content-between col-md-4 pl-0 pr-0 pt-3 pl-md-3 pt-md-0">
                            <div class="form-group mb-md-0">
                                <div class="h4h-datepicker h4h-datepicker--dashboard position-relative">
                                    <input type="text" class="form-control" id="etr-1" placeholder="Date And Time"/>
                                </div>
                            </div>
                            <div class="form-group mb-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>
                        </div>
                    </form>
                </div>
            </div>-->

            <!--<div class="col-xs-12 col-lg-6 dashboard__block dashboard__block--request">
                <div class="dashboard__inner-block h-100">
                    <div class="dashboard__block-header d-flex flex-column flex-md-row justify-content-md-between">
                        <h2 class="dashboard__block-type-title">Execution Time Request</h2>
                        <div class="dashboard__block-cta-wrapper">
                            <a class="dashboard__block-cta-item dashboard__block-cta-item--has-separator" href="#">{{ __('client.global.edit') }}</a>
                            <a class="dashboard__block-cta-item" href="{{ route('client.processes') }}">{{ __('client.global.all_processes') }}</a>
                        </div>
                    </div>
                    <form action="" class="d-flex flex-column flex-md-row form form--dashboard-request">
                        <div class="col-xs-12 col-md-8 has-border pl-0 pr-0 pb-3 pr-md-3 pb-md-0">
                            <div class="form-group mb-4 form-group--id">
                                <label class="form__label form__label--required mb-0">ID</label>
                                <span class="form__value">
                                    <strong>ACME20023455</strong>
                                </span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Process Name:</span>
                                <span class="form__value">Lorem Ipsum</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Client:</span>
                                <span class="form__value">Acme International s.r.l</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Requested Time:</span>
                                <span class="form__value">17.07.2020 16:30</span>
                            </div>
                            <div class="form-group mb-0 mt-5">
                                <button type="submit" class="btn btn--blue btn--full-width d-flex justify-content-center align-items-center">
                                    {{ __('client.buttons.confirm') }}
                                </button>
                            </div>
                        </div>
                        <div class="col-xs-12 d-flex flex-column justify-content-between col-md-4 pl-0 pr-0 pt-3 pl-md-3 pt-md-0">
                            <div class="form-group mb-md-0">
                                <div class="h4h-datepicker h4h-datepicker--dashboard position-relative">
                                    <input type="text" class="form-control" id="etr-2" placeholder="Date And Time"/>
                                </div>
                            </div>
                            <div class="form-group mb-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>
                        </div>
                    </form>
                </div>
            </div>-->

            <!--<div class="col-xs-12 col-lg-6 dashboard__block dashboard__block--request">
                <div class="dashboard__inner-block h-100">
                    <div class="dashboard__block-header d-flex flex-column flex-md-row justify-content-md-between">
                        <h2 class="dashboard__block-type-title">Execution Time Request</h2>
                        <div class="dashboard__block-cta-wrapper">
                            <a class="dashboard__block-cta-item dashboard__block-cta-item--has-separator" href="#">{{ __('client.global.edit') }}</a>
                            <a class="dashboard__block-cta-item" href="{{ route('client.processes') }}">{{ __('client.global.all_processes') }}</a>
                        </div>
                    </div>
                    <form action="" class="d-flex flex-column flex-md-row form form--dashboard-request">
                        <div class="col-xs-12 col-md-8 has-border pl-0 pr-0 pb-3 pr-md-3 pb-md-0">
                            <div class="form-group mb-4 form-group--id">
                                <label class="form__label form__label--required mb-0">ID</label>
                                <span class="form__value">
                                    <strong>ACME20023455</strong>
                                </span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Process Name:</span>
                                <span class="form__value">Lorem Ipsum</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Client:</span>
                                <span class="form__value">Acme International s.r.l</span>
                            </div>
                            <div class="form-group mb-0">
                                <span class="form__label">Requested Time:</span>
                                <span class="form__value">17.07.2020 16:30</span>
                            </div>
                            <div class="form-group mb-0 mt-5">
                                <button type="submit" class="btn btn--blue btn--full-width d-flex justify-content-center align-items-center">
                                    {{ __('client.buttons.confirm') }}
                                </button>
                            </div>
                        </div>
                        <div class="col-xs-12 d-flex flex-column justify-content-between col-md-4 pl-0 pr-0 pt-3 pl-md-3 pt-md-0">
                            <div class="form-group mb-md-0">
                                <div class="h4h-datepicker h4h-datepicker--dashboard position-relative">
                                    <input type="text" class="form-control" id="etr-3" placeholder="Date And Time"/>
                                </div>
                            </div>
                            <div class="form-group mb-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>
                        </div>
                    </form>
                </div>
            </div>-->

            <div class="col-xs-12 col-lg-6 dashboard__block dashboard__block--report">
                <div class="dashboard__inner-block h-100">
                    <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-0">
                            <span class="form__label">{{__('client.global.client')}}</span>
                            <span class="form__value" id="client-name"></span>
                        </div>
                        <!--<div class="form-group">
                            <span class="form__label">Requested Time:</span>
                            <span class="form__value">17.07.2020 16:30</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">
                            <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())
        <div class="row filters filters--dashboard">
            <form action="" class="col-12 form form-inline form--filters align-items-start align-items-lg-end flex-column flex-lg-row">
                <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="">Any</option>
                        <option value="Maria Brown">Maria Brown</option>
                        <option value="John Smith">John Smith</option>
                    </select>
                </div>
                <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">Today</option>
                        <option value="yesterday">Yesterday</option>
                        <option value="thisWeek">This Week</option>
                        <option value="lastWeek">Last Week</option>
                        <option value="thisMonth">This Month</option>
                        <option value="lastMonth">Last Month</option>
                        <option value="thisYear">This Year</option>
                        <option value="customRange">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" class="form-control" id="fromDatepicker" />
                    </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" class="form-control" id="toDatepicker" />
                    </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>
            </form>
        </div>

        <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">
                <div class="dashboard__inner-block row d-flex flex-column flex-lg-row">
                    <div class="col-xs-12 col-lg-12 dashboard__block-header">
                        <!--<h2 class="dashboard__block-process-id">ACM000234 - Lorem Ipsum</h2>-->
                        <h5 class="dashboard__block-process-commands-count">0 commands</h5>
                    </div>
                    <div class="col-xs-12 col-lg-5 dashboard__block-chart-data">
                        <canvas id="chart-process-1" class="chart-canvas"></canvas>
                        <div class="chart-legend-wrapper"></div>
                    </div>
                    <div class="col-xs-12 col-lg-7 dashboard__block-datatable d-flex flex-column justify-content-between">
                        <div class="table-responsive">
                            <table class="table table--chart-process-data" id="chart-process-table-1">
                                <thead>
                                    <tr>
                                        <th data-name="updated_at">{{__('client.global.datetime')}}</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-flex justify-content-end">
                            <a href="#" class="download-cta">
                                <img src="{{ asset('img/zip_icon.svg')}}" alt="" />
                                {{__('client.global.download_report')}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if (Auth::user()->isClient())
        <div class="row filters filters--dashboard">
            <form action="" class="col-12 form form-inline form--filters align-items-start align-items-lg-end flex-column flex-lg-row">
                <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                    <button class="btn btn--dark-red-inverted d-flex justify-content-center align-items-center">Add Process</button>
                </div>
                <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">Today</option>
                        <option value="yesterday">Yesterday</option>
                        <option value="thisWeek">This Week</option>
                        <option value="lastWeek">Last Week</option>
                        <option value="thisMonth">This Month</option>
                        <option value="lastMonth">Last Month</option>
                        <option value="thisYear">This Year</option>
                        <option value="customRange">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" class="form-control" id="fromDatepicker" />
                    </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" class="form-control" id="toDatepicker" />
                    </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>
            </form>
        </div>

        <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">
                <div class="dashboard__inner-block row d-flex flex-column flex-lg-row">
                    <div class="col-xs-12 col-lg-12 dashboard__block-delete-cta-wrapper position-relative d-flex justify-content-end">
                        <a href="#" class="dashboard__block-delete-cta position-absolute">
                            <img src="{{ asset('img/close_icon.svg')}}" alt="" />
                        </a>
                    </div>
                    <div class="col-xs-12 col-lg-12 dashboard__block-header">
                        <!--<h2 class="dashboard__block-process-id">ACM000234 - Lorem Ipsum</h2>-->
                        <h5 class="dashboard__block-process-commands-count">0 commands</h5>
                    </div>
                    <div class="col-xs-12 col-lg-5 dashboard__block-chart-data">
                        <canvas id="chart-process-1" class="chart-canvas"></canvas>
                        <div class="chart-legend-wrapper"></div>
                    </div>
                    <div class="col-xs-12 col-lg-7 dashboard__block-datatable d-flex flex-column justify-content-between">
                        <div class="table-responsive">
                            <table class="table table--chart-process-data" id="chart-process-table-1">
                                <thead>
                                    <tr>
                                        <th data-name="updated_at">{{__('client.global.datetime')}}</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-flex justify-content-end">
                            <a href="#" class="download-cta">
                                <img src="{{ asset('img/zip_icon.svg')}}" alt="" />
                                {{__('client.global.download_report')}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
<!--<div class="clients">
    <div class="container-fluid">
        <div class="table-responsive">
            <table id="clients" class="table table--administrators">
                <thead>
                <tr class="table__header">
                    <th class="filtering"></th>
                    <th class="filtering"></th>
                    <th class="filtering"></th>
                    <th class="filtering"></th>
                </tr>
                <tr class="enable-sorting table__header">
                    <th data-name="client">{{__('client.global.company_name')}}</th>
                    <th data-name="process">{{__('client.global.process_name')}}</th>
                    <th data-name="name">{{__('client.global.title')}}</th>
                    <th data-name="status">{{__('client.global.status')}}</th>
                    <th data-name="reason">{{__('client.global.reason')}}</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </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 filterSelectTimePeriods = $('#periods');

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

            filterFromDatepicker.datetimepicker({
                format: 'm/d/Y',
                parentID:'#fromDatepickerParent',
                onShow:function( ct ){
                    this.setOptions({
                        maxDate:$('#toDatepicker').val()?$('#toDatepicker').val():false,
                        formatDate:'m/d/Y',
                    })
                },
                onChangeDateTime:function(dp,$input){
                    filterSelectTimePeriods.val('customRange');
                    filterSelectTimePeriods.selectpicker('refresh');
                },
                timepicker:false,
                value: valueFrom
            });

            filterToDatepicker.datetimepicker({
                format: 'm/d/Y',
                parentID:'#toDatepickerParent',
                onShow:function( ct ){
                    this.setOptions({
                        minDate:$('#fromDatepicker').val()?$('#fromDatepicker').val():false,
                        formatDate:'m/d/Y',
                    })
                },
                onChangeDateTime:function(dp,$input){
                    filterSelectTimePeriods.val('customRange');
                    filterSelectTimePeriods.selectpicker('refresh');
                },
                timepicker:false,
                value: valueTo
            });
        }

        $(function() {
            // Init all DateTimePickers on Admin Dashboard Blocks
            $('.h4h-datepicker--dashboard input').each(function () {
                $(this).datetimepicker({
                    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: 'updated_at',
                        name: 'updated_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') }}",
                    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);
                    }
                };
                table = $(this).DataTable(options);
            });

            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 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_code':''},
                    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')}}')

                        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(), new Date());

            // 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();
            //     table.search(keyword);
            //     table.columns(0).search(processId);
            //     table.columns(4).search(dateRange);
            //     table.columns(8).search(status);
            //     table.draw();
            // });

        });

        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);
        });
    </script>
    <script type="text/javascript" charset="utf8" src="{{ asset('vendor/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <!--<script>
        var table;
        $(function() {
            var i = 0;
            var columnDefs = [
                {
                    targets: i++,
                    data: 'client',
                    name: 'client',
                    searchable: true,
                },
                {
                    targets: i++,
                    data: 'process',
                    name: 'process',
                    searchable: true,
                },
                {
                    targets: i++,
                    data: 'name',
                    name: 'name',
                    searchable: true,
                },
                {
                    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: false,
                processing: true,
                serverSide: true,
                sDom: 'lrtip',
                ajax: "{{ route('client.processes.executions') }}",
                columnDefs: columnDefs,
            };
            table = $('#clients').DataTable(options);
        });
    </script>-->
@stop