@extends('layouts.app')
@section('title', trans('menu.approval_title'))
@section('content')
    <div class="content">
        @include('layouts.partials.single-page-header', [ 'menu' => [
            'links' => [
                [
                    'route' => '#v-pills-vacationhours',
                    'text'  => __('vacationhours.title'),
                ],
                [
                    'route' => '#v-pills-leaves',
                    'text'  => __('leaves.absence_sick_title'),
                    'active'=> 1
                ],
                [
                    'route' => '#v-pills-extrahours',
                    'text'  => __('overtimes.title'),
                ],
                [
                    'route' => '#v-pills-compensation',
                    'text'  => __('forms.lbl_compensation'),
                ],
            ],
            'isTabToggle' => true,
        ],
        'pageTitle' => __('title.settings_approval'),
        ])

        <div class="tab-content tab-content-vertical tw-card ">

            <div class="tab-pane fade" id="v-pills-vacationhours" role="tabpanel" aria-labelledby="v-pills-vacationhours-tab">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    <div class="border-r-0 lg:border-r border-left-0 bg-white mb-2 ">
                        <a href="{{route('vacationhour-types.index')}}" class="btn-secondary-base w-full lg:w-fit">
                            <span>{{__('forms.lbl_leave_type')}}</span>
                        </a>
                    </div>
                    <div class="lg:col-span-2">
                        <form method="POST" action="{{route('approvals.store')}}">
                            <input type="hidden" name="type" value="vacationhours">

                            <div class="repeater" data-isFirstItemUndeletable="1">
                                <div data-repeater-list="managables">
                                    @forelse ($steps->where('type', 'vacationhours') as $key => $step)
                                        @include('approval::steps', [
                                            'step' => $step
                                        ])
                                    @empty

                                        @include('approval::steps', [
                                            'step' => new StdClass,
                                            'key' => 1
                                        ])
                                    @endforelse
                                </div>

                                <button data-repeater-create type="button" class="btn-link btn-location mt-2 pl-0 flex items-center gap-2 text-custom-orange-500 text-sm-semibold">
                                    <x-svg-icon icon="add" /> {{__('forms.lbl_add_approval_step')}}
                                </button>
                            </div>

                            <div class="mt-4 border-top flex justify-start gap-2">
                                <button type="submit" class="btn-primary-sm mt-4 btn-save">
                                    {{trans('forms.lbl_save')}}
                                </button>
                                <a href="{{route('settings.index')}}" class="mt-4 btn-tertiary-sm">
                                    <span>{{__('forms.lbl_cancel')}}</span>
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>



            <div class="tab-pane fade active show" id="v-pills-leaves" role="tabpanel" aria-labelledby="v-pills-leaves-tab">

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

                    <div class="border-r-0 lg:border-r bg-white mb-2 ">
                        <a href="{{route('leave-types.index')}}" class="btn-secondary-base w-full lg:w-fit">
                            <span>{{__('forms.lbl_absent_type')}}</span>
                        </a>
                    </div>

                    <div class="lg:col-span-2">
                        <form method="POST" action="{{route('approvals.store')}}">
                            <input type="hidden" name="type" value="leaves">

                            <div class="repeater" data-isFirstItemUndeletable="1">
                                <div data-repeater-list="managables">
                                    @forelse ($steps->where('type', 'leaves') as $key => $step)
                                        @include('approval::steps', [
                                            'step' => $step
                                        ])
                                    @empty

                                        @include('approval::steps', [
                                            'step' => new StdClass,
                                            'key' => 1
                                        ])
                                    @endforelse
                                </div>

                                <button data-repeater-create type="button" class="btn-link btn-location mt-2 pl-0 flex items-center gap-2 text-custom-orange-500 text-sm-semibold">
                                    <x-svg-icon icon="add" /> {{__('forms.lbl_add_approval_step')}}
                                </button>
                            </div>

                            <div class="mt-4 border-top flex justify-start gap-2">
                                <button type="submit" class="btn-primary-sm mt-4 btn-save">
                                    {{trans('forms.lbl_save')}}
                                </button>
                                <a href="{{route('settings.index')}}" class="mt-4 btn-tertiary-sm">
                                    <span>{{__('forms.lbl_cancel')}}</span>
                                </a>
                            </div>
                        </form>
                    </div>

                </div>
            </div>



            <div class="tab-pane fade" id="v-pills-extrahours" role="tabpanel" aria-labelledby="v-pills-extrahours-tab">
                <form method="POST" action="{{route('approvals.store')}}">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    <div class="border-r-0 lg:border-r bg-white mb-2 ">
                        <div class="border-r-0 lg:border-r bg-white mb-2 p-2">
                            <div class="flex flex-col gap-1">
                                <label for="time" class="text-gray-700 font-medium">
                                    {{ trans('forms.cut_of_time') }}
                                </label>
                                <input type="text" name="cut_of_time" id="time" 
                                       class="border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       value="{{ $overtimeSettings->cut_of_time ?? 0 }}"
                                        onkeydown="if(event.key==='.'){event.preventDefault();}"
                                        oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');"
                                       
                                       >
                                       
                                <p class="text-custom-orange-500"> * {{trans('forms.only_input_minute')}}</p>
                            </div>
                        </div>                        
                    </div>

                    <div class="lg:col-span-2">
                            <input type="hidden" name="type" value="overtimes">
        
                            <div class="repeater" data-isFirstItemUndeletable="1">
                                <div data-repeater-list="managables">
                                    @forelse ($steps->where('type', 'overtimes') as $key => $step)
                                        @include('approval::steps', [
                                            'step' => $step
                                        ])
                                    @empty
        
                                        @include('approval::steps', [
                                            'step' => new StdClass,
                                            'key' => 1
                                        ])
                                    @endforelse
                                </div>
        
                                <button data-repeater-create type="button" class="btn-link btn-location mt-2 pl-0 flex items-center gap-2 text-custom-orange-500 text-sm-semibold">
                                    <x-svg-icon icon="add" /> {{__('forms.lbl_add_approval_step')}}
                                </button>
                            </div>
        
                            <div class="mt-4 border-top flex justify-start gap-2">
                                <button type="submit" class="btn-primary-sm mt-4 btn-save">
                                    {{trans('forms.lbl_save')}}
                                </button>
                                <a href="{{route('settings.index')}}" class="mt-4 btn-tertiary-sm">
                                    <span>{{__('forms.lbl_cancel')}}</span>
                                </a>
                            </div>
                    </div>
                </div>
                </form>

            </div>
            <div class="tab-pane fade" id="v-pills-compensation" role="tabpanel" aria-labelledby="v-pills-compensation-tab">
                 <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    <div class="border-r-0 lg:border-r bg-white mb-2 ">

                        <div class="flex justify-start items-center gap-2">
                            <div class="w-4 h-4">
                                <input type="radio" name="setting" id="time" value="time" {{ ($compensationSettings->time == 1) ? 'checked' : '' }} onchange="saveSetting(this)">
                            </div>
                            <label for="time" class="m-0">
                                {{ trans('forms.time') }}
                            </label>
                        </div>

                        <div class="flex justify-start items-center gap-2">
                            <div class="w-4 h-4">
                                <input type="radio" id="payment" name="setting" value="payment" {{ ($compensationSettings->payment == 1) ? 'checked' : '' }} onchange="saveSetting(this)">
                            </div>
                            <label for="payment" class="m-0">
                                {{ trans('forms.payment') }}
                            </label>
                        </div>

                        <div class="flex justify-start items-center gap-2">
                            <div class="w-4 h-4">
                                 <input type="radio" name="setting" id="both" value="both" {{ ($compensationSettings->both == 1) ? 'checked' : '' }} onchange="saveSetting(this)">
                            </div>
                            <label for="both" class="m-0">
                                {{ trans('forms.both') }}
                            </label>
                        </div>

                    </div>

                    <div class="lg:col-span-2">
                        <form method="POST" action="{{route('approvals.store')}}">
                            <input type="hidden" name="type" value="compensation">

                            <div class="repeater" data-isFirstItemUndeletable="1">
                                <div data-repeater-list="managables">
                                    @forelse ($steps->where('type', 'compensation') as $key => $step)
                                        @include('approval::steps', [
                                            'step' => $step
                                        ])
                                    @empty

                                        @include('approval::steps', [
                                            'step' => new StdClass,
                                            'key' => 1
                                        ])
                                    @endforelse
                                </div>

                                <button data-repeater-create type="button" class="btn-link btn-location mt-2 pl-0 flex items-center gap-2 text-custom-orange-500 text-sm-semibold">
                                    <x-svg-icon icon="add" /> {{__('forms.lbl_add_approval_step')}}
                                </button>
                            </div>

                            <div class="mt-4 border-top flex justify-start gap-2">
                                <button type="submit" class="btn-primary-sm mt-4 btn-save">
                                    {{trans('forms.lbl_save')}}
                                </button>
                                <a href="{{route('settings.index')}}" class="mt-4 btn-tertiary-sm">
                                    <span>{{__('forms.lbl_cancel')}}</span>
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

            </div>

        </div>
    </div>
