{% extends 'baseadmin.html.twig' %}
{% import "_modules/bsmacros.html.twig" as bs %}

{% block title %}{{ parent() }} - Navigation{% endblock %}

{% block breadcrumb %}
  {{ parent() }}
  <li class="breadcrumb-item active" aria-current="page">Navigation</li>
{% endblock %}

{% block content %}
<div id="nav-tree" class="card mb-3">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div class="fs-4">Navigation Tree</div>
    <button class="btn btn-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#addNavModal">
        <i class="fa fa-plus"></i> Add Item
    </button>
  </div>
  <ul id="nav-sortable" class="list-group list-group-flush">
      {% for nav in navigations %}
          {{ _self.render_nav(nav) }}
      {% endfor %}
  </ul>
</div>

<button id="save-tree" class="btn btn-success">Save Changes</button>

{% macro render_nav(nav) %}
    <li class="list-group-item" data-id="{{ nav.id }}">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <strong><i class="fa {{ nav.icon }} me-2"></i>{{ nav.label ?: "# Separator" }}</strong>
                <span class="text-muted ms-2">
                    <small>
                        <code>{{ nav.type.value }}</code> | 
                        <i class="fas fa-route"></i>: <code>{{ nav.route ?: '—' }}</code> | 
                        <i class="fas fa-text"></i>: <code>{{ nav.class ?: '—' }}</code> | 
                        <i class="fas fa-border-bottom-right"></i>: <code>{{ nav.activeClass ?: '—' }}</code>
                    </small>
                </span>
            </div>
            <div class="d-flex align-items-center">
                <button class="btn btn-sm btn-outline-primary me-2 edit-nav" data-id="{{ nav.id }}" 
                        data-label="{{ nav.label }}" data-icon="{{ nav.icon }}" data-type="{{ nav.type.value }}"
                        data-route="{{ nav.route }}" data-class="{{ nav.class }}" data-active-class="{{ nav.activeClass }}">
                    <i class="fa fa-edit"></i>
                </button>
                <button class="btn btn-sm btn-outline-danger me-2 delete-nav" data-id="{{ nav.id }}">
                    <i class="fa fa-trash"></i>
                </button>
                <span class="handle text-muted" style="cursor: grab;">☰</span>
            </div>
        </div>

        <ul class="list-group mt-2 ms-4">
            {% for child in nav.children %}
                {{ _self.render_nav(child) }}
            {% endfor %}
        </ul>
    </li>
{% endmacro %}

