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

@section('content')
    <div class="content">
	    <x-content.header title="{{ __('title.settings_daily_update') }}" subTitle="{{__('title.categories')}}">
            <x-slot:headerRight>
                <a
                    data-toggle="canvas-panel"
                    data-uri="{{route('settings.dailyupdate.categories.store')}}"
                    data-title="Create a new category"
                    href="javascript:;"
                    class="btn-secondary-base">
                        <x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}
                </a>
                <a href="javascript:;" data-uri="{{url('settings/dailyupdate/categories/')}}" class="btn-delete-all btn-secondary-base"><x-svg-icon icon="icon-trash" />{{trans('forms.lbl_delete')}}</a>
            </x-slot:headerRight>
        </x-content.header>

        <div class="w-full flex gap-4 pb-8 flex-wrap">

            <div id="categories-container" class="w-full lg:w-[calc(100%-380px-24px)]">

				<table id="datatable" class="table-custom-striped !w-full">
                    <thead>
                        <tr>
                           <th scope="col" width="5%">
                                <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                            </th>
                            <th scope="col">{{trans("tables.name_title")}}</th>
                            <th scope="col">{{trans("tables.action_title")}}</th>
                        </tr>
                    </thead>
                </table>
            </div>

            <div id="folder-details" class="lg:mt-16 bg-custom-grey-50 rounded-lg px-5 py-6 w-full lg:w-[380px] h-max shadow-base">
                <div class="flex flex-col gap-4">
                    <div class="flex justify-between items-start">
                        <x-svg-icon icon="icon-lock-folder" />
                        <x-svg-icon id="folder-details-close" class="cursor-pointer" icon="icon-close" />
                    </div>

                    <h1 class="text-xl-bold text-base-black inline-edit">
                        {{__('forms.assign_to')}}
                    </h1>

                    <form method="POST" action="{{route('settings.dailyupdate.store')}}">
                        <div class="form_group">
                            <label class="form-label text-sm-semibold w-full" for="users" >{{__('title.select_specific_users')}}</label>
                            <div class="w-full relative">
                                <select name="users[]" id="users" class="w-full form-input form-input-select text-custom-grey-500 pd-dropdown"
                                    data-placeholder="{{__('forms.lbl_select')}} {{__('forms.lbl_employee')}}"
                                    multiple
                                >
                                    <optgroup label="{{__('forms.lbl_select_all_users')}}">
                                        @foreach ($users as $key => $user)
                                            <option {{($rights->users && $rights->users->contains('model_id', $user->id) ? 'selected' : '')}} value="{{$user->id}}">{{$user->display_name}}</option>
                                        @endforeach
                                    </optgroup>
                                </select>
                            </div>

                            <label class="form-label text-sm-semibold w-full" for="users" >{{__('forms.lbl_select_groups')}}</label>
                            <div class="w-full relative">
                                <select name="rights[]" class="w-full form-input form-input-select text-custom-grey-500 pd-dropdown"
                                    multiple
                                    data-placeholder="{{__('forms.select_groups')}}"
                                >
                                    <optgroup label="{{__('forms.lbl_select_all_groups')}}">
                                        @foreach ($groups as $key => $group)
                                            <option {{($rights->groups && $rights->groups->contains('model_id', $group->id) ? 'selected' : '')}} value="group-{{$group->id}}">{{$group->name}}</option>
                                        @endforeach
                                    </optgroup>
                                </select>
                            </div>

                            <label class="form-label text-sm-semibold w-full" for="users" >{{__('forms.select_positions')}}</label>
                            <div class="w-full relative">
                                <select name="rights[]" class="w-full form-input form-input-select text-custom-grey-500 pd-dropdown"
                                    multiple
                                    data-placeholder="{{__('forms.select_positions')}}"
                                >
                                    <optgroup label="{{__('forms.lbl_select_all_positions')}}">
                                        @foreach ($positions as $key => $position)
                                            <option {{(isset($rights->positions) && $rights->positions->contains('model_id', $position->id) ? 'selected' : '')}} value="position-{{$position->id}}">{{$position->name}}</option>
                                        @endforeach
                                    </optgroup>

                                </select>
                            </div>

                        </div>

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

@section('quick-links')
    <svg id="folder-info-btn" class="text-custom-grey-600 cursor-pointer min-h-6 min-w-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 16.0006V12.0006M12 8.00057H12.01M3 7.94202V16.0591C3 16.4018 3 16.5731 3.05048 16.7259C3.09515 16.8611 3.16816 16.9851 3.26463 17.0898C3.37369 17.2082 3.52345 17.2914 3.82297 17.4578L11.223 21.5689C11.5066 21.7264 11.6484 21.8052 11.7985 21.8361C11.9315 21.8634 12.0685 21.8634 12.2015 21.8361C12.3516 21.8052 12.4934 21.7264 12.777 21.5689L20.177 17.4578C20.4766 17.2914 20.6263 17.2082 20.7354 17.0898C20.8318 16.9851 20.9049 16.8611 20.9495 16.7259C21 16.5731 21 16.4018 21 16.0591V7.94202C21 7.59937 21 7.42805 20.9495 7.27525C20.9049 7.14008 20.8318 7.016 20.7354 6.91131C20.6263 6.79297 20.4766 6.70977 20.177 6.54337L12.777 2.43225C12.4934 2.2747 12.3516 2.19592 12.2015 2.16503C12.0685 2.1377 11.9315 2.1377 11.7985 2.16503C11.6484 2.19592 11.5066 2.2747 11.223 2.43225L3.82297 6.54337C3.52345 6.70977 3.37369 6.79297 3.26463 6.91131C3.16816 7.016 3.09515 7.14008 3.05048 7.27525C3 7.42805 3 7.59937 3 7.94202Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
@stop

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

@section('footer-script')
    <script type="text/javascript">

        PDDataTable({
            url: "{{route('settings.dailyupdate.store')}}",
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column" },
                { data: 'name', name: 'name', class: "!text-sm/6 !font-semibold !text-gray-900" },
                { data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right" }
            ],
            order : [1, 'asc']
        });

		$(".btn-settings-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) {
                window.location = "{{route('settings.dailyupdate.index')}}"
			});
		});

        $(".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    : form.attr("method"),
	            url     : form.attr("action"),
				data    : data,
				event   : event
			}).then((response) => {
				if(response.status == "success"){
                    PDTable.draw();
                    Canvas.close();

				}
            });
		});

		//Folder Details Close
        $("#folder-details-close, #folder-details-cancel").click(function() {
            $("#folder-details").addClass("hidden");

            $("#categories-container")
                .removeClass("w-full lg:w-[calc(100%-380px-24px)]")
                .addClass("w-full");
        });

        //Folder Details View
        $("body").on("click", "#folder-info-btn", function() {

            $("#folder-details").removeClass("hidden");

            $("#categories-container").removeClass("w-full")
                .addClass("w-full lg:w-[calc(100%-380px-24px)]");
        });
    </script>
@stop