@extends('layouts.app')

@section('content')
    <div class="content">
        <x-content.header title="{{__('forms.lbl_absent_type')}}" >
            <x-slot:headerRight>
                <a data-toggle="canvas-panel"
                    data-uri="{{route('leave-types.store')}}"
                    data-title="{{__('forms.lbl_absent_type')}}"
                    href="javascript:;"
                    class="btn-secondary-base"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>

                <a href="javascript:;" data-uri="{{route('leave-types.index')}}" class="btn-delete-all btn-secondary-base"><i class="mdi mdi-delete"></i>{{trans('forms.lbl_delete')}}</a>
            </x-slot:headerRight>
        </x-content.header>

        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    <th scope="col" width="10%">
                        <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                    </th>
                    <th scope="col">{{__('tables.name_title')}}</th>
                    <th scope="col">{{__('tables.waiting_days_title')}}</th>
                    <th scope="col">{{__('tables.percenatage_title')}}</th>
                    <th scope="col">{{trans("tables.active_title")}}</th>
                    <th scope="col">{{trans("tables.statistics_title")}}</th>
                    <th scope="col"  width="5%">{{__('tables.action_title')}}</th>
                </tr>
            </thead>
        </table>
    </div>
@stop

@section('panel-content')
    @include('timetracker::leavetypes.form', ['edit' => false])
@stop

@section('footer-script')

    <script type="text/javascript">

        PDDataTable({
            url: "{{ route('leave-types.index') }}",
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'name', name: 'name'},
                { data: 'waiting_days', name: 'waiting_days'},
                { data: 'percentage', name: 'percentage'},
                { data: 'status', name: 'status'},
                { data: 'leave_status', name: 'status'},
                { data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right" }
            ]
        });

        $(".btn-save").on("click", function(event) {
			event.preventDefault();
			if($("#form").valid()){
				data = $('#form').serialize();

				PDRequest({
					type    : $('#form').attr("method"),
	                url     : $("#form").attr("action"),
					data    : data,
					event   : event
				}).then((response) => {
	                PDTable.draw();

                    Canvas.close();
	            });
			}
		});

		$("body").on("change", "input[name='due_date']", function(e) {
            if( $(this).is(":checked") ){
                $(".due_date").prop("disabled", false);
            }else{
                $(".due_date").prop("disabled", true);
            }
        });

    </script>
@stop