{% extends 'base.html.twig' %}
{% block menuTop %}
{{ include('contact/_menuTop.html.twig') }}
{% endblock %}
{% block menuMiddle %}
{{ include('contact/_menuMiddle.html.twig') }}
{% endblock %}

{% block title %}{{contact.nom | upper}} {{contact.prenom | capitalize}}{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href={{ asset('assets/css/style.css')  }}>
<link rel="stylesheet" href={{ asset('assets/css/contact/navTop.css')  }}>
<link rel="stylesheet" href={{ asset('assets/css/contact/navMiddle.css')  }}>
<link rel="stylesheet" href={{ asset('assets/css/contact/edit.css')  }}>
<link rel="stylesheet" href={{ asset('assets/css/fiche_detection_opportunite/style.css') }}>
{% endblock %}
{% block body %}

<div class="container mt-2">
  <div class="row">

    <div class="col-7 p-0 d-flex justify-content-between">
      <div class="d-flex ">
        {% if contact.id == 1  %}
        {% else %}
        <a href={{ path('app_contact_edit' , {'id' : contact.id - 1}) }} class="colorContact"
          style="margin-right: 10px;">
          <i class="fa-solid fa-angle-left"></i>
          {{ include('contact/edit/_addList.html.twig') }} 
        </a>
        {% endif %}
       
      
      </div>

      <div class="d-flex">
        {{ include('contact/edit/_editContactModal.html.twig') }}
        
        {{ include('contact/_delete_form.html.twig') }}
        {% if contact.id == max %}
        {% else %}
        <a href={{ path('app_contact_edit' , {'id' : contact.id + 1}) }} class="colorContact">
          <i class="fa-solid fa-angle-right"></i>
        </a>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="row">
    <div class="container">
      <div class="row">

        <div class="col-7 p-2 square">
          <div class="container ">
            <div class="row">
              {{ include('contact/edit/_entreprise.html.twig') }}
            </div>
            <div class="row my-2">
              {{ include('contact/edit/_nom.html.twig') }}
            </div>
            <div class="row mb-2">
              {{ include('contact/edit/_profession.html.twig') }}
            </div>
            <div class="row mb-2">
              {{ include('contact/edit/list/_telList.html.twig') }}
            </div>
            <div class="row mb-2">
              {{ include('contact/edit/list/_mailList.html.twig') }}
            </div>
            <div class="row mb-2">
              {{ include('contact/edit/list/_adresseList.html.twig') }}
            </div>
            <div class="row mb-2">
              {{ include('contact/edit/list/_ReseauxSociauxList.html.twig') }}
            </div>

          </div>
        </div>

        <div class="offset-1 col-4 square">
          <div class="container">

            <div class="row ">
              <div class="col">
                {% include 'contact/_toggle.html.twig' with {'contact': contact} %}
              </div>
            </div>

            <div class="row square">
              <div class="col">
                {% if contact.statut %}
                <p class="text-center colorContact">
                  Statut : {{ contact.statut.statut ? contact.statut.statut }}
                </p>
                {% endif %}

              </div>
            </div>

            <div class="row square my-2">
              <div class="col">
                <p class="text-center colorContact">
                  Stade : <br>
                  {{ contact.stade ? contact.stade.name }}
                </p>

              </div>
            </div>

            <div class="row ">
              <div class="col">
                <p class="colorContact">
                  Info +
                </p>
                <div class="square mb-2 p-2 colorContact ">
                  {{ include('contact/edit/list/_infosPlusList.html.twig') }}
                </div>

              </div>
            </div>

          </div> {# container #}

        </div>

      </div>
      <div class="row my-2">
        <div class="col-7 p-2 square">
          {{ include('contact/edit/list/_noteList.html.twig') }}
        </div>
        <div class="offset-1 p-2 col square">
          {{ include('contact/edit/list/_histList.html.twig') }}
        </div>
      </div>

      <div class="row">
        <div class="col square p-2">
          {{ include('contact/edit/list/_documentList.html.twig') }}
        </div>
      </div>

    </div>


    {{ include('contact/edit/_newAdresse.html.twig') }}
    {{ include('contact/edit/_newDocumentModal.html.twig') }}
    {{ include('contact/edit/_newEmail.html.twig') }}
    {{ include('contact/edit/_newHistModal.html.twig') }}
    {{ include('contact/edit/_newNoteModal.html.twig') }}
    {{ include('contact/edit/_newTel.html.twig') }}
    {{ include('contact/edit/_newInfosPlus.html.twig') }}
    {{ include('contact/edit/_newReseauxSociaux.html.twig') }}
    {{ include('contact/edit/_newStadeContact.html.twig') }}
    {{ include('contact/edit/_addProfession.html.twig') }}
    
    <script>
      document.getElementById('fiche_detection_opportunite_apporteurAffaire').addEventListener('input', function (e) {
        fetch('/apporteur_autocomplete?query=' + e.target.value)
          .then(response => response.json())
          .then(data => {
            // Mettre à jour une liste déroulante ou autre UI
          });
      });
    </script>
  

    {% endblock %}