<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Your Booked Camps</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/tailwind.css">
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" href="/stylesheets/app.css">
    <style>
        html {
            scroll-behavior: smooth; 
        }

        :root {
            /* Primary Colors*/
            --Midnight-Green-Eagle-Green: #004e64;

            /* Secondary Colors */
            --Cerulean-Crayola: #00a5cf;
            --Persian-Green: #25a18e;

            /* Tertiary Colors */
            --black-title-text: #202020;
            --grey-body-text: #535353;
            --Aquamarine: #9fffcb;
            --Light-Green: #7ae582;
            --section-bg-grey: #fafafa;
            --section-bg-blue: rgba(0, 165, 207, 0.1)
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        main { 
            background-color: #E5F6FA;
        }
        @media (max-width: 600px) {
            #reached_head {
                flex-wrap: wrap;
            }
            #reached_head h1 {
                text-align: center;
                width: 100%;
            }
            #reached_head #search_reached {
                margin-top: 1rem;
                width: 100%;
            }
        }
    </style>

    <style>
        /*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

/*===== VARIABLES CSS =====*/
:root{
  --nav-width: 92px;

  /*===== Colores =====*/
  --first-color: #0C5DF4;
  --bg-color: #12192C;
  --sub-color: #B6CEFC;
  --white-color: #FFF;
  
  /*===== Fuente y tipografia =====*/
  --body-font: 'Poppins', sans-serif;
  --normal-font-size: 1rem;
  --small-font-size: .875rem;
  
  /*===== z index =====*/
  --z-fixed: 100;
}


/*===== BASE =====*/
*,::before,::after{
  box-sizing: border-box;
}
body{
  position: relative;
  margin: 0;
  padding: 0rem 0 0 5.75rem;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  transition: .5s;
}
h1{
  margin: 0;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
a{
  text-decoration: none;
}

/*===== l NAV =====*/
.l-navbar{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-width);
  height: 100vh;
  background-color: var(--bg-color);
  color: var(--white-color);
  padding: 1.5rem 1.5rem 2rem;
  transition: .5s;
  z-index: var(--z-fixed);
}

