@extends("layouts.layout_admin")
@section("contenu")
    <div class="row col-8 mx-auto">
        <div class="col-12 mt-3 mb-3"><h1>Gestion des sociétés de l'utilisateur "{{ $utilisateur->email }}"</h1></div>
        @if(session('success'))
            <div class="alert alert-success">{{session('success')}}</div>
        @endif
        <div class="col-12 col-lg-6"><a href="{{ url('/') }}/Admin525SWD/utilisateurs"><div class="col-12 btn btn-info mt-3 mb-3 w-100 btn-block">Retour à la gestion des utilisateurs</div></a></div>
        <div class="rox col-12" id="message_erreur"></div>
        <div class="row col-12 mt-3 mb-3">
          <div class="col-5">
            <h2 class="w-100">Sociétés de l'utilisateur</h2>
            <ul class="row col-12 societes_utilisateur">
              @foreach($societesActuels as $societe)
                <li class="col-12 mt-3 societe_actuel" id="societe_actuel_{{ $societe->IDSociete }}">{{ $societe->NomSociete }}</li>
              @endforeach
            </ul>
            <input type="hidden" name="societe_actuel_select" />
          </div>
          <div class="col-2">
            <div class="col-12 mt-3"><div class="btn btn-info" id="ajouter_societe"><i class="fa-solid fa-arrow-left"></i></div></div>
            <div class="col-12 mt-3"><div class="btn btn-info" id="supprimer_societe"><i class="fa-solid fa-arrow-right"></i></div></div>
          </div>
          <div class="col-5">
            <h2 class="w-100">Sociétés disponibles</h2>
            <ul class="row col-12 societes_dispos">
              @foreach($societesDispos as $societe)
                <li class="col-12 mt-3 societe_dispo" id="societe_dispo_{{ $societe->IDSociete }}">{{ $societe->NomSociete }}</li>
              @endforeach
            </ul>
            <input type="hidden" name="societe_dispo_select" />
          </div>
        </div>
    </div>
    <script>
      $(document).ready(function() {
        function clicSocieteACtuel() {
          $(".societe_actuel").click(function() {
            var id = $(this).attr("id");

            $(".societe_actuel").removeClass("badge");
            $(".societe_actuel").removeClass("badge-info");

            $("#"+ id).addClass("badge");
            $("#"+ id).addClass("badge-info");

            $("input[name='societe_actuel_select']").val(id);
          });
        }

        function clicSocieteDispo() {
          $(".societe_dispo").click(function() {
            var id = $(this).attr("id");

            $(".societe_dispo").removeClass("badge");
            $(".societe_dispo").removeClass("badge-info");

            $("#"+ id).addClass("badge");
            $("#"+ id).addClass("badge-info");

            $("input[name='societe_dispo_select']").val(id);
          });
        }

        clicSocieteACtuel();
        clicSocieteDispo();

        $("#ajouter_societe").click(function() {
          let idSociete = $("input[name='societe_dispo_select']").val();
          idSociete = idSociete.replace("societe_dispo_","");

          console.log("idSociete : "+ idSociete);

          if(idSociete!="") {
            let idUtilisateur = "";

            $.ajax({
              url: "{{ url('/') }}/Admin525SWD/societe/add_utilisateur/"+ idSociete +"/"+ idUtilisateur,
              context: document.body,
              dataType:"json"
            }).done(function() {
                let nom = $("#societe_dispo_"+ idSociete).html();

                $("#societe_dispo_"+ idSociete).remove();
                $(".societes_utilisateur").append("<li class=\"col-12 mt-3 societe_actuel\" id=\"societe_actuel_"+ idSociete +"\">"+ nom +"</li>");

                $("input[name='societe_dispo_select']").val("");

                clicSocieteACtuel();
                clicSocieteDispo();
            });
          }else {
            $("#message_erreur").html("<div class=\"alert alert-danger\">Il vous faut sélectionner une société pour pouvoir l'affecter à l'utilisateur.</div>");
            $("#message_erreur").slideDown();

            setTimeout(() => {
              $("#message_erreur").slideUp();
            }, "5000");
          }
        });

        $("#supprimer_societe").click(function() {
          let idSociete = $("input[name='societe_actuel_select']").val();
          idSociete = idSociete.replace("societe_actuel_","");

          if(idSociete!="") {
            $.ajax({
              url: "{{ url('/') }}/Admin525SWD/societe/supprimer_utilisateur/"+ idSociete,
              context: document.body,
              dataType:"json"
            }).done(function() {
              console.log("test");
                let nom = $("#societe_actuel_"+ idSociete).html();
                console.log("idSociete : "+ idSociete);

                $("#societe_actuel_"+ idSociete).remove();
                $(".societes_dispos").append("<li class=\"col-12 mt-3 societe_dispo\" id=\"societe_dispo_"+ idSociete +"\">"+ nom +"</li>");

                $("input[name='societe_actuel_select']").val("");

                clicSocieteACtuel();
                clicSocieteDispo();
            });
          }else {
            $("#message_erreur").html("<div class=\"alert alert-danger\">Il vous faut sélectionner une société pour pouvoir la désaffecter à l'utilisateur.</div>");
            $("#message_erreur").slideDown();

            setTimeout(() => {
              $("#message_erreur").slideUp();
            }, "5000");
          }
        });
      });
    </script>
@endsection