{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_tickets' %}
{% set breadcrumbs = [
    {
         'link': path('app_front_dashboard'), 'title': 'Home'
    },
    {
        'title': 'Support Tickets',
    },
    {
        'link': path('app_front_tickets'),
         'title': 'Tickets'
    },
    {
        'title': 'Raise'
    }
]%}
{% block stylesheets %}

{% endblock %}

{% block content %}


        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <h2>Raise a Ticket </h2>
                        {{ form_start(form, {'attr': {'id': 'ticket_form'}}) }}
                        {% if form.subscription_id is defined %}
                              {{ form_row(form.subscription_id) }}
                        {% endif %}
                        {{ form_row(form.subject) }}
                        {{ form_row(form.description) }}
                        {{ form_row(form.category) }}
                         <div class="col-lg-12">
                        <button class="btn btn-primary toggle-button">{{ submit_button_label|default('Submit') }}</button>
                    </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block javascripts %}
<script>
    $(document).ready(function() {
        $('#ticket_form').validate({
            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            success: function(label) {
                label.addClass('validation-valid-label').text('Success.');
            },
            errorPlacement: function(error, element) {
                if (element.hasClass('multiselect')) {
                    error.appendTo(element.parent().parent());
                } else if (element.parents().hasClass('form-control-feedback') || element.parents().hasClass('form-check') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                "create_ticket_form[subject]": {
                    required: true
                },
                "create_ticket_form[category]": {
                    required: true,
                }
            },
            messages: {
                "create_ticket_form[subject]": {
                    required: "Subject is required."
                },
                "create_ticket_form[category]": {
                    required: "Category is required.",
                }
            }
        });
        $('#ticket_form').on('submit', function(e) {
            // Check if the form is valid
            if ($(this).valid()) {
                Swal.fire({
                    title: 'Processing...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                this.submit();
            }
        });
    });
</script>
{% endblock %}