@extends('layouts.app')
@section('title', trans('menu.todo'))

@section('content')

	<div class="content">

        <form id="form" name="task-form" action="{{url('settings/tasks/'.$task->id)}}" method="POST">

            <x-content.header title="{{ __('title.Settings - To-Do') }}">
                <x-slot:headerRight>
                    <button type="submit" class="btn-primary-base btn-save">
                        {{trans('forms.lbl_save')}}
                    </button>

                    <a href="{{url('settings/tasks')}}" class="btn-tertiary-base">{{trans('forms.lbl_cancel')}}</a>
                </x-slot:headerRight>
            </x-content.header>

            <div class="tw-card mt-8">
                <div class="p-6">
                    @include('task::tasks.form', [
                        'edit'   => true,
                        'positions'  => $positions,
                        'groups' => $groups,
                        'users'  => $users
                    ])
                </div>
            </div>
        </form>
    </div>

@stop

@section('footer-script')
    <!-- Custom js for this page-->
    <script src="{{asset('js/jquery-file-upload.js')}}"></script>
    <script type="text/javascript">

        var userList    = '',
            positionList    = '',
            groupList   = '',
            type        = 'general',
            rightsBlock = $('select[name="rights[]"]');

        @foreach ($users as $key => $user)
            userList = userList + "<option {{($task->users->contains('id', $user->id) ? 'selected' : '')}} value='user-{{$user->id}}'>{{$user->display_name}}</option>";
        @endforeach

        userList = '<optgroup label="{{__('forms.lbl_select_all_users')}}">'+userList+'</optgroup>';


        @foreach ($positions as $key => $position)
            positionList = positionList + "<option {{($task->positions->contains('id', $position->id) ? 'selected' : '')}} value='position-{{$position->id}}'>{{$position->name}}</option>";
        @endforeach

        positionList = '<optgroup label="{{__('forms.lbl_select_all_positions')}}">'+positionList+'</optgroup>';


        @foreach ($groups as $key => $group)
            groupList = groupList + "<option {{($task->groups->contains('id', $group->id) ? 'selected' : '')}} value='group-{{$group->id}}'>{{$group->name}}</option>";
        @endforeach

        groupList = '<optgroup label="{{__('forms.lbl_select_all_groups')}}">'+groupList+'</optgroup>';

		$('select[name="type"]').on('change', function(event){
            $(this).val() == 'general'
                ? rightsBlock.html(positionList+groupList)
                : rightsBlock.html(userList);

			if($(this).val() == 'general'){
                rightsBlock.val(null).trigger('change');
				rightsBlock.attr("data-placeholder", "{{__('forms.select_positions_groups')}}");
				rightsBlock.next().find(".select2-search__field").attr("placeholder", "{{__('forms.select_positions_groups')}}");
			} else {
                rightsBlock.val(null).trigger('change');
				rightsBlock.attr("data-placeholder", "{{__('forms.lbl_select_all_users')}}");
				rightsBlock.next().find(".select2-search__field").attr("placeholder", "{{__('forms.lbl_select_all_users')}}");
			}

        });

		$(".btn-save").on("click", function(event) {
			event.preventDefault();

            data = $('#form').serialize();

			PDRequest({
				type    : "PUT",
				url     : $("#form").prop("action"),
				data    : data,
				event   : event
			}).then((response) => {
                $('#items').html(response.items);
				window.location = "{{url('settings/tasks')}}";
            });
		});

        // $("body").on("click", ".delete-item", function(event) {
		// 	event.preventDefault();
		// 	if($(this).data('uri') !== ""){
        //         PDRemove({
        //             url : $(this).data('uri')
        //         });
        //     }
        // });
    </script>
@stop