{% include 'partials/header.html.twig' %}

<link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

<script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('assets/libs/tinymce/tinymce.min.js') }}"></script>


<div class="body-wrapper">
  <div class="container-fluid">

    <div class="card card-body py-3">
      <div class="row align-items-center">
        <div class="col-12">
          <div class="d-sm-flex align-items-center justify-space-between">
            <h4 class="mb-4 mb-sm-0 card-title">Devis {{devis.displayId}}</h4>
            <nav aria-label="breadcrumb" class="ms-auto">
              <ol class="breadcrumb">
                <li class="breadcrumb-item d-flex align-items-center">
                  <div id="btnActionContent"></div>
                </li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <div class="clearfix">
      <div class="row">
        <div class="col-md-9 d-flex align-items-stretch" id="devis-content">
        </div>
        <div class="col-md-3 d-flex align-items-stretch">
          <div class="card p15 w-100">
              <div class="clearfix p20">
                  <div class="row p-3" id="sidebar_devis">
                      
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<script>

document.addEventListener('DOMContentLoaded', () => {
    // Initialisation pour les éléments déjà dans le DOM
    $('.select2').select2();

    // Réinitialisation lors de l'ouverture de la modal
    $('#acceptModal').on('shown.bs.modal', function () {
        $(this).find('.select2').select2({
            dropdownParent: $('#acceptModal') // Fixe les problèmes de z-index
        });
    });
});

  const devisId = {{devis.id}};
  const devisIdtoken = "{{devis.idtoken}}";
  const modalAddContentRoute = "{{ path('devis_produit_get', { 'id': 'ID_PLACEHOLDER' }) }}";
  const ajaxContentRoute = "{{ path('api_devis_get', { 'id': 'ID_PLACEHOLDER' }) }}";
  const ajaxSidebarContentRoute = "{{ path('api_devis_get_sidebar', { 'id': 'ID_PLACEHOLDER' }) }}";
  
  const addRoute = "{{ path('devis_produit_add') }}";
  const getRoute = "{{ path('lignedevis_get_update', { 'id': 'ID_PLACEHOLDER' }) }}";
  const ligneDeleteRoute = "{{ path('lignedevis_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
  const updateLignePositionRoute = "{{ path('update_positions') }}";
  const modalGetRemiseContentRoute= "{{ path('devis_remise_get', { 'id': 'ID_PLACEHOLDER' }) }}";
  const remiseDeleteRoute= "{{ path('remise_devis_delete', { 'id': 'ID_PLACEHOLDER' }) }}";
  const produits = {
      {% for produit in produits %}
      "{{ produit.id }}": {
          description: "{{ produit.description | e('js') }}",
          prix: "{{ produit.prix | e('js') }}"
      },
      {% endfor %}
  };


    function handleColorTheme(e) {
        document.documentElement.setAttribute("data-color-theme", e);
    }

</script>


    </div>

    <style>
    .draggable-placeholder {
      height: 50px;
      background-color: #f0f0f0;
      border: 1px dashed #ccc;
    }
    .draggable {
      cursor: move;
    }
  </style>
  

  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
  <script>
    
  </script>

<script src="{{ asset('assets/js/global/fonctions.js') }}"></script>
<script src="{{ asset('assets/js/facture/devis.js') }}"></script>

{% include 'partials/modal/accept_devis.html.twig' %}  
{% include '@Commercial/devis/modal/send_devis.html.twig' %}  
{% include 'partials/modal/add_modal.html.twig' %}
{% include 'partials/modal/edit_modal.html.twig' %}  
{% include 'partials/modal/delete_modal.html.twig' %}   
{% include 'partials/footer.html.twig' %}