{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_product' %}
{% set actions = [
    {
        'link': path('app_admin_product_new'),
        'title': 'Add New Product'|trans,
    }
] %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title':'Product Management',
    },
    {
        'title': 'Products',
    }
]%}

{% block content %}
   <div class="row">
    <div class="col-lg-4 col-md-6 mb-3">
        <div class="card bg-teal text-white">
            <div class="card-body">
                <div class="row">
                    <div class="col-3">
                        <i class="ph ph-list" style="font-size: 40px"></i>
                    </div>
                    <div class="col">
                        <h4>Total Product</h4>
                        <h3>{{ productCount is not null ? productCount : 'N/A'}}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-3">
        <div class="card bg-pink text-white">
            <div class="card-body">
                <div class="row">
                    <div class="col-3">
                        <i class="ph ph-check-circle" style="font-size: 40px"></i>   
                    </div>
                    <div class="col">
                        <h4>Published Products</h4>
                        <h3>{{ publishProductCount is not null ? publishProductCount : 'N/A'}}</h3>    
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-3">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="row">
                    <div class="col-3">
                        <i class="ph ph-warning" style="font-size: 40px"></i>   
                    </div>
                    <div class="col">
                        <h4>Unpublished Products</h4>
                        <h3>{{ unpublishProductCount is not null ? unpublishProductCount : 'N/A'}}</h3>      
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
        <!-- Left Section -->
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-secondary text-white border-bottom-0">
                    <h6 class="mb-0">Search</h6>
                </div>
                <div class="card-body">
                    <form action="{{ path('app_admin_product') }}" method="get">
                        <div class="form-row col-12 col-sm-6 col-md-6 col-lg-8 col-xl-6"style="float:right;"  >
                            <div class="form-group mb-2 col-12 col-sm-6 col-md-6 col-lg-8 col-xl-8" style="float:left;margin-right: 5px;">
                                <input type="text" class="form-control" name="search_value" id="search_value" placeholder="Search by name / sku / category" value="{{ app.request.query.get('search_value') }}">
                            </div>
                            <button class="btn btn-primary" name="is_filter" type="submit" value="true">Search</button>
                            <a class="btn btn-secondary" href="{{ path('app_admin_product') }}">Reset</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</div>
    <div class="card">
        <div class="table-responsive">
            <table class="table table-bordered table-striped text-center">
                <thead>
                <tr>
                    <th>{{ knp_pagination_sortable(products, 'Id', 'prod.id') }}</th>
                    <th>{{ knp_pagination_sortable(products, 'Name', 'prod.name') }}</th>
                    <th>{{ knp_pagination_sortable(products, 'Description', 'prod.description') }}</th>
                    <th>{{ knp_pagination_sortable(products, 'SKU', 'prod.sku') }}</th>
                    <th>{{ knp_pagination_sortable(products, 'Regular Price', 'prod.regular_price') }}</th>
                    <th>{{ knp_pagination_sortable(products, 'Category', 'cat.name') }}</th>
                    <th>{{ knp_pagination_sortable(products, 'Url', 'prod.product_url') }}</th>
                    <th>{{ knp_pagination_sortable(products, 'Status', 'prod.status') }}</th>
{#                    <th>Wordpress Product</th>#}
                    <th class="table-actions">Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for product in products %}
                    {% include 'admin/products/row.html.twig' %}
                {% else %}
                    <tr class="w-100 text-center">
                        <td class="border-none" colspan="9">No Records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': products}) }}
    </div>

    <div id="delete_product_popup" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger">
                    <h6 class="modal-title text-white">Delete Product</h6>
                    <button aria-label="Close" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <h6 class="font-weight-semibold">Are you sure you want to delete this product?</h6>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn bg-danger text-white" id="confirm-delete">Approve the Deletion</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function() {
            var currentProductId; // Temporary storage for the product ID

            $('.delete-user-email').click(function() {
                currentProductId = $(this).data('id'); // Store the product ID when the delete button is clicked
                $('#delete_product_popup').modal('show');
            });

            // Override Noty defaults
            Noty.overrideDefaults({
                theme: 'limitless',
                layout: 'topRight',
                timeout: 3500
            });

            $('#confirm-delete').click(function() {
                if (!currentProductId) return; // Exit if no product ID is set

                // Adjust the URL path to your actual deletion route
                // If using Symfony, you might generate this URL in your Twig template using the path() function
{#                var deleteUrl = `/admin/products/${currentProductId}/delete`;#}
                
                let deleteUrl = "{{ path('app_admin_product_delete', {id: '_currentProductId'}) }}";
                deleteUrl = deleteUrl.replace('_currentProductId', currentProductId);

                $.ajax({
                    type: "POST",
                    url: deleteUrl, // Your endpoint for deletion
                    data: {
                        product_id: currentProductId,
                        csrf: '{{ csrf_token('usercsrf') }}' // Assuming you're passing CSRF token for security
                    },
                    beforeSend: function() {
                        // Show a loading modal before sending the request
                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    },
                    success: function(response) {
                        $('#delete_product_popup').modal('hide');
                        Swal.close();
                        if (response.status) { // Assuming the response object has a status property
                            // Handle successful deletion, e.g., remove the product element or refresh
                            location.reload(); // or $(`#product-${currentProductId}`).remove(); to remove the product from the list without reloading
                        }else {
                            new Noty({
                                text: response.errorMessage,
                                type: 'error'
                            }).show();
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.close();
                        // Handle AJAX request error
                        console.log("AJAX request failed: ", error);
                        new Noty({
                            text: response.errorMessage,
                            type: 'error',
                        }).show();
                    }
                });
            });

            // Reset currentProductId when the modal is closed or dismissed
            $('#delete_product_popup').on('hidden.bs.modal', function () {
                currentProductId = null;
            });
        });
    </script>


{% endblock  %}