<?php
session_start();
require_once 'connection.php';
?>
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="BlantyreSynod">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">

    <title>BLANTYRE SYNOD - CCAP</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="assets/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/btsynod.css">
    <link rel="stylesheet" href="assets/css/owl.css">
<!-- style for drop down menu-->
<style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #3385ff;
    color: white;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-decoration: none;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
<!-- end style -->
  </head>

  <body>

    <!-- ***** Preloader Start ***** -->
    <div id="preloader">
        <div class="jumper">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>  
    <!-- ***** Preloader End ***** -->

    <!-- Header -->
    <div class="sub-header">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-xs-12">
            <ul class="left-info">
              <li><a href="#"><i class="fa fa-clock-o"></i>Mon-Fri 09:00-17:00</a></li>
              <li><a href="#"><i class="fa fa-phone"></i>+265 (01)-986-980</a></li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="right-icons">
              <li><a href="https://www.facebook.com/CCAP-Blantyre-Synod-Mw-100640528743834/"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <header>
      <nav class="navbar navbar-expand-lg">
        <div class="container">
        <a class="navbar-brand logo-image" href="index.html"><img src="assets/images/logo.png" alt="alternative" style="width: 92px; height: 92px;"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html">Home</a>
              </li>
               <li class="nav-item">
                <a class="nav-link" href="news.html">News &amp; Events</a>
              </li>
              <li class="nav-item">
                <li class="dropdown">
                  <a class="nav-link" href="#" class="dropbtn">Ministries</a>
                    <div class="dropdown-content">
                      <a href="evangelism.html">Evangelism</a>
                      <a href="radio.html">Radio</a>
                      <a href="church.html">Church &amp; Society</a>
                    </div>
                </li>
              </li> 
              <li class="nav-item">
                <li class="dropdown">
                  <a class="nav-link" href="retreats.html" class="dropbtn">Retreat &amp; Recreation</a>
                    <div class="dropdown-content">
                      <a href="chilema.html">Chilema Ecumenical </a>
                      <a href="zomba.html">CCAP Cottage</a>
                      <a href="likhubula.htmls">CCAP Likhubula House</a>
                      <a href="bandawe.html">Grace Bandawe Conference Centre</a>
                    </div>
                </li>
              </li>                          
              <li class="nav-item">
                <a class="nav-link" href="management.html">Management</a>
              </li>
              <li class="nav-item">
                <li class="dropdown">
                  <a class="nav-link" href="#" class="dropbtn">Departments</a>
                    <div class="dropdown-content">
                      <a href="education.html">Education</a>
                      <a href="bshdc.html">BSHDC</a>
                      <a href="estates.html">Estates</a>
                      <a href="women.html">Women's Desk</a>
                    </div>
                </li>
              </li>                       
              <li class="nav-item">
                <a class="nav-link" href="contact.php">Contact Us</a>
              </li>
              <li class="nav-item active">
                <li class="dropdown">
                  <a class="nav-link" href="#" class="dropbtn">MORE
                  <span class="sr-only">(current)</span>
                </a>
                    <div class="dropdown-content">
                      <a href="#top">Presbytery</a>
                      <a href="about.html">History</a>
                      <a href="vacancies.html">Vacancies</a>
                    </div>
                </li>
              </li> 
            </ul>
          </div>
        </div>
      </nav>
    </header>

   <!-- Page Content -->
    <div class="page-heading header-text">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1>Presbytery</h1>
            <span>Summary of churches in Blantyre Synod.</span>
          </div>
        </div>
      </div>
    </div>
<br>
<section id="blog">
  <div class="container">
    <div class="col-md-12 col-md-offset-2">
      <div class="section-heading">
        <hr>
      <div>
        <span>Input either a Name or Church of the pastor you are looking for.</span>
      </div>
    <input type="text" id="myInput" onkeyup="myFunction();" placeholder="Search Pastor or Church name." style="width: 30%;"/>
    <br>
        <table id="myTable" class="w3-table w3-bordered w3-striped w3-card-4" style="width: 100%;">
        <tr class="header">
            <th onclick="sortTable(0)" class="button"><a >Church</a></th>
            <th onclick="sortTable(1);" class="butten"><a >Firstname</a></th>
            <th onclick="sortTable(2);" class="butten"><a >Surname</a></th>
            <th onclick="sortTable(2);" class="butten"><a >Address</a></th>
        </tr>
        <?php
            $query  = "SELECT * from pastor";
            $ret = mysqli_query($link, $query);
            $num_results = mysqli_num_rows($ret);
        for ($i = 0; $i < $num_results; $i++) {
                    $row = mysqli_fetch_array ($ret);
                    echo "<tr>";
                    echo "<td>" . $row["church"] . "</td>";
                    echo "<td>" . $row["firstname"] . "</td>";
					          echo "<td>" . $row["lastname"] . "</td>";
					          echo "<td>" . $row["Address"] . "</td>";
                    echo "</tr>";
                }if ($num_results==0) {
                    echo"<h3>Church Not Available!</h3>";
                }
            ?>
        </table>
        </div>
    </div>
  </div>
