@extends('layouts.hope.page')

@section('title', $title)

@section('content_header')
    <x-layout.content-header :title="$title">
        <li class="breadcrumb-item"><a href="{{ route($this_helper.'index') }}">{{$title}}</a></li>
        <li class="breadcrumb-item active">Role Accessibility</li>
    </x-layout.content-header>
@stop

@section('content')
    <form action="#" method="POST" id="input-form">
        @csrf
        <x-layout.card title="Role Accessibility Form" animate default duration="500">
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <h6 for="">Role :</h6>
                        <select required class="form-control" name="role" id="role">
                            <option value=""></option>
                            @foreach ($roles as $role)
                                <option @if(($id ?? null) == $role->id) selected @endif value="{{$role->id}}" data-json="{{json_encode($role->permissions->pluck('id'))}}">{{$role->name}}</option>
                            @endforeach
                        </select>
                    </div>        
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">

                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="text-center">
                                        Current Access
                                        <br>
                                        <span onclick="setCurrent()" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="" href="#" data-bs-original-title="Apply Inheritance Access"><i class="fas fa-angle-double-right"></i> Custom</span>
                                    </th>
                                    <th class="text-center">
                                        Custom Access
                                        <br>
                                        <span class="btn btn-sm btn-outline-primary btn-clear" data-bs-toggle="tooltip" title="" href="#" data-bs-original-title="Clear All Access"><i class="far fa-trash-alt"></i></span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($permissions as $key => $features)
                                    <tr class="bg-soft-info">
                                        <th>{{ucwords($key)}}</th>
                                        <td></td>
                                        <td class="text-center">
                                            <span>
                                                <input class="form-check-input checkgroup" data-for-group="{{$key}}-group" data-bs-toggle="tooltip" title="" href="#" data-bs-original-title="Allow All {{ucwords($key)}} Access" type="checkbox">
                                                All
                                            </span>
                                            <span data-feature-ids="{{ json_encode(collect($features)->pluck('id')->toArray()) }}" class="text-info reset-perm-group" data-bs-toggle="tooltip" title="" href="#" data-bs-original-title="Reset to Current {{ucwords($key)}} Access"><i class="fas fa-undo ms-3"></i></span>
                                        </td>
                                    </tr>
                                    @foreach ($features as $name => $control)
                                    <tr id="perm-section-{{$control->id}}">
                                        <td>{{ $control['name'] }}</td>
                                        <td class="text-center inheritance-access">
                                            <i class="fas fa-times text-muted"></i>
                                        </td>
                                        <td class="text-center">
                                            <input class="form-check-input {{$key}}-group" type="checkbox" id="perm-check-{{$control->id}}" name="permission_input[]" value="{{$control->name}}">
                                        </td>
                                    </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            @slot('footer')
            <div class="text-center">
                <button class="btn btn-sm btn-primary" id="btn-save" type="submit"> <i class="fas fa-save"></i> Save</button>
            </div>
            @endslot
        </x-layout.card>
    </form>
@stop

@section('plugins.Select2', true)
@section('plugins.Datatables', true)

@section('js')
    @include('components.helper.form-control', [
        'reload' => true,
        'actionForm' => route($this_helper."update-access"),
    ])
    <script>
        $("#role").select2({
            theme: 'bootstrap-5',
            placeholder : "Select a Role",
            width:'100%',
        }).on('change', function () {
            $(".inheritance-access").html('<i class="fas fa-times text-muted"></i>');
            setCurrent();
        }).trigger('change');

        function getCurrentAccess() {
            var json = $('#role').find(':selected').attr('data-json');
            if (json) {
                return JSON.parse(json);
            }else{
                return [];
            }
        }

        // reset custom to inheritance
        function setCurrent() {
            let data = getCurrentAccess();

            clearAll();
            $.each(data, function (index, id) {
                $("#perm-section-" + id).find('.inheritance-access').html('<i class="fas fa-check text-success"></i>');
                $("#perm-check-" + id).prop('checked', true);
            });
        }

        // clear all custom access
        function clearAll() {
            $('.form-check-input').prop('checked', false);
        }

        // select all by group
        $('body').on('change', '.checkgroup', function () {
            const group = $(this).data('for-group');

            if ($(this).prop('checked')) {
                $('.'+group).prop('checked', true)
            }else{
                $('.'+group).prop('checked', false)
            }
        });

        // reset to current by group
        $('body').on('click', '.reset-perm-group', function () {
            Swal.fire({
                // title: 'Are you sure?',
                text: $(this).data('bs-original-title') ?? 'Reset',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, reset!'
            }).then((result) => {
                if (result.value == true) {
                    // uncheck all first this group
                    let $checkGroup = $(this).closest('tr').find('.checkgroup');
                    $checkGroup.prop('checked', false);
                    $checkGroup.change();

                    const group = $(this).data('feature-ids');
                    let current = getCurrentAccess();
                    current = current.filter(id => group.includes(id));

                    $.each(current, function (index, id) {
                        $("#perm-check-" + id).prop('checked', true);
                    });
                }
            })
        });
        // clear custom access
        $('body').on('click', '.btn-clear', function () {
            Swal.fire({
                // title: 'Are you sure?',
                text: $(this).data('bs-original-title') ?? 'Reset',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, clear!'
            }).then((result) => {
                if (result.value == true) {
                    clearAll();
                }
            })
        });
    </script>
@stop