<!-- Add Navigation Modal -->
<div class="modal fade" id="addNavModal" tabindex="-1" aria-labelledby="addNavModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addNavModalLabel">Add Navigation Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addNavForm">
                    <div class="mb-3">
                        <label for="add-label" class="form-label">Label</label>
                        <input type="text" class="form-control" id="add-label">
                    </div>
                    <div class="mb-3">
                        <label for="add-icon" class="form-label">Icon (Font Awesome class)</label>
                        <input type="text" class="form-control" id="add-icon" placeholder="fa-home">
                    </div>
                    <div class="mb-3">
                        <label for="add-type" class="form-label">Type</label>
                        <select class="form-select" id="add-type">
                            <option value="route">Route</option>
                            <option value="url">URL</option>
                            <option value="separator">Separator</option>
                            <option value="text">Text</option>
                            <option value="menu">Menu</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="add-route" class="form-label">Route</label>
                        {# <input type="text" class="form-control" id="add-route"> #}
                        <select class="form-select" id="add-route">
                            <option value="">Select Route</option>
                            {% for route in routes %}
                                <option value="{{ route }}">{{ route }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="add-class" class="form-label">CSS Class</label>
                        <input type="text" class="form-control" id="add-class">
                    </div>
                    <div class="mb-3">
                        <label for="add-active-class" class="form-label">Active CSS Class</label>
                        <input type="text" class="form-control" id="add-active-class">
                    </div>
                    <div class="mb-3">
                        <label for="add-parent" class="form-label">Parent</label>
                        <select class="form-select" id="add-parent">
                            <option value="">Root Level</option>
                            <!-- Will be populated dynamically -->
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="submitAddNav">Add Item</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Navigation Modal -->
<div class="modal fade" id="editNavModal" tabindex="-1" aria-labelledby="editNavModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editNavModalLabel">Edit Navigation Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editNavForm">
                    <input type="hidden" id="edit-id">
                    <div class="mb-3">
                        <label for="edit-label" class="form-label">Label</label>
                        <input type="text" class="form-control" id="edit-label">
                    </div>
                    <div class="mb-3">
                        <label for="edit-icon" class="form-label">Icon (Font Awesome class)</label>
                        <input type="text" class="form-control" id="edit-icon">
                    </div>
                    <div class="mb-3">
                        <label for="edit-type" class="form-label">Type</label>
                        <select class="form-select" id="edit-type">
                            <option value="route">Route</option>
                            <option value="url">URL</option>
                            <option value="separator">Separator</option>
                            <option value="text">Text</option>
                            <option value="menu">Menu</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="edit-route" class="form-label">Route</label>
                        {# <input type="text" class="form-control" id="edit-route"> #}
                        <select class="form-select" id="edit-route">
                            <option value="">Select Route</option>
                            {% for route in routes %}
                                <option value="{{ route }}">{{ route }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="edit-class" class="form-label">CSS Class</label>
                        <input type="text" class="form-control" id="edit-class">
                    </div>
                    <div class="mb-3">
                        <label for="edit-active-class" class="form-label">Active CSS Class</label>
                        <input type="text" class="form-control" id="edit-active-class">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="submitEditNav">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteNavModal" tabindex="-1" aria-labelledby="deleteNavModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteNavModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this navigation item? This will also delete all child items.</p>
                <input type="hidden" id="delete-id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Initialize sortable functionality
        const setupSortable = (element) => {
            new Sortable(element, {
                group: 'nested',
                animation: 150,
                fallbackOnBody: true,
                swapThreshold: 0.65,
                handle: '.handle',
                onEnd: () => console.log('Reordered')
            });

            element.querySelectorAll('ul').forEach(setupSortable);
        };

        setupSortable(document.getElementById('nav-sortable'));

        // Save tree button handler
        document.getElementById('save-tree').addEventListener('click', () => {
            const treeData = getTree(document.getElementById('nav-sortable'));
            fetch('{{ path('admin.navigation.update_tree') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(treeData)
            }).then(res => res.json()).then(data => {
                if (data.status === 'success') {
                  Toast.fire({
                      icon: 'success',
                      title: 'Navigation tree updated successfully!'
                  });
                } else {
                  Toast.fire({
                      icon: 'error',
                      title: 'Error updating navigation tree: ' + data.message
                  });
                }
            });
        });

        // Get tree data function
        function getTree(container) {
            let result = [];
            container.querySelectorAll(':scope > li').forEach(li => {
                let obj = {
                    id: parseInt(li.dataset.id),
                    children: []
                };
                const childUl = li.querySelector(':scope > ul');
                if (childUl) {
                    obj.children = getTree(childUl);
                }
                result.push(obj);
            });
            return result;
        }

        // Populate parent select dropdown in add form
        function populateParentDropdown() {
            const dropdown = document.getElementById('add-parent');
            dropdown.innerHTML = '<option value="">Root Level</option>';
            
            function addOptions(navItems, level = 0) {
                navItems.forEach(item => {
                    const li = document.querySelector(`li[data-id="${item.id}"]`);
                    const label = li.querySelector('strong').textContent;
                    const indent = '—'.repeat(level);
                    dropdown.innerHTML += `<option value="${item.id}">${indent} ${label}</option>`;
                    
                    const childUl = li.querySelector(':scope > ul');
                    if (childUl) {
                        const childItems = Array.from(childUl.querySelectorAll(':scope > li')).map(li => ({
                            id: li.dataset.id
                        }));
                        addOptions(childItems, level + 1);
                    }
                });
            }
            
            const rootItems = Array.from(document.querySelectorAll('#nav-sortable > li')).map(li => ({
                id: li.dataset.id
            }));
            addOptions(rootItems);
        }

        // Add event listener to open add modal
        document.querySelector('[data-bs-target="#addNavModal"]').addEventListener('click', () => {
            populateParentDropdown();
        });

        // Add navigation item
        document.getElementById('submitAddNav').addEventListener('click', () => {
            const data = {
                label: document.getElementById('add-label').value,
                icon: document.getElementById('add-icon').value,
                type: document.getElementById('add-type').value,
                route: document.getElementById('add-route').value,
                class: document.getElementById('add-class').value,
                activeClass: document.getElementById('add-active-class').value,
                parent: document.getElementById('add-parent').value || null
            };

            fetch('{{ path('admin.navigation.add') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            }).then(res => res.json()).then(data => {
                if (data.status === 'success') {
                  window.location.reload();
                } else {
                  Toast.fire({
                      icon: 'error',
                      title: 'Error adding navigation item: ' + data.message
                  });
                }
            });
        });

        // Edit button click handler
        document.querySelectorAll('.edit-nav').forEach(button => {
            button.addEventListener('click', () => {
                const id = button.getAttribute('data-id');
                const label = button.getAttribute('data-label');
                const icon = button.getAttribute('data-icon');
                const type = button.getAttribute('data-type');
                const route = button.getAttribute('data-route');
                const cssClass = button.getAttribute('data-class');
                const activeClass = button.getAttribute('data-active-class');

                document.getElementById('edit-id').value = id;
                document.getElementById('edit-label').value = label;
                document.getElementById('edit-icon').value = icon;
                document.getElementById('edit-type').value = type;
                document.getElementById('edit-route').value = route;
                document.getElementById('edit-class').value = cssClass;
                document.getElementById('edit-active-class').value = activeClass;

                const editModal = new bootstrap.Modal(document.getElementById('editNavModal'));
                editModal.show();
            });
        });

        // Submit edit form
        document.getElementById('submitEditNav').addEventListener('click', () => {
            const data = {
                id: document.getElementById('edit-id').value,
                label: document.getElementById('edit-label').value,
                icon: document.getElementById('edit-icon').value,
                type: document.getElementById('edit-type').value,
                route: document.getElementById('edit-route').value,
                class: document.getElementById('edit-class').value,
                activeClass: document.getElementById('edit-active-class').value
            };

            fetch('{{ path('admin.navigation.edit') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            }).then(res => res.json()).then(data => {
                if (data.status === 'success') {
                  window.location.reload();
                } else {
                  Toast.fire({
                      icon: 'error',
                      title: 'Error updating navigation item: ' + data.message
                  });
                }
            });
        });

        // Delete button click handler
        document.querySelectorAll('.delete-nav').forEach(button => {
            button.addEventListener('click', () => {
                const id = button.getAttribute('data-id');
                document.getElementById('delete-id').value = id;
                
                const deleteModal = new bootstrap.Modal(document.getElementById('deleteNavModal'));
                deleteModal.show();
            });
        });

        // Confirm delete
        document.getElementById('confirmDelete').addEventListener('click', () => {
            const id = document.getElementById('delete-id').value;
            
            fetch('{{ path('admin.navigation.delete') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ id: id })
            }).then(res => res.json()).then(data => {
                if (data.status === 'success') {
                  window.location.reload();
                } else {
                  Toast.fire({
                      icon: 'error',
                      title: 'Error deleting navigation item: ' + data.message
                  });
                }
            });
        });
    });
</script>
{% endblock %}