{{-- Modal Preparación --}}
<div class="modal fade" id="modalPreparacion" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content prep-modal">
      <div class="modal-header prep-modal-head">
        <div class="d-flex align-items-center gap-3">
          <div class="prep-modal-icon">
            <i class="bx bx-dish"></i>
          </div>
          <div>
            <h5 class="modal-title mb-0" id="modalPrepTitulo">Nueva preparación</h5>
            <small class="text-muted" id="modalPrepSub">Complete los datos y agregue los ingredientes</small>
          </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body prep-modal-body">
        <form id="form-preparacion" enctype="multipart/form-data">
          @csrf
          <input type="hidden" name="accion_form" id="accion_form">
          <input type="hidden" name="id_form" id="id_form">
          <input type="hidden" name="categoria_id" id="categoria_id">

          <div class="prep-modal-layout">
            {{-- Columna imagen --}}
            <aside class="prep-modal-aside">
              <label class="prep-dropzone" id="prep_dropzone" title="Clic para elegir imagen">
                <input type="file" class="prep-file-hidden" name="imagen" id="imagen" accept="image/jpeg,image/png,image/gif,image/webp">
                <div class="prep-dropzone-empty" id="prep_drop_empty">
                  <div class="prep-dropzone-icon"><i class="bx bx-cloud-upload"></i></div>
                  <strong>Agregar imagen</strong>
                  <span>JPG, PNG, WEBP · máx. 10 MB</span>
                  <em>Clic o arrastre aquí</em>
                </div>
                <div class="prep-dropzone-preview d-none" id="prep_drop_preview">
                  <img src="" alt="Vista previa" id="prep_preview_img">
                  <div class="prep-dropzone-actions">
                    <span class="btn btn-sm btn-light mb-0">
                      <i class="bx bx-refresh"></i> Cambiar
                    </span>
                    <button type="button" class="btn btn-sm btn-outline-danger" id="prep_clear_img">
                      <i class="bx bx-x"></i>
                    </button>
                  </div>
                </div>
              </label>
              <div class="prep-aside-hint">
                <i class="bx bx-info-circle"></i>
                La imagen es opcional y se muestra en el listado.
              </div>
            </aside>

            {{-- Columna datos --}}
            <div class="prep-modal-main">
              <section class="prep-modal-block">
                <div class="prep-block-title">
                  <span class="prep-step">1</span>
                  <h6>Datos generales</h6>
                </div>
                <div class="row g-3">
                  <div class="col-12">
                    <label class="form-label" for="nombre">Nombre</label>
                    <input type="text" class="form-control form-control-lg" name="nombre" id="nombre" required placeholder="Ej: Jugo chirimoya preparado">
                  </div>
                  <div class="col-12">
                    <input type="hidden" name="inventariable" id="inventariable_input" value="1">
                    <label class="prep-switch">
                      <input type="checkbox" id="inventariable_chk" checked>
                      <span class="prep-switch-ui"></span>
                      <span class="prep-switch-text">
                        <strong>Inventariable</strong>
                        <small>Si está desactivado, no se incluirá al crear inventarios</small>
                      </span>
                    </label>
                  </div>
                </div>
              </section>

              <section class="prep-modal-block">
                <div class="prep-block-title">
                  <span class="prep-step">2</span>
                  <h6>Costos y rendimiento</h6>
                </div>
                <div class="row g-3">
                  <div class="col-md-4">
                    <label class="form-label" for="precio_venta_publico">Valor producto</label>
                    <div class="input-group">
                      <span class="input-group-text">$</span>
                      <input type="text" class="form-control" name="precio_venta_publico" id="precio_venta_publico" placeholder="0" readonly>
                    </div>
                    <div class="form-text">Se calcula desde los ingredientes</div>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label" for="rinde">Rinde</label>
                    <input type="number" class="form-control" name="rinde" id="rinde" value="0" min="0" step="1">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label" for="valor_porcion">Valor porción</label>
                    <div class="input-group">
                      <span class="input-group-text">$</span>
                      <input type="number" class="form-control" name="valor_porcion" id="valor_porcion" readonly>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </form>

        <section class="prep-modal-block mb-0">
          <div class="prep-block-title">
            <span class="prep-step">3</span>
            <h6>Ingredientes</h6>
          </div>

          <form id="form-ingrediente" class="prep-ing-form row align-items-end g-2" onsubmit="agregarIngrediente(event)">
            <div class="col-md-6">
              <label class="form-label" for="producto_id">Producto / preparación</label>
              <select class="form-select" id="producto_id"></select>
            </div>
            <div class="col-md-3">
              <label class="form-label" for="cantidad">Cantidad (base)</label>
              <input type="text" class="form-control" id="cantidad" value="0" onkeyup="normalizaCantidad(this)" onblur="formatea1Dec(this)"/>
            </div>
            <div class="col-md-3">
              <button type="submit" class="btn btn-primary w-100">
                <i class="bx bx-plus"></i> Agregar
              </button>
            </div>
          </form>

          <div class="table-responsive mt-3" id="tabla-ingredientes-wrap">
            <table class="table table-sm align-middle mb-0 prep-ing-table">
              <thead>
                <tr>
                  <th>Producto / preparación</th>
                  <th>Unidad</th>
                  <th class="text-end">Valor unitario</th>
                  <th class="text-end">Cantidad (base)</th>
                  <th class="text-end">Costo insumo</th>
                  <th class="text-end">
                    Merma ({{ config('configuracion.merma_preparacion', 5) }}%)
                  </th>
                  <th class="text-end">Cantidad</th>
                  <th class="text-end">Valor unidad</th>
                  <th class="text-center" style="width:48px"></th>
                </tr>
              </thead>
              <tbody id="tabla-ingredientes"></tbody>
            </table>
          </div>
        </section>
      </div>

      <div class="modal-footer prep-modal-foot">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary px-4" id="btn_guardar_preparacion" onclick="guardarPreparacion();">
          <i class="bx bx-save"></i> Guardar preparación
        </button>
      </div>
    </div>
  </div>
