@extends('theme.sneat.admin')

@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />

@php
  $usuarioInventario = \App\Support\InventarioUser::matches();
  $esAdmin = ! $usuarioInventario;
@endphp

<style>
  .prep-page {
    --prep-border: #e7e7e9;
    --prep-muted: #697a8d;
    --prep-surface: #f8f9fa;
    --prep-accent: #696cff;
  }
  .prep-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
  }
  .prep-page .page-head h4 { margin: 0; }
  .prep-page .page-head .hint {
    margin: 0.3rem 0 0;
    color: var(--prep-muted);
    font-size: 0.875rem;
    max-width: 40rem;
  }
  .prep-panel {
    background: #fff;
    border: 1px solid var(--prep-border);
    border-radius: 0.625rem;
    overflow: hidden;
  }
  .prep-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid var(--prep-border);
    background: var(--prep-surface);
  }
  .prep-toolbar .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }
  .prep-toolbar .prep-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 280px;
    max-width: 100%;
    flex: 0 1 280px;
  }
  .prep-toolbar .prep-search .input-group-text {
    flex: 0 0 auto;
  }
  .prep-toolbar .prep-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .prep-toolbar .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .prep-search-banner {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.05rem;
    border-bottom: 1px solid var(--prep-border);
    background: #eef0ff;
    color: #5f61e6;
    font-size: 0.85rem;
    font-weight: 650;
  }
  .prep-search-banner.is-visible { display: flex; }
  .prep-search-banner .btn-link {
    margin-left: auto;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .prep-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.85rem 1.05rem;
    border-bottom: 1px solid var(--prep-border);
    background: #fff;
  }
  .prep-cats .nav-link {
    border: 1px solid var(--prep-border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    color: #566a7f;
    font-size: 0.85rem;
    font-weight: 650;
    background: #fff;
  }
  .prep-cats .nav-link:hover { border-color: #cfd0ff; color: var(--prep-accent); }
  .prep-cats .nav-link.active {
    background: #eef0ff;
    border-color: #cfd0ff;
    color: var(--prep-accent);
  }
  .prep-body { padding: 1rem 1.05rem 1.25rem; }
  .prep-empty {
    border: 1px dashed var(--prep-border);
    border-radius: 0.625rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--prep-muted);
    background: #fcfcfd;
  }
  .prep-empty i {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.4rem;
    color: #b4b8c5;
  }
  .prep-card {
    border: 1px solid var(--prep-border);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    height: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .prep-card:hover {
    border-color: #cfd0ff;
    box-shadow: 0 0.25rem 0.75rem rgba(105, 108, 255, 0.08);
  }
  .prep-card .prep-card-main {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  @media (min-width: 768px) {
    .prep-card .prep-card-main {
      grid-template-columns: 160px 1fr;
      min-height: 150px;
    }
  }
  @media (min-width: 1200px) {
    .prep-card .prep-card-main {
      grid-template-columns: 180px 1fr;
    }
  }
  .prep-media {
    position: relative;
    background: #eef0f3;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 200px;
  }
  @media (min-width: 576px) and (max-width: 767.98px) {
    .prep-media { max-height: 220px; }
  }
  @media (min-width: 768px) {
    .prep-media {
      aspect-ratio: auto;
      height: 100%;
      max-height: none;
      min-height: 150px;
      align-self: stretch;
    }
  }
  .prep-media a,
  .prep-media button.prep-media-empty {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .prep-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .25s ease;
  }
  .prep-media a:hover img {
    transform: scale(1.04);
  }
  .prep-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #9aa3af;
    background: linear-gradient(160deg, #f3f4f6 0%, #e9ecf1 100%);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    border: 0;
    padding: 0;
  }
  .prep-media-empty:hover {
    background: linear-gradient(160deg, #eef0ff 0%, #e4e7fb 100%);
    color: #696cff;
  }
  .prep-media-empty:hover span::after {
    content: ' · Clic para cargar';
  }
  .prep-media-empty i {
    font-size: 1.6rem;
    opacity: 0.7;
  }
  .prep-media-zoom {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    background: rgba(43, 44, 64, 0.72);
    color: #fff;
    border-radius: 999px;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    pointer-events: none;
  }

  /* Visor de imagen responsive */
  .prep-lightbox .modal-dialog {
    max-width: min(920px, calc(100vw - 1.5rem));
    margin: 0.75rem auto;
  }
  @media (min-width: 768px) {
    .prep-lightbox .modal-dialog {
      max-width: min(920px, calc(100vw - 2.5rem));
      margin: 1.25rem auto;
    }
  }
  .prep-lightbox .modal-content {
    background: #1e1e2d;
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .prep-lightbox .modal-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 0.7rem 1rem;
  }
  .prep-lightbox .modal-title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 650;
    margin: 0;
    max-width: calc(100% - 2.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .prep-lightbox .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.8;
  }
  .prep-lightbox .modal-body {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #12121a;
    min-height: 180px;
  }
  .prep-lightbox .prep-lightbox-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(70vh, 720px);
    object-fit: contain;
    border-radius: 0.35rem;
  }
  @media (max-width: 575.98px) {
    .prep-lightbox .prep-lightbox-img {
      max-height: min(62vh, 520px);
    }
  }
  .prep-lightbox .modal-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 0.65rem 1rem;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .prep-lightbox .modal-footer .btn {
    min-height: 38px;
  }
  .prep-card .prep-card-body {
    padding: 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .prep-card .prep-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    color: #566a7f;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }
  .prep-card .prep-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.35rem;
  }
  .prep-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  @media (min-width: 576px) {
    .prep-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .prep-metric {
    border: 1px solid var(--prep-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--prep-surface);
  }
  .prep-metric .lbl {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--prep-muted);
    font-weight: 650;
    margin-bottom: 0.15rem;
  }
  .prep-metric .val {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
    color: #566a7f;
  }
  .prep-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
  }
  .prep-card-detail {
    padding: 0 1.05rem 1.05rem;
  }
  .prep-ing-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.65rem;
  }
  @media (min-width: 768px) {
    .prep-ing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1200px) {
    .prep-ing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .prep-ing-item {
    border: 1px solid var(--prep-border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem;
    background: #fff;
  }
  .prep-ing-item .name {
    font-weight: 700;
    color: #566a7f;
    margin-bottom: 0.35rem;
  }
  .prep-ing-item .row-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--prep-muted);
  }
  .prep-ing-item .row-line strong { color: #566a7f; }
  #modalPreparacion .modal-header,
  #modalPrepImagen .modal-header {
    background: transparent;
    border-bottom: 1px solid var(--prep-border);
  }
  .prep-modal {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(67, 89, 113, 0.18);
  }
  .prep-modal-head {
    padding: 1.15rem 1.35rem;
    background: linear-gradient(135deg, #f7f8ff 0%, #ffffff 65%);
  }
  .prep-modal-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef0ff;
    color: var(--prep-accent);
    font-size: 1.35rem;
    flex: 0 0 auto;
  }
  .prep-modal-body { padding: 1.2rem 1.35rem 1.4rem; background: #fafbfd; }
  .prep-modal-foot {
    padding: 0.95rem 1.35rem;
    background: #fff;
    border-top: 1px solid var(--prep-border);
  }
  .prep-modal-layout {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  @media (min-width: 992px) {
    .prep-modal-layout {
      grid-template-columns: 220px 1fr;
      align-items: start;
    }
  }
  .prep-modal-aside { display: flex; flex-direction: column; gap: 0.65rem; }
  .prep-aside-hint {
    font-size: 0.75rem;
    color: var(--prep-muted);
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    line-height: 1.35;
  }
  .prep-modal-block {
    border: 1px solid var(--prep-border);
    border-radius: 0.85rem;
    padding: 1.05rem 1.1rem;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(67, 89, 113, 0.03);
  }
  .prep-block-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.95rem;
  }
  .prep-block-title h6 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 750;
    color: #566a7f;
  }
  .prep-step {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef0ff;
    color: var(--prep-accent);
    font-size: 0.75rem;
    font-weight: 800;
  }
  .prep-dropzone {
    position: relative;
    display: block;
    border: 1.5px dashed #cfd0ff;
    border-radius: 0.9rem;
    background: linear-gradient(160deg, #f8f9ff 0%, #ffffff 70%);
    min-height: 210px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    margin: 0;
  }
  .prep-dropzone:hover,
  .prep-dropzone.is-drag {
    border-color: var(--prep-accent);
    box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
    background: #f4f5ff;
  }
  /* Input oculto pero asociado al label: funciona en tablet/móvil */
  .prep-file-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .prep-dropzone-lg { min-height: 260px; }
  .prep-dropzone-empty {
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.25rem 1rem;
    text-align: center;
    color: #697a8d;
  }
  .prep-dropzone-empty strong {
    color: #566a7f;
    font-size: 0.95rem;
  }
  .prep-dropzone-empty span,
  .prep-dropzone-empty em {
    font-size: 0.78rem;
    font-style: normal;
    color: #9aa3af;
  }
  .prep-dropzone-icon {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef0ff;
    color: var(--prep-accent);
    font-size: 1.45rem;
    margin-bottom: 0.35rem;
  }
  .prep-dropzone-preview {
    position: relative;
    min-height: inherit;
    height: 100%;
  }
  .prep-dropzone-preview img {
    width: 100%;
    height: 100%;
    max-height: min(42vh, 280px);
    min-height: 160px;
    object-fit: cover;
    display: block;
  }
  .prep-dropzone-lg .prep-dropzone-preview img {
    max-height: min(50vh, 320px);
    min-height: 180px;
  }
  @media (max-width: 575.98px) {
    .prep-dropzone-preview img,
    .prep-dropzone-lg .prep-dropzone-preview img {
      max-height: min(38vh, 240px);
      min-height: 140px;
    }
  }
  .prep-dropzone-actions {
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.55rem;
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
    z-index: 3;
  }
  .prep-dropzone.has-preview {
    cursor: default;
  }
  /* Con preview, el label no debe reabrir el file al clic en la imagen;
     solo el botón Cambiar (también dentro del label) y el clear */
  .prep-dropzone.has-preview .prep-dropzone-preview img {
    pointer-events: none;
  }
  .prep-switch {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--prep-border);
    border-radius: 0.75rem;
    background: #fff;
    cursor: pointer;
    margin: 0;
    position: relative;
  }
  .prep-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
  }
  .prep-switch-ui {
    width: 2.6rem;
    height: 1.45rem;
    border-radius: 999px;
    background: #a8b1bd;
    border: 2px solid #8592a3;
    position: relative;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    transition: background .2s ease, border-color .2s ease;
    box-sizing: border-box;
  }
  .prep-switch-ui::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s ease;
  }
  .prep-switch input:checked + .prep-switch-ui {
    background: #696cff;
    border-color: #5f61e6;
  }
  .prep-switch input:checked + .prep-switch-ui::after {
    transform: translateX(1.15rem);
  }
  .prep-switch-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }
  .prep-switch-text strong { color: #566a7f; font-size: 0.9rem; }
  .prep-switch-text small { color: var(--prep-muted); font-size: 0.78rem; line-height: 1.3; }
  .prep-ing-form {
    padding: 0.85rem;
    border-radius: 0.75rem;
    background: var(--prep-surface);
    border: 1px solid var(--prep-border);
  }
  #tabla-ingredientes-wrap {
    border: 1px solid var(--prep-border);
    border-radius: 0.75rem;
    overflow: auto;
    background: #fff;
  }
  .prep-ing-table thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--prep-muted);
    background: #f8f9fa;
    border-bottom: 1px solid var(--prep-border);
    white-space: nowrap;
    padding: 0.7rem 0.65rem;
  }
  .prep-ing-table tbody td {
    padding: 0.65rem;
    border-color: #f0f1f4;
    font-size: 0.86rem;
  }
  .swal2-container { z-index: 2000 !important; }
  .select2-container--open { z-index: 2050 !important; }
