{# app/Resources/views/BackOrder/index.html.twig #}
{% extends 'layout5Mantenimientos.html.twig' %}

{% block body %}
{{ parent() }}

<div class="container-fluid backorder-module">
  <h4 class="fw-bold mb-3">Módulo BackOrder</h4>

  {# ---------- FILTROS -------------------------------------- #}
  <div id="cardFiltros" class="card shadow-sm mb-3">
    <div class="card-body">
      <form id="filterForm" class="row g-2 align-items-end">
        <div class="col-12 col-md-3">
          <label class="form-label fw-semibold">Cliente</label>
          <select name="cliente" class="form-select">
            <option value="">TODOS</option>
            {% for c in clientes %}
              <option value="{{ c.id }}">{{ c.nombre }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-md-3">
          <label class="form-label fw-semibold">Estado</label>
          <select name="estado" class="form-select">
            <option value="">TODOS</option>
            {% for e in estados %}
              <option value="{{ e.id }}">{{ e.estado }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label fw-semibold">Inicio Fecha Envío</label>
          <input name="fIni" type="date" class="form-control">
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label fw-semibold">Final Fecha Envío</label>
          <input name="fFin" type="date" class="form-control">
        </div>
        <div class="col-12 col-md-auto ms-auto">
          <button type="reset"  class="btn btn-outline-secondary me-2">Limpiar</button>
          <button type="submit" class="btn btn-primary">Filtrar</button>
        </div>
        <div class="col-12 col-md-3">
          <label class="form-label fw-semibold">Vendedor</label>
          <select name="vendedor" class="form-select">
            <option value="">TODOS</option>
            {% for v in vendedores %}
              <option value="{{ v.id }}">{{ v.nombre }}</option>
            {% endfor %}
          </select>
        </div>
      </form>
    </div>
  </div>

  {# ---------- SELECTOR VISTA -------------------------------- #}
  <div class="d-flex justify-content-end mb-2">
    <div class="btn-group">
      <button id="btnLista"      class="btn btn-primary">Listado</button>
      <button id="btnCalendario" class="btn btn-outline-primary">Calendario</button>
    </div>
  </div>

  {# ---------- CONTENEDOR LISTA ------------------------------ #}
  <div id="wrapLista">
    <div class="card">
      <div class="card-header bg-light fw-bold">Backorders (Encabezado)</div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table id="tblBackorders" class="table table-sm table-hover mb-0 w-100">
            <thead class="table-light">
              <tr>
                <th>#</th><th>Tienda</th><th>Código</th><th>Cliente</th>
                <th>Vendedor</th><th>Cajero</th><th>Usuario</th><th>Ruta</th>
                <th>Estado</th><th>Fecha Envío</th><th>Fecha Act.</th><th class="text-end">Acciones</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  {# ---------- CONTENEDOR CALENDARIO ------------------------- #}
  <div id="wrapCalendario" class="d-none">
    <div class="card">
      <div class="card-header bg-light fw-bold">Calendario</div>
      <div class="card-body p-0">
        <div id="calendar" style="min-height:550px;"></div>
      </div>
    </div>
  </div>
</div>

{# ---------- OFFCANVAS DETALLE ------------------------------ #}
<div class="offcanvas offcanvas-end w-75" id="offDetalle" tabindex="-1">
  <div class="offcanvas-header">
    {#<h5 class="offcanvas-title">Detalle BackOrder — <span id="ocTitulo"></span></h5>#}
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body p-3" id="ocBody"></div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}

<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>

<script>
$(function(){



 const perms = {
    ver: {{ permisoVer ? 'true' : 'false' }},
    modificar: {{ permisoModificar ? 'true' : 'false' }},
    anular: {{ permisoAnular ? 'true' : 'false' }}
  };

  /* ========== DataTable (AJAX) ================================= */
  const tabla = $('#tblBackorders').DataTable({
    ajax:{
      url: '{{ path("backorder_list") }}',
      data: d => {                 // ← NO enviamos filtros vacíos
        $('#filterForm').serializeArray().forEach(o=>{
          if(o.value.trim() !== '') d[o.name] = o.value;
        });
      }
    },
    columns:[
      {data:0},{data:1},{data:2},{data:3},{data:4},{data:5},{data:6},
      {data:7},
      {data:8,render:d=>{
        const c=d==='Emitido'?'primary':d==='Anulado'?'danger':'success';
        return `<span class="badge bg-${c}">${d}</span>`}},
      {data:9},{data:10},
      {data:0,orderable:false,className:'text-end',
         render:(id,type,row)=>{
          let html='';
          if(perms.ver){
            html+=`<button class="btn btn-sm btn-outline-info btn-det" data-id="${id}" title="Ver"><i class="bi bi-eye"></i></button> `;
          }
          const estado=row[8];
          if(estado!=='Anulado' && estado!=='Facturado'){
            if(perms.modificar){
              html+=`<button class="btn btn-sm btn-outline-primary btn-edit" data-id="${id}" title="Modificar"><i class="bi bi-pencil"></i></button> `;
            }
            if(perms.anular){
              html+=`<button class="btn btn-sm btn-outline-danger btn-anular" data-id="${id}" title="Anular"><i class="bi bi-x-circle"></i></button> `;
            }
          }
          return html;
        }}
    ],
    dom:'<"d-flex justify-content-end mb-2"l>rt<"d-flex justify-content-between p-2"ip>',
    language:{url:'https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'},
    paging:true, searching:false, info:true
  });

  $('#filterForm').on('submit',e=>{e.preventDefault(); tabla.ajax.reload();});
  $('#filterForm').on('reset', () => setTimeout(()=>tabla.ajax.reload(), 0));

  /* ========== Off-canvas Detalle =============================== */
  const off   = new bootstrap.Offcanvas('#offDetalle');
  const $body = $('#ocBody'), $tit = $('#ocTitulo');

  async function showDetalle(id, edit){
    let url  = '{{ path("backorder_detalle",{"id":0}) }}'.replace('/0','/'+id);
    if(edit) url += '?edit=1';
    const resp = await fetch(url,{headers:{'X-Requested-With':'XMLHttpRequest'}});
    $body.html(await resp.text());
    $tit.text('ID '+id);
    off.show();
  }
$(document).on('click','.btn-det',e=> showDetalle($(e.currentTarget).data('id'), false));
  $(document).on('click','.btn-edit',e=> showDetalle($(e.currentTarget).data('id'), true));

  async function cambiarEstado(id, estado){
    const url = '{{ path("backorder_estado",{"id":"__ID__","nuevo":"__EST__"}) }}'
                  .replace('__ID__',id)
                  .replace('__EST__',estado);
    await fetch(url,{method:'POST'});
    tabla.ajax.reload(null,false);
  }
  $(document).on('click','.btn-anular',e=>{
    const id=$(e.currentTarget).data('id');
    if(confirm('¿Anular backorder?')) cambiarEstado(id,2);
  });

  /* ========== Calendario ====================================== */
  let calLoaded=false;
  function initCalendar(){
    fetch('{{ path("backorder_eventos") }}')
      .then(r=>r.json())
      .then(ev=>{
        new FullCalendar.Calendar(
          document.getElementById('calendar'),
          {initialView:'dayGridMonth',height:'100%',
           events:ev,eventClick:info=>showDetalle(info.event.id)}
        ).render();
        calLoaded=true;
      });
  }

  $('#btnLista').on('click',function(){
    $('#wrapLista').removeClass('d-none'); $('#wrapCalendario').addClass('d-none');
    $('#cardFiltros').removeClass('d-none');
    $(this).addClass('btn-primary').removeClass('btn-outline-primary');
    $('#btnCalendario').addClass('btn-outline-primary').removeClass('btn-primary');
  });

  $('#btnCalendario').on('click',function(){
    $('#wrapCalendario').removeClass('d-none'); $('#wrapLista').addClass('d-none');
    $('#cardFiltros').addClass('d-none');
    $(this).addClass('btn-primary').removeClass('btn-outline-primary');
    $('#btnLista').addClass('btn-outline-primary').removeClass('btn-primary');
    if(!calLoaded) initCalendar();
  });
});
</script>
{% endblock %}