</div>

{{-- Modal rápido: solo imagen --}}
<div class="modal fade" id="modalPrepImagen" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content prep-modal">
      <div class="modal-header prep-modal-head">
        <div class="d-flex align-items-center gap-3">
          <div class="prep-modal-icon">
            <i class="bx bx-image-add"></i>
          </div>
          <div>
            <h5 class="modal-title mb-0">Cargar imagen</h5>
            <small class="text-muted" id="modalImgNombre">Preparación</small>
          </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="img_prep_id" value="">
        <label class="prep-dropzone prep-dropzone-lg" id="img_dropzone">
          <input type="file" class="prep-file-hidden" id="img_archivo" accept="image/jpeg,image/png,image/gif,image/webp">
          <div class="prep-dropzone-empty" id="img_drop_empty">
            <div class="prep-dropzone-icon"><i class="bx bx-cloud-upload"></i></div>
            <strong>Seleccione o arrastre una imagen</strong>
            <span>JPG, PNG, WEBP · máx. 10 MB</span>
          </div>
          <div class="prep-dropzone-preview d-none" id="img_drop_preview">
            <img src="" alt="Vista previa" id="img_preview_el">
            <div class="prep-dropzone-actions">
              <span class="btn btn-sm btn-light mb-0">
                <i class="bx bx-refresh"></i> Cambiar
              </span>
            </div>
          </div>
        </label>
      </div>
      <div class="modal-footer prep-modal-foot">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="btn_guardar_img" disabled>
          <i class="bx bx-upload"></i> Subir imagen
        </button>
      </div>
    </div>
  </div>
</div>

{{-- Visor de imagen responsive --}}
<div class="modal fade prep-lightbox" id="modalPrepLightbox" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="prep_lightbox_title">Imagen</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="" alt="" id="prep_lightbox_img" class="prep-lightbox-img">
      </div>
      <div class="modal-footer">
        <a href="#" id="prep_lightbox_open" class="btn btn-sm btn-outline-light" target="_blank" rel="noopener">
          <i class="bx bx-link-external"></i> Abrir original
        </a>
        <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>