<?php include('session.php') ?>
<?php include('upload.php') ?>
<?php include('config.php')?>
<?php include('upload_announcement.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">
      <!-- SEO Meta Tags -->
      <meta name="description" content="Tivo is a HTML landing page template built with Bootstrap to help you crate engaging presentations for SaaS apps and convert visitors into users.">
      <meta name="author" content="Inovatik">
      <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
      <meta property="og:site_name" content="" />
      <!-- website name -->
      <meta property="og:site" content="" />
      <!-- website link -->
      <meta property="og:title" content=""/>
      <!-- title shown in the actual shared post -->
      <meta property="og:description" content="" />
      <!-- description shown in the actual shared post -->
      <meta property="og:image" content="" />
      <!-- image link, make sure it's jpg -->
      <meta property="og:url" content="" />
      <!-- where do you want your post to link to -->
      <meta property="og:type" content="article" />
      <!-- Website Title -->
      <title>Home </title>
      <!-- Styles -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext" rel="stylesheet">
      <link href="css/bootstrap.css" rel="stylesheet">
      <link href="css/fontawesome-all.css" rel="stylesheet">
      <link href="css/swiper.css" rel="stylesheet">
      <link href="css/magnific-popup.css" rel="stylesheet">
      <link href="css/sstyle.css" rel="stylesheet">
      <link href="css/pme_style.css" rel="stylesheet">
      <link href="css/mystyle.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <!-- Favicon  -->
      <link rel="icon" href="images/logo_2.png">
   </head>
   <style>
      @font-face {
      font-family:"Berkshire Swash";
      src: url("css/berkshireswash-regular.ttf") format("truetype");
      }
   </style>
<body style="background-image: url('images/blue_bg.jfif'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;">

      <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top" style="background-color: 	#8c2b26; ">
         <div class="container">

            <a class="navbar-brand logo-image" href="home.php"><img src="images/logo_1.jpg" alt="alternative" style="border-radius: 50%; height:50px; width: 50px; "></a>
            <!-- Mobile Menu Toggle Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-awesome fas fa-bars"></span>
            <span class="navbar-toggler-awesome fas fa-times"></span>
            </button>
            <!-- end of mobile menu toggle button -->
            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
               <ul class="navbar-nav ml-auto">
                  <li class="nav-item">
                     <a class="active nav-link page-scroll" href="home.php">HOME <span class="sr-only">(current)</span></a>
                  </li>

                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="water-consumption.php">WATER CONSUMPTION</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="water-supply-schedule.php">WATER SUPPLY SCHEDULE</a> 
                  </li>

                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="notification_list.php">NOTIFICATIONS</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="user-complaint.php">COMPLAINTS</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link page-scroll" href="user-account.php">MY PROFILE</a>
                  </li>
               </ul>
               <span class="nav-item">
               <a class="btn-outline-sm" href="logout.php">LOG OUT</a>
               </span>
            </div>
         </div>
         <!-- end of container -->
      </nav>

      <header id="header" class="header" style="background-color: #0073e6; margin-top: -50px; height:400px;">
         <div class="header-content">
            <div class="container">
               <div class="row">
                  <div class="col-lg-6 col-xl-5">
                     <div class="text-container">
                        <h1 style="font-size: 60px; font-weight: bold; font-family: ">Pilar Water District System</p>
                        <h2 style="color: #f7ef22;">Marifosque, Pilar, Sorsogon</h2>
                        <!-- <h2  style="color: #fff;"><?php //echo $_SESSION['campus']; ?></h2> -->
                     </div>
                     <!-- end of text-container -->
                  </div>
                  <!-- end of col -->
                  <div class="col-lg-6 col-xl-7">
                     <div class="image-container">
                        <div class="img-wrapper">
                           <img class="img-fluid" src="images/logo_1.jpg" alt="alternative" style="height: 400px; border-radius: 50%;">
                        </div>
                        <!-- end of img-wrapper -->
                     </div>
                     <!-- end of image-container -->
                  </div>
                  <!-- end of col -->
               </div>
               <!-- end of row -->
            </div>
            <!-- end of container -->
         </div>
         <!-- end of header-content -->
      </header>
      <!-- end of header -->
      <svg class="header-frame" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 310" style="margin-top: -20px;">
         <defs>
            <style>.cls-1{fill:#0073e6 ;}</style>
         </defs>
         <title>header-frame</title>
         <path class="cls-1" d="M0,283.054c22.75,12.98,53.1,15.2,70.635,14.808,92.115-2.077,238.3-79.9,354.895-79.938,59.97-.019,106.17,18.059,141.58,34,47.778,21.511,47.778,21.511,90,38.938,28.418,11.731,85.344,26.169,152.992,17.971,68.127-8.255,115.933-34.963,166.492-67.393,37.467-24.032,148.6-112.008,171.753-127.963,27.951-19.26,87.771-81.155,180.71-89.341,72.016-6.343,105.479,12.388,157.434,35.467,69.73,30.976,168.93,92.28,256.514,89.405,100.992-3.315,140.276-41.7,177-64.9V0.24H0V283.054Z"/>
      </svg>
      <!-- end of header -->
      
      <br>
      <br>
      <br>
      <br>
      
      

    <!-- gallery -->
    <section class="swag text-center" id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <br>
                    <br>
                    <br>
                    <div class="above-heading" style="color: white; font-size: 15px; color: white;">Marifosque, Pilar, Sorsogon</div>
                    <h2 class="h2-heading" style="color: white;">Announcements List</h2>
                </div> <!-- end of col -->
            </div> <!-- end of row -->
        </div>
    </div>
</section>


<!-- PORTFOLIO ITEM  -->
<div class="container">
    <div class="col-lg-18">
            
        <?php
                $ann_index = "SELECT * FROM announcements ORDER BY announcement_id DESC LIMIT 3";
                $retrieve_ann_index = mysqli_query($db, $ann_index);
                 
                if (mysqli_num_rows($retrieve_ann_index)==0){
                      
                  echo "<center><img class='post_img' style='height: 300px; width: 70%; object-fit:cover;margin-top:5%; margin-left:auto; margin-right:auto;'src='images/details.png' ></center>
                                             <p style='text-align:center;'> No announcement yet. Uploaded announcements can be seen here</p>";
                } 
                else{
                echo '<div class="card" style="background-color: transparent;">';
                    echo '<div class=" row" style=" height:36rem; width: 100%; margin:1rem; overflow:auto;">';
                    while ($row = mysqli_fetch_array($home_announcements)) {
                        echo "<div class='post_card' style='background-color: white; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; margin: 2%; margin-bottom:1%;	width: 300px; height:550px; border-radius: 20px;'>";
                        echo "<a target='_blank' href='new_announcements/".$row['announcement_img']."' style='height:100px; width:100px; padding: 5px;' data-lightbox='roadtrip' title='".$row['announcement_text']."'><img style='border-radius: 10px; height:20%; width:50%; object-fit:cover; border: 2px solid #a1a1a1; margin-left:auto; margin-right:auto; display:flex; ' src='new_announcements/".$row['announcement_img']."' alt='".$row['announcement_text']."'></a>";
                        echo " <div class='post_container'>";
                        echo "<p>".$row['announcement_text']."</p> ";
                        echo "<p>".$row['announcement_venue']."</p> ";
                        echo "<p>From: ".$row['announcement_date']."</p> ";
                        echo "<p>To: ".$row['to_date']."</p> ";
                                    $text=substr($row['description'],0,50)."...";
                                             echo "<pre style='
                                             white-space: pre-wrap;
                                             white-space: -moz-pre-wrap;
                                             white-space: -pre-wrap;
                                             white-space: -o-pre-wrap;
                                             word-wrap: break-word;
                                             font-family: Open Sans, sans-serif;'>".$text."
                                             </pre>";
                        echo "<a href='read_announcement.php?announce=".$row['announcement_id']. "' ><strong>See More </strong></a>";
                        echo "</div>";
                        echo "</div>";
                    }
                }
        ?>
    </div>
            </div>
        </div>
        <!-- end of card -->
    </div>
</div>


<section class="swag text-center" id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <br>
                    <br>
                    <br>
                    <div class="above-heading" style="color: white; font-size: 15px;">Marifosque, Pilar, Sorsogon</div>
                    <h2 class="h2-heading" style="color: white;">Vision & Mission Summary</h2>
                </div> <!-- end of col -->
            </div> <!-- end of row -->
        </div>
    </div>
</section>
      <!-- Description -->
      <div class="cards-1">
         <div class="container">
            <!-- end of row -->
            <div class="row">
            <div class="col-lg-12">
                  
                  <!-- Card -->
                  <div class="card" style="width:80%; height: auto;">
                     <div class="card-body">
                        <h3 class="card-title" style ="font-family:'Brush Script MT',cursive; background-color: #892a25; color:white; height:30px;">Vision</h3>
                     </div>
                     <?php
                        $mission_retrieve= " SELECT * FROM vm";
                        $mission_display=mysqli_query($db,$mission_retrieve);
                        
                        while ($row2 = mysqli_fetch_array($mission_display)) {
                            ?>
                     <div style="height:auto; overflow:auto;">
                     <img class="img-fluid" src="images/vision.png" alt="alternative" style="height: 200px;">
                        <p style="text-align: center;"><?php echo $row2['Vision'];?></p>
                     </div>
                     <hr>
                     <?php }?>
                  </div>
                  <!-- end of card -->
               </div>

               <div class="col-lg-12">
                  
                  <!-- Card -->
                  <div class="card" style="width:80%; height: auto;">
                     <div class="card-body">
                        <h3 class="card-title" style ="font-family:'Brush Script MT',cursive; background-color: #892a25; color:white; height:30px;">Mission</h3>
                     </div>
                     <?php
                        $mission_retrieve= " SELECT * FROM vm";
                        $mission_display=mysqli_query($db,$mission_retrieve);
                        
                        while ($row2 = mysqli_fetch_array($mission_display)) {
                            ?>
                     <div style="height:auto; overflow:auto;">
                     <img class="img-fluid" src="images/mission.png" alt="alternative" style="height: 200px;">
                        <p style="text-align: center;"><?php echo $row2['Mission'];?></p>
                     </div>
                     <hr>
                     <?php }?>
                  </div>
                  <!-- end of card -->
               </div>
               <!-- end of col -->
                        </div>
                        </div>
                        </div>
   
      <!-- Footer -->
      <svg class="footer-frame" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 79">
         <defs>
            <style>.cls-2{fill:#0073e6;}</style>
         </defs>
         <title>footer-frame</title>
         <path class="cls-2" d="M0,72.427C143,12.138,255.5,4.577,328.644,7.943c147.721,6.8,183.881,60.242,320.83,53.737,143-6.793,167.826-68.128,293-60.9,109.095,6.3,115.68,54.364,225.251,57.319,113.58,3.064,138.8-47.711,251.189-41.8,104.012,5.474,109.713,50.4,197.369,46.572,89.549-3.91,124.375-52.563,227.622-50.155A338.646,338.646,0,0,1,1920,23.467V79.75H0V72.427Z" transform="translate(0 -0.188)"/>
      </svg>
      <div class="footer" style="background-color: #0073e6;">
         <div class="container">

            </div>
            <!-- end of row -->
         </div>
         <!-- end of container -->
      </div>
      </div>
      <!-- end of footer -->
      <!-- end of footer -->
     
      <!-- Scripts -->
      <script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
      <script src="js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
      <script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
      <script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
      <script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
      <script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
      <script src="js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
      <script src="js/scripts.js"></script> <!-- Custom scripts -->
   </body>
</html>