@extends('partials.main')

@section('title')

 content creator


@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">content 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">Content TABLE</h4>
                    <a class="btn modalb btn-with-icon" data-bs-target="#addusermodal" data-bs-toggle="modal" href=""><i
                            class="ti-plus"></i>
                        Add Content
                    </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> conent 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">S.NO </th>
                                <th class="wd-15p border-bottom-0">Name </th>
                                <th class="wd-15p border-bottom-0">Code </th>
                                <th class="wd-15p border-bottom-0">Maximum length </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">Add content</h5>

                <p class="mg-b-20">Please enter all details</p>

                <form  id='addcontent'  class='mt-3'>

                    <div class="form-group">

                        <input type="text" class="form-control" name='name' placeholder="Enter content name" required>

                    </div>

                    <div class="form-group">

                        <input type="text" class="form-control" name='code' placeholder="Enter conent code" required>

                    </div>




                    <div class="form-group">

                        <input type="number" class="form-control" name='max_length' placeholder="Enter maximum conent length" required>

                    </div>

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

                            style="display:none;"></i> Add Content</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 Content</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 -->

</div>



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

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


            $.ajax({
                url: '/api/content/table',
                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/deletecontent/'+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");



										content()


                                }

                            },

                            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: '/content/'+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


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

             // alert('asd');

            e.preventDefault();

            $.ajax({

                url: "/api/content/add",

                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"])

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

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



						   content()



                    }



                },

                error: function (error) {

                    console.log(error);

                }

            });

        }));

        //Edit modal


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

             // alert('asd');

            e.preventDefault();

            $.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