</section>
    <div class="contact-information">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-map-marker"></i>
              <h4>BLANTYRE CITY PRESBYTERY</h4>
              <p>Post Office Box 51930<br>
                 Limbe</p><br>
              <a href="#">+265 (01)-986-980</a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-map-marker"></i>
              <h4>BLANTYRE NORTH PRESBYTERY</h4>
              <p>Post Office Box 69<br>
                 Lunzu</p><br>
              <a href="#">+265 (01)-986-980</a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-map-marker"></i>
              <h4>CHIUTA PRESBYTERY</h4>
              <p>Post Office box 169<br>
                 Ntaja
              </p><br>
              <a href="#">+265-(0)-</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
        <div class="contact-information">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-map-marker"></i>
              <h4>CHIKWAWA PRESBYTERY</h4>
              <p>
                Post Office Box<br>
                Chikwawa<br>
              </p>
              <a href="#">+265 (01)-986-980</a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-map-marker"></i>
              <h4>CHIRADZULU PRESBYTERY</h4>
              <p>
                Post Office Box 148<br>
                Chiradzulu<br>
              </p>
              <a href="#">+265-(0)-</a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="contact-item">
              <i class="fa fa-map-marker"></i>
              <h4>DOMASI PRESBYTREY</h4>
              <p>
                Post Office Box <br>
                Domasi<br>
              </p>
              <a href="#">+265-(0)-</a>
            </div>
          </div>
        </div>
      </div>
    </div>
        <br>
    <!-- Footer Starts Here -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-3 footer-item">
            <h4>Blantyre Synod</h4>
            <p>Get involved with us. <br>Like our Facebook page.</p>
            <ul class="social-icons">
              <li><a rel="nofollow" href="https://www.facebook.com/CCAP-Blantyre-Synod-Mw-100640528743834/" target="_blank"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
          </div>
          <div class="col-md-3 footer-item">
            <h4>Useful Links</h4>
            <ul class="menu-list">
              <li><a href="about.html">About Us</a></li>
              <li><a href="management.html">Management</a></li>
              <li><a href="contact.php">Contact us</a></li>
              <li><a href="news.html">News &amp; Events</a></li>
            </ul>
          </div>
          <div class="col-md-3 footer-item">
            <h4>Additional Pages</h4>
            <ul class="menu-list">
              <li><a href="evangelism.html">Radio</a></li>
              <li><a href="evangelism.html">Evangelism</a></li>
              <li><a href="depertments.html">Womens Desk</a></li>
              <li><a href="evagelism.html">Church &amp; Society</a></li>
              <li><a href="retreats..html">Retreats &amp; Recreation</a></li>
            </ul>
          </div>
          <div class="col-md-3 footer-item last-item">
            <h4>Contact Us</h4>
            <div class="">
            <a href="contact.php" class="border-button">Contact Us</a>
          </div>
          </div>
        </div>
      </div>
    </footer>
    
    <div class="sub-footer">
      <div class="container" id="#orion">
        <div class="row">
          <div class="col-md-12">
            <p>Copyright &copy; 2021 Blantyre Synod CCAP.</p>
          </div>
        </div>
      </div>
    </div>
<script>
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

function sortTable(n) {
            var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
            table = document.getElementById("myTable");
            switching = true;
            // Set the sorting direction to ascending:
            dir = "asc";
            /* Make a loop that will continue untilno switching has been done: */
            while (switching) {
                // Start by saying: no switching is done:
                switching = false;
                rows = table.rows;
                /* Loop throughall table rows (except thefirst, which contains table headers): */
                for (i = 1; i < (rows.length - 1); i++) {
                    // Start by saying there should be no switching:
                    shouldSwitch = false;
                    /* Get the twoelements you wantto compare,one from current row and one from the next:*/
                    x = rows[i].getElementsByTagName("TD")[n];
                    y = rows[i + 1].getElementsByTagName("TD")[n];
                    /* Check if thetwo rows should switch place,based on the direction, asc or desc: */
                    if (dir =="asc") {
                        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        // If so, mark as a switch and break the loop:
                        shouldSwitch= true;
                        break;}
                    } else if (dir =="desc") {
                        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                            // If so, mark as a switch and break the loop:
                            shouldSwitch= true;break;}}}
                            if (shouldSwitch) {
                                /* If a switch has been marked, make the switchand mark that a switch has been done: */
                                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);switching = true;
                                // Each time aswitch is done, increase this countby 1:
                                switchcount++;} else {
                                    /* If no switching has beendone AND the direction is "asc",set the direction 
                                    to "desc"and run the while loop again. */
                                    if (switchcount== 0 && dir =="asc") {dir = "desc";switching = true;}}}}
</script>
    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Additional Scripts -->
    <script src="assets/js/custom.js"></script>
    <script src="assets/js/owl.js"></script>
    <script src="assets/js/slick.js"></script>
    <script src="assets/js/accordions.js"></script>
  </body>
</html>