@extends('client.layouts.app')

@section('page_title', 'Processes')

@section('content_header_title')

@endsection

@section('content')
    <div class="processes">
        <div class="container-fluid">
            <h1 class="page-title">{{ __('client.navigation.processes') }}</h1>
            <div class="filters filters--processes">
                <form action="" class="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="process-id" class="col-form-label">{{__('client.global.process_id')}}</label>
                        <input id="process-id" type="text" class="form-control" name="process_id">
                    </div>
                    <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                        <label for="keyword" class="col-form-label">{{__('client.global.keyword')}}</label>
                        <input id="keyword" type="text" class="form-control" name="keyword">
                    </div>
                    <div class="form-group flex-column align-items-start pb-2 pb-lg-5 pr-0 pr-lg-3">
                        <label for="status" class="col-form-label">{{__('client.global.status')}}</label>
                        <select class="form-control selectpicker" id="status" name="filter_status">
                            @foreach(getStatuses(true) as $status => $label)
                                @if ($status != \App\User::STATUS_PENDING) <option {{ old('filter_status', '') == $status ? 'selected' : '' }} value="{{$status}}">{{$label}}</option> @endif
                            @endforeach
                        </select>
                    </div>
                    @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="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" 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" style="width: 230px;" class="form-control" id="toDatepicker" />
                        </div>
                    </div>
                    @endif
                    <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="table-responsive">
                <table id="processes" class="table table--administrators">
                    <thead>
                    <tr class="enable-sorting table__header">
                        <th data-name="code">ID</th>
                        <th data-name="name">{{__('client.global.name')}}</th>
                        @if (!$clientAdmin)
                        <th data-name="admin_name">{{__('client.global.client_code')}}</th>
                        <th data-name="admin_email">{{__('client.global.client_name')}}</th>
                        @endif
                        <th data-name="order_date">{{__('client.global.order_date')}}</th>
                        <th data-name="last_report_date">{{__('client.global.last_report_date')}}</th>
                        <th data-name="next_execution">{{__('client.global.next_execution')}}</th>
                        <th data-name="active_processes">{{__('client.global.executions_count')}}</th>
                        <th data-name="admin_status">{{__('client.global.status')}}</th>
                        @if ($clientAdmin)
                        <th data-name="owners">{{__('client.global.owners')}}</th>
                        @endif
                        @if ($admin)
                        <th class="text-right">
                            <a href="{{ route('client.processes.create') }}" class="table__add-cta d-inline-block">
                                <img src="{{ asset('img/create_table_entry_icon.svg')}}" alt="" />
                            </a>
                        </th>
                        @endif
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal" tabindex="-1" role="dialog" id="nextExecutionTimeModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title d-flex align-items-center">
                            <i class="far fa-clock mr-1"></i> {{ __('client.global.next_execution_date_and_time')}}
                        </h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="process_id" name="process_id" value="">
                        <button id="set-execution-time" type="button" class="btn btn--dark-red">{{__('client.buttons.save')}}</button>
                        <button id="close-modal" type="button" class="btn btn--cancel" data-dismiss="modal">{{__('client.buttons.cancel')}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('custom_scripts')
    <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: 'code',
                    name: 'code',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'name',
                    name: 'name',
                    searchable: false,
                },
                @if (!$clientAdmin)
                {
                    targets: i++,
                    data: 'client_code',
                    name: 'client_code',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'client_name',
                    name: 'client_name',
                    searchable: false,
                },
                @endif
                {
                    targets: i++,
                    data: 'order_date',
                    name: 'order_date',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'last_report_date',
                    name: 'last_report_date',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'next_execution',
                    name: 'next_execution',
                    searchable: false,
                    className: 'text-nowrap'
                },
                {
                    targets: i++,
                    data: 'executions_count',
                    name: 'executions_count',
                    searchable: false,
                },
                {
                    targets: i++,
                    data: 'status',
                    name: 'status',
                    searchable: false,
                },
                @if ($clientAdmin)
                {
                    targets: i++,
                    data: 'owners',
                    name: 'owners',
                    searchable: false,
                    className: 'datatables-actions-cell text-nowrap'
                },
                @endif
                @if ($admin)
                {
                    targets: i++,
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                },
                @endif
            ];
            var options = {
                searching: true,
                info: false,
                lengthChange: false,
                paging: false,
                processing: true,
                serverSide: true,
                sDom: 'lrtip',
                ajax: "{{ route('client.processes.datatable') }}",
                columnDefs: columnDefs,
                drawCallback: function( settings ) {
                    if ($('.btn--next-execution-time').length > 0) {
                        $('.btn--next-execution-time').each(function () {
                            $(this).click(function() {
                                $('#process_id').val($(this).data('id'));
                                var $nextExecutionTimeModal = $('#nextExecutionTimeModal');
                                var $nextExecutionTimeModalBody = $nextExecutionTimeModal.find('.modal-body');

                                $nextExecutionTimeModalBody.html('');

                                $nextExecutionTimeModalBody.append(`<p>{{ __('client.global.process_id')}} - ${$(this).data('code')}</p>`)
                                $nextExecutionTimeModalBody.append(`<div class="h4h-datepicker position-relative" id="${$(this).data('code')}-parent">
                                    <input type="text" name="execution_date" class="form-control" id="${$(this).data('code')}" placeholder="{{ __('client.global.pick_date_and_time')}}"/>
                                </div>`);

                                $(`#${$(this).data('code')}`).datetimepicker({
                                    format: '{{__('client.dates.global_format_short_time')}}',
                                    parentID:`#${$(this).data('code')}-parent`,
                                    step: 5
                                });

                                $('#nextExecutionTimeModal').modal('show');
                            })
                        })
                    }
                }
            };
            table = $('#processes').DataTable(options);
            /*$(".filtering").not(":eq(2),:eq(3),:eq(4)").each( function ( i ) {
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(this).empty() )
                    .on( 'change', function () {
                        var term = $(this).val();
                        processesTable.column( i ).search(term, false, false ).draw();
                    } );
                processesTable.column( i ).data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );*/

            $('#fromDatepicker').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,
            });

            $('#toDatepicker').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,
            });

            $('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);
                @if (!Auth::user()->isClientAdmin())
                table.columns(8).search(status);
                @else
                table.columns(6).search(status);
                @endif
                table.draw();
            });

            if ($('.btn--next-execution-timefil').length > 0) {
                $('.btn--next-execution-time').each(function () {
                    $(this).click(function() {
                        console.log($(this).data('code'));
                    })
                })
            }
            $('body').on('click', '#set-execution-time', function() {
                $.ajax({
                    dataType: 'json',
                    type: 'GET',
                    data: {
                        'process_id':$('#process_id').val(),
                        'execution_date':$('input[name="execution_date"]').val()},
                    url: '{{route('client.processes.set_execution_request')}}',
                    success: function(resp) {
                        if (resp.success) {
                            $('#close-modal').trigger('click');
                            table.draw();
                        }
                        if (resp.errors) {
                            $('#nextExecutionTimeModal').find('.modal-body').append(resp.message);
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        $('.modal-error').remove();
                        var error = '<span class="invalid-feedback modal-error" role="alert"><strong>' + xhr.responseJSON.errors.execution_date + '</strong></span>';
                        $('#nextExecutionTimeModal').find('.modal-body').append(error);
                    }
                });

            });

        });
    </script>
@endsection