{%  extends 'home/base.html' %}

{% load static %}

{% block content %}
    <div class="container">
        <div class="card-boxes row">
          <div class="box col-md-4 my-2">
            <div class="right_side">
              <div class="numbers">{{ all_polls | length }}</div>
              <div class="box_topic"> Sondage{{ user_polls|pluralize:"s" }}</div>
            </div>
            <i class='bx bx-note'></i>
          </div>
          <div class="col-md-4 my-2"></div>
          <div class="box col-md-4 bg-dark">
            <div class="right_side">
              <div class="numbers text-white">{{ participants_polls | length }}</div>
              <div class="box_topic text-white">Participant{{ participants_polls|pluralize:"s" }}</div>
            </div>
            <i class='bx bx-user text-white'></i>
          </div>
        </div>
    </div>
   

    <div class="text-center">
      <a class="btn btn-dark btn-lg" id="poll-modal-btn"  href="#" data-bs-toggle="modal" data-bs-target="#create-polls-modal">
        <i class='bx bx-heart'></i>
        <span class="links_name">
            Créer un nouveau sondage
        </span>
        <i class='bx bx-heart'></i> 
      </a>
    </div>

    <div>
      <hr>
    </div>

    <!-- <div class="text-center">
      <h2> Liste des sondages récents </h2>
    </div> -->

    
    <div class="container">
      <div class="row">
        <div class="details">
          <div class="recent_project">
            <div class="card_header text-center">
              <h3 class="fw-bold">Liste des <span class="badge bg_dork text-white">8</span> sondages récents</h2>
            </div>
            <div>
              <hr>
            </div>
            <table>
              <tbody>
                {% if user_polls|length == 0 %}
                  <div class="alert alert-info text-center">Aucun sondage n'a été crée pour le moment </div>
                {% else %}
                  {% for poll in user_polls %}
                    <tr>
                      <td class="">{{ forloop.counter }} - <span class="fw-bold">{{ poll.title | upper }}</span></td>
                      <td class="">
                        <a href="{% url 'polls.questions.manage' poll.id %}">
                          <span class="badge bg_info">
                            <i class='bx bxs-heart bx-sm'></i>
                            <!-- Questions -->
                          </span>
                        </a>
                      </td>
                      <td class="">
                        <a id="poll-update-btn" href="javascript:void(0)" onclick="editPoll({{ poll.id }})">
                          <span class="badge bg_worning">
                            <i class='bx bxs-pencil bx-sm'></i>
                            <!-- Modifier -->
                          </span>
                        </a>
                      </td>
                      <td class="">
                        <a id="poll-delete-btn" href="javascript:void(0)" onclick="deletePoll({{ poll.id }})">
                          <span  class="badge bg_danger">
                            <i class='bx bxs-trash bx-sm'></i>
                            <!-- Supprimer -->
                          </span>
                        </a>
                      </td>
                      <td class="">
                        <!-- <a href="javascript:void(0)" class="share-btn" data-bs-toggle="modal" data-bs-target="#share-poll-modal" data-url="{% url 'polls.share' poll.id %}"> -->
                        <a href="{% url 'polls.share' poll.id %}" class="share-btn">
                          <span class="badge bg_seccuss">
                            <i class='bx bxs-send bx-sm'></i>
                            <!-- Partager -->
                          </span>
                        </a>
                      </td>
                    </tr>
                  {% endfor %}
                {% endif %}
              </tbody>
            </table>
            <!-- I am here Bro -->
          </div>

          <div class="d-flex justify-content-between mt-4">
            <div>
              <div class="badge bg_info mr-5 d-flex align-items-center">
                <i class='bx bxs-heart bx-sm'></i>
                <span>Gérer les questions</span>
              </div>
            </div>

            <div>
              <div class="badge bg_worning mr-5 d-flex align-items-center">
                <i class='bx bxs-pencil bx-sm'></i>
                <span>Modifier</span>
              </div>
            </div>
            <div>
              <div class="badge bg_danger mr-5 d-flex align-items-center">
                <i class='bx bxs-trash bx-sm'></i>
                <span>Supprimer</span>
              </div>
            </div>

            <div>
              <div class="badge bg_seccuss mr-5 d-flex align-items-center">
                <i class='bx bxs-send bx-sm'></i>
                <span>Partager</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Create Poll Modal -->
    <div class="modal fade" id="create-polls-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header bg-dark">
            <!-- <h1 class="modal-title fs-5" id="staticBackdropLabel">Créer un nouveau sondage</h1> -->
            <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="form-container">
                  <h3 class="text-center fw-bold">Nouveau sondage</h2>
                  <form id="poll-modal-form" method="POST" data-id="">
                      {% csrf_token %}
                      <div class="mb-3">
                          <label for="title" class="form-label fw-bold">Title</label>
                          <input type="text" id="title" class="form-control" id="title" placeholder="Entrer le titre du sondage" value="">
                      </div>
                      <div class="mb-3">
                          <label for="description" class="form-label fw-bold">Description</label>
                          <textarea id="description" class="form-control" id="description" rows="4" placeholder="Donnez l'idée générale du sondage"></textarea>
                      </div>
                      <button type="submit" id="save-btn" class="btn btn-dark w-100" name="store">Submit</button>
                  </form>
              </div>
          </div>
          </div>
          <!-- <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
          </div> -->
        </div>
      </div>
    </div>

    <!--Share Poll Modal-->
    <div class="modal fade" id="share-poll-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title text-secondary" id="exampleModalLongTitle">Poll details</h5>
            <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="divider divider-primary">
                  <div class="divider-text">Title</div>
              </div>
              <div class="border border-secondary p-2">
                  <h5 class="text-secondary text-center" id="poll-title"></h5>
              </div>
              
              <div class="divider divider-primary">
                  <div class="divider-text">Description</div>
              </div>
              <div class="border border-secondary mt-1 p-2">
                  <p class="h5 text-secondary text-center text-wrap" id="poll-description"></p>
              </div>

              <div class="divider divider-primary">
                <div class="divider-text">Link</div>
              </div>
              <div class="border border-secondary mt-1 p-2">
                  <div class="h5 text-secondary text-center text-wrap" id="poll-share-link"></div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
{% endblock %}

