<?php
// cotizacion.php
// Versión rápida sin base de datos
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Compra de Equipo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f6f9;
      margin: 0;
      padding: 20px;
      color: #222;
    }

    .container {
      max-width: 900px;
      margin: auto;
      background: #fff;
      border-radius: 14px;
      padding: 25px;
      box-shadow: 0 8px 30px rgba(0,0,0,.12);
    }

    h1 {
      margin-top: 0;
      color: #003366;
      text-align: center;
    }

    h3 {
      color: #003366;
      margin-bottom: 10px;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
      display: grid;
      gap: 12px;
      margin-bottom: 15px;
    }

    .grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
      grid-template-columns: 2fr 1fr 1fr auto;
      align-items: end;
    }

    label {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 5px;
      display: block;
    }

    input {
      width: 100%;
      padding: 11px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 15px;
    }

    button {
      border: none;
      border-radius: 8px;
      padding: 11px 18px;
      cursor: pointer;
      font-weight: bold;
      font-size: 14px;
    }

    .btn-primary {
      background: #003366;
      color: white;
    }

    .btn-success {
      background: #198754;
      color: white;
    }

    .btn-danger {
      background: #dc3545;
      color: white;
    }

    .btn-print {
      background: #111827;
      color: white;
      width: 100%;
      margin-top: 20px;
      font-size: 16px;
      padding: 14px;
    }

    .cliente-box {
      background: #eef4ff;
      border: 1px solid #c9dcff;
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 20px;
    }

    .item-form {
      display: none;
      background: #f8fafc;
      padding: 15px;
      border-radius: 10px;
      border: 1px solid #ddd;
      margin-bottom: 20px;
    }

    .datos-print {
      display: none;
      margin-bottom: 15px;
      border: 1px solid #999;
      padding: 10px;
      border-radius: 6px;
    }

    .datos-print p {
      margin: 5px 0;
      font-size: 14px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
    }

    th {
      background: #003366;
      color: white;
      padding: 10px;
      text-align: left;
      font-size: 14px;
    }

    td {
      padding: 10px;
      border-bottom: 1px solid #ddd;
      font-size: 14px;
    }

    .text-right {
      text-align: right;
    }

    .total-box {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }

    .total-box div {
      background: #003366;
      color: white;
      padding: 15px 25px;
      border-radius: 10px;
      font-size: 22px;
      font-weight: bold;
      min-width: 250px;
      text-align: right;
    }

    .acciones {
      display: flex;
      gap: 8px;
    }

    .print-header {
      display: none;
    }

    @media (max-width: 768px) {
      .grid-2,
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr;
      }

      .acciones {
        flex-direction: column;
      }
    }

    @media print {
      @page {
        size: letter;
        margin: 15mm;
      }

      body {
        background: white;
        padding: 0;
      }

      .container {
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        max-width: 100%;
      }

      .no-print,
      .item-form,
      .acciones,
      .btn-print {
        display: none !important;
      }

      .print-header,
      .datos-print {
        display: block;
      }

      h1 {
        color: #000;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
      }

      th {
        background: #ddd !important;
        color: #000 !important;
        border: 1px solid #999;
      }

      td {
        border: 1px solid #999;
      }

      .cliente-box {
        display: none;
      }

      .total-box div {
        background: white !important;
        color: #000 !important;
        border: 2px solid #000;
      }
    }
  </style>
</head>
<body>

<div class="container">

  <div class="print-header">
    <h1>COMPRA DE EQUIPO</h1>
    <p>Fecha: <span id="fechaPrint"></span></p>
  </div>

  <h1 class="no-print">Compra de Equipo</h1>

  <section class="cliente-box">
    <h3>Datos generales</h3>

    <div class="grid-3">
      <div>
        <label>Nombre</label>
        <input type="text" id="nombreCliente" placeholder="Nombre del solicitante">
      </div>

      <div>
        <label>Empresa</label>
        <input type="text" id="empresaCliente" placeholder="Empresa">
      </div>

      <div>
        <label>Nombre del proyecto</label>
        <input type="text" id="nombreProyecto" placeholder="Nombre del proyecto">
      </div>
    </div>

    <div class="no-print">
      <button class="btn-primary" onclick="mostrarFormularioArticulo()">
        Agregar artículo
      </button>
    </div>
  </section>

  <section class="datos-print">
    <p><strong>Nombre:</strong> <span id="printNombre"></span></p>
    <p><strong>Empresa:</strong> <span id="printEmpresa"></span></p>
    <p><strong>Nombre del proyecto:</strong> <span id="printProyecto"></span></p>
  </section>

  <section id="formArticulo" class="item-form no-print">
    <h3>Agregar equipo / artículo</h3>

    <div class="grid-4">
      <div>
        <label>Descripción</label>
        <input type="text" id="descripcion" placeholder="Descripción del equipo o artículo">
      </div>

      <div>
        <label>Cantidad</label>
        <input type="number" id="cantidad" min="1" step="1" placeholder="0">
      </div>

      <div>
        <label>Costo</label>
        <input type="number" id="costo" min="0" step="0.01" placeholder="0.00">
      </div>

      <div>
        <button class="btn-success" onclick="agregarArticulo()">
          Agregar
        </button>
      </div>
    </div>
  </section>

  <section>
    <h3>Detalle de compra</h3>

    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Descripción</th>
          <th class="text-right">Cantidad</th>
          <th class="text-right">Costo</th>
          <th class="text-right">Subtotal</th>
          <th class="no-print">Acción</th>
        </tr>
      </thead>
      <tbody id="tablaArticulos">
        <tr id="filaVacia">
          <td colspan="6" style="text-align:center;">No hay artículos agregados</td>
        </tr>
      </tbody>
    </table>

    <div class="total-box">
      <div>
        Total: $<span id="total">0.00</span>
      </div>
    </div>
  </section>

  <button class="btn-print no-print" onclick="imprimirCotizacion()">
    Imprimir compra de equipo
  </button>

