<%- include('../include/header') %>
    <link rel="stylesheet" href="modules/datatables/datatables.min.css">
    <link rel="stylesheet" href="modules/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
    <!-- Main Content -->
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Products</h1>
                <div class="section-header-breadcrumb">
                    <div class="breadcrumb-item active"><a href="dashbOard">Dashboard</a></div>
                    <div class="breadcrumb-item"><a href="javascript:void (0)">Products</a></div>
                    <div class="breadcrumb-item">Product List</div>
                </div>
            </div>

            <div class="section-body">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="<%= JSON.stringify(products) %>">Product List</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped" id="table-1">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Title</th>
                                                <th>Product Code</th>
                                                <th>Showing Price</th>
                                                <th>Selling Price</th>
                                                <th>Discount</th>
                                                <th>is Featured</th>
                                                <th>On Sale</th>
                                                <th>Total Qty Available</th>
                                                <th>Shipping Charges</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% if(products.length> 0){ products.forEach((product,index) => { %>

                                                <tr>
                                                    <td>
                                                        <%= index +1 %>
                                                    </td>
                                                    <td>
                                                        <%= product.title %>
                                                    </td>
                                                    <td>
                                                        <%= product.p_code %>
                                                    </td>
                                                    <td>
                                                        <%= product.display_price %>
                                                    </td>
                                                    <td>₹ <%= product.selling_price %>
                                                    </td>
                                                    <td>
                                                        <%= product.discount %>
                                                    </td>
                                                    <td>
                                                        <input type="checkbox" name="" id="" onclick="updateStatus(this,'<%= product.id %>','is_featured')" data-value="<%= product.is_featured == '1' ? '0' : '1' %>" <%= product.is_featured == '1' ? 'checked' : '' %>>
                                                    </td>
                                                    <td>
                                                        <input type="checkbox" name="" id="" onclick="updateStatus(this,'<%= product.id %>','on_sale')" data-value="<%= product.on_sale == '1' ? '0' : '1' %>" <%= product.on_sale == '1' ? 'checked' : '' %>>
                                                    </td>
                                                    <td>
                                                        <%= product.total_qty %>
                                                    </td>
                                                    <td>
                                                        <%= product.shipping_charges %>
                                                    </td>
                                                    <td><span
                                                            class="badge status-<%= product.id %> badge-<%= product.status == '1' ? 'success' : 'danger' %>">
                                                            <%= product.status=='1' ? 'Active' : 'Inactive' %>
                                                        </span></td>
                                                    <td><button class="btn btn-primary"
                                                            onclick="updateStatus(this,'<%= product.id %>','status')"
                                                            data-value="<%= product.status == 1 ? '0' : '1' %>">Change
                                                            Status</button></td>
                                                </tr>

                                                <% }); }else{ %>
                                                    <tr class="text-center">
                                                        <th colspan="5">No Products Found</th>
                                                    </tr>
                                                    <% } %>
                                        </tbody>
                                    </table>

                                    <!-- pagination Custom Code -->
                                    <div class="d-flex float-right">
                                        <nav aria-label="Page navigation example">
                                            <ul class="pagination">
                                                <% if(current_page> 1){ %>
                                                    <li class="page-item"><a class="page-link"
                                                            href="allProducts?page=<%= current_page == 1 ? 1 : current_page-1 %>">Previous</a>
                                                    </li>
                                                    <li class="page-item"><a class="page-link"
                                                            href="allProducts?page=1">First</a>
                                                    </li>
                                                    <% } %>

                                                        <% var j=1; var leftnum=total_page_count-current_page; var
                                                            startNum=leftnum <=3 && current_page> 1 ? current_page - 2 :
                                                            current_page;
                                                            for(var i = startNum || 1; i <= total_page_count; i++ ){
                                                                if(j <=3 ){ %>
                                                                <li
                                                                    class="page-item <%= current_page == i ? 'active' : '' %>">
                                                                    <a class="page-link"
                                                                        href="allProducts?page=<%= i %>">
                                                                        <%= i %>
                                                                    </a>
                                                                </li>
                                                                <% j++; } }%>


                                                                    <% if(total_page_count> 1 && current_page < total_page_count){ %>
                                                                    <% if(total_page_count> 3){ %>
                                                                                <li class="page-item">...</li>
                                                                    <% } %>
                                                                    <li class="page-item"><a class="page-link" href="allProducts?page=<%= total_page_count %>">Last</a>
                                                                    </li>
                                                                    <li class="page-item"><a
                                                                            class="page-link"
                                                                            href="allProducts?page=<%= current_page+1 %>">Next</a>
                                                                    </li>
                                                                    <% } %>
                                            </ul>
                                        </nav>
                                    </div>
                                    <!-- pagination Custom Code -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>


    <%- include('../include/footer') %>
        <script src="modules/datatables/datatables.min.js"></script>
        <script src="modules/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#table-1').DataTable({
                    paging: false
                });
            });


            // update Product Status
            function updateStatus(btn, id, updateColumn) {

                var value = $(btn).attr('data-value');
                var new_value = value == 1 ? 0 : 1


                if (updateColumn == 'status') {
                    $(btn).html('Please Wait...');
                    var new_text = value == 1 ? 'Active' : 'Inactive'
                    var add_class = value == 1 ? 'badge-success' : 'badge-danger'
                    var remove_class = value == 1 ? 'badge-danger' : 'badge-success'
                }
                else{
                    $(btn).after('<span class="fa fa-spinner fa-spin spinner"></span>');
                    $(btn).attr('disabled',true)
                }

                var verified = updateColumn == 'status' && value == 0 ? 0 : 1;
                if (updateColumn == 'status' && value == 0) {
                    if(confirm("Are you sure you want to deactivate?")){
                        verified = 1;
                    }else{
                        $(btn).html('Change Status');
                    }
                }

                if (verified == 1 || updateColumn != 'status') {
                    // axios
                    try {
                        axios.post(`/admin/updateStatus`, { id, status: value, column: updateColumn,table:'all_products' }).then(res => {
                            show_Toaster(res.data.message, res.data.type);
                            if (res.data.type === 'success') {

                                if (updateColumn == 'status') {
                                    $(btn).html('Change Status');
                                    $(`.status-${id}`).removeClass(remove_class);
                                    $(`.status-${id}`).addClass(add_class);
                                    $(`.status-${id}`).html(new_text);
                                }else{
                                    $('.spinner').remove();
                                    $(btn).attr('disabled',false)
                                }


                                $(btn).attr('data-value', new_value);
                            }

                        }).catch(err => {
                            if (err.response.data.errors) {
                                Object.values(err.response.data.errors).map(item => {
                                    show_Toaster(item[0], 'error');
                                })
                            }
                        });

                    }
                    catch (err) {
                        show_Toaster('Something went wrong, Try again later!!', 'error');
                    }
                }
            }
            
        </script>