</style>

<div class="prep-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Mantenedor -</span> Preparaciones</h4>
      <p class="hint">Elija una categoría, revise o edite preparaciones e ingredientes. El buscador encuentra por nombre en todas las categorías.</p>
    </div>
  </div>

  <div class="prep-panel">
    <div class="prep-toolbar">
      <div class="filters">
        <div class="input-group prep-search">
          <span class="input-group-text"><i class="bx bx-search"></i></span>
          <input type="text" class="form-control" id="prep_buscar" placeholder="Buscar en todas las categorías…" autocomplete="off" />
        </div>
        <span class="text-muted small" id="prep_count">0 preparaciones</span>
      </div>
      <div class="actions">
        @unless($usuarioInventario)
        <button class="btn btn-outline-secondary btn-sm" onclick="nuevaCategoria();">
          <i class="bx bx-folder-plus"></i> Nueva categoría
        </button>
        @endunless
        <button class="btn btn-primary btn-sm" onclick="nuevaPreparacion();" id="btn-nueva-preparacion" disabled>
          <i class="bx bx-plus"></i> Nueva preparación
        </button>
      </div>
    </div>

    <div class="prep-search-banner" id="prep_search_banner">
      <i class="bx bx-globe"></i>
      <span id="prep_search_banner_text">Buscando en todas las categorías</span>
      <button type="button" class="btn btn-link" id="prep_search_clear">Limpiar búsqueda</button>
    </div>

    <ul class="nav prep-cats" id="categoria-tabs"></ul>

    <div class="prep-body">
      <div id="contenedor-preparaciones">
        <div class="prep-empty">
          <i class="bx bx-dish"></i>
          Seleccione una categoría para ver sus preparaciones.
        </div>
      </div>
    </div>
  </div>
</div>

@include('admin.preparaciones.modales')
@endsection

