@extends('layouts.main-layout')
@section('title')
Assign permissions to UserTypes | Dashboard
@endsection
@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <div class="card mb-5 mb-xl-8">

                <!--begin::Header-->
                <div class="card-header border-0 pt-5">
                    <p class="alert alert-success" id="msg" style="display: none;"></p>
                    <h3 class="card-title atrgn-items-start flex-column">
                        <span class="text-center card-label fw-bolder fs-3 mb-1"> User Permissions</span>

                    </h3>
                </div>
                <div class="card-body py-3 ">
            <div class="row-fluid">
                <div class="span12">
                 <div class="grid simple ">
                    <div class="grid-body ">
            <form action="{{route('admin.user-types.assign',$userType->UserTypeId)}}" method="post">
                <table class="table mt-10 table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 " id="myTable">
                    <thead>
                    <tr class="fw-bolder text-muted ">
                            <th>#</th>
                            <th>Permission Name</th>
                            <th>
                                <label>
                                    <input
                                        type="checkbox"
                                        id="permission-all"
                                    />
                                    <span>Assign Permissions</span>
                                </label>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($permissions as $permission)
                            <tr>
                                <td>{{$loop->index + 1}}</td>
                                <td>{{$permission->Name}}</td>
                                <td>
                                    <label>
                                        @if($userPermissions->find($permission->PermissionId) && $userPermissions->find($permission->PermissionId == $permission->PermissionId))
                                            <input
                                                type="checkbox"
                                                name="permission-{{$permission->PermissionId}}"
                                                class="permission-check"
                                                id="permission-{{$permission->PermissionId}}"
                                                checked
                                            />
                                        @else
                                            <input
                                                type="checkbox"
                                                name="permission-{{$permission->PermissionId}}"
                                                class="permission-check"
                                                id="permission-{{$permission->PermissionId}}"
                                            />
                                        @endif
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                @csrf
                <div class="center-align">
                    <button type="submit" class="btn btn-success">Save Changes</button>
                </div>
            </form>
        <br>
        </div>
        </div>
        </div>
        </div>
    </div>
@endsection

@section('js')
<script>
    $(document).ready(function(){
        $('#permission-all').click(function(e){
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
    });
</script>
@endsection

<style>
    /* td{
        border: 1px solid black !important;
    }
    table{
        border: 1px solid black !important;
    } */
</style>