{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_my_subscription' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_dashboard'), 'title': 'Home'
    },
    {
        'title': 'My Subscriptions',
    }
]%}

{% block content %}
    <style>
        .toggle-button{
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
    </style>
    <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_front_my_subscription') }}" method="get">
                        <div class="form-row">
                            <div class="form-group col-12 col-md-3" style="float:left; padding:5px">
                                <input type="text" class="form-control" name="search_value" id="search_value" placeholder="Search by Product Name/Duration/Status" value="{{ app.request.query.get('search_value') }}">
                            </div>
                            <div class="form-group col-md-9" style="float:right; padding:5px;">
                                <div class="input-group datepicker-range">
                                    <input type="text" class="form-control" name="start" id="startDate" placeholder="Start Date" value="{{ app.request.query.get('start') }}">
                                    <div class="input-group-append">
                                        <span class="input-group-text custom-label rounded-0">To</span>
                                    </div>
                                    <input type="text" class="form-control rounded rounded-start-0" name="end" id="endDate" placeholder="End Date" value="{{ app.request.query.get('end') }}">
                                    <div class="input-group-append col-12 col-sm-2 d-flex justify-content-center mt-2 mt-sm-0" style="float:right; margin-left: 10px;">
                                        <button class="btn btn-primary me-2 " name="is_filter" type="submit" value="true">Search</button>
                                        <a class="btn btn-secondary" href="{{ path('app_front_my_subscription') }}">Reset</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- Right Section -->
    </div>
    <div class="card">
        <div class="table-responsive">
            <table class="table table-striped text-center">
                <thead>
                <tr>
                    <th>Order Id</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Product Name</th>
                    <th>Duration</th>
                    <th>Status</th>
                    <th>Trial Time</th>
                    <th>Daily Running</th>
                    <th>Period of Time</th>
                    <th>Auto renewal</th>
                    <th>CONFIG</th>
                </tr>
                </thead>
                <tbody>
                {% for subscription in subscriptionData %}
                    {% include 'frontend/my_subscription/row.html.twig' %}
                {% else %}
                    <tr class="w-100 text-center ">
                        <td class="border-none" colspan="11"><center>No Records found</center></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {{ include('helper/pagination_card_footer.html.twig', {'knp_result_set': subscriptionData}) }}
    </div>


{#    Model for Subscription Cancellation Survey  #}
    <div class="modal fade bd-example-modal-lg" id="surveyPopup" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"  data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="surveyPopupLabel">Subscription Cancellation Survey</h5>
                </div>
                <div class="modal-body">
                    <p>Thank you for being a valued client. We would appreciate your feedback to help us improve our services.</p>
                    <form id="survey-form" method="post" action="{{ path('app_front_my_subscription') }}">
                        {{ form_start(form) }}
                        <div class="question" id="question-1">
                            <div class="mb-3">
                                <div class="form-label">
                                    {{ form_label(form.reason, null, {'label_attr': {'class': 'form-label'}}) }}
                                </div>
                                {% for child in form.reason %}
                                    <div class="form-check">
                                        {{ form_widget(child, {'attr': {'class': 'form-check-input'}}) }}
                                        {{ form_label(child, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="question" id="question-2">
                            <div class="mb-3">
                                <div class="form-label">
                                    {{ form_label(form.satisfaction, null, {'label_attr': {'class': 'form-label'}}) }}
                                </div>
                                {% for child in form.satisfaction %}
                                    <div class="form-check">
                                        {{ form_widget(child, {'attr': {'class': 'form-check-input'}}) }}
                                        {{ form_label(child, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="question" id="question-3">
                            <div class="mb-3">
                                <div class="form-label">
                                    {{ form_label(form.recommendation, null, {'label_attr': {'class': 'form-label'}}) }}
                                </div>
                                {% for child in form.recommendation %}
                                    <div class="form-check">
                                        {{ form_widget(child, {'attr': {'class': 'form-check-input'}}) }}
                                        {{ form_label(child, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="question" id="question-4">
                            <div class="mb-3">
                                <div class="form-label">
                                    {{ form_label(form.subscription_duration, null, {'label_attr': {'class': 'form-label'}}) }}
                                </div>
                                {% for child in form.subscription_duration %}
                                    <div class="form-check">
                                        {{ form_widget(child, {'attr': {'class': 'form-check-input'}}) }}
                                        {{ form_label(child, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="question" id="question-5">
                            <div class="mb-3">
                                <div class="form-label">
                                    {{ form_label(form.improvement, null, {'label_attr': {'class': 'form-label'}}) }}
                                </div>
                                <div class="form-group">
                                    {{ form_widget(form.improvement, {'attr': {'class': 'form-control'}}) }}
                                </div>
                            </div>
                        </div>
                        <div class="question" id="question-6">
                            <div class="mb-3">
                                <div class="form-label">
                                    {{ form_label(form.re_subscribe, null, {'label_attr': {'class': 'form-label'}}) }}
                                </div>
                                {% for child in form.re_subscribe %}
                                    <div class="form-check">
                                        {{ form_widget(child, {'attr': {'class': 'form-check-input'}}) }}
                                        {{ form_label(child, null, {'label_attr': {'class': 'form-check-label'}}) }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="question" id="question-7">
                            <div class="mb-3">
                                <div class="form-label">
                                    {{ form_label(form.additional_comments, null, {'label_attr': {'class': 'form-label'}}) }}
                                </div>
                                <div class="form-group">
                                    {{ form_widget(form.additional_comments, {'attr': {'class': 'form-control'}}) }}
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="subscription_id" id="hidden-subscription-id" value="">
                        <div class="d-flex justify-content-end mt-4 gap-3">
                            <button type="reset" id="reset-button" class="btn btn-lg btn-secondary">Reset</button>
                            <button type="submit" id="submit-button" class="btn btn-lg btn-primary">Submit</button>
                        </div>
                        {{ form_end(form) }}
                    </form>
                </div>
            </div>
        </div>
    </div>
<style>
    legend{
        float: none;
    }
</style>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
    <script>
        // for cancellation subscription
        var selector_cancel_button = document.querySelectorAll('.cancel-user-subscription');
        var currentSubscriptionId = null;

        selector_cancel_button.forEach((a) => {
            a.addEventListener('click', function (e) {
                e.preventDefault();
                currentSubscriptionId = this.getAttribute('data-id');

                Swal.fire({
                    title: 'Are you sure?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, cancel it!',
                    customClass: {
                        popup: 'animation animated fadeInDownBig',
                        confirmButton: 'btn btn-primary animation animated pulse',
                        input: 'form-control',
                        icon: 'custom-icon',
                        cancelButton: 'btn btn-danger animation animated pulse',
                    },
                    buttonsStyling: true,
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        cancelSubscription();
                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        Swal.close();
                    }
                });
            });
        });


        // function for redirect url and cancel subscription  AJAX
        function cancelSubscription() {
            var l = Ladda.create(document.querySelector('.cancel-user-subscription'));
            l.start();

            var cancel_subscription_url = "{{ path('app_front_cancel_subscription', {'id': '__subscription_ID__'}) }}";
            cancel_subscription_url = cancel_subscription_url.replace("__subscription_ID__", currentSubscriptionId);
            var formData = new FormData();

            fetch(cancel_subscription_url, {
                method: 'POST',
                body: formData
            }).then(function (response) {
                return response.json();
            }).then(function (json) {
                l.stop();
                Swal.close();  // Close the processing alert before showing the next alert
                if (json.status) {
                    document.getElementById('hidden-subscription-id').value = currentSubscriptionId;
                    Swal.fire({
                        title: 'Cancelled!',
                        text: 'Your subscription has been cancelled.',
                        icon: 'success',
                        confirmButtonText: 'OK',
                        customClass: {
                            popup: 'animation animated fadeInDownBig',
                            confirmButton: 'btn btn-primary animation animated pulse',
                            input: 'form-control',
                        },
                        buttonsStyling: true,
                    }).then((result) => {
                        if (result.isConfirmed) {
                            Swal.fire({
                                title: 'Processing...',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                            Swal.close();
                            var myModal = new bootstrap.Modal(document.querySelector('.modal'));
                            myModal.show();
                        }
                    });
                } else {
                    Swal.fire(
                        'Error!',
                        json.errorMessage,
                        'error'
                    );
                }
            }).catch(function (error) {
                l.stop();
                Swal.close();  // Close the processing alert in case of an error
                Swal.fire(
                    'Error!',
                    'An unexpected error occurred.',
                    'error'
                );
            });
        }

        // for model not close when user click outside model
        document.addEventListener('DOMContentLoaded', (event) => {
            // Remove the close button in the modal header
            document.querySelector('#surveyPopup .modal-header .close').remove();

            // Prevent modal from being closed in other ways if necessary
            $('#surveyPopup').modal({
                backdrop: 'static',
                keyboard: false
            });
        });
    </script>

{% endblock %}