<?php require_once 'conexion2.php'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Actualizar Saldos del Cliente</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="bg-light">
<div class="container py-5">
  <div class="card shadow">
    <div class="card-header bg-primary text-white">
      <h4>Actualizar Saldos del Cliente</h4>
    </div>
    <div class="card-body">
      <div class="mb-3">
        <label for="buscar_cliente" class="form-label">Buscar Cliente</label>
        <input type="text" id="buscar_cliente" class="form-control" placeholder="Nombre del cliente..." autocomplete="off">
        <div id="sugerencias_clientes" class="list-group mt-1"></div>
        <input type="hidden" id="cliente_id">
      </div>
      
      <div id="datos_cliente" style="display:none;">
        <h5 class="mt-4">Saldos del Cliente</h5>
        <form id="form_actualizar_saldos" method="POST" action="guardar_saldos.php">
          <input type="hidden" name="cliente_id" id="cliente_id_form">

          <div class="row mb-3">
            <div class="col-md-6">
              <label for="balance" class="form-label">Balance</label>
              <input type="number" step="0.0001" name="balance" id="balance" class="form-control">
            </div>
            <div class="col-md-6">
              <label for="due" class="form-label">Deuda (Due)</label>
              <input type="number" step="0.0001" name="due" id="due" class="form-control">
            </div>
          </div>
          <button class="btn btn-success mb-4" type="submit">Guardar Saldos</button>
        </form>

        <h5>Facturas del Cliente</h5>
        <div id="tabla_facturas"></div>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function () {
  // Buscar clientes por nombre
  $('#buscar_cliente').on('input', function () {
    let query = $(this).val();
    if (query.length >= 2) {
      $.post('ajax_buscar_cliente.php', {query: query}, function (data) {
        $('#sugerencias_clientes').html(data).show();
      });
    } else {
      $('#sugerencias_clientes').hide();
    }
  });

  // Al seleccionar un cliente de la lista
  $(document).on('click', '.cliente-item', function () {
    let id = $(this).data('id');
    let nombre = $(this).text();

    $('#buscar_cliente').val(nombre);
    $('#cliente_id').val(id);
    $('#cliente_id_form').val(id);
    $('#sugerencias_clientes').hide();

    // Petición AJAX para traer datos del cliente
    $.ajax({
      type: 'POST',
      url: 'ajax_datos_cliente.php',
      data: { cliente_id: id },
      dataType: 'json',
      success: function (data) {
        console.log("Respuesta AJAX:", data);

        if (!data || !data.saldos || !data.tabla) {
          alert("Respuesta inválida del servidor");
          return;
        }

        $('#balance').val(data.saldos.balance);
        $('#due').val(data.saldos.due);
        $('#tabla_facturas').html(data.tabla);
        $('#datos_cliente').show();
      },
      error: function (xhr, status, error) {
        console.error("AJAX ERROR", xhr.responseText);
        alert("Error en la solicitud AJAX: " + xhr.status + " - " + error);
      }
    });
  });
});
</script>

</body>
</html>
