@extends('theme.sneat.admin')
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<h4 class="fw-bold py-2"><span class="text-muted fw-light">Mantenedor -</span> <strong>Proveedores</strong></h4>

<div class="card">
  <div class="card-header d-flex justify-content-end">
    <button type="button" class="btn btn-sm btn-outline-primary" onclick="abrirModal();">
      <i class="bx bx-plus"></i> Nuevo proveedor
    </button>
  </div>
  <div class="card-body">
    <table id="tabla" class="table table-bordered table-sm table-striped w-100">
      <thead class="table-light">
        <tr>
          <th>Nombre</th>
          <th>RUT</th>
          <th>Contacto</th>
          <th>Activo</th>
          <th style="width:100px">Acciones</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

<div class="modal fade" id="modalProv" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Proveedor</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="formProv">
          <input type="hidden" name="accion_form" id="accion_form">
          <input type="hidden" name="id_form" id="id_form">
          <div class="mb-3">
            <label class="form-label">Nombre</label>
            <input type="text" class="form-control" name="nombre" id="nombre" required>
          </div>
          <div class="mb-3">
            <label class="form-label">RUT</label>
            <input type="text" class="form-control" name="rut" id="rut">
          </div>
          <div class="mb-3">
            <label class="form-label">Contacto</label>
            <input type="text" class="form-control" name="contacto" id="contacto">
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="activo" id="activo" value="1" checked>
            <label class="form-check-label" for="activo">Activo</label>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="guardarProv();">Guardar</button>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

const DATATABLES_ES = {
  decimal: ',',
  thousands: '.',
  processing: 'Procesando…',
  lengthMenu: 'Mostrar _MENU_ registros',
  zeroRecords: 'No se encontraron resultados',
  emptyTable: 'No hay registros',
  info: 'Mostrando _START_ a _END_ de _TOTAL_ registros',
  infoEmpty: 'Mostrando 0 a 0 de 0 registros',
  infoFiltered: '(filtrado de _MAX_ registros en total)',
  search: 'Buscar:',
  loadingRecords: 'Cargando…',
  paginate: { first: 'Primero', last: 'Último', next: 'Siguiente', previous: 'Anterior' },
  aria: {
    sortAscending: ': activar orden ascendente',
    sortDescending: ': activar orden descendente'
  }
};

const tabla = $('#tabla').DataTable({
  processing: true,
  serverSide: true,
  ajax: "{{ url('proveedores/listado') }}",
  columns: [
    { data: 'nombre' },
    { data: 'rut', defaultContent: '' },
    { data: 'contacto', defaultContent: '' },
    { data: 'activo', render: function(d){ return d == 1 || d === true ? 'Sí' : 'No'; } },
    {
      data: null, orderable: false,
      render: function(row){
        return '<button class="btn btn-sm btn-outline-primary" onclick="editarProv('+row.id+')"><i class="bx bx-edit"></i></button> ' +
          '<button class="btn btn-sm btn-outline-danger" onclick="eliminarProv('+row.id+')"><i class="bx bx-trash"></i></button>';
      }
    }
  ],
  language: DATATABLES_ES
});

function abrirModal(){
  $('#formProv')[0].reset();
  $('#accion_form').val('crear');
  $('#id_form').val('');
  $('#activo').prop('checked', true);
  $('#modalProv').modal('show');
}

function editarProv(id){
  $.post("{{ url('proveedores/detalle') }}", { id }, function(p){
    $('#accion_form').val('editar');
    $('#id_form').val(p.id);
    $('#nombre').val(p.nombre);
    $('#rut').val(p.rut);
    $('#contacto').val(p.contacto || '');
    $('#activo').prop('checked', p.activo == 1 || p.activo === true);
    $('#modalProv').modal('show');
  });
}

function guardarProv(){
  const fd = new FormData(document.getElementById('formProv'));
  if (!$('#activo').is(':checked')) fd.set('activo', '0');
  $.ajax({
    url: "{{ url('proveedores/guardar') }}",
    type: 'POST',
    data: fd,
    processData: false,
    contentType: false,
    success: function(r){
      if (r.response){
        $('#modalProv').modal('hide');
        tabla.ajax.reload();
        Swal.fire('Listo', 'Proveedor guardado.', 'success');
      }
    },
    error: function(xhr){
      Swal.fire('Error', xhr.responseJSON?.message || 'No se pudo guardar', 'error');
    }
  });
}

function eliminarProv(id){
  Swal.fire({ title: '¿Eliminar?', icon: 'warning', showCancelButton: true }).then(function(res){
    if (!res.isConfirmed) return;
    $.post("{{ url('proveedores/eliminar') }}", { id }, function(r){
      if (r.response){
        tabla.ajax.reload();
        Swal.fire('Eliminado', '', 'success');
      } else {
        Swal.fire('No se puede eliminar', r.message || '', 'warning');
      }
    });
  });
}
</script>
@endsection