{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_tickets' %}

{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'),
        'title': 'Home'
    },
    {
        'title':'Support Ticket Management'
    },
    {
        'title': 'Tickets',
    }
] %}

{% 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">
                    <form action="{{ path('app_admin_tickets') }}" 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/Status" 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_tickets') }}">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(tickets, 'Id', 't.id') }}</th>
                    <th>{{ knp_pagination_sortable(tickets, 'User Name', 'u.user_name') }}</th>
                    <th>{{ knp_pagination_sortable(tickets, 'Subject', 't.subject') }}</th>
                    <th>{{ knp_pagination_sortable(tickets, 'Description', 't.description') }}</th>
                    <th>{{ knp_pagination_sortable(tickets, 'Status', 't.status') }}</th>
                    <th class="table-actions">Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for ticket in tickets %}

                    {% include 'admin/ticket/row.html.twig' %}
                {% else %}
                    <tr class="w-100 text-center">
                        <td class="border-none" colspan="5">No Records found</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': tickets}) }}
    </div>

    <div id="update_status_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">Update Status</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 update the Ticket Status?</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-update">Update</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function() {
                var ticketId ; 
                var newStatus;
                var currentStatus;
                var currentElementId;
                $('.status-dropdown').select2({
                    minimumResultsForSearch: Infinity,
                    placeholder: 'Select Status...'
                });
                // $('.status-dropdown').change(function() {
                //     ticketId = $(this).data('ticket-id');
                //     currentStatus = $(this).data('current-status');
                //     currentElementId = $(this).attr('id');
                //     newStatus = $(this).val();
                   
                    
                //     let stopModal = $(this).data('stop-modal');
                //     if (!stopModal) {
                        
                //         $('#update_status_popup').modal('show');
                //     } else {
                //         $(this).data('stop-modal', false);
                //     }
                // });
                $('.status-dropdown').change(function() {
                    ticketId = $(this).data('ticket-id');
                    currentStatus = $(this).data('current-status');
                    currentElementId = $(this).attr('id');
                    newStatus = $(this).val();

                    if (!ticketId) return; // Exit if no ticket ID is set
                
                    var url = "{{ path('app_admin_ticket_update_status', {id: '_ticketId'}) }}";
                    url = url.replace('_ticketId', ticketId);
            
                    Swal.fire({
                        title: 'Are you sure you want to update the Ticket Status?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Update it!',
                        cancelButtonText: 'No, cancel!',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'btn btn-success',
                            cancelButton: 'btn btn-danger'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            Swal.fire({
                                title: 'Processing...',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            $.ajax({
                                url: url, // Replace with your URL
                                type: 'POST', // Use 'POST' or 'GET' as required
                                data: {
                                    status: newStatus,
                                },
                                success: function(response) {
                                    if (response.error) {
                                        Swal.fire({
                                            title: 'Failded!',
                                            text: response.error,
                                            icon: 'error',
                                            showConfirmButton: false,
                                            position: 'top-end'
                                        
                                        });
                                    } else {
                                        Swal.fire({
                                            title: 'Updated Successfully!',
                                            text: response.message,
                                            icon: 'success',
                                            toast: true,
                                            showConfirmButton: false,
                                            position: 'top-end'
                                        });
                                         window.location.href = "{{ path('app_admin_tickets') }}";
                                        // Optionally, refresh the page or update the UI
                                    }
                                },
                                error: function(xhr, status, error) {
                                    Swal.fire({
                                        title: 'Failed!',
                                        text: 'There was an error Updated the Status.',
                                        icon: 'error',
                                        showConfirmButton: false,
                                    });
                                }
                            });
                        }
                    });
                });
                // Reset ticket status when the modal is closed or dismissed
                $('#update_status_popup').on('hidden.bs.modal', function (e) {
                    $('#' + currentElementId).data('stop-modal', true);
                    $('#' + currentElementId).val(currentStatus).change();
                }); 


                $('.accept_ticket_request').click(function() {
                     var ticketId = $(this).data('bs-id'); // Retrieve the ticket ID from the button's data attribute
                     var url = "{{ path('app_admin_ticket_accept',{id: '_ticketId'}) }}";
                     url = url.replace('_ticketId', ticketId);
                     
                    Swal.fire({
                        title: 'Are you sure you want to accept this request?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Accept it!',
                        cancelButtonText: 'No, cancel!',
                        buttonsStyling: false,
                        customClass: {
                            confirmButton: 'btn btn-success',
                            cancelButton: 'btn btn-danger'
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            Swal.fire({
                                title: 'Processing...',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            $.ajax({
                                url: url, // Replace with your URL
                                type: 'POST', // Use 'POST' or 'GET' as required
                                data: {
                                    id: ticketId // Send the ticket ID in the request
                                },
                                success: function(response) {
                                    if (response.error) {
                                        Swal.fire({
                                            title: 'Failed!',
                                            text: response.error,
                                            icon: 'error',
                                            showConfirmButton: false,
                                            position: 'top-end'
                                        
                                        });
                                    } else {
                                        Swal.fire({
                                            title: 'Accepted!',
                                            text: response.message,
                                            icon: 'success',
                                            toast: true,
                                            showConfirmButton: false,
                                            position: 'top-end'
                                        });
                                         window.location.href = "{{ path('app_admin_tickets') }}";
                                        // Optionally, refresh the page or update the UI
                                    }
                                },
                                error: function(xhr, status, error) {
                                    Swal.fire(
                                        'Failed!',
                                        'There was an error accepting the request.',
                                        'error'
                                    );
                                }
                            });
                        }
                    });
                });
            });
        
        
    </script>


{% endblock  %}