@extends('partials.main')
<!-- page title -->
@section('title')
Features
@endsection

@section('content')
<style>
.modalb {
    background: #29aae3;
    color: white;
}

.modalb:hover {
    background: #0293d4;
    color: white;
}



.custom-search1 {
    border-radius: 20px;
    background: #ecf0fa;
    border: 1px solid #ecf0fa;
}

.custom-search .bt {
    margin-left: -35px;
    margin-top: 12px;
}

.page-item.next a {
    width: 64px;
}

.page-item.prev a {
    width: 64px;
}
.horizontalMenucontainer .breadcrumb-header {
    margin-top: 10px !important;
    padding-top: 0px;
}
</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">Features</li>
        </ol>

    </nav>

</div>


    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    <h5>Features</h5>
                </div>
                <div class="col-lg-6">
                    <a href="/plan/feature/add" class="btn btn-primary float-end btn-sm">Add Feature</a>
                </div>
            </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-35p border-bottom-0">FEATURE </th>
                            <th class="wd-25p border-bottom-0">SUB FEATURE </th>
                            <th class="wd-25p border-bottom-0">MANAGE </th>

                        </tr>
                    </thead>
                    <tbody id="tbody-rows">


                    </tbody>
                </table>
            </div>

        </div>
    </div>


<!-- row closed -->

<!-- row opened cards-->


<!-- /row -->





<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    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)
        }
        features()
        function features() {
            $("#divLoader").css('display', 'block');
            $("#tbody").css('display','none')
            $.ajax({
                url: '/api/features',
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                type: "get",
                dataType: "JSON",
                beforeSend: function() {

                },
                complete: function() {
                    $("#divLoader").css('display', 'none')
                },
                success: function(response) {
                    console.log(response)
                    if (response["status"] == "fail") {
                        $("#divLoader").css('display','none')
                        $("#tbody").css('display','block')
                    } 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 Feature!",

                    type: "warning",

                    buttons: true,

                    confirmButtonColor: "#ff5e5e",

                    confirmButtonText: "Yes, delete it!",

                    closeOnConfirm: false,

                    dangerMode: true,

                    showCancelButton: true

                })

                .then((deleteThis) => {

                    if (deleteThis.isConfirmed) {

                        $.ajax({

                            url: '/api/feature/delete/' + id,

                            type: "DELETE",

                            dataType: "JSON",



                            success: function(response) {

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

                                    Swal.fire("Failed!", "Failed to delete Feature.", "error");

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

                                    Swal.fire("Deleted!", "Feature has been deleted.",

                                        "success");
                                    features()
                                }
                            },

                            error: function(error) {

                                console.log(error);

                            },

                            async: false

                        });

                    } else {

                        Swal.close();

                    }

                });

        });
        $(document).on('click','.EditFeature',function(){
            var id = $(this).attr('id');
            $("#displayDiv"+id).css('display','none');
            $("#inputDiv"+id).css('display','block');
        })
        $(document).on('click','.btnUpdate',function(){
            var id = $(this).attr('id');
            name = $("#input"+id).val();
            $.ajax({

                url: "/api/feature/name/update",

                type: "post",

                data: {id:id,name:name},

                dataType: "JSON",

                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

                cache: false,

                beforeSend: function () {

                    $(".btnUpdate").attr('disabled', true);

                    $("#fa-spin").css('display', 'inline-block');

                },

                complete: function () {

                    $(".btnUpdate").attr('disabled', false);

                    $("#fa-spin").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"])
                        features()





                    }


                },

                error: function (error) {

                    console.log(error);

                }

                });

        })
})

</script>

@endsection