</div>

<script>
  let articulos = [];

  function mostrarFormularioArticulo() {
    const nombre = document.getElementById('nombreCliente').value.trim();
    const empresa = document.getElementById('empresaCliente').value.trim();
    const proyecto = document.getElementById('nombreProyecto').value.trim();

    if (nombre === '' || empresa === '' || proyecto === '') {
      alert('Primero captura nombre, empresa y nombre del proyecto.');
      return;
    }

    document.getElementById('formArticulo').style.display = 'block';
    document.getElementById('descripcion').focus();
  }

  function agregarArticulo() {
    const descripcion = document.getElementById('descripcion').value.trim();
    const cantidad = parseFloat(document.getElementById('cantidad').value);
    const costo = parseFloat(document.getElementById('costo').value);

    if (descripcion === '') {
      alert('Captura la descripción.');
      return;
    }

    if (isNaN(cantidad) || cantidad <= 0) {
      alert('Captura una cantidad válida.');
      return;
    }

    if (isNaN(costo) || costo < 0) {
      alert('Captura un costo válido.');
      return;
    }

    const subtotal = cantidad * costo;

    articulos.push({
      descripcion,
      cantidad,
      costo,
      subtotal
    });

    limpiarFormularioArticulo();
    renderizarTabla();
  }

  function limpiarFormularioArticulo() {
    document.getElementById('descripcion').value = '';
    document.getElementById('cantidad').value = '';
    document.getElementById('costo').value = '';
    document.getElementById('descripcion').focus();
  }

  function renderizarTabla() {
    const tbody = document.getElementById('tablaArticulos');
    tbody.innerHTML = '';

    if (articulos.length === 0) {
      tbody.innerHTML = `
        <tr id="filaVacia">
          <td colspan="6" style="text-align:center;">No hay artículos agregados</td>
        </tr>
      `;
      document.getElementById('total').innerText = '0.00';
      return;
    }

    let total = 0;

    articulos.forEach((item, index) => {
      total += item.subtotal;

      const tr = document.createElement('tr');

      tr.innerHTML = `
        <td>${index + 1}</td>
        <td>${item.descripcion}</td>
        <td class="text-right">${item.cantidad}</td>
        <td class="text-right">$${item.costo.toFixed(2)}</td>
        <td class="text-right">$${item.subtotal.toFixed(2)}</td>
        <td class="no-print">
          <button class="btn-danger" onclick="eliminarArticulo(${index})">
            Eliminar
          </button>
        </td>
      `;

      tbody.appendChild(tr);
    });

    document.getElementById('total').innerText = total.toFixed(2);
  }

  function eliminarArticulo(index) {
    articulos.splice(index, 1);
    renderizarTabla();
  }

  function imprimirCotizacion() {
    const nombre = document.getElementById('nombreCliente').value.trim();
    const empresa = document.getElementById('empresaCliente').value.trim();
    const proyecto = document.getElementById('nombreProyecto').value.trim();

    if (nombre === '' || empresa === '' || proyecto === '') {
      alert('Captura nombre, empresa y nombre del proyecto.');
      return;
    }

    if (articulos.length === 0) {
      alert('Agrega al menos un artículo.');
      return;
    }

    const fecha = new Date();

    document.getElementById('fechaPrint').innerText = fecha.toLocaleDateString('es-MX');
    document.getElementById('printNombre').innerText = nombre;
    document.getElementById('printEmpresa').innerText = empresa;
    document.getElementById('printProyecto').innerText = proyecto;

    window.print();
  }

  window.onafterprint = function () {
    limpiarArticulosDespuesDeImprimir();
  };

  function limpiarArticulosDespuesDeImprimir() {
    articulos = [];
    renderizarTabla();

    document.getElementById('formArticulo').style.display = 'none';

    alert('Impresión finalizada. Los artículos fueron limpiados.');
  }
</script>

</body>
</html>