{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> Dashboard </title>
    <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport" />
    <!-- intl-tel-input CSS/JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/css/intlTelInput.css" />

    <!-- Fonts and icons -->
    <script src="{% static 'assets/js/plugin/webfont/webfont.min.js' %}"></script>
    <script>
      WebFont.load({
        google: { families: ["Public Sans:300,400,500,600,700"] },
        custom: {
          families: [
            "Font Awesome 5 Solid",
            "Font Awesome 5 Regular",
            "Font Awesome 5 Brands",
            "simple-line-icons",
          ],
          urls: ["{% static 'assets/css/fonts.min.css' %}"],
        },
        active: function () {
          sessionStorage.fonts = true;
        },
      });

    </script>

    <!-- CSS Files -->
    <link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static 'assets/css/plugins.min.css' %}" />
    <link rel="stylesheet" href="{% static 'assets/css/admin.min.css' %}" />
    <link rel="stylesheet" href="{% static 'assets/fontawesome/css/all.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'assets/DataTables/datatables.min.css' %}"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.bootstrap4.min.css"/>

    <style>
      .iti {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">

      <!-- Sidebar -->
      <div class="sidebar" data-background-color="dark">
        <div class="sidebar-logo">
          <!-- Logo Header -->
          <div class="logo-header" data-background-color="dark">
            <a href="#" class="logo">
              <img
                src="{% static 'assets/img/logo.png' %}"
                alt="navbar brand"
                class="navbar-brand"
                height="60"
              />
            </a>
            <div class="nav-toggle">
              <button class="btn btn-toggle toggle-sidebar">
                <i class="gg-menu-right"></i>
              </button>
              <button class="btn btn-toggle sidenav-toggler">
                <i class="gg-menu-left"></i>
              </button>
            </div>
            <button class="topbar-toggler more">
              <i class="gg-more-vertical-alt"></i>
            </button>
          </div>
          <!-- End Logo Header -->
        </div>


        <div class="sidebar-wrapper scrollbar scrollbar-inner">
          <div class="sidebar-content">
            <ul class="nav nav-secondary">
              <li class="nav-item">
                <a href="#">
                  <p>Dashboard</p>
                </a>
                
              </li>
              <li class="nav-section">
                <span class="sidebar-mini-icon">
                  <i class="fa fa-ellipsis-h"></i>
                </span>
                <h4 class="text-section">Components</h4>
              </li>
              <li class="nav-item {% if request.path == '/dashboard/' %}active{% endif %}">
                <a href="{% url 'dashboard' %}">
                  <i class="fas fa-users"></i>
                  <p>RSVPs</p>
                  <span class="badge badge-primary">{{ total_guest }}</span>
                </a>
              </li>     
   
              <li class="nav-item {% if request.path == '/accredited/' %}active{% endif %}">
                <a href="{% url 'accredited' %}">
                  <i class="fas fa-user-check"></i>
                  <p>Accredited Guests</p>
                  <span class="badge badge-success">{{ total_accredited }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <!-- End Sidebar -->

      <div class="main-panel">

        <div class="main-header">
          <div class="main-header-logo">
            <!-- Logo Header -->
            <div class="logo-header" data-background-color="dark">
              <a href='' class="logo">
                <img
                  src="{% static 'assets/img/logo.png' %}"
                  alt="navbar brand"
                  class="navbar-brand"
                  height="60"
                />
              </a>
              <div class="nav-toggle">
                <button class="btn btn-toggle toggle-sidebar">
                  <i class="gg-menu-right"></i>
                </button>
                <button class="btn btn-toggle sidenav-toggler">
                  <i class="gg-menu-left"></i>
                </button>
              </div>
              <button class="topbar-toggler more">
                <i class="gg-more-vertical-alt"></i>
              </button>
            </div>
            <!-- End Logo Header -->
          </div>

            <!-- Navbar Header -->
            <nav class="navbar navbar-header navbar-header-transparent navbar-expand-lg border-bottom">
              <div class="container-fluid">
            <nav class="navbar navbar-header-left navbar-expand-lg navbar-form nav-search p-0 d-lg-flex">
              <div class="d-flex align-items-center">
                <h1 class="fw-bold">Admin Dashboard</h1>
              </div>
            </nav>
            <div class="d-flex align-items-center">
              <!-- Alert Toast -->
            <div id="alertToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 20px; right: 20px; z-index: 999999; min-width: 300px;">
              <div class="toast-header bg-success text-white d-flex justify-content-between align-items-center">
                  <strong id="alertTitle" class="mr-auto">Success</strong>
                  <button type="button" class="ml-2 mb-1 close text-light" data-dismiss="toast" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div id="alertMessage" class="toast-body">
                  Message will appear here
              </div>
            </div>

              <a href="{% url 'logout' %}" class="btn btn-danger btn-sm">Logout</a>
            </div>
          </div>
        </nav>
        
        <!-- End Navbar -->

        </div>
        
        <div class="container">
            <div class="page-inner">
              {% block attendees %}
            
            
                {% endblock %}  
            </div>
        </div>

        <footer class="footer">
          <div class="container-fluid d-flex justify-content-between">
            <nav class="pull-left">
              <ul class="nav">
                <li class="nav-item">
                  <span class="nav-link">
                    All Rights Reserved &copy; <script> document.write(new Date().getFullYear()); </script>
                  </span>
                </li>
              </ul>
            </nav>
            <div>
              Developed by
              <a target="_blank" href="https://www.wristbands.ng">Wristbands NG Web Team</a>.
            </div>
          </div>
        </footer>
      </div>
   

    </div>
    
       
    <!-- Guest Details Modal -->
    <div class="modal fade" id="guestModal" tabindex="-1" role="dialog" aria-labelledby="guestModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="guestModalLabel">Guest Details</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Name</h6>
                <p id="guest-name" class="font-weight-bold"></p>
              </div>
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Email</h6>
                <p id="guest-email"></p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Phone</h6>
                <p id="guest-phone"></p>
              </div>
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Fabric Type</h6>
                <p>
                <span id="guest-type"> </span>
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Pieces</h6>
                <p id="guest-quantity"></p>
              </div>
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Amount Paid</h6>
                <p id="guest-amount"></p>
              </div>
            </div>
            <div class="row">
              <div class="col-6 mb-3">
                <h6 class="text-muted">Registration Date</h6>
                <p id="guest-created"></p>
              </div>
              <div class="col-6 mb-3">
                <h6 class="text-muted">Reference</h6>
                <p id="guest-reference"></p>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Verified By</h6>
                <p id="guest-verified-by"></p>
              </div>
              <div class="col-md-6 mb-3">
                <h6 class="text-muted">Verified On</h6>
                <p id="guest-verified-on"></p>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <!-- All JavaScript at the bottom for better page load performance -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

    <!-- Other JS files -->
    <script src="{% static 'assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js' %}"></script>
    <script src="{% static 'assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js' %}"></script>
    <!-- DataTables and Buttons -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
    <script src="{% static 'assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js' %}"></script>
    <script src="{% static 'assets/js/admin.min.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
      $(document).ready(function() {
        // Initialize DataTables with Buttons only if table exists
        if ($('#attendeeTable').length) {
          const table = $('#attendeeTable').DataTable({
            dom: 'Bfrtip',  // Add buttons to the layout
            buttons: [
              {
                extend: 'collection',
                text: 'Export Data',
                className: 'btn btn-light btn-sm',
                buttons: [
                  'copy',
                  'excel',
                  'csv',
                  'pdf',
                  'print'
                ]
              }
            ],
            columnDefs: [
              {
                targets: -1, // Last column (Actions)
                orderable: false,
                searchable: false
              }
            ],
            responsive: true,
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']]
          });
          
          // Style the export button
          $('.dt-buttons button').addClass('btn btn-light btn-sm');
        }
      });
    </script>

    <script>
      // Initialize toast
      $(document).ready(function() {
          $('#alertToast').toast({
              delay: 4000,
              autohide: true
          });
      });

      // Global showAlert function
      window.showAlert = function(message, type) {
          console.log('showAlert called with:', message, type);
          const toast = $('#alertToast');
          const header = toast.find('.toast-header');
          const title = $('#alertTitle');
          const messageEl = $('#alertMessage');

          // Remove all color classes
          header.removeClass('bg-success bg-warning bg-danger text-white text-dark');
          
          switch(type) {
              case 'success':
                  header.addClass('bg-success text-white');
                  title.text('Success');
                  break;
              case 'warning':
                  header.addClass('bg-warning text-dark');
                  title.text('Warning');
                  break;
              case 'danger':
              case 'error':
                  header.addClass('bg-danger text-white');
                  title.text('Error');
                  break;
          }

          messageEl.text(message);
          
          // Hide then show to reset animation
          toast.toast('hide');
          setTimeout(() => {
              toast.toast('show');
          }, 100);
      }

      // Confirm function using Bootstrap modal
      window.showConfirm = function(title, message, callback) {
          // Create modal if it doesn't exist
          if (!$('#confirmModal').length) {
              $('body').append(`
                  <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">
                      <div class="modal-dialog modal-dialog-centered" role="document">
                          <div class="modal-content">
                              <div class="modal-header">
                                  <h5 class="modal-title" id="confirmModalTitle"></h5>
                                  <button type="button" class="close" data-dismiss="modal">
                                      <span>&times;</span>
                                  </button>
                              </div>
                              <div class="modal-body" id="confirmModalBody"></div>
                              <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                  <button type="button" class="btn btn-primary" id="confirmModalOk">OK</button>
                              </div>
                          </div>
                      </div>
                  </div>
              `);
          }
          
          $('#confirmModalTitle').text(title);
          $('#confirmModalBody').text(message);
          
          // Remove previous event handlers
          $('#confirmModalOk').off('click');
          
          // Add new event handler
          $('#confirmModalOk').on('click', function() {
              $('#confirmModal').modal('hide');
              if (callback) callback(true);
          });
          
          // Handle cancel
          $('#confirmModal').off('hidden.bs.modal');
          $('#confirmModal').on('hidden.bs.modal', function() {
              if (callback) callback(false);
          });
          
          $('#confirmModal').modal('show');
      }
    </script>

    {% block customJS %}
    {% endblock %}
    
  </body>
</html>
