<!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.0">
<title>Barangay Resident Records</title>
<link rel="icon" type="image/x-icon" href="./css/img/brgy_logo.jpg">
<link rel="stylesheet" href="css/residentstyle.css">
<!-- Script for Table or Live Search -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- ########## Navigation ########## -->
<div class="container">
<div class="navigation">
<ul>
<li><a href="admindashboard.php">
<span class="icon"> <img src="./css/img/brgy_logo.jpg" height="50px"></span>
<span class="title">Barangay <?php
$con=new mysqli('localhost','root','','final_bis');
$query = "SELECT * FROM barangayinfo ";
$result = mysqli_query($con, $query);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($result)){
echo $row['brgyname'];
}
}
?></span>
</a>
</li>
<li><a href="admindashboard.php">
<span class="icon"><img src="./css/img/house.png" height="30px"></span>
<span class="title">Dashboard</span>
</a>
</li>
<li><a href="official.php">
<span class="icon"><img src="./css/img/organization.png" height="30px"></span>
<span class="title">Barangay Officials</span>
</a>
</li>
<li><a href="resident.php" class="clicked">
<span class="icon"><img src="./css/img/newresident.png" height="30px"></span>
<span class="title">Resident Records</span>
</a>
</li>
<li><a href="COI.php">
<span class="icon"><img src="./css/img/essay.png" height="30px"></span>
<span class="title">Certificate of Indigency</span>
</a>
</li>
<li><a href="#">
<span class="icon"><img src="./css/img/essay.png" height="30px"></span>
<span class="title">Barangay Clearance</span>
</a>
</li>
<li><a href="blotter.php">
<span class="icon"><img src="./css/img/interview.png" height="30px"></span>
<span class="title">Blotter Records</span>
</a>
</li>
<li><a href="requesteddocument.php">
<span class="icon"><img src="./css/img/requested.png" height="30px"></span>
<span class="title">Requested Documents</span>
</a>
</li>
<li><a href="barangayinformation.php">
<span class="icon"><img src="./css/img/information.png" height="30px"></span>
<span class="title">Barangay Information</span>
</a>
</li>
<li><a href="services.php">
<span class="icon"><img src="./css/img/service.png" height="30px" height="50px"></span>
<span class="title">Services</span>
</a>
</li>
<li><a href="logout.php">
<span class="icon"><img src="./css/img/shutdown.png" height="30px"></span>
<span class="title">Logout</span>
</a>
</li>
</ul>
</div>
<!-- ########## Main ########## -->
<div class="main">
<div class="topbar">
<div class="toggle">
<ion-icon name="menu-outline"></ion-icon>
</div>
<div class="user">
<a href="#"><img src="" alt=""></a>
</div>
</div>
<div class="table-container">
<img src="./css/img/brgy_logo.jpg" height="90px" alt="Sky" style="display: block; margin-right: auto; margin-left: auto;">
<h1 class="table-heading">Barangay <?php
$con=new mysqli('localhost','root','','final_bis');
$query = "SELECT * FROM barangayinfo ";
$result = mysqli_query($con, $query);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0){
while ($row = mysqli_fetch_assoc($result)){
echo $row['brgyname'];
}
}
?> Resident Records</h1>
<!-- ================ Order Details List ================= -->
<button type="button" class="table-btns" data-toggle="modal" data-target="#studentmodal">+ Resident</button>
<input class="search-bar" type="text" autocomplete="off" name="search_text" id="search_text" placeholder="Search..."/>
<div id="result"></div>
<div class="containerr" id="studentmodal" tabindex="-1" role="dialog" aria-labelledby="studentmodallabel" hidden>
<div class="title">New Resident Record</div>
<div class="content">
<form method="post" action="residentinsert.php" enctype="multipart/form-data">
<div class="form-element">
<input type="file" id="file-1" accept="image/*" name="image">
<label for="file-1" id="file-1-preview"><img src="https://bit.ly/3ubuq5o" alt="">
<div>
<span>+</span>
</div>
</label>
</div>
<div class="user-details">
<div class="input-box">
<span class="details" for="firstname">First Name</span>
<input type="text" placeholder="Enter First Name" id="firstname" name="firstname" autocomplete="off" required>
</div>
<div class="input-box">
<span class="details" for="middlename">Middle Name</span>
<input type="text" placeholder="Enter Middle Name" id="middlename" name="middlename" autocomplete="off">
</div>
<div class="input-box">
<span class="details" for="lastname">Last Name</span>
<input type="text" placeholder="Enter Last Name" id="lastname" name="lastname" autocomplete="off" required>
</div>
<div class="input-box">
<span class="details" for="alias">Alias</span>
<input type="text" placeholder="Enter Alias" id="alias" name="alias" autocomplete="off" required>
</div>
<div class="input-box">
<span class="details" for="placeofbirth">Place of Birth</span>
<input type="text" placeholder="Enter Birth Place" id="placeofbirth" name="placeofbirth" autocomplete="off" required>
</div>
<div class="input-box">
<span class="details" for="birthdate">Birthdate</span>
<input class="input" type="date" id="birthdate" name="birthdate" Required autocomplete="off">
</div>
<div class="input-box">
<span class="details" for="age">Age</span>
<input type="text" placeholder="Enter Age" id="age" name="age" autocomplete="off" required>
</div>
<div class="input-box">
<span class="details" for="healthstatus">Health Status</span>
<select name="healthstatus" id="healthstatus">
<option value="" disabled selected>Select Health Status</option>
<option value="Physically Fit">Physically Fit</option>
<option value="Frail/Sickly">Frail/Sickly</option>
<option value="PWD">PWD</option>
<option value="Bedridden">Bedridden</option>
</select>
</div>
<div class="input-box">
<span class="details" for="civilstatus">Civil Status</span>
<select name="civilstatus" id="civilstatus">
<option value="" disabled selected>Select Civil Status</option>
<option value="Married">Married</option>
<option value="Single">Single</option>
<option value="Divorced">Divorced</option>
<option value="Widowed">Widowed</option>
</select>
</div>
<div class="input-box">
<span class="details" for="gender">Gender</span>
<select name="gender" id="gender">
<option value="" disabled selected>Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="input-box">
<span class="details">Voter Status</span>
<select name="voterstatus" id="voterstatus">
<option value="" disabled selected>Select Voter Status</option>
<option value="Registered Voter">Registered Voter</option>
<option value="Unregistered Voter">Unregistered Voter</option>
</select>
</div>
<div class="input-box">
<span class="details" for="emailaddress">Email Address</span>
<input type="text" id="emailaddress" name="emailaddress" placeholder="Enter Email Address" autocomplete="off" >
</div>
<div class="input-box">
<span class="details" for="contactnumber">Contact Number</span>
<input type="text" id="contactnumber" name="contactnumber" placeholder="Enter Contact Number" autocomplete="off" >
</div>
<div class="input-box">
<span class="details" for="occupation">Occupation</span>
<input type="text" id="occupation" name="occupation" placeholder="Enter Occupation" autocomplete="off" required>
</div>
</div>
<div class="input-boxs">
<span class="detailss" for="address">Address</span>
<input type="text" id="address" name="address" placeholder="Enter Address" autocomplete="off" required>
</div>
<div class="button">
<button name="saveresident">Add New</button>
<button type="button" class="form-btn" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
<!-- ########## End of Adding New Officials ########## -->
</div>
</div>
<!-- ########## Scripts ########## -->
<!-- ########## Image Preview JS ########## -->
<script src="js/previewimgofficials.js"></script>
<!-- ########## End of Image Preview JS ########## -->
<script src="js/main.js"></script>
\
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
</body>
</html>
<!-- ########## Live Search Script ########## -->
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"residentsearch.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
<!-- ########## End Live Search Script ########## -->