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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Ancestral events</title>
  <meta content="" name="description">
  <meta content="" name="keywords">
   <meta content="Kenneth Mwai" name="author" />

  <!-- Favicons -->
  <link href="<?php echo base_url()?>assets/img/favicon1.ico" rel="icon">
  <link href="<?php echo base_url()?>assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,600;1,700;1,800&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> 

  <!-- Vendor CSS Files -->
  <link href="<?php echo base_url()?>assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="<?php echo base_url()?>assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="<?php echo base_url()?>assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="<?php echo base_url()?>assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="<?php echo base_url()?>assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="<?php echo base_url()?>assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

 <!-- Bootstrap Css -->
    <link href="<?php echo base_url()?>assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
  <!-- Template Main CSS File -->
  <link href="<?php echo base_url('assets/css/style.css')?>" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Delicious - v4.7.1
  * Template URL: https://bootstrapmade.com/delicious-free-restaurant-bootstrap-theme/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->

  	<style>
			.popup {
			position: fixed;
			z-index: 1;
			left: 0;
			top: -3%;
			width: 100%;
			height: 100%;
			overflow: hidden;
			
         
			display: none;
		}
		.popup-content {
			background-color:white ;
            color:black;
			margin: 10% auto;
			padding: 20px;
			border: 1px solid #888888;
			width: 70%;
			font-weight: bolder;
		}
		.popup-content button {
			display: block;
			margin: 0  auto;
		}
		.show {
			display: block;
		}
		h1 {
			color: black;
		}
        .pop-btn{
          background: #ffb03b;
            color: #fff;
            border-radius: 50px;
            margin: 0 0 0 20px;
            padding: 10px 25px;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 1px;
            transition: 0.3s;
            white-space: nowrap;
        }

            .box-close {
           margin-left:94%;
            color: #fe0606;
            text-decoration: none;
            font-size: 30px;
        }
              .box-close:hover {
          
            color: #fff;
            
        }
	</style>
</head>

<body>



  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center header-transparent">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">

      <div class="logo me-auto">
       <!--<h1><a href="index.html">Delicious</a></h1>-->
        <!-- Uncomment below if you prefer to use an image logo -->
       <h1>  <a href="index.html"><img src="assets/img/image1.png" width="110px"    alt="" class="imga"></a></h1>
       
           
      </div>
            

      <nav id="navbar"   style="margin-right:28%;  " class="navbar   order-last order-lg-0">
         <ul>
          <li><a class="nav-link scrollto active " href="<?php echo base_url()?>#hero">Home</a></li>
          <li><a class="nav-link scrollto " href="<?php echo base_url()?>#about">About</a></li>
         
        
          <li><a class="nav-link scrollto" href="<?php echo base_url()?>#contact">Contact Us</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

     <!--- <a href="<?php echo base_url('register')?>" class="book-a-table-btn scrollto">Register</a>-->
<button id="myButton" class="pop-btn scrollto">
		Register
	</button>
	<div id="myPopup" class="popup ">
		<div class="popup-content">
     
     
			<h1 style="color:orange;">
				AncestralAfrica !
			</h1>
		

                    <?php echo form_open( 'register',array('role'=>'form','data-toggle'=>"validator" ,'class'=>"form-horizontal")) ; ?>

                    <center><u> <h1>Event Registration Form</h1></u></center>
                     <p>Please Fill in the following details;</p>
          <div class="row">
           <label class="control-label col-sm-1" for="address"> Name</label>
            <div class="col-lg-3 col-md-4 form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name"  value="" required/>
              <small style="color:red; font-size: 80%"><?php echo form_error('name');?></small>  
            </div>
             <label class="control-label col-sm-1" for="address"> Email</label>
            <div class="col-lg-3 col-md-4 form-group mt-3 mt-md-0">
              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email"  required>
               <br><span style="color:red; font-size: 80%"><?php echo form_error('email'); ?></span>
            </div>
                         <label class="control-label col-sm-1" for="address"> Contact</label>

            <div class="col-lg-3 col-md-6 form-group mt-3 mt-md-0">
          <input type="number"  name="phone" class="form-control" id="phone" value="<?php echo set_value('phone')?>" placeholder="Your Phone" >  
    <br><span style="color:red; font-size: 80%"><?php echo form_error('email'); ?></span>
           
            </div>
          </div><br>
          <div class="row">
           <label class="control-label col-sm-1" for="address"> Age</label>
            <div class="col-lg-3 col-md-4 form-group">
              <input type="number" name="age" class="form-control" id="age" placeholder="Your Age" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/>
                  <br><span style="color:red; font-size: 80%"><?php echo form_error('email'); ?></span>
            </div>
             <label class="control-label col-sm-1" for="address"> National ID</label>
            <div class="col-lg-3 col-md-4 form-group mt-3 mt-md-0">
              <input type="number" class="form-control" name="id_number" id="id_number" placeholder=" ID Number" data-rule="email" data-msg="Please enter a valid email" required/>
                  <br><span style="color:red; font-size: 80%"><?php echo form_error('email'); ?></span>
            </div>
                         <label class="control-label col-sm-1" for="address"> Location</label>

            <div class="col-lg-3 col-md-6 form-group mt-3 mt-md-0">
          <input type="text"  name="location" class="form-control" id="location" value="<?php echo set_value('location')?>" placeholder="Your Location" required/>  
              <br><span style="color:red; font-size: 80%"><?php echo form_error('email'); ?></span>

           
            </div>
          </div><br>
                <div class="row">
           <label class="control-label col-sm-1" for="address"> Event</label>
            <div class="col-lg-3 col-md-4 form-group">
              <input type="text" name="ev_name" class="form-control" id="ev_name" placeholder="State the event" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/>
                  <br><span style="color:red; font-size: 80%"><?php echo form_error('email'); ?></span>
            </div>
             <label class="control-label col-sm-1" for="address"> Country</label>
            <div class="col-lg-3 col-md-4 form-group mt-3 mt-md-0">
              <input type="text" class="form-control" name="country" id="country" placeholder=" Country" data-rule="text" data-msg="Please enter country" required/>
                  <br><span style="color:red; font-size: 80%"><?php echo form_error('email'); ?></span>
            </div>
             
          
          </div><br>
         
      
       
<button id="closePopup" class='btn btn-danger btn-sm btn-rounded waves-effect waves-light' style=" margin-right:84%;">
				Close
			</button>       
                

      
         <div class="text-right ">
                  <button type="submit" style="background-color:orange;"class="btn  w-7 float-right"><i class="mdi mdi-account-plus-outline me-1"></i>Submit</button>

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

    

  


    <script>
		myButton.addEventListener("click", function () {
			myPopup.classList.add("show");
		});
		closePopup.addEventListener("click", function () {
			myPopup.classList.remove("show");
		});
		window.addEventListener("click", function (event) {
			if (event.target == myPopup) {
				myPopup.classList.remove("show");
			}
		});
	</script>
  </header><!-- End Header -->
