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


{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title': 'Email Management',
    },
    {
        'title': 'Email Setting',
    }
]%}

{% block content %}
    <style>
        .collapsible-indicator{
            cursor: pointer;
        }

        .collapsible-indicator {
            transition: transform 0.3s ease; /* Smooth transition */
        }

        .collapsible-indicator.rotate {
            transform: rotate(90deg); /* Rotate indicator when open */
        }
    </style>
        <div class="card main-card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h1>Email Setting</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="mt-3">Enter your additional E-Mail recipients.</h5>
                        <div id="emailFields">
                            {% if savedEmails %}
                                <div class="input-group-append mb-3">
                                    <button class="btn btn-success" type="button" id="addEmailButton">Add</button>
                                    <button class="btn btn-primary" type="button" id="addEmailSaveButton">Save</button>
                                </div>
                            {% for email in savedEmails %}
                                <div class="input-group mb-3 gap-3">
                                    <input type="email" name="emails[]" class="form-control email-input" value="{{ email }}" placeholder="Enter email">
                                    <div class="input-group-append">
                                        <button class="btn btn-danger" type="button" onclick="removeEmailField(this)">Remove</button>
                                    </div>
                                </div>
                            {% endfor %}
                            {% else %}
                                <div id="emailFields">
                                    <div class="input-group mb-3 gap-3">
                                        <input type="email" name="emails[]" class="form-control email-input" placeholder="Enter email">
                                        <div class="input-group-append">
                                            <button class="btn btn-success" type="button" id="addEmailButton">Add</button>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button" id="addEmailSaveButton">Save</button>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <h4 class="mt-4">Select the Mails you want to have multiple recipients</h4>
                        {% for category in emailCategories %}
                            <h5 class="mt-4">{{ category.categoryname }}</h5>
                            {% if category.emailTypes is not empty %}
                                {% for emailType in category.emailTypes %}
                                    <form id="email-setting-form-{{ emailType.id }}" method="post" action="{{ path('app_admin_email_setting') }}">
                                        <div class="row mb-3">
                                            <div class="col-12">
                                                <div class="card bg-opacity-10 bg-dark p-4 email-type">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div class="d-flex align-items-center">
                                                            <i id="collapseIndicator{{ emailType.id }}" class="ph-caret-right collapsible-indicator me-2" data-bs-toggle="collapse" data-bs-target="#collapse{{ emailType.id }}" aria-expanded="false" aria-controls="collapse{{ emailType.id }}"></i>
                                                            <div class="form-check form-switch">
                                                                <input class="form-check-input" type="checkbox" name="emailTypes[]" value="{{ emailType.id }}" id="emailType{{ emailType.id }}" style="cursor: pointer" {% if emailType.isenable %}checked{% endif %}>
                                                                <label class="form-check-label" for="emailType{{ emailType.id }}">
                                                                    {{ emailType.actionname }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <span class="status-text {% if emailType.isenable %}text-success{% else %}text-danger{% endif %}">
                                                                {{ emailType.isenable ? 'Active' : 'Inactive' }}
                                                            </span>
                                                        </div>

                                                    </div>
                                                    <div id="collapse{{ emailType.id }}" class="collapse">
                                                        <div class="card-body mt-4">
                                                            <div class="mb-3">
                                                                <label for="email_setting_subject_{{ emailType.id }}" class="form-label required">Subject</label>
                                                                <input type="text" id="email_setting_subject_{{ emailType.id }}" name="email_setting[subject]" required="required" class="form-control" value="{{ emailType.subject }}">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="email_setting_content_{{ emailType.id }}" class="form-label required">Content</label>
                                                                <textarea id="email_setting_content_{{ emailType.id }}" name="email_setting[content]" required="required" class="form-control">{{ emailType.content }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <input type="hidden" name="email_setting[emailSettingId]" value="{{ emailType.id }}">
                                                                <button type="submit" id="email_setting_save_{{ emailType.id }}" name="save" class="btn-primary btn">Save</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                {% endfor %}
                            {% else %}
                                <p>No email types available for this category.</p>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const emailFieldsContainer = document.getElementById('emailFields');
            const addEmailButton = document.getElementById('addEmailButton');
            const addEmailSaveButton = document.getElementById('addEmailSaveButton');
            const emailTypeIds = {{ emailTypeIds|json_encode|raw }};
            emailTypeIds.forEach(function(id) {
                ClassicEditor
                    .create(document.querySelector('#email_setting_content_' + id))
                    .catch(error => {
                        console.error(error);
                    });
            });

            addEmailButton.addEventListener('click', () => {
                const emailFieldGroup = document.createElement('div');
                emailFieldGroup.className = 'input-group mb-3 gap-3';

                const emailField = document.createElement('input');
                emailField.type = 'email';
                emailField.name = 'emails[]';
                emailField.className = 'form-control email-input';
                emailField.placeholder = 'Enter email';
                emailFieldGroup.appendChild(emailField);

                const inputGroupAppend = document.createElement('div');
                inputGroupAppend.className = 'input-group-append';

                const removeButton = document.createElement('button');
                removeButton.className = 'btn btn-danger';
                removeButton.type = 'button';
                removeButton.textContent = 'Remove';
                removeButton.addEventListener('click', () => {
                    emailFieldGroup.remove();
                });
                inputGroupAppend.appendChild(removeButton);

                emailFieldGroup.appendChild(inputGroupAppend);
                emailFieldsContainer.appendChild(emailFieldGroup);
            });

            addEmailSaveButton.addEventListener('click', () => {
                // Collect the email data
                const emails = [];  // Collect email data from your form inputs

                // Assuming you have inputs with class 'email-input' to collect email addresses
                document.querySelectorAll('.email-input').forEach(input => {
                    if (input.value) {
                        emails.push(input.value);
                    }
                });

                if (emails.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No emails provided',
                        text: 'Please enter at least one email address before saving.',
                    });
                    return;
                }

                // Use the route name dynamically in the fetch request
                const saveEmailsUrl = '{{ path('app_admin_save_emails') }}';

                // Show a loading indicator
                Swal.fire({
                    title: 'Processing...',
                    text: 'Please wait while we save your emails.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Make the AJAX request
                fetch(saveEmailsUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ emails: emails })
                })
                .then(response => response.json())
                .then(data => {
                    Swal.close();
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Emails Saved',
                            text: 'Emails have been saved successfully.',
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Failed to Save',
                            text: data.message || 'There was a problem saving the emails.',
                        });
                    }
                })
                .catch(error => {
                    Swal.close();
                    console.error('Error:', error);
                    console.error('Error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error Occurred',
                        text: 'An error occurred while saving the emails. Please try again.',
                    });
                });
            });
        });

        function removeEmailField(button) {
            button.closest('.input-group').remove();
        }

        // Select all collapsible indicators
            document.querySelectorAll('.collapsible-indicator').forEach(function (indicator) {
                var targetId = indicator.getAttribute('data-bs-target');
                var targetElement = document.querySelector(targetId);

                // Event listeners for collapse events
                targetElement.addEventListener('shown.bs.collapse', function () {
                    indicator.classList.add('rotate');
                });

                targetElement.addEventListener('hidden.bs.collapse', function () {
                    indicator.classList.remove('rotate');
                });
            });

        $(document).ready(function() {
            $('.form-check-input').change(function() {
                const checkbox = $(this);
                const emailSettingId = checkbox.val();
                const isChecked = checkbox.is(':checked') ? 1 : 0;

                const statusText = checkbox.closest('.d-flex').find('.status-text');
                if (isChecked) {
                    statusText.text('Active').removeClass('text-danger').addClass('text-success');
                } else {
                    statusText.text('Inactive').removeClass('text-success').addClass('text-danger');
                }

                Swal.fire({
                    title: 'Processing...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ path('app_admin_email_setting_toggle') }}',
                    type: 'POST',
                    data: {
                        emailSettingId: emailSettingId,
                        isChecked: isChecked
                    },
                    success: function(response) {
                        Swal.close();
                        window.location.reload();
                    },
                    error: function(xhr, status, error) {
                        Swal.fire(
                            'Error!',
                            error,
                            'error'
                        );
                    }
                });
            });
        });
    </script>
{% endblock %}