{% extends "base.html" %}
{% block content %}
<style>
  .card-clean { border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.06); border-radius: 14px; }
  .list-tile { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: .75rem 1rem; }
  .list-tile:hover { background: var(--bs-light); }
</style>

<div class="container py-4">
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
    <div class="d-flex align-items-center gap-2">
      <i class="bi bi-ui-checks-grid fs-4 text-primary"></i>
      <h4 class="mb-0">Menu Management</h4>
    </div>
    <div class="text-muted small">Set orders to control sidebar sorting.</div>
  </div>

  <div class="row g-3 mb-4">
    <!-- Add Menu -->
    <div class="col-lg-4">
      <div class="card card-clean h-100">
        <div class="card-header bg-white"><strong>Add Menu</strong></div>
        <form method="post" action="{{ url_for('admin.menu_management') }}">
          <div class="card-body">
            <div class="mb-2">
              <label class="form-label">Menu Name</label>
              <input type="text" name="name" class="form-control" required>
            </div>
            <div class="mb-2">
              <label class="form-label">Icon class</label>
              <input type="text" name="icon" class="form-control" placeholder="e.g. bi-cash-coin">
            </div>
            <div class="mb-2">
              <label class="form-label">Order</label>
              <input type="number" name="menu_order" class="form-control" value="0" min="0">
            </div>
          </div>
          <div class="card-footer bg-white text-end">
            <button type="submit" class="btn btn-primary">Add Menu</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Add SubMenu -->
    <div class="col-lg-8">
      <div class="card card-clean h-100">
        <div class="card-header bg-white"><strong>Add Submenu</strong></div>
        <form method="POST" action="{{ url_for('admin.add_submenu') }}">
          <div class="card-body row g-3">
            <div class="col-md-3">
              <label class="form-label">Parent Menu</label>
              <select name="menu_id" class="form-select" required>
                <option value="">Select</option>
                {% for menu in menus %}
                  <option value="{{ menu.id }}">{{ menu.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">Submenu Name</label>
              <input type="text" name="submenu_name" class="form-control" required>
            </div>
            <div class="col-md-3">
              <label class="form-label">URL</label>
              <input type="text" name="submenu_url" class="form-control" placeholder="/path" required>
            </div>
            <div class="col-md-2">
              <label class="form-label">Endpoint</label>
              <input type="text" name="submenu_endpoint" class="form-control" placeholder="optional">
            </div>
            <div class="col-md-1">
              <label class="form-label">Order</label>
              <input type="number" name="submenu_order" class="form-control" value="0" min="0">
            </div>
          </div>
          <div class="card-footer bg-white text-end">
            <button class="btn btn-success">Add Submenu</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Menus List -->
  <div class="accordion" id="menuAccordion">
    {% for menu in menus %}
    <div class="accordion-item mb-3 border-0 card-clean">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed py-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ menu.id }}">
          <i class="bi {{ menu.icon or 'bi-list' }} me-2 text-primary"></i>
          <span class="me-2">{{ menu.name }}</span>
          <span class="badge bg-light text-muted border ms-2">{{ (menu.submenus or [])|length }} submenus</span>
          <span class="text-muted small ms-3">Order: {{ menu.order or 0 }}</span>
        </button>
      </h2>
      <div id="collapse{{ menu.id }}" class="accordion-collapse collapse">
        <div class="accordion-body">
          <!-- Edit menu -->
          <form class="row g-2 align-items-end mb-3" method="POST" action="{{ url_for('admin.edit_menu', menu_id=menu.id) }}">
            <div class="col-md-4">
              <label class="form-label small text-muted">Name</label>
              <input type="text" class="form-control" name="menu_name" value="{{ menu.name }}" required>
            </div>
            <div class="col-md-3">
              <label class="form-label small text-muted">Icon</label>
              <input type="text" class="form-control" name="menu_icon" value="{{ menu.icon or '' }}" placeholder="bi-...">
            </div>
            <div class="col-md-2">
              <label class="form-label small text-muted">Order</label>
              <input type="number" class="form-control" name="menu_order" value="{{ menu.order or 0 }}" min="0">
            </div>
            <div class="col-md-3 text-end">
              <div class="d-flex gap-2 justify-content-end">
                <button class="btn btn-sm btn-primary">Save Menu</button>
                <form method="POST" action="{{ url_for('admin.delete_menu', menu_id=menu.id) }}">
                  <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                </form>
              </div>
            </div>
          </form>

          <!-- Submenus -->
          {% if menu.submenus %}
            {% for submenu in menu.submenus %}
            <div class="list-tile d-flex justify-content-between align-items-center mb-2">
              <div>
                <div class="fw-semibold">{{ submenu.name }}</div>
                <div class="text-muted small">
                  URL: {{ submenu.url }}{% if submenu.endpoint %} • {{ submenu.endpoint }}{% endif %}
                  • Order: {{ submenu.order or 0 }}
                </div>
              </div>
              <div class="d-flex gap-2">
                <button class="btn btn-sm btn-secondary" data-bs-toggle="modal" data-bs-target="#editSubmenu{{ submenu.id }}">Edit</button>
                <form method="POST" action="{{ url_for('admin.delete_submenu', submenu_id=submenu.id) }}">
                  <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                </form>
              </div>
            </div>

            <!-- Edit Submenu Modal -->
            <div class="modal fade" id="editSubmenu{{ submenu.id }}" tabindex="-1" aria-hidden="true">
              <div class="modal-dialog">
                <form method="POST" action="{{ url_for('admin.edit_submenu', submenu_id=submenu.id) }}">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Edit Submenu</h5>
                      <button class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                      <div class="mb-2">
                        <label class="form-label">Name</label>
                        <input type="text" name="submenu_name" class="form-control" value="{{ submenu.name }}" required>
                      </div>
                      <div class="mb-2">
                        <label class="form-label">URL</label>
                        <input type="text" name="submenu_url" class="form-control" value="{{ submenu.url }}" required>
                      </div>
                      <div class="mb-2">
                        <label class="form-label">Endpoint</label>
                        <input type="text" name="submenu_endpoint" class="form-control" value="{{ submenu.endpoint or '' }}">
                      </div>
                      <div class="mb-2">
                        <label class="form-label">Order</label>
                        <input type="number" name="submenu_order" class="form-control" value="{{ submenu.order or 0 }}" min="0">
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button class="btn btn-primary">Save</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            {% endfor %}
          {% else %}
            <div class="text-muted">No submenus for this menu yet.</div>
          {% endif %}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}