/*===== NAV =====*/
.nav{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.nav__brand{
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.nav__toggle{
  font-size: 1.25rem;
  padding: .75rem;
  cursor: pointer;
}
.nav__logo{
  color: var(--white-color);
  font-weight: 600;
}

.nav__link{
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: .75rem;
  padding: .75rem;
  color: var(--white-color);
  border-radius: .5rem;
  margin-bottom: 1rem;
  transition: .3s;
  cursor: pointer;
}
.nav__link:hover{
  background-color: var(--first-color);
}
.nav__icon{
  font-size: 1.25rem;
}
.nav__name{
  font-size: var(--small-font-size);
}

/*Expander menu*/
.expander{
  width: calc(var(--nav-width) + 9.25rem);
}

/*Add padding body*/
.body-pd{
  padding: 2rem 0 0 16rem;
}

/*Active links menu*/
.active{
  background-color: var(--first-color);
}

/*===== COLLAPSE =====*/
.collapse{
  grid-template-columns: 20px max-content 1fr;
}
.collapse__link{
  justify-self: flex-end;
  transition: .5s;
}
.collapse__menu{
  display: none;
  padding: .75rem 2.25rem;
}
.collapse__sublink{
  color: var(--sub-color);
  font-size: var(--small-font-size);
}
.collapse__sublink:hover{
  color: var(--white-color);
}

/*Show collapse*/
.showCollapse{
  display: block;
}

/*Rotate icon*/
.rotate{
  transform: rotate(180deg);
}
    </style>
    <!-- sidebar style -->

    <style>
        #hr:hover{
            background-color: #E5F6FA;
        }
    </style>


    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>

<body>

   
    <nav class="px-5 shadow sticky top-0 z-50" style="background-color: #004e64;">
        <div class="flex justify-between items-center">
          <!--Logo-->
          <span class="text-xl font-oswald cursor-pointer text-white my-4">
            <a href="index.html">RE<f style="color: #9fffcb;">LIE</f>F CAMP</a>
          </span>

          <h3 style="padding: 10px; color: white;" class="text-center font-oswald text-xl sm:text-2xl px-2">Disaster Relief Organization Dashboard</h3>

       
          <!--home icon-->
                <div class="flex items-center justify-between">
                    <div class="relative">
                        <button class="flex mx-4 text-white focus:outline-none">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                              </svg>
                        </button>
                    </div>

                    <div x-data="{ dropdownOpen: false }" class="relative">
                        <button @click="dropdownOpen = ! dropdownOpen"
                            class="relative block h-7 w-7 rounded-full overflow-hidden shadow focus:outline-none">
                            <img class="h-full w-full object-cover"
                                src="https://thumbs.dreamstime.com/b/default-avatar-profile-vector-user-profile-default-avatar-profile-vector-user-profile-profile-179376714.jpg"
                                alt="Your avatar">
                        </button>

                        <div x-show="dropdownOpen" @click="dropdownOpen = false"
                            class="fixed inset-0 h-full w-full z-10" style="display: none;"></div>

                        <div x-show="dropdownOpen"
                            class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-10"
                            style="display: none;">
                            <!-- <p class="px-4 py-2 font-montserrat font-medium text-base text-gray-900">User Name</p> -->

                            <% if(currentUser){ %>
                            <div class="bg-gray-500" style="padding: 0.5px 0px;"></div>
                            <a  href="/logout"
                                class="block px-4 py-2 font-montserrat text-sm text-gray-700 hover:bg-indigo-600 hover:text-white">Logout</a>

                                <% }else{ %> 
                            <div class="bg-gray-500" style="padding: 0.5px 0px;"></div>
                            <a  href="/login"
                                class="block px-4 py-2 font-montserrat text-sm text-gray-700 hover:bg-indigo-600 hover:text-white">Login</a>
                                    <% } %> 
                            </div>
                    </div>
                </div>
            </div>
        </nav>
    <div style="background-color: #004E64;" class="l-navbar" id="navbar">
        
        <nav class="nav">
            <div> 
                <div class="nav__brand">
                    <ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
                    <a href="#" class="nav__logo">Relief Camps</a>
                </div>
                <div class="nav__list">
                    <a href="/openNGOD" class="nav__link ">
                      <ion-icon name="alert-circle-outline" class="nav__icon"></ion-icon>
                        <span class="nav__name">Camps request</span>
                    </a>
                    <a href="/active_camps" class="nav__link ">
                      <ion-icon name="home-outline" class="nav__icon"></ion-icon>
                        <span class="nav__name">Active camps</span>
                       
                    </a>

                    <a href="/requirements" class="nav__link">
                      <ion-icon name="albums-outline" class="nav__icon"></ion-icon>
                        <span class="nav__name">Requirements</span>
                    </a>

                    <a href="/alert_people" class="nav__link">
                      <ion-icon name="person-outline" class="nav__icon"></ion-icon>
                        <span class="nav__name">Peoples in need</span>
                    </a>
                    <a href="/volunteer-list" class="nav__link active">
                      <ion-icon name="people-outline" class="nav__icon"></ion-icon>
                        <span class="nav__name">Volunteers</span>
                    </a>

                    <a href="/dro_list" class="nav__link">
                      <ion-icon name="checkmark-done-outline" class="nav__icon"></ion-icon>
                        <span class="nav__name">Registered DRO's</span>
                    </a>
                  
                </div>
            </div>

            <a href="/logout" class="nav__link">
                <ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
                <span class="nav__name">Log Out</span>
            </a>
        </nav>
    </div>

     

 <h3 style="padding: 10px; font-size: 30px;" class=" text-center font-oswald text-xl sm:text-2xl px-2">Volunteers available</h3>

<% for(let v of volunteers){ %>         

    <div id="active_div" class="">
        <div class="flex flex-col mb-14">
            <div class="py-4 px-4 overflow-x-auto">
                <div class="table-container align-middle max-h-screen overflow-y-auto inline-block min-w-full shadow sm:rounded-lg border-b border-gray-200" style="scrollbar-width: thin;">
                    <table class="min-w-full">
                        <thead class="sticky top-0 z-10 font-oswald">
                            <tr class="">
                                <th
                                    class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                    Name</th>
                                <th
                                    class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                    Age</th>
                                <th
                                    class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                    Gender</th>
                                <th
                                    class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                                    Contact</th>
                                <!-- <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Action</th> -->
                            </tr>
                        </thead>

                        <tbody id="hr"  class="font-montserrat">
                            <tr class="">
                                <td class="p-4 whitespace-no-wrap border-b border-gray-200">
                                 <div class="ml-2">
                                            <div class="text-sm leading-5 font-medium text-gray-900"><%= v.name %> 
                                            </div>
                                            
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                                    <div class="text-sm leading-5 text-gray-900"><%= v.age %> </div>
                                </td>
                                 <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                                    <div class="text-sm leading-5 text-gray-900"><%= v.gender %></div>
                                </td>
                                <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                                    <div class="text-sm leading-5 text-gray-900"><%= v.phone %></div>
                                </td>

                    
                            </tr>
                            
                        </tbody>
                    </table>
                    <div class="px-4 py-3 bg-gray-50 sticky bottom-0 z-10">
                   
                </div>
                </div> 
            </div>

<% } %> 

    <!-- ===== IONICONS ===== -->
    <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
    
    <!-- ===== MAIN JS ===== -->
    <script src="assets/js/main.js"></script>
   
  
                <footer class="lg:text-left cursor-default">
                    <div class="text-center p-3 footer-bottom" style="background-color: #004e64;">
                      <span class="text-white font-oswald">Â© 2022 Copyright:</span>
                      <a class="text-white font-montserrat" href="index.html">Relief Camp</a>
                    </div>
                  </footer>
            <script>
                //search for appeared
                function search_arrived() {
                var input = document.getElementById("search_arrived_people");
                var filter = input.value.toLowerCase();
                var y = document.getElementsByClassName('data_arrived');
                var count = 0;
                for(i = 0; i < y.length; i++){
                    if (y[i].innerText.toLowerCase().includes(filter)){
                        y[i].classList.remove('hidden');
                        count++;
                    }else{
                        y[i].classList.add('hidden');
                    }
                    document.getElementById('total_arrived').innerHTML = count;
                }  
                }
                var c_arrive = document.getElementsByClassName('data_arrived').length;
                document.getElementById('total_arrived').innerHTML = c_arrive;

            </script>
         


<script>
    /*===== EXPANDER MENU  =====*/ 
const showMenu = (toggleId, navbarId, bodyId)=>{
  const toggle = document.getElementById(toggleId),
  navbar = document.getElementById(navbarId),
  bodypadding = document.getElementById(bodyId)

  if(toggle && navbar){
    toggle.addEventListener('click', ()=>{
      navbar.classList.toggle('expander')

      bodypadding.classList.toggle('body-pd')
    })
  }
}
showMenu('nav-toggle','navbar','body-pd')

/*===== LINK ACTIVE  =====*/ 
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
  linkColor.forEach(l=> l.classList.remove('active'))
  this.classList.add('active')
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))


/*===== COLLAPSE MENU  =====*/ 
const linkCollapse = document.getElementsByClassName('collapse__link')
var i

for(i=0;i<linkCollapse.length;i++){
  linkCollapse[i].addEventListener('click', function(){
    const collapseMenu = this.nextElementSibling
    collapseMenu.classList.toggle('showCollapse')

    const rotate = collapseMenu.previousElementSibling
    rotate.classList.toggle('rotate')
  })
}


</script>
<!-- sidebar sciprt -->
    </body>
</html>