Untitled

<script>
  import { lotesCurvaData, lotesCurvasSubData } from '$lib/stores/globalVariables';
  import { get } from 'svelte/store';
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';

  let sizes = [];
  let subdivisions = 1;

  // Obtener todas las tallas únicas de los datos
  $: getSizes(), $lotesCurvaData, $lotesCurvasSubData;

  function getSizes() {
    const data = get(lotesCurvaData);
    sizes = Array.from(new Set(data.flatMap(item => Object.keys(item).filter(key => key !== 'COLOR'))));
  }

  // Función para procesar los datos de entrada en formato de tabla
  function generateTable() {
    const input = document.getElementById('dataInput').value.trim();
    const lines = input.split('\n').filter(line => line.trim() !== '');

    if (lines.length === 0) return;

    sizes = Array.from(new Set(lines.map(line => line.split('\t')[4].trim())));

    const colors = lines.reduce((acc, line) => {
      const [referencia, tipoDeTela, descripcion, color, talla, cantidad, cantidadReal] = line.split('\t').map(item => item.trim());
      if (!acc[color]) acc[color] = { COLOR: color };
      acc[color][talla] = (acc[color][talla] || 0) + parseInt(cantidadReal);
      return acc;
    }, {});

    lotesCurvaData.set(Object.values(colors));
    createSubdivisions(); // Reiniciar los datos después de generar la tabla
  }

  function handleSubdivisionChange(event) {
    subdivisions = parseInt(event.target.value);
    createSubdivisions();
  }

  function createSubdivisions() {
    const initialData = get(lotesCurvaData);
    const subData = [{
      name: 'Lote Principal',
      ref: '',
      marca: '',
      cliente: '',
      ordenConfeccion: '',
      ordenProduccion: '',
      taller: '', // Cambiado de 'notas' a 'taller'
      nombreReferencia: '',
      cantidadBultos: '',

      data: initialData.map(item => ({ ...item }))
    }];

    for (let i = 2; i <= subdivisions; i++) {
      subData.push({
        name: `Empaque Lote ${i}`,
        ref: '',
        marca: '',
        cliente: '',
        ordenConfeccion: '',
        ordenProduccion: '',
        taller: '', // Cambiado de 'notas' a 'taller'
         nombreReferencia: '',
      cantidadBultos: '',
        data: initialData.map(item => ({
          COLOR: item.COLOR,
          ...sizes.reduce((acc, size) => {
            acc[size] = '';
            return acc;
          }, {})
        }))
      });
    }

    lotesCurvasSubData.set(subData);
  }

  function updateSubValue(event, subIndex, item, size) {
    const newValue = parseInt(event.target.innerText.trim()) || 0;
    if (isNaN(newValue) || newValue < 0) return;

    lotesCurvasSubData.update(current => {
      const updatedSubData = [...current];
      updatedSubData[subIndex].data = updatedSubData[subIndex].data.map(i => {
        if (i.COLOR === item.COLOR) {
          return { ...i, [size]: newValue };
        }
        return i;
      });

      // Recalcular el primer subconjunto
      const originalData = get(lotesCurvaData);
      updatedSubData[0].data = originalData.map(originalItem => {
        const color = originalItem.COLOR;
        const updatedItem = { COLOR: color };
        sizes.forEach(size => {
          const originalSizeValue = originalItem[size] || 0;
          const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => {
            const subItem = sub.data.find(i => i.COLOR === color);
            return sum + (parseInt(subItem[size]) || 0);
          }, 0);
          updatedItem[size] = originalSizeValue - otherSubValues;
        });
        return updatedItem;
      });

      return updatedSubData;
    });
  }

  function incrementValue(subIndex, item, size) {
    lotesCurvasSubData.update(current => {
      const updatedSubData = [...current];
      const originalData = get(lotesCurvaData);
      const originalItem = originalData.find(i => i.COLOR === item.COLOR);
      const originalSizeValue = originalItem[size] || 0;

      const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => {
        const subItem = sub.data.find(i => i.COLOR === item.COLOR);
        return sum + (parseInt(subItem[size]) || 0);
      }, 0);

      if (originalSizeValue - otherSubValues > 0) {
        updatedSubData[subIndex].data = updatedSubData[subIndex].data.map(i => {
          if (i.COLOR === item.COLOR) {
            return { ...i, [size]: (parseInt(i[size]) || 0) + 1 };
          }
          return i;
        });

        // Recalcular el primer subconjunto
        updatedSubData[0].data = originalData.map(originalItem => {
          const color = originalItem.COLOR;
          const updatedItem = { COLOR: color };
          sizes.forEach(size => {
            const originalSizeValue = originalItem[size] || 0;
            const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => {
              const subItem = sub.data.find(i => i.COLOR === color);
              return sum + (parseInt(subItem[size]) || 0);
            }, 0);
            updatedItem[size] = originalSizeValue - otherSubValues;
          });
          return updatedItem;
        });
      }
      return updatedSubData;
    });
  }

  function decrementValue(subIndex, item, size) {
    lotesCurvasSubData.update(current => {
      const updatedSubData = [...current];
      updatedSubData[subIndex].data = updatedSubData[subIndex].data.map(i => {
        if (i.COLOR === item.COLOR) {
          return { ...i, [size]: Math.max((parseInt(i[size]) || 0) - 1, 0) };
        }
        return i;
      });

      // Recalcular el primer subconjunto
      const originalData = get(lotesCurvaData);
      updatedSubData[0].data = originalData.map(originalItem => {
        const color = originalItem.COLOR;
        const updatedItem = { COLOR: color };
        sizes.forEach(size => {
          const originalSizeValue = originalItem[size] || 0;
          const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => {
            const subItem = sub.data.find(i => i.COLOR === color);
            return sum + (parseInt(subItem[size]) || 0);
          }, 0);
          updatedItem[size] = originalSizeValue - otherSubValues;
        });
        return updatedItem;
      });

      return updatedSubData;
    });
  }

  function updateSubField(event, subIndex, field) {
    const newValue = event.target.value;
    lotesCurvasSubData.update(current => {
      const updatedSubData = [...current];
      updatedSubData[subIndex][field] = newValue;
      return updatedSubData;
    });
  }

  // Función para calcular el total de unidades por talla en las subdivisiones
  function calculateTotalInSub(data, size) {
    return data.reduce((total, item) => total + (parseInt(item[size]) || 0), 0);
  }

  function navigateToPDFPreview() {
    goto('/lotes/orden-empaque/pdf-preview');
  }

  function navigateToMainPage() {
    goto('/lotes/orden-empaque');
  }
