@extends('partials.main')

@section('content')

<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-4">
            <div class="row mt-4">
                <div class="col-6">
                    <h3>Roles</h3>
                    <ol class="breadcrumb mb-4">
                        <li class="breadcrumb-item"><a href="">Dashboard</a></li>
                        <li class="breadcrumb-item active">Roles</li>
                    </ol>
                </div>

                <div class="col-6 text-end">
                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                        data-bs-target="#exampleModal">
                        <i class="fa fa-plus"></i> Add Role
                    </button>
                </div>
            </div>

            <div class="row  mt-1 d-flex">
                @foreach($roles as $role)
                <div class=" col-lg-4 col-md-4 col-6 ">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">

                                <span>Total {{count($role->users)}} {{$role->name}}</span>

                            </div>
                            <div class="d-flex justify-content-between align-items-end mt-1 pt-25">
                                <div class="role-heading">
                                    <h4 class="">{{ucwords($role->name)}}</h4>
                                    <a href="/role/permission/{{$role->id}}" class="">
                                        <small class="fw-bolder text-muted">Give permission</small>
                                    </a>
                                </div>
                                <a href="javascript:void(0);" class="text-body"><i data-feather="copy"
                                        class="font-medium-5"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </main>
    
</div>

@include('roles.role_modal')

@endsection

@section('scripts')

<script type="text/javascript">
    $(document).ready(function(){
        $("#role_id").on('submit', (function(e) {
            // alert('asd');
            e.preventDefault();
            $.ajax({
                url: "/api/storeerole",
                type: "post",
                data: new FormData(this),
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function() {
                    $("#btnSubmits").attr('disabled', true);
                    $(".fa-pulse").css('display', 'inline-block');
                },
                complete: function() {
                    $("#btnSubmits").attr('disabled', false);
                    $(".fa-pulse").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"])
                        $("#role_id")[0].reset();
                        window.location.href = "{{route('role')}}";
                    } else if (response["status"] == "server") {
                        toastr.error('Warning', response["msg"])
                        $("#role_id")[0].reset();
                    } else if (response["status"] == "deactive") {
                        toastr.error('Not Allowed', response["msg"])
                        $("#role_id")[0].reset();
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }));

        function disableAlert(alr) {
            $("#" + alr).css("display", "none");
        }

        $(function() {
            $('.edit-row').on('click', function(e) {
                e.preventDefault();
                url = $(this).attr('href');

                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function(response) {
                        console.log(response);
                        $('#id').val(response.id);
                        $('.name').val(response.name);
                        $('#itemModal').modal('show');
                    }
                });
            });

        });

        <!-- //for update the Role -->
        $("#updaterole_id").on('submit', (function(e) {
            // alert('asd');
            e.preventDefault();
            $.ajax({
                url: "/api/update",
                type: "post",
                data: new FormData(this),
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function() {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-pulse").css('display', 'inline-block');
                },
                complete: function() {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-pulse").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"])
                        $("#updaterole_id")[0].reset();
                        window.location.href = "{{route('role')}}";
                    } else if (response["status"] == "server") {
                        toastr.error('Warning', response["msg"])
                        $("#updaterole_id")[0].reset();
                    } else if (response["status"] == "deactive") {
                        toastr.error('Not Allowed', response["msg"])
                        $("#updaterole_id")[0].reset();
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }));

        function disableAlert(alr) {
            $("#" + alr).css("display", "none");
        }

        $(document).on('click', '.btnDelete', function(e) {
            var id = $(this).attr('id');
            Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this Order!",
                    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/' + id,
                            type: "GET",
                            dataType: "JSON",

                            success: function(response) {

                                if (response["status"] == "fail") {
                                    Swal.fire("Failed!", "Failed to delete Order.", "error");
                                } else if (response["status"] == "success") {
                                    Swal.fire("Deleted!", "Order has been deleted.",
                                        "success");

                                    // Using .reload() method.
                                    location.reload();
                                }
                            },
                            error: function(error) {
                                console.log(error);
                            },
                            async: false
                        });
                    } else {
                        Swal.close();
                    }
                });
        });
    });

</script>

@endsection