@extends('layouts.app')
@section('title', trans('forms.lbl_leave_type'))

@section('content')
    <div class="content">
        <x-content.header title="{{__('forms.lbl_leave_type')}}" >
            <x-slot:headerRight>
                <a  data-toggle="canvas-panel"
                    data-uri="{{route('vacationhour-types.store')}}"
                    data-title="{{__('forms.lbl_leave_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('vacationhour-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.unpaid_title')}}</th>
                    <th scope="col">{{trans("tables.active_title")}}</th>
                    <th scope="col">{{trans("forms.deductable")}}</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::vacationhourtypes.form', ['edit' => false])
@stop

@section('footer-script')

    <script type="text/javascript">

        PDDataTable({
            url: "{{ route('vacationhour-types.index') }}",
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'name', name: 'name'},
                { data: 'unpaid', name: 'unpaid'},
                { data: 'status', name: 'status'},
                { data: 'deductable', name: 'deductable'},
                { data: 'vacation_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();
	            });
			}
		});

        function toggleDeductableDiv() {
                        
            if ($("input[name='unpaid']").is(":checked")) {
                $(".deductable-div").hide();
            } else {
                $(".deductable-div").show();
            }
        }

        $("body").on("change", "input[name='unpaid']", function () {
            toggleDeductableDiv();
        });
        $(document).on("form-data-loaded", (event, info) => {            
            toggleDeductableDiv();
            
        });
        $(document).on("opened-panel", (event, info) => {
            toggleDeductableDiv();
        });
    </script>
@stop