{% block js %}
  <script src = "{% static 'bootstrap/js/bootstrap.min.js' %}" type ="text/javascript"></script>  
  <script>
    $(document).ready(function(){

      // reset modal input when we click add button
      $('#poll-modal-btn').on('click', function(){
        $('#title').val('');
        $('#description').val('');
      });

      $('#poll-modal-form').on('submit', function(e){
        e.preventDefault();
        let form_data = {
          csrfmiddlewaretoken: '{{ csrf_token }}',  // Ajoutez cette ligne
          'title': $('#title').val(),
          'description': $('#description').val(),
        };

        if($('#save-btn').attr('name') === 'update')
          form_data['id'] = $('#poll-modal-form').data('id');


        $.ajax({
          type: 'POST',
          url: '{% url "polls.store" %}',
          data: form_data,
          success: function(response){
            window.location.reload();
          },
          error: function(error){
            console.log(error);
          }
        });
      });

      $('.share-btn').on('click', function(){
        const url = $(this).data('url');

        $.ajax({
          type: 'GET',
          url: url,
          success: function(response){
            console.log(response);
            $('#poll-title').text(response.title);
            $('#poll-description').text(response.description);
            $('#poll-share-link').text(response['link']);
          },
          error: function(error){
            console.log(error);
          }
        });
      });

       // edit poll
       window.editPoll = function(id) {
        $.ajax({
            url: '/polls/' + id + '/edit',
            method: 'GET',
            success: function(data) {
                $('#title').val(data.title);
                $('#description').val(data.description);
               
                $('#create-polls-modal').modal('show');
                $('#save-btn').attr('name', 'update');
                $('#poll-modal-form').attr('data-id', id);
            },
            error: function(error) {
                console.error('Error fetching question data:', error);
            }
        });
    };

    // delete poll
    window.deletePoll = function(id) {
        if (confirm('Êtes-vous sûr de vouloir supprimer ce sondage ?')) {
            $.ajax({
              url: '/polls/' + id + '/delete',
              method: 'POST',
                data: {
                  csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(response) {
                    window.location.reload();
                },
                error: function(error) {
                    console.error('Error deleting question:', error);
                }
            });
        }
    };
    });
  </script>
{% endblock %}