@extends('layouts.app')

@section('title', trans('settings.access_right_title'))

@section('content')

<div class="content">
    <form id="form" name="role-form" method="POST" action="{{url('settings/roles/'.$role->id)}}">

        <x-content.header title="{{__('title.setup')}} - {{$role->name}}">
            <x-slot:headerRight>
                @if($role->name != 'Super Admin')
                    @can('edit_roles')
                        <button type="submit" class="btn-primary-base btn-save">
                            {{trans('forms.lbl_save')}}
                        </button>
                    @endcan
                    <a href="{{url('settings/roles')}}"  class="btn-tertiary-base">{{trans('forms.lbl_cancel')}}</a>
                @endif
            </x-slot:headerRight>
        </x-content.header>

        <div class="flex bg-custom-grey-50 rounded-[8px] w-full lg:w-max items-center p-[8px] overflow-x-scroll no-scrollbar">
            <div>
                <button id="v-admin-tab" type="button" data-content="admin" class="filter-tab tabs-btn-box min-w-[94px] active">{{trans('title.admin_permission_title')}}</button>
            </div>

            <div>
                <button id="v-global-tab" type="button" data-content="global" class="filter-tab tabs-btn-box min-w-[94px]">{{trans('title.global_permission_title')}}</button>
            </div>

            <div>
                <button id="v-forms-tab" type="button" data-content="forms" class="filter-tab tabs-btn-box min-w-[94px]">{{trans('title.field_permissions')}}</button>
            </div>
        </div>

        <div class="filter-tab-content mt-6">
            @foreach ($permissions as $key => $value)
                @if($role->name === 'Super Admin')
                    @include('users.roles.shared._permissions', [
                                    'title' => $role->name .' Permissions',
                                    'options' => ['disabled' => true] ])
                @else
                    @include('users.roles.shared._permissions', [
                                    'title' => $role->name .' Permissions',
                                    'model' => $role ])
                @endif
            @endforeach
        </div>
    </form>
</div>
@endsection

@section('footer-script')

    <script type="text/javascript">

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

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

        // Function to handle tab clicks for the second set
        $("body").on("click", ".filter-tab", function( event ) {
            // Reset all tabs and contents for the second set
            $(".filter-tab").removeClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            // Set new active state for the clicked tab in the second set
            $(this).addClass(
                "active text-custom-grey-700 bg-base-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px]"
            );

            $(".filter-tab-content .tab-pane-box").addClass("hidden");

            $("#"+$(this).data("content")+"-content").removeClass("hidden");


        });

        // Trigger click for the initially selected tabs
        $("#filter-all").trigger("click");

        $("body").on("change", ".permission-group", function(e){

            if($(this).is(":checked")) {

                $(".permissions-"+$(this).data('box')).find('input[type="checkbox"]').each(function() {
                    this.checked = true;
                });

                return;
            }

            $(".permissions-"+$(this).data('box')).find('input[type="checkbox"]').each(function() {
                this.checked = false;
            });
        })

    </script>
@stop