@extends('layouts.master')

@section('title')
User permissions
@endsection

@section('content')
<style>
    .table td {
        padding: 5px !important;
    }

</style>
<div class="main-container container-fluid">

    <!-- PAGE-HEADER Breadcrumbs-->
    <div class="page-header">
        <div>
        <h1 class="page-title">Users Permissions</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/user/role')}}">Role list</a></li>
                <li class="breadcrumb-item active" aria-current="page">User permissions</li>
            </ol>
        </div>
        <button type="button" class="btn btn-buzono" data-bs-effect="effect-slide-in-right"
                data-bs-toggle="modal" href="#addPermission"> <span class="fe fe-plus fs-14"></span> Add
                permissions</button>
    </div> 
    <!-- PAGE-HEADER END -->

    

    <!-- permissions -->
    <form id="save_permission">
    <input type="hidden" name="role" value="{{$roles->id}}">

        @if(isset($admins) && sizeof($admins)>0)
            <div class="card">
                <div class="card-header">
                    <div class="material-switch pull-right">
                        <input id="someSwitchOptionPrimary" name="kj" class="customSwitch1" type="checkbox" checked />
                        <label for="someSwitchOptionPrimary" class="label-primary"></label>
                        <span class="mx-2 fw-bold"> Admin permissions</span>
                    </div>
                </div>
                <div class="card-body" id="customSwitchdiv1">
                    <div class="row">
                        @foreach($admins as $admin)
                        <div class="col-lg-4 mb-2 mb-lg-0">
                            <div class="custom-control custom-checkbox mb-2">
                                <input class="form-check-input" type="checkbox" name='permission[]' value="{{ $admin->id }}" {{ $roles->hasPermissionTo($admin) ? 'checked' : '' }}>
                                <label class="form-check-label" for="flexCheckDefault"> {{ $admin->name }}</label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        @if(isset($clients) && sizeof($clients)>0)
            <div class="card">
                <div class="card-header">
                    <div class="material-switch pull-right">
                        <input id="someSwitchOptionPrimary1" name="kj" class="customSwitch2" type="checkbox" checked />
                        <label for="someSwitchOptionPrimary1" class="label-primary"></label>
                        <span class="mx-2 fw-bold"> Client permissions</span>
                    </div>
                </div>
                <div class="card-body" id="customSwitchdiv2">
                    <div class="row">
                        @foreach($clients as $client)
                        <div class="col-lg-4 mb-2 mb-lg-0">
                            <div class="custom-control custom-checkbox mb-2">
                                <input class="form-check-input" type="checkbox" name='permission[]' value="{{ $client->id }}" {{ $roles->hasPermissionTo($client) ? 'checked' : '' }}>
                                <label class="form-check-label" for="flexCheckDefault">{{ $client->name }} </label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        @if(isset($staffs) && sizeof($staffs)>0)
            <div class="card">
                <div class="card-header">
                    <div class="material-switch pull-right">
                        <input id="someSwitchOptionPrimary3" name="kj" class="customSwitch3" type="checkbox" checked />
                        <label for="someSwitchOptionPrimary3" class="label-primary"></label>
                        <span class="mx-2 fw-bold"> Staff permissions</span>
                    </div>
                </div>
                <div class="card-body" id="customSwitchdiv3">
                    <div class="row">
                        @foreach($staffs as $staff)
                        <div class="col-lg-4 mb-2 mb-lg-0">
                            <div class="custom-control custom-checkbox mb-2">
                                <input class="form-check-input" type="checkbox" name='permission[]' value="{{ $staff->id }}" {{ $roles->hasPermissionTo($staff) ? 'checked' : '' }} >
                                <label class="form-check-label" for="flexCheckDefault">{{ $staff->name }} </label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-12 text-center">
                <button type="submit" class="btn btn-buzono" id="save_role_permissions">
                   <i class="bx bx-loader-circle bx-spin fa-spin" style="display: none"></i> Save permissions</button>
            </div>
        </div>
    </form>
    
    <!-- MODALs -->
    <div class="modal fade" id="addPermission">
        <div class="modal-dialog modal-dialog-centered text-center" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold">Create permissions</h6><button aria-label="Close" class="btn-close"
                        data-bs-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form action="" id="add_permission">
                            @csrf
                        <div class="form-group mb-3">
                            <label class="form-label text-start fw-bold">Name: <span class="text-danger">*</span></label>
                            <input type="text" id="name" name="name" required class="form-control"
                                placeholder="Enter permission name">
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label text-start fw-bold">Section name: <span
                                    class="text-danger">*</span></label>
                            <select id="section" name="section" class="form-control form-select" required>
                            <option value="" selected disabled>choose permission section</option>

                                <option value="admin_permission">admin_permissions</option>
                                <option value="staff_permission">staff_permissions</option>
                                <option value="client_permission">client_permissions</option>
                            </select>

                        </div>
                            <button type="submit" class="btn btn-buzono" id="btnSubmit">
                            <i class="fa fa-spin fa-spinner mx-1" id="permission-spin" style="display: none"></i> Save</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editPermission">
        <div class="modal-dialog modal-dialog-centered text-center" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold">Edit permission</h6><button aria-label="Close" class="btn-close"
                        data-bs-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label class="form-label text-start fw-bold">Name: <span class="text-danger">*</span></label>
                        <input type="text" id="name" name="name" required class="form-control"
                            placeholder="Enter permission name">
                    </div>
                    <div class="form-group mb-3">
                            <label class="form-label text-start fw-bold">Section name: <span
                                    class="text-danger">*</span></label>
                            <select id="section" name="section" class="form-control form-select">
                            <option value="" selected disabled>choose permission section</option>

                                <option value="admin_permission">admin_permissions</option>
                                <option value="staff_permission">staff_permissions</option>
                                <option value="client_permission">client_permissions</option>
                            </select>

                        </div>
                    <div class="form-group mb-3">
                        <label class="form-label text-start fw-bold">Guard name: <span
                                class="text-danger">*</span></label>

                        <select class="form-control form-select mb-2">
                            <option selected>Select guard name</option>
                            <option value="1">Web Guard</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-buzono">Save changes</button> <button class="btn btn-light"
                        data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('bottom-script')
