{% extends "MasterOrdenadoresTaller/MenuTemplateMT.html.twig" %}

{% block body %}

{% include '/MenuPiezas.html.twig' %}

{% include 'ordenfabricacion/modal/nuevoPlano.html.twig' %}
{% include 'ordenfabricacion/modal/nuevoHorasTaller.html.twig' %}
{% include 'ordenfabricacion/modal/nuevoproductoTaller.html.twig' %}

<div class="content">

      <div class="row g-4">
        <div class="col-12 col-md-6 p-3">
          {% include 'ordenfabricacion/sections/NuevaPieza.html.twig' %}
        </div>
        <div class="col-12 col-md-6 p-3">
          {% include 'ordenfabricacion/sections/HorasTaller.html.twig' %}
          {% include 'ordenfabricacion/sections/Productos.html.twig' %}
        </div>
      </div>

      {% include 'ordenfabricacion/sections/toast.html.twig' %}

  <footer class="footer position-absolute">
    <div class="row g-0 justify-content-between align-items-center h-100">
      <div class="col-12 col-sm-auto text-center">
        <p class="mb-0 mt-2 mt-sm-0 text-body">{{ fsc.empresa.nombrecorto | raw }}<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span><br class="d-sm-none" />2024 &copy;<a class="mx-1" href="https://aress.es">Aress</a></p>
      </div>
      <div class="col-12 col-sm-auto text-center">
        <p class="mb-0 text-body-tertiary text-opacity-85">v1.17.0</p>
      </div>
    </div>
  </footer>
</div>



<div class="modal fade" id="searchBoxModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="true" data-phoenix-modal="data-phoenix-modal" style="--phoenix-backdrop-opacity: 1;">
  <div class="modal-dialog">
    <div class="modal-content mt-15 rounded-pill">
      <div class="modal-body p-0">
        <div class="search-box navbar-top-search-box" data-list='{"valueNames":["title"]}' style="width: auto;">
          <form class="position-relative" data-bs-toggle="search" data-bs-display="static">
            <input class="form-control search-input fuzzy-search rounded-pill form-control-lg" type="search" placeholder="Search..." aria-label="Search" />
            <span class="fas fa-search search-box-icon"></span>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}

<script>
  window.disableAutoFocus = true;
</script>

{{ parent() }}

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<style>
  .quill-editor {
    height: 150px;
    margin-bottom: 15px;
  }
  .quill-editor .ql-editor {
    min-height: 150px;
    font-size: 12px;
  }
</style>

<script>

  function toggleDropdown(button) {
      const dropdownMenu = button.nextElementSibling;
      dropdownMenu.classList.toggle('show');

      // Cerrar el menú cuando se hace clic fuera
      document.addEventListener('click', function(event) {
          if (!button.contains(event.target) && !dropdownMenu.contains(event.target)) {
              dropdownMenu.classList.remove('show');
            }
        });
    }


  const toolbarOptions = [
    [{ 'size': ['small', false, 'large', 'huge'] }],
    [{ 'align': [] }],
    ['bold', 'italic', 'underline'],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    ['clean']
  ];

  document.addEventListener('DOMContentLoaded', function () {
    const createQuill = (selector) => new Quill(selector, {
      theme: 'snow',
      modules: { toolbar: toolbarOptions },
      formats: ['size', 'align', 'bold', 'italic', 'underline', 'list']
    });

    const removeQuillFocus = quillInstance => {
      if (!quillInstance) {
        return;
      }
      if (typeof quillInstance.blur === 'function') {
        quillInstance.blur();
        return;
      }
      if (quillInstance.root && typeof quillInstance.root.blur === 'function') {
        quillInstance.root.blur();
      }
    };

    const quillDescripcion = createQuill('#editor-descripcion');
    const descripcionHtml = {{ fsc.solicitud.descripcion|json_encode|raw }} || '';
    quillDescripcion.clipboard.dangerouslyPasteHTML(0, descripcionHtml, 'silent');
    removeQuillFocus(quillDescripcion);
    setTimeout(() => removeQuillFocus(quillDescripcion), 50);
    setTimeout(() => removeQuillFocus(quillDescripcion), 250);

    const quillObservaciones = createQuill('#editor-observaciones');
    const observacionesHtml = {{ fsc.solicitud.observaciones|json_encode|raw }} || '';
    quillObservaciones.clipboard.dangerouslyPasteHTML(0, observacionesHtml, 'silent');
    removeQuillFocus(quillObservaciones);
    setTimeout(() => removeQuillFocus(quillObservaciones), 50);
    setTimeout(() => removeQuillFocus(quillObservaciones), 250);

    const formOrden = document.getElementById('guardarOrdenFabricacion');
    if (formOrden) {
      formOrden.addEventListener('submit', function() {
        document.getElementById('input-descripcion').value = quillDescripcion.root.innerHTML;
        document.getElementById('input-observaciones').value = quillObservaciones.root.innerHTML;
      });
    }
  });

</script>


{% endblock %}