@extends('partials.main')
<!-- page title -->
@section('title')
Plans
@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;
}
</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">Plans</li>
        </ol>

    </nav>

</div>


    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-6">
                    <h5>Plans</h5>
                </div>
                <div class="col-lg-6">
                    <a href="/plan/add" class="btn btn-primary float-end btn-sm">Add Plan</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">NAME </th>
                            <th class="wd-25p border-bottom-0">CODE </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>
    $(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)
        }
        plans()
        function plans() {
            $("#divLoader").css('display', 'block');
            $("#tbody").css('display','none')

            $.ajax({
                url: '/api/plans',
                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 Plan!",

                    type: "warning",

                    buttons: true,

                    confirmButtonColor: "#ff5e5e",

                    confirmButtonText: "Yes, delete it!",

                    closeOnConfirm: false,

                    dangerMode: true,

                    showCancelButton: true

                })

                .then((deleteThis) => {

                    if (deleteThis.isConfirmed) {

                        $.ajax({

                            url: '/api/nuvie/subscription/delete/' + id,

                            type: "get",

                            dataType: "JSON",



                            success: function(response) {

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

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

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

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

                                        "success");
                                        plans()
                                }
                            },

                            error: function(error) {

                                console.log(error);

                            },

                            async: false

                        });

                    } else {

                        Swal.close();

                    }

                });

        });

    })
</script>


@endsection