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

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

{% block content %}
    <style>
        .collapsible-indicator {
            cursor: pointer;
            transition: transform 0.3s ease; /* Smooth transition */
        }
        .collapsible-indicator.rotate {
            transform: rotate(90deg); /* Rotate indicator when open */
        }
    </style>

    <div class="row">
        <div class="col-md-6">
            <h1>Menu Setting</h1>
        </div>
    </div>
    <div class="card main-card">
         <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    {% for menu in menusetting %}
                        <form id="menu-setting-form-{{ menu.id }}" method="post" action="{{ path('app_admin_menu_setting') }}">
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="card bg-opacity-10 bg-dark p-4 menu-type">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div class="d-flex align-items-center">
                                                <i id="collapseIndicator{{ menu.id }}" class="ph-caret-right collapsible-indicator me-2" data-bs-toggle="collapse" data-bs-target="#collapse{{ menu.id }}" aria-expanded="false" aria-controls="collapse{{ menu.id }}"></i>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="menuSettings[]" value="{{ menu.id }}" id="menuSetting{{ menu.id }}" {% if menu.isActive %}checked{% endif %}>
                                                    <label class="form-check-label" for="menuSetting{{ menu.id }}">{{ menu.name }}</label>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="status-text {% if menu.isactive %}text-success{% else %}text-danger{% endif %}">
                                                    {{ menu.isactive ? 'Active' : 'Inactive' }}
                                                </span>
                                            </div>
                                        </div>
                                        <div id="collapse{{ menu.id }}" class="collapse">
                                            <div class="card-body mt-4">
                                                <div class="mb-3">
                                                    <label for="menu_setting_name_{{ menu.id }}" class="form-label required">Enter Your Name</label>
                                                    <input type="text" id="menu_setting_name_{{ menu.id }}" name="menu_setting[{{ menu.id }}][name]" required class="form-control" value="{{ menu.name }}" placeholder="Name" title="Please enter a Name">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="menu_setting_url_{{ menu.id }}" class="form-label required">Enter Your URL</label>
                                                    <input type="text" id="menu_setting_url_{{ menu.id }}" name="menu_setting[{{ menu.id }}][url]" class="form-control" value="{{ menu.url }}" placeholder="https://example.com" title="Please enter a valid URL starting with http:// or https://">
                                                </div>
                                                <div class="mb-3">
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input nav" type="checkbox" name="menu_setting[{{ menu.id }}][is_main_nav]" value="1" id="menuSettingNav{{ menu.id }}" {% if menu.isMainNav %}checked{% endif %} >
                                                        <label class="form-check-label" for="menuSettingNav{{ menu.id }}">Show On Header Navigation</label>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input nav" type="checkbox" name="menu_setting[{{ menu.id }}][is_public_nav]" value="1" id="menuSettingPubNav{{ menu.id }}" {% if menu.isPublicNav %}checked{% endif %} >
                                                        <label class="form-check-label" for="menuSettingPubNav{{ menu.id }}">Public Menu</label>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <button type="submit" id="menu_setting_save_{{ menu.id }}" class="btn btn-primary">Save</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <script>
        // JavaScript functionality for collapsible indicators
        document.querySelectorAll('.collapsible-indicator').forEach(function (indicator) {
            var targetId = indicator.getAttribute('data-bs-target');
            var targetElement = document.querySelector(targetId);

            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:not(.nav)').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_menu_setting_toggle') }}',
                type: 'POST',
                data: {
                     id: emailSettingId, 
                     isactive: isChecked 
                },
                success: function(response) {
                    Swal.close();
                    window.location.reload();
                },
                error: function(xhr, status, error) {
                    Swal.fire(
                        'Error!',
                        error,
                        'error'
                    );
                }
            });
        });
    });
    </script>
{% endblock %}