@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">{{$user->name}}</li>
        <li class="breadcrumb-item active">Accessibility</li>
    </x-layout.content-header>
@stop

@section('content')
    <form action="#" method="POST" id="input-form">
        @csrf
        <x-layout.card :title="null">
            <div class="row">
                <div class="col-md-4">
                    <input type="hidden" name="id" id="id" value="{{$user->id}}">
                    <h6>Name :</h6>
                    <p>{{$user->name}}</p>
                </div>
                <div class="col-md-4">
                    <h6>Username :</h6>
                    <p>{{$user->username}}</p>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <h6 for="">Role :</h6>
                        <select class="form-control" name="role" id="role">
                            <option value=""></option>
                            @foreach ($roles as $role)
                                <option @if(($user->roles[0]->name ?? null) == $role->name) selected @endif value="{{$role->name}}" data-json="{{json_encode($role->permissions->pluck('id'))}}">{{$role->name}}</option>
                            @endforeach
                        </select>
                    </div>        
                </div>
            </div>
        </x-layout.card>

        <div class="row">
            <div class="col-12">
                <x-layout.card title="Permission Access" animate default duration="500">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="text-center">
                                        Inheritance from Role
                                        <br>
                                        <span onclick="inheritance()" 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">
                                        Current Access
                                        <br>
                                        <span onclick="setCurrent()" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="" href="#" data-bs-original-title="Reset to Current 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)
                                    @php
                                        $curr_access_by_group = array_intersect(collect($features)->pluck('id')->toArray(), $user_has_permission_ids);
                                    @endphp
                                    <tr class="bg-soft-info">
                                        <th>{{ucwords($key)}}</th>
                                        <td></td>
                                        <td></td>
                                        <td class="text-center">
                                            <span>
                                                <input @if(count($curr_access_by_group) == count($features)) checked @endif 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-ids="{{json_encode($curr_access_by_group)}}" 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 current-access">
                                            @if (in_array($control->id, $curr_access_by_group))
                                                <i class="fas fa-check text-success"></i>
                                            @else
                                                <i class="fas fa-times text-muted"></i>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <input @if(in_array($control->id, $curr_access_by_group)) checked @endif 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>
                    @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>
            </div>
        </div>
    </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", $user->id),
    ])
    <script>
        listPermissionRole();
        $("#role").select2({
            theme: 'bootstrap-5',
            placeholder : "Select a Role",
            width:'100%',
        }).on('change', function () {
            listPermissionRole();
            inheritance();
        });

        function listPermissionRole() {
            // set to X first
            $(".inheritance-access").html('<i class="fas fa-times text-muted"></i>');

            var json = $('#role').find(':selected').attr('data-json');
            if (json) {
                var data = JSON.parse(json);
                $.each(data, function (index, id) {
                    $("#perm-section-" + id).find('.inheritance-access').html('<i class="fas fa-check text-success"></i>')
                });
            }
        }

        // reset custom to inheritance
        function inheritance() {
            var json = $('#role').find(':selected').attr('data-json');
            var data = JSON.parse(json);

            clearAll();
            $.each(data, function (index, id) {
                $("#perm-check-" + id).prop('checked', true);
            });
        }

        // reset custom to current
        function setCurrent() {
            clearAll();

            const $resetGroup = $(".reset-perm-group");
            $.each($resetGroup, function (index, futureEl) {
                const group = $(futureEl).data('ids');
                $.each(group, function (index, id) {
                    $("#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) {
                    const group = $(this).data('ids');
                    // uncheck all first this group
                    let $checkGroup = $(this).closest('tr').find('.checkgroup');
                    $checkGroup.prop('checked', false);
                    $checkGroup.change();
        
                    $.each(group, 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