<?php

  session_start();

    include_once('../config/conn/db-connection.php');
    include_once('../config/class/sap_model.php');

if(!isset($_SESSION['logged_in']))
    {
       header("location:../index.php");
    }else{

    $user_session = trim($_SESSION['user_no']);

    $fetch = new SAP_infosytem();

    // $countpet = $fetch->count_pets(); 
    // $countpetproducts = $fetch->count_petproducts();
    // $countcountvendors = $fetch->count_vendors(); 
    // $countservices = $fetch->count_services();   
?>



<?php include 'header/main-header.php';?>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Info boxes -->




    <div class="wrapper row-offcanvas row-offcanvas-left">

<div class="breadcrumb">
   <div class="w3-content w3-section">
  <img class="mySlides" src="images/requirements/00.png" style="width:100%; height: 200px;">
  <img class="mySlides" src="images/requirements/01.jpg" style="width:100%; height: 200px;">
  <img class="mySlides" src="images/requirements/02.jpg" style="width:100%; height: 200px;">
  <img class="mySlides" src="images/requirements/03.jpg" style="width:100%; height: 200px;">
  <img class="mySlides" src="images/requirements/05.jpg" style="width:100%; height: 200px;">
  <img class="mySlides" src="images/requirements/06.jpg" style="width:100%; height: 200px;">
</div>
</div>
<center>
<h1 class="ml5">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters letters-left">Welcome</span>
    <span class="letters ampersand">to</span>
    <span class="letters letters-right">Home Page</span>
    <span class="line line2"></span>
  </span>
</h1>  
</center>

<div class="flex-container">
  <div class="flex-item-left" style="background-color:#21618C">
  <h2 style="text-align: center;">Social Amelioration Program</h2>
          <p style="font-size: 15px; color: white; text-align: justify;">
            The Social Amelioration Program grants a P5,000 to P8,000 monthly cash subsidy to low-income families for two months, depending on the area of residence. The subsidies provide marginalized sectors of society the means to afford basic needs during the pandemic. Common social services programs include unemployment benefits, child support, medical assistance, pensions, pregnancy leave, maternal leave…whenever a citizen requests financial assistance or compensation established by legislation from the authorities. SAP Social Services Management solution is designed for public sector organizations that provide services and cash assistance, funded as social assistance programs for the general welfare of individuals or families.
          </p>
          </div>
 <div class="flex-item-right" style="background-color:#3498DB;">
  <h2 style="text-align: center;">Barangay San Lucas 1,San Pablo City , Laguna</h2>
  <p style="font-size: 15px; color: white; text-align: justify;">Barangay San Lucas 1 (commonly known as Malinaw) is one of the 80 barangays of San Pablo City. Located along the shores of Sampaloc Lake, It’s population as determined by the 2021 Census are around 5,954 people, with a total household of 2,900 which impart the 2.2% of the total population of San Pablo City. San Lucas 1 is situated at approximately 14.0816, 121.3270, in the island of Luzon. Elevation at these coordinates is estimated at 114.2 meters or 374.7 feet above mean sea level. San Lucas 1 is rural barangay, with average living neighborhoods. As the pandemic hit the Philippines, Barangay San Lucas, its people rather is one of the many affected citizens. </p>
</div>
</div>
<Br>


<h2  style="text-align: center; color: solid-black; background-color: white; height: 55px;width: 100%; ">Who are qualified to receive SAP?</h2>
<div class="flex-container">
  <div class="flex-item-left">
<img src="images/requirements/1.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
 <div class="flex-item-right">
<img  src="images/requirements/2.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
</div>

 <div class="flex-container">
  <div class="flex-item-left">
    <img src="images/requirements/3.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
 <div class="flex-item-right">
   <img src="images/requirements/4.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
</div>

 <div class="flex-container">
<div class="flex-item-left">
    <img src="images/requirements/5.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
 <div class="flex-item-right">
   <img src="images/requirements/6.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
</div>

<div class="flex-container">
<div class="flex-item-left">
    <img src="images/requirements/7.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
<div class="flex-item-right">
   <img src="images/requirements/8.jpg" style="width: 100%; height: 270px; border: 5px solid #555;"> 
</div>
</div>
<div class="flex-container">
 <div class="flex-item-left">
    <img src="images/requirements/9.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
<div class="flex-item-right">
   <img src="images/requirements/10.jpg" style="width: 100%; height: 270px; border: 5px solid #555;">
</div>
</div>
<div class="box">
    <div class="imgwrap">
       <div class="flex-item-left2">
         <div class="flex-item-right">
            <img id="below" src="images/requirements/11.jpg" style="  height: 270px;border: 5px solid #555;">
          </div>
        </div>
    </div>
</div>
<!-- <div class="big_container">
 <div class="flex-item-left2">
  <div class="flex-item-right">
    <img id="below" src="images/requirements/11.jpg" style="border: 5px solid #555;">
  </div>
   </div>
</div>
 -->
<br>
</body>
<footer style="margin-bottom: -4%">
  <img alt="Brandd" src="./images/requirements/SAP1.png" alt="left" style="width: 80px; height: 65px;" >
  <p>SOCIAL AMELIORATION PROGRAM<br> 
  
  <p style="font-size: 15px; color: white; text-align: center;">SAP Information System Website --- CopyRight 2021</p>
<p style="font-size: 12px; color: white; text-align: center;">Project by: Alcontado, Alpe, Copioso</p>
</footer>
<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>



<script type="text/javascript">
  $(function() {
      $("#table").dataTable({
         "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,5 ] } ],"aaSorting": []
      });
  });
  anime.timeline({loop: true})
  .add({
    targets: '.ml5 .line',
    opacity: [0.5,1],
    scaleX: [0, 1],
    easing: "easeInOutExpo",
    duration: 700
  }).add({
    targets: '.ml5 .line',
    duration: 600,
    easing: "easeOutExpo",
    translateY: (el, i) => (-0.625 + 0.625*2*i) + "em"
  }).add({
    targets: '.ml5 .ampersand',
    opacity: [0,1],
    scaleY: [0.5, 1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
  }).add({
    targets: '.ml5 .letters-left',
    opacity: [0,1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
  }).add({
    targets: '.ml5 .letters-right',
    opacity: [0,1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
  }).add({
    targets: '.ml5',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
</script>





        <!-- /.row -->
      </div><!--/. container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

<?php } ?>

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="../dist/js/demo.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="../plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="../plugins/raphael/raphael.min.js"></script>
<script src="../plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="../plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="../plugins/chart.js/Chart.min.js"></script>

<!-- PAGE SCRIPTS -->
<script src="../dist/js/pages/dashboard2.js"></script>
</body>
</html>
