{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home',
    },
    {
        'title': 'Settings',
    }
]%}
{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .error {
            color: red;
        }
        .flex-container {
            display: flex;
            justify-content: space-between;
            align-items: center; /* This will align items vertically centered if they have different heights */
        }
        .weak {
            color: red;
        }
        .strong {
            color: green;
        }
    </style>
{% endblock %}

{% block content %}
    {{ form_start(form, {'attr': {'id': 'settings'}, 'enctype': 'multipart/form-data'}) }}
    <div class="row">

        <div class="col-md-6">

            <div class="card">
                <div class="card-header bg-secondary text-white border-bottom-0">
                    <h6 class="mb-0">Logo</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="logo-container mb-3">
                                {{ form_row(form.site_logo) }}

                                {# Check if logo is already uploaded and show the image #}
                                {% if settings.siteLogo %}
                                    <div class="mt-3">
                                        <p>Current Logo:</p>
                                        <img src="{{ asset('uploads/logos/' ~ settings.siteLogo) }}?id={{ random() }}" alt="Site Logo" style="max-height: 100px;">
                                    </div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <button type="submit" class="btn btn-primary">Update Logo</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header bg-secondary text-white border-bottom-0">
                    <h6 class="mb-0">Aldorado Settings</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="password-container mb-3">
                                {{ form_row(form.eldorado_point) }}
                            </div>
                            <div class="password-container mb-3">
                                {{ form_row(form.eldorado_token) }}
                            </div>
                            <div class="password-container mb-3">
                                {{ form_row(form.eldorado_category) }}
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <button type="submit" class="btn btn-primary">Update Eldorado Setting</button>
                        </div>

                    </div>

                </div>
            </div>

        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-secondary text-white border-bottom-0">
                    <h6 class="mb-0">Google reCaptcha</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            {{ form_row(form.reCAPTCHA_site_key) }}
                        </div>
                        <div class="col-lg-12">
                            {{ form_row(form.reCAPTCHA_site_secret) }}
                        </div>
                        <div class="col-lg-12">
                            {{ form_row(form.reCAPTCHA_lang) }}
                        </div>
                        <div class="col-lg-12">
                            {{ form_row(form.reCAPTCHA_faild_msg) }}
                        </div>
                        <div class="col-lg-6">
                            <button type="submit" class="btn btn-primary">Update reCaptcha Keys</button>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

    {{ form_end(form) }}

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('admin/js/jquery/jquery.validate.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            // Initialize form validation for the ticket category form
            $('#settings').validate({
                ignore: 'input[type=hidden], .select2-search__field', // Ignore hidden fields
                errorClass: 'validation-invalid-label',
                validClass: 'validation-valid-label',
                highlight: function (element, errorClass) {
                    $(element).removeClass(errorClass).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass(errorClass).addClass('is-valid');
                },
                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: {
        {#"ticket_subject_form[subject]": {
            required: true
        }#}
                    },
                    messages: {
        {# "ticket_subject_form[subject]": {
             required: "Subject is required."
         }#}
                     }
                 });

                 $('#settings').on('submit', function (e) {
                     if (!$(this).valid()) {
                         e.preventDefault(); // Stop form submission if validation fails
                         return;
                     }

                     // Show processing alert
                     Swal.fire({
                         title: 'Processing...',
                         allowOutsideClick: false,
                         didOpen: () => {
                             Swal.showLoading();
                         }
                     });
                 });
             });
    </script>
{% endblock %}