{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_order' %}
{% set actions = [
    {
        'link': path('app_admin_order_add'),
        'title': 'Add New Order'|trans,
    }
] %}

{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title': 'Order',
    }
]%}
{% block stylesheets %}
    <style>

        .table thead th.sticky-col-1,
        .table tbody td.sticky-col-1 {
            position: sticky;
            left: 0;
            background-color: #2C2D33;
            outline: 1px solid #4D4D51;
        }

        .table thead th.sticky-col-2,
        .table tbody td.sticky-col-2 {
            position: sticky;
            left: 50px;
            background-color: #2C2D33;
            outline: 1px solid #4D4D51;
        }

    </style>
{% endblock %}
{% block content %}
<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">
                    {# <a class="btn btn-secondary" href="{{ path('app_admin_order_add') }}">Add</a> #}

                    <form action="{{ path('app_admin_order') }}" 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/Email/Product" 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_order') }}">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 class="sticky-col-1">{{ knp_pagination_sortable(orders, 'Id', 'o.id') }}</th>
                    <th class="sticky-col-2">{{ knp_pagination_sortable(orders, 'Name', 'users.user_name') }}</th>
                    <th>{{ knp_pagination_sortable(orders, 'Product', 'product.name') }}</th>
                    <th>{{ knp_pagination_sortable(orders, 'Email Id', 'o.customer_email_id') }}</th>
                    <th>{{ knp_pagination_sortable(orders, 'Status', 'o.status') }}</th>
                    <th>{{ knp_pagination_sortable(orders, 'Orders Date', 'o.created_at') }}</th>
                    <th style="width: 120px;">Duration</th>
                    <th style="width: 100px;">Price</th>
                    <th>Next Payment</th>
{#                    <th>Wordpress Order</th>#}
                    <th class="table-actions">Actions</th>
                </tr>
                </thead>
                <tbody>
            {% for order  in orders %}
                    {% include 'admin/order/row.html.twig' with {'order': order} %}
                {% else %}
                    <tr class="w-100 text-center">
                        <td class="border-none" colspan="10">No Records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': orders}) }}
    </div>


{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.status-select').forEach(function (selectElement) {
                selectElement.addEventListener('change', function () {
                    const orderId = this.dataset.orderId;
                    const selectedStatus = this.value;

                    Swal.fire({
                        title: 'Are you sure?',
                        text: `Do you want to change the status to ${selectedStatus}?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, change it!',
                        customClass: {
                            confirmButton: 'btn btn-success',
                            cancelButton: 'btn btn-danger'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {

                            // Show a loading spinner while the AJAX request is in progress
                            Swal.fire({
                                title: 'Processing...',
                                text: 'Updating the order status. Please wait.',
                                icon: 'info',
                                allowOutsideClick: false,
                                showConfirmButton: false,
                                willOpen: () => {
                                    Swal.showLoading(); // Show the loading spinner
                                }
                            });

                            // Call the Ajax function to update the status in the database
                            updateOrderStatus(orderId, selectedStatus);
                        } else {
                            // Revert to the previous selection if the user cancels
                            this.value = this.querySelector('option[selected]').value;
                        }
                    });
                });
            });
        });

        function updateOrderStatus(orderId, status) {
            fetch(`/admin/order/${orderId}/status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ status: status })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire(
                            'Updated!',
                            'The order status has been updated.',
                            'success'
                        );

                        window.location.reload();
                    } else {
                        Swal.fire(
                            'Error!',
                            'There was an issue updating the order status.',
                            'error'
                        );
                    }
                })
                .catch((error) => {
                    console.error('Error:', error);
                    Swal.fire(
                        'Error!',
                        'There was an issue updating the order status.',
                        'error'
                    );
                });
        }
    </script>
{% endblock %}