@extends('partials.main')

@section('title')

Users List


@endsection

@section('content')

<style>

    .modalb{

        background:#29aae3;

        color:white;

    }

    .modalb:hover{

        background:#0293d4;

        color:white;

    }

</style>



<!-- breadcrumb -->

<div class="breadcrumb-header justify-content-between">

    <nav class="breadcrumb-4">

        <ol class="breadcrumb breadcrumb-style1">

            <li class="breadcrumb-item">

                <a href="{{ route('dashboard') }}">Dashboard</a>

            </li>

            <li class="breadcrumb-item active">User List</li>

        </ol>

    </nav>

</div>

<!-- breadcrumb -->
<div class="row row-sm">
    <div class="col-xl-12">
        <div class="card">
        <div class="card-header pb-0">
                <div class="d-flex justify-content-between">
                    <h4 class="card-title mg-b-0">User TABLE</h4>
                    <a class="btn modalb btn-with-icon" data-bs-target="#addusermodal" data-bs-toggle="modal" href=""><i
                            class="ti-plus"></i>
                        Add User
                    </a>
                </div>
            </div>
            <div class="card-body">
                 <div id="divLoader" class="text-center pt-5" style="display:block;height:300px;">
                            <span>
                                <i class="fas fa-spinner fa-spin"></i> Users are being loading.. It might take few seconds.
                            </span>
                        </div>
                <div class="table-responsive">
                    <table class="table text-md-nowrap" id="datatable">
                        <thead>
                            <tr>
                                <th class="wd-15p border-bottom-0"># </th>
                                <th class="wd-15p border-bottom-0">Image </th>
                                <th class="wd-15p border-bottom-0">User </th>
                                <th class="wd-15p border-bottom-0">Role </th>
                                <th class="wd-15p border-bottom-0">Email </th>
                                <th class="wd-15p border-bottom-0">status </th>
                                <th class="wd-15p border-bottom-0">Action</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-rows">


                        </tbody>
                    </table>
                </div>
            </div><!-- bd -->
        </div>
    </div>
</div>









<!-- Add User Modal -->

<div class="modal" id="addusermodal">

    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content modal-content-demo">

            <div class="modal-body pd-20 pd-sm-40">

                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"

                    aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

                <h5 class="modal-title mg-b-5">Create new account</h5>

                <p class="mg-b-20">Please enter following details to create account</p>

                <form action="" id='adduser'  class='mt-3'>

                    <div class="form-group">

                        <input type="text" class="form-control" name='first_name' placeholder="First name.." required>

                    </div>

                    <div class="form-group">

                        <input type="text" class="form-control" name='last_name' placeholder="Last name.." required>

                    </div>
                     <div class="form-group">
                        <select class="form-control" required name="role">
                            <option  value="" selected > Select User Role </option>
                            {{-- <option value="Admin" >Admin</option>
                            <option value="user" >Staff</option>
                            <option value="content_creator" >Content Creator</option>
                            <option value="graphic_designer" >Graphic Designer</option>
                            <option value="web_developer" >Web Developer</option> --}}
                        </select>

                    </div>

                    <div class="form-group">

                        <input type="email" class="form-control" name='email' placeholder="Email" required>

                    </div>

                    <button class="btn modalb btn-block" id="btnSubmit"> <i class="fa fa-spinner fa-pulse"

                            style="display:none;"></i> Create Account</button>

                </form>

            </div><!-- modal-body -->

        </div>

    </div>

</div><!-- modal -->





<!-- Edit User Modal -->

