@extends('layouts.admin', ['title' => 'User Roles'])

@push('stylesheets')

<!--datatable css-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<!--datatable responsive css-->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />

<meta name="csrf-token" content="{{ csrf_token() }}">

@endpush

@section('content')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{url('dashboard')}}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{url('/roles')}}">Roles</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{$role['role']}}</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{$role['role']}}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="row col-12 col-md-5">
                                    <div class="col"><button class="btn btn-soft-dark" id="assignAll">Assign All</button></div>
                                    <form method="post" action="/roles/assign-permissions" id="permissionsForm" class="d-none">
                                        @csrf
                                        <input type="hidden" name="id" value="{{$role['id']}}" id="form_id">
                                        <input type="hidden" name="permissions" id="form_permissions" >
                                    </form>
                                    <div class="col"><button class="btn btn-soft-info" id="assignSelected">Assign selected</button></div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-12">
                                    <input type="text" class="form-control" id="search_form" placeholder="filter permissions">
                                </div>
                            </div>
                            <div class="row" id="permissionsContainer">
                                {{--@foreach($permissions as $perm)
                                    <div class="col-6 col-md-3">
                                        <div class="input-group mb-3">
                                            <div class="input-group-text">
                                                @if(in_array($perm['id'], $role_permissions_array))
                                                    <input class="form-check-input mt-0" type="checkbox" value="{{$perm['id']}}" onclick="togglePermission(event)" checked>
                                                @else
                                                    <input class="form-check-input mt-0" type="checkbox" value="{{$perm['id']}}" onclick="togglePermission(event)">
                                                @endif
                                            </div>
                                            <input type="text" class="form-control" aria-label="Text input with checkbox" value="{{$perm['permission']}}" disabled>
                                        </div>
                                    </div>
                                @endforeach--}}
                            </div>
                        </div>
                    </div>
                </div><!--end col-->
            </div><!--end row-->
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->

    @endsection

    @push('scripts')

    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        var selected_permissions = {{ \Illuminate\Support\Js::from($role_permissions_array)  }};
        const all_permissions = {{ \Illuminate\Support\Js::from($permissions_array)  }};
        const permissions = {{ \Illuminate\Support\Js::from($permissions)  }};
        document.getElementById("form_permissions").value = selected_permissions;

        function togglePermission(event) {
            let pm = Number(event.target.value);
            if (selected_permissions.includes(pm)) {
                let pos = selected_permissions.indexOf(pm);
                selected_permissions.splice(pos,1);
            } else {
                selected_permissions.push(pm);
            }

            document.getElementById("form_permissions").value = selected_permissions;
        }

        document.getElementById('assignAll').addEventListener('click', function (){
            document.getElementById('form_permissions').value = all_permissions;
            document.getElementById("permissionsForm").submit();
        });

        document.getElementById("assignSelected").addEventListener('click', async function(){
            /*const resp = await http_post('/api/test', {"permissions": selected_permissions});
            console.log("the respnse ::", resp);*/
            document.getElementById("permissionsForm").submit();
        })

        function permission_tile(perm) {
            let _chkd = (selected_permissions.includes(perm['id']))?
                `<input class="form-check-input mt-0" type="checkbox" value="${perm['id']}" onclick="togglePermission(event)" checked>` :
                `<input class="form-check-input mt-0" type="checkbox" value="${perm['id']}" onclick="togglePermission(event)">`;

            return '<div class="col-6 col-md-3">' +
                        '<div class="input-group mb-3">' +
                            '<div class="input-group-text">' +
                                _chkd +
                            '</div>' +
                            `<input type="text" class="form-control" aria-label="Text input with checkbox" value="${perm['permission']}" disabled>`+
                        '</div>' +
                '</div>';
        }

        function populate_permissions(_permissions) {
            pd = '';
            _permissions.forEach((perm) => {
                pd += permission_tile(perm);
            });
            document.querySelector("#permissionsContainer").innerHTML = pd;
        }
        populate_permissions(permissions);

        document.querySelector('#search_form').addEventListener('keyup', function(){
            let filtered = permissions.filter((item) => item.permission.toLowerCase().includes(this.value.toLowerCase()));
            populate_permissions(filtered);
        });
    </script>


    @endpush