@section('scripts')
{{-- jQuery (si tu layout no lo incluye) --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>

{{-- Select2 CSS/JS --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.full.min.js"></script>

<script>
// ======= CONFIG/ESTADO =======
const ES_USUARIO_INVENTARIO = @json($usuarioInventario);
const ES_ADMIN = @json($esAdmin);
const URL_HISTORIAL_BASE = "{{ url('preparacion') }}/";
// Porcentaje de merma configurado en backend (.env)
const MERMA_PORCENTAJE = parseFloat("{{ config('configuracion.merma_preparacion', 5) }}") || 0;
const MERMA_FACTOR = 1 + (MERMA_PORCENTAJE / 100);
const PREP_IMG_BASE = "{{ URL::to('/') }}/../storage/app/public/";
const URL_SUBIR_IMAGEN = "{{ url('preparacion/subir-imagen') }}";
const CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

let categorias = [];
let preparaciones = [];
let categoriaSeleccionada = null;
let productos = [];
let listadoIngredientes = [];
let prepPreviewObjectUrl = null;
let imgModalObjectUrl = null;

// ======= HELPERS DECIMALES/FORMATO =======
// genérico N decimales
function toNDecimals(v, n = 3){
  const nval = parseFloat(String(v).replace(',', '.'));
  if (isNaN(nval) || nval < 0) return 0;
  const factor = Math.pow(10, n);
  return Math.round(nval * factor) / factor;
}

// permite escribir con . o , y limita a 3 decimales
function normalizaCantidad(el){
  let s = String(el.value).replace(/,/g, '.');
  s = s.replace(/[^0-9.]/g, '');
  const firstDot = s.indexOf('.');
  if (firstDot !== -1) {
    const head = s.slice(0, firstDot + 1);
    const tail = s.slice(firstDot + 1).replace(/\./g, '');
    s = head + tail;
  }
  s = s.replace(/^(\d+(\.\d{0,3})?).*$/, '$1');
  if (s.startsWith('.')) s = '0' + s;
  el.value = s;
}

// mantiene el nombre original pero ahora deja 3 decimales
function formatea1Dec(el){
  el.value = toNDecimals(el.value, 3).toFixed(3);
}

function toCLP(n){
  n = parseFloat(n);
  if (isNaN(n)) n = 0;
  return '$' + n.toLocaleString('es-CL');
}
function fx(n, d = 3){
  n = parseFloat(n);
  if (isNaN(n)) n = 0;
  return n.toFixed(d);
}
function parseCLLike(v){
  if (v === null || v === undefined) return 0;
  let s = String(v).trim().replace(/\s+/g,'');
  if (s.includes(',')) s = s.replace(/\./g, '').replace(',', '.');
  const n = parseFloat(s);
  return isNaN(n) ? 0 : n;
}

// item = { tipo_insumo, producto_id, cantidad }; producto_id es el id del insumo (producto o prep)
function getValorUnitario(item){
  const tipo = item.tipo_insumo || 'producto';
  const id  = item.producto_id;
  const p   = productos.find(x => (x.tipo_insumo || 'producto') === tipo && +x.id === +id);
  return parseCLLike(p?.valor);
}

// Total de ingredientes incluyendo merma configurada
function totalIngredientes(){
  const subtotal = listadoIngredientes.reduce((acc, it) => {
    const vu = getValorUnitario(it);
    const cb = parseCLLike(it.cantidad);
    return acc + (vu * cb);
  }, 0);
  return subtotal * MERMA_FACTOR;
}

/** Recalcula y escribe el Valor Producto, y actualiza Valor Porción */
function recalcularPrecioDesdeIngredientes(){
  const total = Math.round(totalIngredientes());
  $('#precio_venta_publico').val(total);
  actualizarValorPorcion();
}

// ======= AJAX GLOBAL =======
$.ajaxSetup({
  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});

// ======= SELECT2 (PRODUCTO) =======
function initSelect2Producto() {
  const $sel = $('#producto_id');

  if ($sel.hasClass('select2-hidden-accessible')) {
    $sel.select2('destroy');
  }

  $sel.select2({
    theme: 'bootstrap-5',
    width: '100%',
    placeholder: '[Seleccione]',
    allowClear: true,
    dropdownParent: $('#modalPreparacion'),
    matcher: function(params, data) {
      if ($.trim(params.term) === '') return data;
      if (typeof data.text === 'undefined') return null;

      const term = params.term.toLowerCase();
      const text = data.text.toLowerCase();
      const unidad = ($(data.element).data('unidad') || '').toString().toLowerCase();
      return (text.indexOf(term) > -1 || unidad.indexOf(term) > -1) ? data : null;
    },
    templateResult: function (data) {
      if (!data.id) return data.text;
      const $opt = $(data.element);
      const unidad = $opt.data('unidad') || '';
      const valor  = $opt.data('valor')  || 0;
      return $(`
        <div>
          <div>${data.text}</div>
          <small class="text-muted">${unidad}${unidad ? ' · ' : ''}${toCLP(valor)}</small>
        </div>
      `);
    },
    templateSelection: function (data) {
      return data.text || data.id;
    }
  });
}

$(document).on('shown.bs.modal', '#modalPreparacion', function () {
  initSelect2Producto();
});

// ======= CARGA INICIAL =======
$(function(){
  cargarCategorias();
  cargarProductos();

  $('#inventariable_chk').on('change', function(){
    $('#inventariable_input').val(this.checked ? '1' : '0');
  });

  $(document).on('click', '.btn-cargar-img', function () {
    abrirModalImagen($(this).data('id'), $(this).attr('data-nombre') || '');
  });

  $(document).on('click', '.btn-ver-img-prep', function (e) {
    e.preventDefault();
    const src = $(this).data('src') || $(this).attr('href');
    const nombre = $(this).attr('data-nombre') || 'Preparación';
    if (!src) return;
    $('#prep_lightbox_img').attr('src', src).attr('alt', nombre);
    $('#prep_lightbox_title').text(nombre);
    $('#prep_lightbox_open').attr('href', src);
    $('#modalPrepLightbox').modal('show');
  });

  // Vista previa en modal de preparación (el input cubre la zona; no hace falta trigger click)
  $('#imagen').on('change', function () {
    if (this.files && this.files[0]) {
      setPrepDropzonePreview(URL.createObjectURL(this.files[0]), true);
      $('#prep_dropzone').addClass('has-preview');
    }
  });
  $('#prep_clear_img').on('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    resetPrepDropzone();
  });
  ['dragover', 'dragenter'].forEach(function (ev) {
    document.getElementById('prep_dropzone').addEventListener(ev, function (e) {
      e.preventDefault();
      e.stopPropagation();
      this.classList.add('is-drag');
    });
  });
  ['dragleave', 'dragend', 'drop'].forEach(function (ev) {
    document.getElementById('prep_dropzone').addEventListener(ev, function (e) {
      e.preventDefault();
      e.stopPropagation();
      this.classList.remove('is-drag');
      if (ev === 'drop' && e.dataTransfer && e.dataTransfer.files[0]) {
        try {
          const dt = new DataTransfer();
          dt.items.add(e.dataTransfer.files[0]);
          document.getElementById('imagen').files = dt.files;
        } catch (err) {}
        setPrepDropzonePreview(URL.createObjectURL(e.dataTransfer.files[0]), true);
        $('#prep_dropzone').addClass('has-preview');
      }
    });
  });

  // Vista previa en modal rápido de imagen
  $('#img_archivo').on('change', function () {
    if (this.files && this.files[0]) {
      setImgModalPreview(this.files[0]);
      $('#img_dropzone').addClass('has-preview');
    }
  });
  ['dragover', 'dragenter'].forEach(function (ev) {
    document.getElementById('img_dropzone').addEventListener(ev, function (e) {
      e.preventDefault();
      e.stopPropagation();
      this.classList.add('is-drag');
    });
  });
  ['dragleave', 'dragend', 'drop'].forEach(function (ev) {
    document.getElementById('img_dropzone').addEventListener(ev, function (e) {
      e.preventDefault();
      e.stopPropagation();
      this.classList.remove('is-drag');
      if (ev === 'drop' && e.dataTransfer && e.dataTransfer.files[0]) {
        try {
          const dt = new DataTransfer();
          dt.items.add(e.dataTransfer.files[0]);
          document.getElementById('img_archivo').files = dt.files;
        } catch (err) {}
        setImgModalPreview(e.dataTransfer.files[0]);
        $('#img_dropzone').addClass('has-preview');
      }
    });
  });
  $('#btn_guardar_img').on('click', function () {
    const id = $('#img_prep_id').val();
    const fileInput = document.getElementById('img_archivo');
    if (!id || !fileInput.files || !fileInput.files[0]) {
      Swal.fire('Imagen', 'Seleccione una imagen.', 'warning');
      return;
    }
    const fd = new FormData();
    fd.append('_token', CSRF_TOKEN);
    fd.append('id', id);
    fd.append('imagen', fileInput.files[0]);

    const $btn = $('#btn_guardar_img');
    $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Subiendo…');

    $.ajax({
      url: URL_SUBIR_IMAGEN,
      type: 'POST',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res?.response) {
          $('#modalPrepImagen').modal('hide');
          if (typeof cargarPreparaciones === 'function') cargarPreparaciones();
          Swal.fire({ icon: 'success', title: 'Imagen cargada', timer: 1600, showConfirmButton: false, toast: true, position: 'top-end' });
        } else {
          Swal.fire('Error', res?.message || 'No se pudo subir.', 'error');
        }
      },
      error: function (xhr) {
        let msg = 'No se pudo subir la imagen.';
        if (xhr.responseJSON?.message) msg = xhr.responseJSON.message;
        else if (xhr.responseJSON?.errors) {
          const errs = xhr.responseJSON.errors;
          msg = Object.keys(errs).map(k => errs[k].join(' ')).join(' ');
        }
        Swal.fire('Error', msg, 'error');
      },
      complete: function () {
        $btn.prop('disabled', false).html('<i class="bx bx-upload"></i> Subir imagen');
      }
    });
  });

  $(document).on('input', '#precio_venta_publico, #rinde', function(){
    renderIngredientes();
    actualizarValorPorcion();
  });

  let prepBuscarTimer = null;
  $(document).on('input', '#prep_buscar', function () {
    clearTimeout(prepBuscarTimer);
    prepBuscarTimer = setTimeout(function () {
      const q = String($('#prep_buscar').val() || '').trim();
      if (q) {
        cargarPreparaciones({ buscar: q });
      } else if (categoriaSeleccionada) {
        $('#categoria-tabs .nav-link').removeClass('active');
        $(`#categoria-tabs .nav-link[data-id="${categoriaSeleccionada}"]`).addClass('active');
        cargarPreparaciones({ soloCategoria: true });
      }
    }, 250);
  });

  $(document).on('click', '#prep_search_clear', function () {
    $('#prep_buscar').val('');
    if (categoriaSeleccionada) {
      $('#categoria-tabs .nav-link').removeClass('active');
      $(`#categoria-tabs .nav-link[data-id="${categoriaSeleccionada}"]`).addClass('active');
      cargarPreparaciones({ soloCategoria: true });
    }
  });
});

// ======= CATEGORÍAS/PREPARACIONES =======
function actualizarContadorPrep(n) {
  const txt = (n === 1) ? '1 preparación' : (n.toLocaleString('es-CL') + ' preparaciones');
  $('#prep_count').text(txt);
}

function setBannerBusqueda(activo, texto) {
  const $b = $('#prep_search_banner');
  if (activo) {
    $('#prep_search_banner_text').text(texto || 'Buscando en todas las categorías');
    $b.addClass('is-visible');
  } else {
    $b.removeClass('is-visible');
  }
}

function nombreCategoriaPorId(id) {
  const cat = (categorias || []).find(c => +c.id === +id);
  return cat ? cat.nombre : '';
}

function cargarCategorias() {
  $.get("{{ url('preparacion/categorias') }}", function(data) {
    categorias = data || [];
    let html = '';
    if (!categorias.length) {
      html = `<li class="nav-item"><span class="text-muted small">Sin categorías. Cree una para comenzar.</span></li>`;
      $('#categoria-tabs').html(html);
      $('#btn-nueva-preparacion').prop('disabled', true);
      $('#contenedor-preparaciones').html(`
        <div class="prep-empty">
          <i class="bx bx-folder-plus"></i>
          Aún no hay categorías. ${ES_USUARIO_INVENTARIO ? 'Consulte con un administrador.' : 'Pulse <strong>Nueva categoría</strong> para crear la primera.'}
        </div>`);
      actualizarContadorPrep(0);
      return;
    }
    categorias.forEach((cat, index) => {
      html += `<li class="nav-item">
                 <a class="nav-link ${index === 0 ? 'active' : ''}" href="#" data-id="${cat.id}"
                    onclick="seleccionarCategoria(${cat.id}, this); return false;">${cat.nombre}</a>
               </li>`;
    });
    $('#categoria-tabs').html(html);

    if (categorias.length > 0) {
      const primerLink = $('#categoria-tabs .nav-link').first();
      seleccionarCategoria(categorias[0].id, primerLink);
    }
  });
}

function seleccionarCategoria(id, el) {
  categoriaSeleccionada = id;
  $('#btn-nueva-preparacion').prop('disabled', false);
  $('#categoria-tabs .nav-link').removeClass('active');
  $(el).addClass('active');
  $('#prep_buscar').val('');
  setBannerBusqueda(false);
  cargarPreparaciones({ soloCategoria: true });
}

function cargarPreparaciones(opts) {
  opts = opts || {};
  // soloCategoria: forzar listado de la categoría (ignora texto del buscador)
  if (!opts.soloCategoria && !opts.buscar) {
    const qBox = String($('#prep_buscar').val() || '').trim();
    if (qBox) opts = { buscar: qBox };
  }
  const esBusqueda = !!(opts.buscar && String(opts.buscar).trim());
  const payload = esBusqueda
    ? { buscar: String(opts.buscar).trim() }
    : { categoria_id: categoriaSeleccionada };

  if (esBusqueda) {
    $('#categoria-tabs .nav-link').removeClass('active');
    setBannerBusqueda(true, 'Resultados en todas las categorías para “' + String(opts.buscar).trim() + '”');
  } else {
    setBannerBusqueda(false);
  }

  $.post("{{ url('preparacion/listado') }}", payload, function(data) {
    preparaciones = data || [];

    if (!preparaciones.length) {
      $('#contenedor-preparaciones').html(`
        <div class="prep-empty">
          <i class="bx ${esBusqueda ? 'bx-search-alt' : 'bx-dish'}"></i>
          ${esBusqueda
            ? 'No hay preparaciones con ese nombre.'
            : ('Esta categoría no tiene preparaciones.' + (ES_USUARIO_INVENTARIO ? '' : ' Pulse <strong>Nueva preparación</strong> para agregar una.'))}
        </div>`);
      actualizarContadorPrep(0);
      return;
    }

    let html = `<div class="row g-3">`;

    preparaciones.forEach((prep) => {
      const precioProducto = parseCLLike(prep.precio_venta_publico);
      const rindePrep      = parseCLLike(prep.rinde);

      const valorPorcion = (prep.valor_porcion != null)
        ? parseInt(prep.valor_porcion, 10)
        : (rindePrep > 0 ? Math.round(precioProducto / rindePrep) : 0);
      const inventariable = prep.inventariable !== undefined && prep.inventariable !== null
        ? !!(Number(prep.inventariable) || prep.inventariable === true)
        : true;
      const inventariableBadge = inventariable
        ? '<span class="badge bg-label-success">Inventariable</span>'
        : '<span class="badge bg-label-secondary">No inventariable</span>';

      const baseSinMerma = MERMA_FACTOR > 0 ? (precioProducto / MERMA_FACTOR) : precioProducto;
      const totalMerma   = baseSinMerma * (MERMA_FACTOR - 1);
      const totalMermaTexto = totalMerma.toLocaleString('es-CL', {
        minimumFractionDigits: 1,
        maximumFractionDigits: 1
      });

      const bloqueFinanzas = ES_USUARIO_INVENTARIO ? '' : `
        <div class="prep-metrics">
          <div class="prep-metric">
            <span class="lbl">Valor producto</span>
            <p class="val">${toCLP(precioProducto)}</p>
          </div>
          <div class="prep-metric">
            <span class="lbl">Rinde</span>
            <p class="val">${rindePrep || 0}</p>
          </div>
          <div class="prep-metric">
            <span class="lbl">Valor porción</span>
            <p class="val">${toCLP(valorPorcion)}</p>
          </div>
          <div class="prep-metric">
            <span class="lbl">Merma ${MERMA_PORCENTAJE.toFixed(1).replace('.', ',')}%</span>
            <p class="val">$${totalMermaTexto}</p>
          </div>
        </div>`;

      const toggleBtn = `
        <button class="btn btn-outline-secondary btn-sm" onclick="toggleDetalle(${prep.id}, this)" title="Ver ingredientes">
          <i class="bx bx-chevron-down"></i>
        </button>`;

      const editarBtn = `
        <button class="btn btn-warning btn-sm" onclick="editarPreparacion(${prep.id})" title="Editar">
          <i class="bx bx-edit"></i>
        </button>`;

      const eliminarBtn = ES_USUARIO_INVENTARIO ? '' : `
        <button class="btn btn-danger btn-sm" onclick="eliminarPreparacion(${prep.id})" title="Eliminar">
          <i class="bx bx-trash"></i>
        </button>`;

      const botonImprimir = `
        <button class="btn btn-info btn-sm" onclick="imprimirPreparacion(${prep.id})" title="Imprimir">
          <i class="bx bx-printer"></i>
        </button>`;

      const botonMoverCategoria = `
        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="moverPreparacionCategoria(${prep.id})" title="Cambiar categoría">
          <i class="bx bx-folder-open"></i>
        </button>`;

      const botonHistorial = ES_ADMIN ? `
        <button class="btn btn-outline-secondary btn-sm" onclick="verHistorial(${prep.id})" title="Historial">
          <i class="bx bx-time"></i>
        </button>` : '';

      const nombreAttr = String(prep.nombre || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;');

      const imagenHtml = prep.imagen
        ? `<div class="prep-media">
             <a href="${PREP_IMG_BASE}${prep.imagen}" class="btn-ver-img-prep"
                data-src="${PREP_IMG_BASE}${prep.imagen}"
                data-nombre="${nombreAttr}"
                title="Ampliar imagen">
               <img src="${PREP_IMG_BASE}${prep.imagen}"
                    alt="Imagen de ${escapeHtml(prep.nombre)}"
                    loading="lazy">
               <span class="prep-media-zoom"><i class="bx bx-zoom-in"></i></span>
             </a>
           </div>`
        : `<div class="prep-media">
             <button type="button" class="prep-media-empty btn-cargar-img" data-id="${prep.id}" data-nombre="${nombreAttr}" title="Cargar imagen">
               <i class="bx bx-image-add"></i>
               <span>Sin foto</span>
             </button>
           </div>`;

      const catNombre = nombreCategoriaPorId(prep.categoria_id);
      const catBadge = esBusqueda && catNombre
        ? `<span class="badge bg-label-primary">${String(catNombre).replace(/&/g,'&amp;').replace(/</g,'&lt;')}</span>`
        : '';

      html += `
        <div class="col-12 prep-card-wrap" data-nombre="${nombreAttr}" data-id="${prep.id}">
          <div class="prep-card">
            <div class="prep-card-main">
              ${imagenHtml}
              <div class="prep-card-body">
                <div>
                  <h5 class="prep-title">${prep.nombre}</h5>
                  <div class="prep-meta">
                    <span class="badge bg-label-dark">ID ${prep.id}</span>
                    ${catBadge}
                    ${inventariableBadge}
                  </div>
                </div>
                ${bloqueFinanzas}
                <div class="prep-card-actions">
                  ${toggleBtn}
                  ${botonImprimir}
                  ${botonMoverCategoria}
                  ${editarBtn}
                  ${eliminarBtn}
                  ${botonHistorial}
                </div>
              </div>
            </div>
            <div class="prep-card-detail d-none border-top pt-3" id="detalle-${prep.id}">
              <div class="text-muted text-center small">Cargando ingredientes...</div>
            </div>
          </div>
        </div>`;
    });

    html += `</div>`;
    $('#contenedor-preparaciones').html(html);
    actualizarContadorPrep(preparaciones.length);
  });
}

function toggleDetalle(id, el) {
  const row = $(`#detalle-${id}`);
  const isVisible = !row.hasClass('d-none');

  if (isVisible) {
    row.addClass('d-none');
    $(el).find('i').removeClass('bx-chevron-up').addClass('bx-chevron-down');
    return;
  }

  row.removeClass('d-none');
  $(el).find('i').removeClass('bx-chevron-down').addClass('bx-chevron-up');

  if (!row.data('cargado')) {
    $.post("{{ url('preparacion/detalle') }}", { id }, function(response) {
      const detalles = response.detalles || [];
      if (!detalles.length) {
        row.html('<div class="prep-empty py-3"><i class="bx bx-list-ul"></i>Sin ingredientes cargados.</div>');
        row.data('cargado', true);
        return;
      }
      let html = `<div class="d-flex justify-content-between align-items-center mb-2">
                    <strong class="small text-uppercase text-muted">Ingredientes</strong>
                    <span class="badge bg-label-primary">${detalles.length}</span>
                  </div>
                  <div class="prep-ing-grid">`;
      detalles.forEach(item => {
        const esPrep = (item.tipo_insumo || 'producto') === 'preparacion';
        const insumo = esPrep ? item.preparacion_insumo : item.producto;
        const valorUnit = esPrep ? (parseFloat(insumo?.valor_porcion) || 0) : (parseFloat(insumo?.valor) || 0);
        const nombre = insumo?.nombre || (esPrep ? '[PREP]' : '') || 'N/A';
        const unidad = esPrep ? 'PORCIÓN' : (insumo?.unidad_medida || '');
        const costo = valorUnit * (parseFloat(item.cantidad) || 0);
        html += `
          <div class="prep-ing-item">
            <div class="name">${esPrep ? '<span class="badge bg-label-info me-1">Prep</span>' : ''}${nombre}</div>
            <div class="row-line"><span>Unidad</span><strong>${unidad || '—'}</strong></div>
            <div class="row-line"><span>Valor unitario</span><strong>${toCLP(valorUnit)}</strong></div>
            <div class="row-line"><span>Cantidad</span><strong>${fx(item.cantidad,1)}</strong></div>
            <div class="row-line"><span>Costo insumo</span><strong>${toCLP(costo)}</strong></div>
          </div>`;
      });
      html += `</div>`;
      row.html(html);
      row.data('cargado', true);
    });
  }
}

// ======= HISTORIAL (SweetAlert, versión amigable) =======

// pequeño helper para evitar problemas de HTML
function escapeHtml(str){
  if (str === null || str === undefined) return '';
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

function moverPreparacionCategoria(prepId) {
  if (!categorias.length) {
    return Swal.fire('Atención', 'No hay categorías disponibles.', 'warning');
  }
  const prep = preparaciones.find(p => +p.id === +prepId);
  const catActual = prep?.categoria_id ?? null;
  const nombrePrep = prep?.nombre ?? ('ID ' + prepId);

  const optionsHtml = categorias.map(cat => {
    const sel = catActual !== null && +cat.id === +catActual ? ' selected' : '';
    return `<option value="${cat.id}"${sel}>${escapeHtml(cat.nombre)}</option>`;
  }).join('');

  Swal.fire({
    title: 'Cambiar categoría',
    html: `
      <p class="text-start small text-muted mb-2">${escapeHtml(nombrePrep)}</p>
      <label for="swal-categoria-destino" class="form-label text-start d-block small mb-1">Asignar a la categoría</label>
      <select id="swal-categoria-destino" class="form-select">${optionsHtml}</select>
    `,
    showCancelButton: true,
    confirmButtonText: 'Mover aquí',
    cancelButtonText: 'Cancelar',
    focusConfirm: false,
    preConfirm: () => {
      const el = document.getElementById('swal-categoria-destino');
      const catId = parseInt(el.value, 10);
      if (catActual !== null && !isNaN(catId) && catId === +catActual) {
        Swal.showValidationMessage('Elija otra categoría; la preparación ya está en esta.');
        return false;
      }
      return new Promise(function (resolve, reject) {
        $.post("{{ url('preparacion/cambiar-categoria') }}", {
          preparacion_id: prepId,
          categoria_id: catId
        })
          .done(function (res) {
            if (res && res.response) resolve({ categoria_id: catId });
            else {
              Swal.showValidationMessage((res && res.message) || 'No se pudo actualizar.');
              reject();
            }
          })
          .fail(function (xhr) {
            var msg = (xhr.responseJSON && xhr.responseJSON.message) || '';
            if (!msg && xhr.responseJSON && xhr.responseJSON.errors) {
              msg = Object.values(xhr.responseJSON.errors).flat().join(' ');
            }
            Swal.showValidationMessage(msg || 'Error al guardar.');
            reject();
          });
      });
    }
  }).then(result => {
    if (!result.isConfirmed || !result.value) return;
    const nuevaCat = result.value.categoria_id;
    const idx = categorias.findIndex(c => +c.id === +nuevaCat);
    if (idx >= 0 && +nuevaCat !== +categoriaSeleccionada) {
      const link = $('#categoria-tabs .nav-link').get(idx);
      if (link) seleccionarCategoria(nuevaCat, link);
    } else {
      cargarPreparaciones();
    }
    Swal.fire({ icon: 'success', title: 'Listo', text: 'Categoría actualizada.', timer: 2000, showConfirmButton: false });
  });
}

function verHistorial(id){
  Swal.fire({
    title: 'Cargando historial...',
    allowOutsideClick: false,
    didOpen: () => Swal.showLoading()
  });

  $.get(`${URL_HISTORIAL_BASE}${id}/historial`, function(res){
    Swal.close();

    if (!res || !res.success) {
      return Swal.fire('Historial', 'No fue posible obtener el historial.', 'error');
    }

    const registros = res.data || [];

    if (!registros.length) {
      return Swal.fire(
        'Historial',
        `La preparación ID <b>${id}</b> no tiene modificaciones registradas.`,
        'info'
      );
    }

    let html = `<div class="text-start" style="max-height:60vh;overflow-y:auto;">`;

    registros.forEach((h, idx) => {
      const numero   = registros.length - idx; // último cambio arriba
      const usuario  = h.usuario || ('Usuario ID ' + (h.user_id ?? ''));
      const fecha    = h.fecha || '';
      const campo    = h.campo || '';
      const antesRaw = h.valor_anterior ?? '';
      const despRaw  = h.valor_nuevo ?? '';

      html += `
        <div class="border rounded-3 p-3 mb-3 bg-light">
          <div class="d-flex justify-content-between align-items-center small text-muted mb-2">
            <span><strong>#${numero}</strong> · ${fecha}</span>
            <span><i class="bx bx-user"></i> ${escapeHtml(usuario)}</span>
          </div>
          <div class="fw-semibold text-uppercase mb-2">${escapeHtml(campo)}</div>
      `;

      if (campo === 'detalles') {
        let antesArr = [];
        let despArr  = [];
        try { antesArr = JSON.parse(antesRaw || '[]') || []; } catch(e){}
        try { despArr  = JSON.parse(despRaw  || '[]') || []; } catch(e){}

        html += `
          <div class="small text-muted mb-2">
            Ingredientes: <strong>${antesArr.length}</strong> → <strong>${despArr.length}</strong>
          </div>
          <div class="row g-2">
            <div class="col-md-6">
              <small class="text-muted">Antes</small>
              <div class="border rounded bg-white p-2">
                <table class="table table-sm table-bordered mb-0">
                  <thead>
                    <tr>
                      <th class="small">Producto ID</th>
                      <th class="small text-end">Cantidad</th>
                      <th class="small text-end">Merma</th>
                    </tr>
                  </thead>
                  <tbody>
        `;

        if (!antesArr.length) {
          html += `<tr><td colspan="3" class="small text-center text-muted">Sin ingredientes</td></tr>`;
        } else {
          antesArr.forEach(row => {
            html += `
              <tr>
                <td class="small">#${escapeHtml(row.producto_id)}</td>
                <td class="small text-end">${escapeHtml(row.cantidad)}</td>
                <td class="small text-end">${row.merma ?? ''}</td>
              </tr>
            `;
          });
        }

        html += `
                  </tbody>
                </table>
              </div>
            </div>
            <div class="col-md-6">
              <small class="text-muted">Después</small>
              <div class="border rounded bg-white p-2">
                <table class="table table-sm table-bordered mb-0">
                  <thead>
                    <tr>
                      <th class="small">Producto ID</th>
                      <th class="small text-end">Cantidad</th>
                      <th class="small text-end">Merma</th>
                    </tr>
                  </thead>
                  <tbody>
        `;

        if (!despArr.length) {
          html += `<tr><td colspan="3" class="small text-center text-muted">Sin ingredientes</td></tr>`;
        } else {
          despArr.forEach(row => {
            html += `
              <tr>
                <td class="small">#${escapeHtml(row.producto_id)}</td>
                <td class="small text-end">${escapeHtml(row.cantidad)}</td>
                <td class="small text-end">${row.merma ?? ''}</td>
              </tr>
            `;
          });
        }

        html += `
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        `;
      } else {
        // Campos simples: rinde, precio_venta_publico, nombre, etc.
        html += `
          <div class="row g-2">
            <div class="col-sm-6">
              <small class="text-muted">Antes</small>
              <input type="text" readonly
                     class="form-control form-control-sm bg-white"
                     value="${escapeHtml(antesRaw)}">
            </div>
            <div class="col-sm-6">
              <small class="text-muted">Después</small>
              <input type="text" readonly
                     class="form-control form-control-sm bg-white"
                     value="${escapeHtml(despRaw)}">
            </div>
          </div>
        `;
      }

      html += `</div>`; // cierre card
    });

    html += `</div>`;

    Swal.fire({
      title: `Historial - Preparación ID ${id}`,
      html: html,
      width: '70rem',
      confirmButtonText: 'Cerrar'
    });

  }).fail(function(){
    Swal.close();
    Swal.fire('Historial', 'Ocurrió un error al consultar el historial.', 'error');
  });
}

// ======= PRODUCTOS/INGREDIENTES =======
function cargarProductos(callback = null) {
  $.get("{{ url('preparacion/productos') }}", function(data) {
    productos = data || [];

    // Valor único tipo_id para no confundir producto y preparación con el mismo id numérico
    let opciones = '<option value="">[Seleccione]</option>';
    productos.forEach(p => {
      const tipo = p.tipo_insumo || 'producto';
      const valorOption = `${tipo}_${p.id}`;
      opciones += `
        <option value="${valorOption}"
                data-unidad="${p.unidad_medida || ''}"
                data-valor="${p.valor || 0}"
                data-tipo="${tipo}">
          ${p.nombre}
        </option>`;
    });

    $('#producto_id').html(opciones);
    initSelect2Producto();

    if (typeof callback === 'function') callback();
  });
}

function agregarIngrediente(event){
  event.preventDefault();
  const valorSelect = $('#producto_id').val();
  const cantidad = parseCLLike($('#cantidad').val());

  if (!valorSelect)
    return Swal.fire('Atención','Debe seleccionar un producto o preparación.','warning');
  if (cantidad <= 0)
    return Swal.fire('Atención','La cantidad debe ser mayor que 0.','warning');

  // Valor viene como "producto_123" o "preparacion_62" para no confundir ids iguales
  const partes = String(valorSelect).split('_');
  const tipo = (partes[0] === 'preparacion') ? 'preparacion' : 'producto';
  const idInsumo = parseInt(partes[1], 10);
  if (isNaN(idInsumo))
    return Swal.fire('Atención','Selección no válida.','warning');

  listadoIngredientes.push({
    tipo_insumo: tipo,
    producto_id: idInsumo,
    cantidad: cantidad
  });
  recalcularPrecioDesdeIngredientes();

  $('#producto_id').val('').trigger('change');
  $('#cantidad').val('0');
  renderIngredientes();
}

// Valor Porción = Valor Producto / Rinde
function actualizarValorPorcion() {
  const p = parseCLLike($('#precio_venta_publico').val());
  const r = parseCLLike($('#rinde').val());
  const valorPorcion = (r > 0) ? (p / r) : 0;
  $('#valor_porcion').val(Math.round(valorPorcion));
}

// Render tabla ingredientes del modal
function renderIngredientes(){
  const valorProducto = parseCLLike($('#precio_venta_publico').val());
  const rinde         = parseCLLike($('#rinde').val());

  let html = '';
  let totalMerma = 0;
  listadoIngredientes.forEach((item, index) => {
    const tipo = item.tipo_insumo || 'producto';
    const p = productos.find(x => (x.tipo_insumo || 'producto') === tipo && parseInt(x.id) === parseInt(item.producto_id));
    if (!p){
      html += `<tr class="table-warning">
        <td colspan="8" class="text-danger">
          Insumo no encontrado (${tipo} ID: ${item.producto_id}). Fue eliminado del catálogo; quítelo y vuelva a agregar el insumo correcto, luego guarde.
        </td>
        <td class="text-center">
          <button type="button" class="btn btn-sm btn-danger" onclick="eliminarIngrediente(${index})" title="Quitar insumo no encontrado">
            <i class="bx bx-x"></i>
          </button>
        </td>
      </tr>`;
      return;
    }

    const valorUnit        = parseCLLike(p.valor);
    const cantidadBase     = parseCLLike(item.cantidad);
    const costoInsumo      = valorUnit * cantidadBase;
    const mermaValor       = costoInsumo * (MERMA_PORCENTAJE / 100);
    totalMerma            += mermaValor;
    const cantidadAjustada = rinde > 0 ? (cantidadBase / rinde) : 0;
    const valorUnidadAj    = valorUnit * cantidadAjustada * MERMA_FACTOR;

    html += `<tr>
      <td>${p.nombre}</td>
      <td>${p.unidad_medida || ''}</td>
      <td class="text-end">${toCLP(valorUnit)}</td>
      <td class="text-end">${fx(cantidadBase, 3)}</td>
      <td class="text-end">${toCLP(costoInsumo)}</td>
      <td class="text-end">${fx(mermaValor, 1).replace('.', ',')}</td>
      <td class="text-end">${fx(cantidadAjustada, 3)}</td>
      <td class="text-end">${toCLP(valorUnidadAj)}</td>
      <td class="text-center">
        <button class="btn btn-sm btn-outline-danger" onclick="eliminarIngrediente(${index})" title="Eliminar">
          <i class="bx bx-trash"></i>
        </button>
      </td>
    </tr>`;
  });

  // Fila de totales (merma con un decimal)
  html += `
    <tr class="table-light fw-bold">
      <td colspan="5" class="text-end">Total Merma ({{ config('configuracion.merma_preparacion', 5) }}%)</td>
      <td class="text-end">${fx(totalMerma, 1).replace('.', ',')}</td>
      <td colspan="3"></td>
    </tr>`;

  $('#tabla-ingredientes').html(html);
  recalcularPrecioDesdeIngredientes();
}

function eliminarIngrediente(index){
  listadoIngredientes.splice(index, 1);
  renderIngredientes();
  recalcularPrecioDesdeIngredientes();
}

// ======= CRUD BÁSICO =======
function nuevaCategoria() {
  Swal.fire({
    title: 'Nueva Categoría',
    input: 'text',
    inputPlaceholder: 'Nombre categoría',
    showCancelButton: true,
    confirmButtonText: 'Guardar',
    preConfirm: (nombre) => {
      return $.post("{{ url('preparacion/guardar-categoria') }}", { nombre })
        .then(response => {
          if (!response?.response) throw new Error('Error al guardar');
          return response;
        });
    }
  }).then(result => {
    if (result.isConfirmed) cargarCategorias();
  });
}

function nuevaPreparacion() {
  const f = $('#form-preparacion')[0];
  f.reset();
  $('#accion_form').val('crear');
  $('#id_form').val('');
  $('#categoria_id').val(categoriaSeleccionada);
  $('#inventariable_chk').prop('checked', true);
  $('#inventariable_input').val('1');
  $('#modalPrepTitulo').text('Nueva preparación');
  $('#modalPrepSub').text('Complete los datos y agregue los ingredientes');
  resetPrepDropzone();
  $('#modalPreparacion').modal('show');
  cargarProductos();
  listadoIngredientes = [];
  renderIngredientes();
  actualizarValorPorcion();
}

function editarPreparacion(id) {
  $.post("{{ url('preparacion/detalle') }}", { id }, function(response) {
    const prep = response.preparacion;
    $('#accion_form').val('editar');
    $('#id_form').val(prep.id);
    $('#categoria_id').val(prep.categoria_id);
    $('#nombre').val(prep.nombre);
    $('#precio_venta_publico').val(prep.precio_venta_publico);
    $('#rinde').val(prep.rinde ?? 0);
    $('#valor_porcion').val(0);
    const inv = prep.inventariable !== undefined && prep.inventariable !== null
      ? !!(Number(prep.inventariable) || prep.inventariable === true)
      : true;
    $('#inventariable_chk').prop('checked', inv);
    $('#inventariable_input').val(inv ? '1' : '0');
    $('#modalPrepTitulo').text('Editar preparación');
    $('#modalPrepSub').text(prep.nombre || 'Actualice los datos e ingredientes');

    if (prep.imagen) {
      setPrepDropzonePreview(PREP_IMG_BASE + prep.imagen, false);
    } else {
      resetPrepDropzone();
    }

    listadoIngredientes = (response.detalles || []).map(i => ({
      tipo_insumo: i.tipo_insumo || 'producto',
      producto_id: i.producto_id ?? i.preparacion_insumo_id,
      cantidad: toNDecimals(i.cantidad, 3)
    }));
    cargarProductos(() => {
      renderIngredientes();
      actualizarValorPorcion();
      recalcularPrecioDesdeIngredientes();
      $('#modalPreparacion').modal('show');
    });
  });
}

function eliminarPreparacion(id) {
  Swal.fire({
    title: '¿Eliminar preparación?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Sí, eliminar'
  }).then(result => {
    if (result.isConfirmed) {
      $.post("{{ url('preparacion/eliminar') }}", { id }, function(res) {
        if (res === true) {
          cargarPreparaciones();
          Swal.fire('Eliminada', 'Preparación eliminada.', 'success');
        } else if (res && res.response === false && res.message) {
          Swal.fire('No se puede eliminar', res.message, 'warning');
        } else {
          Swal.fire('Error', 'No se pudo eliminar.', 'error');
        }
      }).fail(function() {
        Swal.fire('Error', 'No se pudo eliminar.', 'error');
      });
    }
  });
}

function imprimirPreparacion(id) {
  window.open(`{{ url('preparacion/imprimir') }}/${id}`, '_blank');
}

// ======= IMAGEN: dropzone modal preparación + modal rápido =======
function revokePrepPreviewUrl() {
  if (prepPreviewObjectUrl) {
    URL.revokeObjectURL(prepPreviewObjectUrl);
    prepPreviewObjectUrl = null;
  }
}
function revokeImgModalUrl() {
  if (imgModalObjectUrl) {
    URL.revokeObjectURL(imgModalObjectUrl);
    imgModalObjectUrl = null;
  }
}
function resetPrepDropzone() {
  revokePrepPreviewUrl();
  const input = document.getElementById('imagen');
  if (input) input.value = '';
  $('#prep_drop_preview').addClass('d-none');
  $('#prep_drop_empty').removeClass('d-none');
  $('#prep_preview_img').attr('src', '');
  $('#prep_dropzone').removeClass('has-preview');
}
function setPrepDropzonePreview(src, isObjectUrl) {
  if (isObjectUrl) {
    revokePrepPreviewUrl();
    prepPreviewObjectUrl = src;
  }
  $('#prep_preview_img').attr('src', src);
  $('#prep_drop_empty').addClass('d-none');
  $('#prep_drop_preview').removeClass('d-none');
  $('#prep_dropzone').addClass('has-preview');
}
function resetImgModalDropzone() {
  revokeImgModalUrl();
  const input = document.getElementById('img_archivo');
  if (input) input.value = '';
  $('#img_drop_preview').addClass('d-none');
  $('#img_drop_empty').removeClass('d-none');
  $('#img_preview_el').attr('src', '');
  $('#btn_guardar_img').prop('disabled', true);
  $('#img_dropzone').removeClass('has-preview');
}
function setImgModalPreview(file) {
  revokeImgModalUrl();
  imgModalObjectUrl = URL.createObjectURL(file);
  $('#img_preview_el').attr('src', imgModalObjectUrl);
  $('#img_drop_empty').addClass('d-none');
  $('#img_drop_preview').removeClass('d-none');
  $('#btn_guardar_img').prop('disabled', false);
  $('#img_dropzone').addClass('has-preview');
}
function abrirModalImagen(id, nombre) {
  $('#img_prep_id').val(id);
  $('#modalImgNombre').text(nombre || ('Preparación #' + id));
  resetImgModalDropzone();
  $('#modalPrepImagen').modal('show');
}
function bindDropzone(zoneSel, inputSel, onFile) {
  const $zone = $(zoneSel);
  const $input = $(inputSel);
  $zone.on('click', function (e) {
    if ($(e.target).closest('button').length) return;
    $input.trigger('click');
  });
  $zone.on('keydown', function (e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      $input.trigger('click');
    }
  });
  $zone.on('dragover dragenter', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $zone.addClass('is-drag');
  });
  $zone.on('dragleave dragend drop', function (e) {
    e.preventDefault();
    e.stopPropagation();
    $zone.removeClass('is-drag');
  });
  $zone.on('drop', function (e) {
    const files = e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files;
    if (files && files[0]) onFile(files[0], true);
  });
  $input.on('change', function () {
    if (this.files && this.files[0]) onFile(this.files[0], false);
  });
}

// ======= GUARDAR =======
var _guardandoPreparacion = false;

function guardarPreparacion(){
  if (_guardandoPreparacion) return;

  const $btn = $('#btn_guardar_preparacion');
  const htmlOriginal = $btn.html();

  _guardandoPreparacion = true;
  $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1" role="status"></span> Guardando...');

  const fd = new FormData($('#form-preparacion')[0]);
  fd.append('detalles', JSON.stringify(listadoIngredientes));

  function liberarGuardado(){
    _guardandoPreparacion = false;
    $btn.prop('disabled', false).html(htmlOriginal);
  }

  $.ajax({
    url: "{{ url('preparacion/guardar') }}",
    type: 'POST',
    data: fd,
    processData: false,
    contentType: false,
    success: function(res){
      if (res?.response){
        $('#modalPreparacion').modal('hide');
        if (typeof cargarPreparaciones === 'function') cargarPreparaciones();
        Swal.fire('Guardado','Preparación guardada correctamente.','success');
      } else {
        Swal.fire('Error', res?.message || 'No se pudo guardar.','error');
      }
    },
    error: function(xhr){
      let msg = 'Ocurrió un problema al guardar.';
      if (xhr.responseJSON) {
        if (xhr.responseJSON.message) msg = xhr.responseJSON.message;
        else if (xhr.responseJSON.errors) {
          const errs = xhr.responseJSON.errors;
          msg = Object.keys(errs).map(k => errs[k].join(' ')).join(' ');
        }
      }
      Swal.fire('Error', msg, 'error');
    },
    complete: function(){
      liberarGuardado();
    }
  });
}
</script>
@endsection