@stop

@section('footer-script')

    <!-- Custom js for this page-->
    <script type="text/javascript">
        let positions = {!! json_encode($positions) !!}, groups = {!! json_encode($groups) !!}, users={!! json_encode($users) !!};
		$(".btn-save").on("click", function(event) {
			event.preventDefault();

			let form = $(this).parents('form');
			data = form.serialize(),
			type  = (form.data('method') == "PUT") ? form.data("method") : "POST";
			PDRequest({
				type    : type,
				url     : form.prop("action"),
				data    : data,
				event   : event
			}).then(function(success) {
                if (success.type == "vacation") {
                    $(".vacationtypes ul li.none").remove();
				    $(".vacationtypes ul").append(success.row);
                } else {
                    $(".types ul li.none").remove();
				    $(".types ul").append(success.row);
                }
				$("input[name='name']").val("");
			});
		});


        $("body").on("change", "select.managable_type", function(event) {

            let parent = $(this).parents(".step-item"), data = null, select2Options = {};
            let targetEl = $(parent).find(".managable_id_section");
            let checkUser = 0;
            if($(this).val() == 'position') {
                data = positions;
            } else if($(this).val() == 'group'){
                data = groups;
            } else {
                checkUser = 1;
                data = users;
            }

            // $(targetEl).find(".select2").each(function(index){
            //      $(this).remove();
            // });

            // select2Options = { width : 'resolve', data : data };
            // console.log(select2Options);
            $(targetEl).find(".managable_id").select2(select2Options);
            var $options = $();
            for (var i in data) {

                if (checkUser === 1 && data[i].display_name != null) {
                    $options = $options.add(
                        $('<option>').attr('value', data[i].id).html(data[i].display_name)
                    );
                } else {
                    $options = $options.add(
                        $('<option>').attr('value', data[i].id).html(data[i].text)
                    );
                }
            }
            $(targetEl).find(".managable_id").html($options).trigger('change');
        });

        function saveSetting(radio) {
            var selectedValue = $(radio).val();
            //console.log(selectedValue);
            $.ajax({
                url: '/save-compensation-setting',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}', [selectedValue]: 1 },
            });
        }

    </script>
@stop