<script>
    $(document).ready(function (e) {
        $(".customSwitch1").click(function () {
            $("#customSwitchdiv1").toggle();
        });

        $(".customSwitch2").click(function () {
            $("#customSwitchdiv2").toggle();
        });

        $(".customSwitch3").click(function () {
            $("#customSwitchdiv3").toggle();
        });
    })

</script>

<script>
    $(document).ready(function (e) {
        // add permissions
        $("#add_permission").on('submit', (function (e) {
            e.preventDefault();
            $.ajax({
                url: '/api/add/permission',
                type: "POST",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $("#permission-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $("#permission-spin").css('display', 'none');
                },
                success: function (response) {
                    console.log(response);
                    if (response["status"] == "fail") {
                        toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Success', response["msg"])
                        $("#add_permission")[0].reset();
                        // Using .reload() method.
                        location.reload();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));

        // edit permission
        $(document).on('click', '.btnEdit', function (e) {
            var permission = $(this).attr('id');
            $.ajax({
                url: '/api/edit/permission',
                type: "GET",
                dataType: "JSON",
                data: {
                    permisson: permission

                },
                success: function (response) {
                    console.log(response);
                    if (response["status"] == "fail") {
                        // toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        // toastr.success('Success', response["msg"])
                        $("#name").val(response["data"]["name"])
                        $("#permission_id").val(response["data"]["id"])
                    }
                },
                error: function (error) {
                    console.log(error);
                },
                async: false
            });
        });

        // Update Permissiond
        $("#update_permission").on('submit', (function (e) {
            e.preventDefault();
            $.ajax({
                url: '/api/update/permisson',
                type: "POST",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-spin").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-spin").css('display', 'none');
                },
                success: function (response) {
                    console.log(response);
                    if (response["status"] === "fail") {
                        toastr.error('Failed', response["msg"])
                    } else if (response["status"] === "success") {
                        toastr.success('Success', response["msg"])
                        location.reload();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));

        // delete
        $(document).on('click', '.btnDelete', function (e) {
            var permisson = $(this).attr('id');
            Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this Permission!",
                    type: "warning",
                    buttons: true,
                    confirmButtonColor: "#ff5e5e",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false,
                    dangerMode: true,
                    showCancelButton: true
                })
                .then((deleteThis) => {
                    if (deleteThis.isConfirmed) {
                        $.ajax({
                            url: '/api/delete/permission',
                            type: "GET",
                            dataType: "JSON",
                            data: {
                                // role come from controller request
                                role: role

                            },
                            success: function (response) {

                                if (response["status"] == "fail") {
                                    toastr.error('Failed', response["msg"])
                                } else if (response["status"] == "success") {
                                    toastr.success('Success', response["msg"])
                                    // Using .reload() method.
                                    location.reload();
                                }
                            },
                            error: function (error) {
                                console.log(error);
                            },
                            async: false
                        });
                    } else {
                        Swal.close();
                    }
                });
        });
        
        $("#save_permission").on('submit',function (e){
        e.preventDefault();
        $.ajax({
            url: '/api/assign-permission',
            type: "POST",
            data:  new FormData( this ),
            dataType: "JSON",
            processData: false,
            contentType: false,
            cache: false,
            beforeSend: function(){
                $("#save_role_permissions").attr('disabled',true);
                $(".fa-spin").css('display','inline-block');
            },
            complete: function(){
                $("#save_role_permissions").attr('disabled',false);
                $(".fa-spin").css('display','none');
            },
            success: function(response) {
                console.log(response);
                if(response["status"] === "fail"){
                    toastr.error('fail',response["msg"])
                }else if(response["status"] === "success"){
                    toastr.success('success',response["msg"])
                    location.reload();
                }
            },
            error: function(error) {
                console.log(error);
            }
        });
    });

    })
</script>

<script type="text/javascript">
    // for Add Any Data/role
   
    function disableAlert(alr) {
        $("#" + alr).css("display", "none");
    }

</script>
@endsection