<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
<title>Administrar Menú</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
<style>
  body{ background:#f5f7f7; font-family:"Segoe UI", system-ui, sans-serif; padding:24px; }
  .card{ border:none; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .badge-tipo-vista{ background:#2f5d62; }
  .badge-tipo-iframe{ background:#d97757; }
</style>
</head>
<body>

<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="fa-solid fa-bars me-2"></i>Administrar menú</h4>
    <button class="btn btn-success" id="btnNuevo"><i class="fa-solid fa-plus me-1"></i>Nuevo menú</button>
  </div>

  <div class="card">
    <div class="card-body">
      <table class="table table-hover align-middle" id="tablaMenus">
        <thead>
          <tr>
            <th>#</th>
            <th>Título</th>
            <th>Padre</th>
            <th>Tab key</th>
            <th>Tipo</th>
            <th>Contenido</th>
            <th>Orden</th>
            <th>Estado</th>
            <th class="text-end">Acciones</th>
          </tr>
        </thead>
        <tbody id="tbodyMenus">
          <tr><td colspan="9" class="text-center text-muted py-4">Cargando...</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modal Crear/Editar -->
<div class="modal fade" id="modalMenu" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="formMenu">
        <div class="modal-header">
          <h5 class="modal-title" id="modalMenuTitulo">Nuevo menú</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="menu_id">

          <div class="mb-3">
            <label class="form-label">Título</label>
            <input type="text" class="form-control" id="titulo" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Menú padre</label>
            <select class="form-select" id="parent_id">
              <option value="">— Ninguno (item de primer nivel) —</option>
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Tab key <small class="text-muted">(único, sin espacios)</small></label>
            <input type="text" class="form-control" id="tab_key" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Ícono (FontAwesome)</label>
            <input type="text" class="form-control" id="icono" placeholder="fa-box">
          </div>

          <div class="mb-3">
            <label class="form-label">Tipo</label>
            <select class="form-select" id="tipo" required>
              <option value="vista">Vista (ruta interna)</option>
              <option value="iframe">Iframe (URL externa)</option>
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Contenido <small class="text-muted">(ruta interna o URL completa)</small></label>
            <input type="text" class="form-control" id="contenido" placeholder="/inventario/productos" required>
          </div>

          <div class="row">
            <div class="col-6 mb-3">
              <label class="form-label">Orden</label>
              <input type="number" class="form-control" id="orden" value="0">
            </div>
            <div class="col-6 mb-3">
              <label class="form-label d-block">Estado</label>
              <div class="form-check form-switch mt-2">
                <input class="form-check-input" type="checkbox" id="estado" checked>
                <label class="form-check-label" for="estado">Activo</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-success">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
  // Token CSRF para todas las peticiones AJAX
  $.ajaxSetup({
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
  });

  const modal = new bootstrap.Modal('#modalMenu');

  cargarPadres();
  cargarTabla();

  // === Listado ===
  function cargarTabla() {
    $.get('<?php echo e(route("menu.admin.data")); ?>', function (menus) {
      const tbody = $('#tbodyMenus').empty();

      if (menus.length === 0) {
        tbody.append('<tr><td colspan="9" class="text-center text-muted py-4">No hay menús registrados</td></tr>');
        return;
      }

      menus.forEach(m => {
        const badgeTipo = m.tipo === 'iframe'
          ? '<span class="badge badge-tipo-iframe">iframe</span>'
          : '<span class="badge badge-tipo-vista">vista</span>';

        const estadoBadge = m.estado
          ? '<span class="badge bg-success">Activo</span>'
          : '<span class="badge bg-secondary">Inactivo</span>';

        tbody.append(`
          <tr data-id="${m.id}">
            <td>${m.id}</td>
            <td><i class="fa-solid ${m.icono || 'fa-file'} me-1"></i>${m.titulo}</td>
            <td>${m.padre ? m.padre.titulo : '<span class="text-muted">—</span>'}</td>
            <td><code>${m.tab_key}</code></td>
            <td>${badgeTipo}</td>
            <td><small class="text-muted">${m.contenido}</small></td>
            <td>${m.orden}</td>
            <td>${estadoBadge}</td>
            <td class="text-end">
              <button class="btn btn-sm btn-outline-primary btn-editar" data-id="${m.id}"><i class="fa-solid fa-pen"></i></button>
              <button class="btn btn-sm btn-outline-danger btn-eliminar" data-id="${m.id}"><i class="fa-solid fa-trash"></i></button>
            </td>
          </tr>
        `);
      });
    });
  }

  // === Combo de padres ===
  function cargarPadres(seleccionado = '') {
    $.get('<?php echo e(route("menu.admin.padres")); ?>', function (padres) {
      const select = $('#parent_id');
      select.find('option:not(:first)').remove();
      padres.forEach(p => {
        select.append(`<option value="${p.id}">${p.titulo}</option>`);
      });
      select.val(seleccionado);
    });
  }

  // === Abrir modal para crear ===
  $('#btnNuevo').on('click', function () {
    $('#formMenu')[0].reset();
    $('#menu_id').val('');
    $('#estado').prop('checked', true);
    $('#modalMenuTitulo').text('Nuevo menú');
    cargarPadres();
    modal.show();
  });

  // === Abrir modal para editar ===
  $(document).on('click', '.btn-editar', function () {
    const id = $(this).data('id');
    $.get(`/admin/menu/${id}`, function (m) {
      $('#menu_id').val(m.id);
      $('#titulo').val(m.titulo);
      $('#tab_key').val(m.tab_key);
      $('#icono').val(m.icono);
      $('#tipo').val(m.tipo);
      $('#contenido').val(m.contenido);
      $('#orden').val(m.orden);
      $('#estado').prop('checked', !!m.estado);
      cargarPadres(m.parent_id || '');
      $('#modalMenuTitulo').text('Editar menú');
      modal.show();
    });
  });

  // === Guardar (crear o actualizar según si hay id) ===
  $('#formMenu').on('submit', function (e) {
    e.preventDefault();

    const id = $('#menu_id').val();
    const payload = {
      parent_id: $('#parent_id').val() || null,
      titulo:    $('#titulo').val(),
      tab_key:   $('#tab_key').val(),
      icono:     $('#icono').val(),
      tipo:      $('#tipo').val(),
      contenido: $('#contenido').val(),
      orden:     $('#orden').val() || 0,
      estado:    $('#estado').is(':checked') ? 1 : 0,
    };

    const url    = id ? `/menu/${id}` : '<?php echo e(route("menu.admin.store")); ?>';
    const method = id ? 'PUT' : 'POST';

    $.ajax({
      url: url,
      method: method,
      data: payload,
      success: function () {
        modal.hide();
        cargarTabla();
        cargarPadres();
      },
      error: function (xhr) {
        const errores = xhr.responseJSON?.errors;
        if (errores) {
          alert(Object.values(errores).flat().join('\n'));
        } else {
          alert('Ocurrió un error al guardar.');
        }
      }
    });
  });

  // === Eliminar ===
  $(document).on('click', '.btn-eliminar', function () {
    const id = $(this).data('id');
    if (!confirm('¿Eliminar este item de menú? Esto también eliminará sus submenús.')) return;

    $.ajax({
      url: `/admin/menu/${id}`,
      method: 'DELETE',
      success: function () {
        cargarTabla();
        cargarPadres();
      },
      error: function () {
        alert('No se pudo eliminar.');
      }
    });
  });
});
</script>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\example-app - copia\resources\views/view_menu/menu_index.blade.php ENDPATH**/ ?>