{% extends "../base.html" %}
{% block content %}
<section class="section dashboard">
  {% if messages %}
    {% for msg in messages %}
        {% if 'success' in msg.tags %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ msg }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% elif 'error' in msg.tags %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ msg }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
    {% endfor %}
{% endif %}

<div class="row">
    {% if request.user.is_staff %}
    <div class="row">
      <!-- Left side columns -->
      <div class="col-lg-8">
        <div class="row">

          <!-- Sales Card -->
          <div class="col-xxl-4 col-md-6">
            <div class="card info-card sales-card">

              <div class="card-body">
                <h5 class="card-title">Ventes <span>| Aujourd'hui</span></h5>

                <div class="d-flex align-items-center">
                  <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                    <i class="bi bi-credit-card"></i>
                  </div>
                  <div class="ps-3">
                    <h6>0</h6>

                  </div>
                </div>
              </div>

            </div>
          </div><!-- End Sales Card -->

          <!-- Revenue Card -->
          <div class="col-xxl-4 col-md-6">
            <div class="card info-card revenue-card">

              <div class="card-body">
                <h5 class="card-title">Revenues <span>| Ce mois</span></h5>

                <div class="d-flex align-items-center">
                  <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                    <i class="bi bi-currency-euro"></i>
                  </div>
                  <div class="ps-3">
                    <h6>0</h6>

                  </div>
                </div>
              </div>

            </div>
          </div><!-- End Revenue Card -->

          <!-- Customers Card -->
          <div class="col-xxl-4 col-xl-12">

            <div class="card info-card customers-card">

              <div class="card-body">
                <h5 class="card-title">Membres <span>| Actifs</span></h5>

                <div class="d-flex align-items-center">
                  <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                    <i class="bi bi-people"></i>
                  </div>
                  <div class="ps-3">
                    <h6>{{actifs.count}}</h6>

                  </div>
                </div>

              </div>
            </div>

          </div><!-- End Customers Card -->

          {% comment %} <!-- Reports -->
          <div class="col-12">
            <div class="card">

              <div class="card-body">
                <h5 class="card-title">Reports <span>/Today</span></h5>

                <!-- Line Chart -->
                <div id="reportsChart"></div>

                <script>
                  document.addEventListener("DOMContentLoaded", () => {
                    new ApexCharts(document.querySelector("#reportsChart"), {
                      series: [{
                        name: 'Sales',
                        data: [31, 40, 28, 51, 42, 82, 56],
                      }, {
                        name: 'Revenue',
                        data: [11, 32, 45, 32, 34, 52, 41]
                      }, {
                        name: 'Customers',
                        data: [15, 11, 32, 18, 9, 24, 11]
                      }],
                      chart: {
                        height: 350,
                        type: 'area',
                        toolbar: {
                          show: false
                        },
                      },
                      markers: {
                        size: 4
                      },
                      colors: ['#4154f1', '#2eca6a', '#ff771d'],
                      fill: {
                        type: "gradient",
                        gradient: {
                          shadeIntensity: 1,
                          opacityFrom: 0.3,
                          opacityTo: 0.4,
                          stops: [0, 90, 100]
                        }
                      },
                      dataLabels: {
                        enabled: false
                      },
                      stroke: {
                        curve: 'smooth',
                        width: 2
                      },
                      xaxis: {
                        type: 'datetime',
                        categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                      },
                      tooltip: {
                        x: {
                          format: 'dd/MM/yy HH:mm'
                        },
                      }
                    }).render();
                  });
                </script>
                <!-- End Line Chart -->

              </div>

            </div>
          </div><!-- End Reports -->  {% endcomment %}

          <!-- Recent Sales -->
          <div class="col-12">
            <div class="card recent-sales overflow-auto">

        
              <div class="card-body">
                <h5 class="card-title">Liste des membres</h5>

                <table class="table table-borderless datatable">
                  <thead>
                    <tr>
                      <th scope="col">Prénom & Nom</th>
                      <th scope="col">Entreprise</th>
                      <th scope="col">Téléphone</th>
                      <th scope="col">Membre actif</th>
                      <th scope="col">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for membre in membres %}
                      <tr>
                        <th>{{membre.first_name}} {{membre.last_name}}</th>
                        <td>{{membre.entreprise}}</td>
                        <td>{{membre.telephone}}</td>
                        {% if membre.frais_carte %}
                          <td><h4 class="badge bg-success">Actif</h4></td>
                          <td></td>
                          {% else %}
                          <td><h4 class="badge bg-danger">Non actif</h4></td>
                          <td><a href="{% url "activate_member" membre.id %}" class="btn btn-success btn-sm">Activer</a></td>
                        {% endif %}
                      </tr>
                    {% endfor %}
                    
                   
                  </tbody>
                </table>

              </div>

            </div>
          </div><!-- End Recent Sales -->

          <!-- Recent Bookings -->
          <div class="col-12">
            <div class="card recent-sales overflow-auto">

        
              <div class="card-body">
                <h5 class="card-title">Liste reservations</h5>

                <table class="table table-borderless datatable">
                  <thead>
                    <tr>
                      <th scope="col">Date</th>
                      <th scope="col">Prénom & Nom</th>
                      <th scope="col">Évènement</th>
                      <th scope="col">Stand</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for booking in bookings %}
                      <tr>
                        <td>{{booking.date}}</td>
                        <th>{{booking.user}} {{booking.user.get_last_name}}</th>
                        <td>{{booking.event}}</td>
                        <td>{{booking.stand}}</td>
                      </tr>
                    {% endfor %}
                    
                   
                  </tbody>
                </table>

              </div>

            </div>
          </div><!-- End Recent Bookings -->

        </div>
      </div><!-- End Left side columns -->

      <!-- Right side columns -->
      <div class="col-lg-4">

        <!-- Recent Activity -->
        <div class="card">
          
          <div class="card-body">
            <h5 class="card-title">Paiements récents</h5>

            <div class="activity">
             {% for payment in payments %}
             <div class="activity-item d-flex">
               <div class="activite-label">{{payment.date|timesince}}</div>
               <i class='bi bi-circle-fill activity-badge text-warning align-self-start'></i>
               <div class="activity-content">
                {{payment.price|floatformat}} € - {{payment.user}}
                </div>
              </div><!-- End activity item-->
              {% endfor %} 
            </div>

          </div>
        </div><!-- End Recent Activity -->

        <!-- Website Traffic -->
        <div class="card">
          
          <div class="card-body pb-0">
            <h5 class="card-title">Stands</h5>

            <div id="trafficChart" style="min-height: 400px;" class="echart"></div>

            <script>
              document.addEventListener("DOMContentLoaded", () => {
                echarts.init(document.querySelector("#trafficChart")).setOption({
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    top: '5%',
                    left: 'center'
                  },
                  series: [{
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    data: [{
                        value: 2,
                        name: 'Stand Premium'
                      },
                      {
                        value: 3,
                        name: 'Stand Gold'
                      },
                      {
                        value: 20,
                        name: 'Stand Bronze'
                      },
                      {
                        value: 4,
                        name: 'Stand Cuisine'
                      },
                      
                    ]
                  }]
                });
              });
            </script>

          </div>
        </div><!-- End Website Traffic -->

       
      </div><!-- End Right side columns -->

    </div>
    {% else %}
    {% include "components/next-event-card.html" with next_event=next_event %}
    
    {% endif %}
  </section>
{% endblock content %}