</script>


<div class="mb-3">
	<textarea
		id="dataInput"
		class="form-control"
		rows="3"
		placeholder="Introduce las tallas y cantidades aquí"
	></textarea>
</div>
<div class="mb-3">
	<button class="btn btn-primary w-100" on:click={generateTable}>Generar Tabla</button>
</div>

<div class="mb-3">
	<label for="subdivision" class="form-label">Sub dividir curva en:</label>
	<input
		type="number"
		id="subdivision"
		min="1"
		value={subdivisions}
		on:input={handleSubdivisionChange}
		class="form-control"
	/>
</div>

{#each $lotesCurvasSubData as subData, subIndex}
	<div class="mt-4">
		<h5>{subData.name}</h5>
		<div class="row mb-3">
			<div class="col-md-2">
				<label for={`ref-${subIndex}`} class="form-label">Ref:</label>
				<input
					id={`ref-${subIndex}`}
					type="text"
					class="form-control"
					value={subData.ref}
					on:input={(e) => updateSubField(e, subIndex, 'ref')}
					autocomplete="off"
				/>
			</div>
			<div class="col-md-2">
				<label for={`marca-${subIndex}`} class="form-label">Marca:</label>
				<input
					id={`marca-${subIndex}`}
					type="text"
					class="form-control"
					value={subData.marca}
					on:input={(e) => updateSubField(e, subIndex, 'marca')}
					autocomplete="off"
				/>
			</div>
			<div class="col-md-2">
				<label for={`cliente-${subIndex}`} class="form-label">Cliente:</label>
				<input
					id={`cliente-${subIndex}`}
					type="text"
					class="form-control"
					value={subData.cliente}
					on:input={(e) => updateSubField(e, subIndex, 'cliente')}
					autocomplete="off"
				/>
			</div>
			<div class="col-md-3">
				<label for={`ordenConfeccion-${subIndex}`} class="form-label">Orden Confección:</label>
				<input
					id={`ordenConfeccion-${subIndex}`}
					type="text"
					class="form-control"
					value={subData.ordenConfeccion}
					on:input={(e) => updateSubField(e, subIndex, 'ordenConfeccion')}
					autocomplete="off"
				/>
			</div>
			<div class="col-md-3">
				<label for={`ordenProduccion-${subIndex}`} class="form-label">Orden Producción:</label>
				<input
					id={`ordenProduccion-${subIndex}`}
					type="text"
					class="form-control"
					value={subData.ordenProduccion}
					on:input={(e) => updateSubField(e, subIndex, 'ordenProduccion')}
					autocomplete="off"
				/>
			</div>
		</div>
		<div class="mb-3">
			<label for={`taller-${subIndex}`} class="form-label">Taller:</label>
			<input
				id={`taller-${subIndex}`}
				type="text"
				class="form-control"
				value={subData.taller}
				on:input={(e) => updateSubField(e, subIndex, 'taller')}
				autocomplete="off"
			/>
		</div>
    <div class="mb-3">
			<label for={`nombreReferencia-${subIndex}`} class="form-label">nombreReferencia:</label>
			<input
				id={`nombreReferencia-${subIndex}`}
				type="text"
				class="form-control"
				value={subData.nombreReferencia}
				on:input={(e) => updateSubField(e, subIndex, 'nombreReferencia')}
				autocomplete="off"
			/>
		</div>
    <div class="mb-3">
			<label for={`cantidadBultos-${subIndex}`} class="form-label">bultos:</label>
			<input
				id={`cantidadBultos-${subIndex}`}
				type="text"
				class="form-control"
				value={subData.cantidadBultos}
				on:input={(e) => updateSubField(e, subIndex, 'cantidadBultos')}
				autocomplete="off"
			/>
		</div>
		<table class="table table-striped table-bordered">
			<thead>
				<tr>
					<th scope="col" class="fixed-width">COLOR</th>
					{#each sizes as size}
						<th scope="col" class="fixed-width text-center">{size}</th>
					{/each}
					<th scope="col" class="fixed-width">Total</th>
				</tr>
			</thead>
			<tbody>
				{#each subData.data as item}
					<tr>
						<td class="fixed-width">{item.COLOR}</td>
						{#each sizes as size}
							<td class="fixed-width">
								{#if subIndex > 0}
									<div class="d-flex justify-content-between align-items-center text-center">
										<button
											class="btn btn-sm btn-outline-primary"
											on:click={() => decrementValue(subIndex, item, size)}>-</button
										>
										<span
											class="text-center"
											contenteditable="true"
											on:blur={(e) => updateSubValue(e, subIndex, item, size)}
											>{item[size] || ''}</span
										>
										<button
											class="btn btn-sm btn-outline-primary"
											on:click={() => incrementValue(subIndex, item, size)}>+</button
										>
									</div>
								{:else}
									{item[size] || ''}
								{/if}
							</td>
						{/each}
						<td class="fixed-width"
							>{sizes.reduce((total, size) => total + (parseInt(item[size]) || 0), 0)}</td
						>
					</tr>
				{/each}
				<tr class="table-secondary">
					<td class="fixed-width">Total</td>
					{#each sizes as size}
						<td class="fixed-width">{calculateTotalInSub(subData.data, size)}</td>
					{/each}
					<td class="fixed-width"></td>
				</tr>
			</tbody>
		</table>
	</div>
{/each}

<style>
	.fixed-width {
		width: 80px;
		min-width: 80px;
		max-width: 80px;
	}

	.table-secondary {
		background-color: #f8f9fa;
	}

	td[contenteditable='true']:focus {
		background-color: #f8f9fa;
		outline: none;
	}
</style>