<div class="modal" id="editusermodal">

    <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content modal-content-demo">

            <div class="modal-body pd-20 pd-sm-40">

                <button type="button" class="close pos-absolute t-15 r-20 tx-26" data-bs-dismiss="modal"

                    aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

                <h5 class="modal-title mg-b-5">Edit Account</h5>

                <p class="mg-b-20">Edit user Information.</p>

                <form method="post" id='edituser' class='mt-3'>

                    <input type="hidden" id="id" name="id" >

                    <div class="form-group">

                        <input type="text" class="form-control first_name" name='first_name' placeholder="First name.." required>

                    </div><!-- form-group -->

                    <div class="form-group">

                        <input type="text" class="form-control last_name" name='last_name' placeholder="Last name.." required>

                    </div><!-- form-group -->

                    <div class="form-group">

                       <select class="form-control status" name="status">

                           <option value="" selected disabled>Select Status</option>

                           <option value="2">Active</option>

                           <option value="1">Inactive</option>

                           <option value="0">Pending</option>





                       </select>

                    </div>

                     <div class="form-group role">

                        <select class="form-control role" required name="role">


                            <option value="Admin" >Admin</option>
                            <option value="user" >Staff</option>




                        </select>

                    </div>



                    <div class="form-group">

                        <input type="email" class="form-control email" name='email' placeholder="Email" required>

                    </div>

                    <button class="btn modalb btn-block" id="btnSubmit"> <i class="fa fa-spinner fa-pulse"

                            style="display:none;"></i> Edit User</button>

                </form>

            </div>

        </div>

    </div><!-- modal -->





    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(e){

        var table = $('#datatable').DataTable();
        datatable('')
        // var pageInfo=table.page.info()
        function datatable(rows) {
                $("#datatable tbody").empty();
                $("#datatable").DataTable().clear();
                $("#datatable").DataTable().destroy();
                $("#tbody-rows").append(rows)
                table = $('#datatable').DataTable();
                // table.page(pageInfo.page).draw(false)
            }

        users();
        function users(){
            datatable('');
            $("#divLoader").css('display','block')
            $("#tbody").css('display','none')


            $.ajax({
                url: '/membertable',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                type: "get",
                dataType: "JSON",
                cache: false,
                beforeSend: function () {

                },
                complete: function () {

                },
                success: function (response) {

                    if (response["status"] == "fail") {
                        $("#divLoader").css('display','none')
                        $("#tbody").css('display','block')
                        toastr.info('Not Found',response["msg"])
                    } else if (response["status"] == "success") {

                        $("#divLoader").css('display','none')
                        $("#tbody").css('display','block')


                        datatable(response["rows"]);


                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }


        $(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 User!",

                type: "warning",

                buttons: true,

                confirmButtonColor: "#ff5e5e",

                confirmButtonText: "Yes, delete it!",

                closeOnConfirm: false,

                dangerMode: true,

                showCancelButton: true

            })

                .then((deleteThis) => {

                    if (deleteThis.isConfirmed) {

                        $.ajax({

                            url: '/api/deleteuser/'+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!", "User has been deleted.",

                                        "success");



                                      users()


                                }

                            },

                            error: function (error) {

                                console.log(error);

                            },

                            async: false

                        });

                    } else {

                        Swal.close();

                    }

                });

        });


        //edit

        $(document).on('click', '.editBtn', function (e) {
    var id = $(this).attr('id');

    $.ajax({
        url: '/member/'+id,
        type: "GET",
        dataType: "JSON",
        success: function (response) {

            if (response["status"] == "fail") {
                Swal.fire("Failed!", "Failed to Get User.", "error");
            } else if (response["status"] == "success") {
                $("#id").val(response["data"]["id"])

                $(".first_name").val(response["data"]["first_name"])
                $(".last_name").val(response["data"]["last_name"])
                $(".email").val(response["data"]["email"])
                $(".status").val(response["data"]["status"])

                $(".role").val(response["data"]["role"])



            }
        },
        error: function (error) {
            console.log(error);
        },
        async: false
    });
});
        //endedit


        $("#adduser").on('submit', (function (e) {

            //  alert('asd');
            //  return false;

            e.preventDefault();

            $.ajax({

                url: "/api/user/register",

                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) {



                    if (response["status"] == "fail") {

                        toastr.error('Failed',response["msg"])

                    } else if (response["status"] == "success") {

                        toastr.success('Success',response["msg"])

                        $("#adduser")[0].reset();

                        $('#addusermodal').modal('hide');



                             users()



                    }

                    else if (response["status"] == "server") {

                        toastr.error('Warning',response["msg"])

                        $("#adduser")[0].reset();

                    }

                    else if (response["status"] == "deactive") {

                        toastr.error('Not Allowed',response["msg"])

                        $("#adduser")[0].reset();

                    }

                },

                error: function (error) {

                    console.log(error);

                }

            });

        }));

        //Edit modal

         $("#edituser").on('submit', (function (e) {

            e.preventDefault();
            // alert('');

            $.ajax({

                url: "/api/profile-edit",

                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) {



                    if (response["status"] == "fail") {

                        toastr.error('Failed',response["msg"])

                    } else if (response["status"] == "success") {

                        toastr.success('Success',response["msg"])

                     $('#editusermodal').modal('hide');

                        users()

                    }

                    else if (response["status"] == "server") {

                        toastr.error('Warning',response["msg"])

                        $("#edituser")[0].reset();

                    }

                    else if (response["status"] == "deactive") {

                        toastr.error('Not Allowed',response["msg"])

                        $("#edituser")[0].reset();

                    }

                },

                error: function (error) {

                    console.log(error);

                }

            });

        }));

        })

    </script>










    @endsection