@extends('layouts.app-hr')

@section('content')
    <?php Fun::lang()?>
    @include('hr.time-policy.confirm-delete')
    <div class="top-header">
        <ol class="breadcrumb">
            <li><a href="#">{{__('administrator.Dashboard')}}</a></li>
            <li><a href="#">{{__('administrator.time_policy')}}</a></li>
        </ol>
    </div>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    <div class="title-add">
                        <div class="pull-left">
                            <h3>{{__('administrator.time_policy')}} </h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xs-12">
                    <div class="title-add">
                        <div class="pull-right">
                            @can('Time Policy Create')
{{--                                <a href="{{route('hr-time-policy.create')}}" class="button_primary">{{__('administrator.add_new')}}</a>--}}
                                <a href="#" class="button_primary btn_create_new">{{__('administrator.add_new')}}</a>
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-body">
            <table id="datatable_products" width="100%" class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>{{__('administrator.name') }}</th>
                        <th>{{__('administrator.time_in')}}</th>
                        <th>{{__('administrator.time_in')}}</th>
                        <th>{{__('administrator.ot_time_in')}}</th>
                        <th>{{__('administrator.ot_time_out')}}</th>
                        <th>{{__('administrator.note')}}</th>
                        <th style="width: 200px">{{ __('administrator.action') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <style>
        .ui-timepicker-wrapper{
            z-index: 100000000;
        }
        .jconfirm-content strong{
            text-align: left !important;
        }
    </style>
@endsection
@section('js')
    <script type="text/javascript">
        $(document).ready(function () {
            $('.timepicker').timepicker({
                showInputs: false,
            });
            $(document).on('click','.btn_delete', function(){
                var id = $(this).data('id');
                $('#delete-id').val(id);
                $('#form-delete').modal('show');
            });

            $('#datatable_products').DataTable({
                ordering: false,
                serverSide: true,
                ajax: "{{ route('hr-time-policy.index') }}",
                lengthMenu: [
                    [20, 30, 50, 100, 200, 500, 1000],
                    [20, 30, 50, 100, 200, 500, 1000]
                ],
                columns:
                    [
                        {
                            data: 'DT_RowIndex',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'name'
                        },
                        {
                            data: 'time_in'
                        },
                        {
                            data: 'time_out'
                        },
                        {
                            data: 'ot_time_in'
                        },
                        {
                            data: 'ot_time_out'
                        },
                        {
                            data: 'note'
                        },
                        {
                            data: 'action',
                            orderable: false,
                            searchable: false
                        },
                    ],
                "initComplete": function (settings, json) {

                }
            });

            $.fn.dataTable.ext.errMode = 'throw';
        });

        var form_content = `
                   <div class="form-group">
                        <label class="required"  for="name">{{__('administrator.time_policy_name')}}</label>
                        {!! Form::text('name', null, array('placeholder' => __('administrator.time_policy_name'),'class' => 'form-control border-red', 'autocomplete'=>'off','required')) !!}
                   </div>
                   <div class="form-group text-left">
                        <strong class="" for="name">{{__('administrator.time_in')}}</strong>
                            <div class="bootstrap-timepicker ">
                                <div class="form-group">
                                    <div class="input-group">
                                    {!! Form::text('time_in', null,array('class' => 'form-control timepicker')) !!}
                                    <div class="input-group-addon">
                                        <i class="fa fa-clock-o"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   <div class="form-group text-left">
                        <div class="bootstrap-timepicker ">
                            <div class="form-group">
                            <strong class="" for="name">{{__('administrator.time_out')}}</strong>
                                <div class="input-group">
                                    {!! Form::text('time_out', null,array('class' => 'form-control timepicker')) !!}
                                    <div class="input-group-addon">
                                        <i class="fa fa-clock-o"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                   </div>
                   <div class="form-group text-left">
                        <strong class="" for="name">{{__('administrator.ot_time_in')}}</strong>
                        <div class="bootstrap-timepicker">
                            <div class="form-group">
                                <div class="input-group">
                                    {!! Form::text('ot_time_in', null,array('class' => 'form-control timepicker')) !!}
                                    <div class="input-group-addon">
                                        <i class="fa fa-clock-o"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                   </div>
                   <div class="form-group text-left">
                        <strong class="" for="name">{{__('administrator.ot_time_out')}}</strong>
                        <div class="bootstrap-timepicker">
                            <div class="form-group">
                                <div class="input-group">
                                    {!! Form::text('ot_time_out', null,array('class' => 'form-control timepicker')) !!}
                                    <div class="input-group-addon">
                                        <i class="fa fa-clock-o"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   <div class="form-group">
                         <label class=""  for="name">{{__('administrator.note')}}</label>
                         <textarea name="note" rows="5" maxlength="100" class="no-resize form-control" placeholder="{{__('administrator.note')}}" ></textarea>
                   </div>`;

        $(document).on('click','.btn_create_new',function(){
            form(form_content,'{{__('administrator.save')}}','{{__('administrator.create')}}','{{ route('hr-time-policy.store') }}','POST');
        });

        $(document).on('click', '.btn_edit', function () {
            let url = $(this).data('url');
            $.ajax({
                url      : url,
                datatype : 'json',
                method   : 'get',
            }).done(function(response){
                let this_id  = response.id;
                let url      = "{{ route('hr-time-policy.update',['id']) }}";
                form(form_content,'{{__('administrator.update')}}','{{__('administrator.edit')}}', url.replace('id',this_id), 'PATCH', response);
            }).fail(function (error) {
                alertErrorFormController(error);
            });
        });

        function form(fcontent = '', btntext = '', title = '', route = '', method_ = '', response){

            $.confirm({
                title          : title + ' {{__('administrator.time_policy')}}',
                content        : fcontent,
                theme          : 'modern',
                columnClass    : 'medium',
                type           : 'blue',
                typeAnimated   : true,
                closeAnimation : 'zoom',
                buttons: {
                    cancel: {
                        text     : '{{__('administrator.cancel')}}',
                        btnClass : 'btn-red close_form',
                        keys     : ['esc'],
                        action   : function () {

                        }
                    },
                    submit: {
                        text: btntext,
                        btnClass: 'btn-blue',
                        action: function () {
                            let this_  = this;
                            let name            = this_.$content.find('input[name=name]').val();
                            let time_in         = this_.$content.find('input[name=time_in]').val();
                            let time_out        = this_.$content.find('input[name=time_out]').val();
                            let ot_time_in      = this_.$content.find('input[name=ot_time_in]').val();
                            let ot_time_out     = this_.$content.find('input[name=ot_time_out]').val();
                            let note            = this_.$content.find('textarea[name=note]').val();

                            this_.buttons.submit.disable();

                            $.ajax({
                                url      : route,
                                dataType : 'json',
                                method   : method_,
                                data: {
                                    "_token"    : "{{ csrf_token() }}",
                                    name        : name,
                                    time_in     : time_in,
                                    time_out    : time_out,
                                    ot_time_in  : ot_time_in,
                                    ot_time_out : ot_time_out,
                                    note        : note,
                                },
                            }).done(function (response) {
                                if (response.status === 200) {
                                    $('#datatable_products').DataTable().ajax.reload(null, false);
                                    $(document).find('.close_form').trigger('click');
                                    showSuccessToast(response.message);
                                }
                            }).fail(function (xhr) {
                                alertErrorFormController(xhr);
                                this_.buttons.submit.enable();

                            });
                            return false;
                        }
                    }
                },
                onContentReady: function () {
                    var jc = this;
                    jc.$content.find('.timepicker').timepicker({
                        showInputs: false,
                    });
                    this.$content.find('form').on('submit', function (e) {
                        e.preventDefault();
                    });
                }
            });

            if(response){
                setTimeout(function () {
                    $(document).find('input[name=name]').val(response.name);
                    $(document).find('input[name=time_in]').val(response.time_in);
                    $(document).find('input[name=time_out]').val(response.time_out);
                    $(document).find('input[name=ot_time_in]').val(response.ot_time_in);
                    $(document).find('input[name=ot_time_out]').val(response.ot_time_out);
                    $(document).find('textarea[name=note]').text(response.note);
                });
            }
        }

    </script>
@endsection
