
<?php include 'includes/header.php'; ?>
<?php include 'includes/sidebar.php'; ?>
<?php require 'includes/db_connect.php'; ?>

<style>

.text-orange{
color:#ff7a00;
}

.bg-orange{
background:#ff7a00;
}

.btn-orange{
background:#ff7a00;
color:white;
border:none;
}

.btn-orange:hover{
background:#e36d00;
color:white;
}

.content-wrapper{
width:100%;
padding:0px;
}

/* prevent table breaking on mobile */
.table-responsive{
overflow-x:auto;
}

/* allow pagination to wrap on small screens */
.pagination{
flex-wrap:wrap;
}

</style>


<div class="content-wrapper">

<div class="container">

<h3 class="text-orange fw-bold">Street Naming Management</h3>
<p class="text-muted">Manage all registered streets within the municipality.</p>


<!-- ========================= -->
<!-- STATISTICS CARDS -->
<!-- ========================= -->

<div class="row g-3 mt-3">

<div class="col-xl-4 col-lg-4 col-md-6 col-12">
<div class="card shadow text-center h-100">
<div class="card-body">

<h6 class="text-orange">Total Streets</h6>

<h3>
<?php
$result = $conn->query("SELECT COUNT(*) AS total FROM registered_streets");
$data = $result->fetch_assoc();
echo $data['total'] ?? 0;
?>
</h3>

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


<div class="col-xl-4 col-lg-4 col-md-6 col-12">
<div class="card shadow text-center h-100">
<div class="card-body">

<h6 class="text-orange">Pending Approvals</h6>

<h3>
<?php
$result = $conn->query("SELECT COUNT(*) AS total FROM renewal");
$data = $result->fetch_assoc();
echo $data['total'] ?? 0;
?>
</h3>

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


<div class="col-xl-4 col-lg-4 col-md-12 col-12">
<div class="card shadow text-center h-100">
<div class="card-body">

<h6 class="text-orange">Approved Streets</h6>

<h3>
<?php
$result = $conn->query("SELECT COUNT(*) AS total FROM registered_streets");
$data = $result->fetch_assoc();
echo $data['total'] ?? 0;
?>
</h3>

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

</div>


<!-- ========================= -->
<!-- ADD STREET BUTTON -->
<!-- ========================= -->

<div class="row mt-4">

<div class="col-12 text-md-end text-center">

<a href="add_street.php" class="btn btn-orange px-4 py-2 shadow">
+ Add New Street
</a>

</div>

</div>



<!-- ========================= -->
<!-- STREET TABLE -->
<!-- ========================= -->

<div class="card mt-4 shadow">

<div class="card-header bg-orange">

<div class="row align-items-center">

<div class="col-md-6 col-12 mb-2 mb-md-0">
<h5 class="m-0 text-dark">All Registered Streets</h5>
</div>

<div class="col-md-6 col-12">

<input type="text"
id="streetSearch"
class="form-control form-control-sm"
placeholder="Search street...">

</div>

</div>

</div>



<div class="card-body">

<div id="streetTableWrapper" class="table-responsive">

<?php include 'ajax_street_table_admin.php'; ?>

</div>

</div>

</div>

</div>
</div>



<script>

/* ========================= */
/* REALTIME SEARCH */
/* ========================= */

document.getElementById('streetSearch').addEventListener('keyup', function(){

let query = this.value;

fetch("ajax_street_table_admin.php?q=" + query)

.then(response => response.text())

.then(data => {

document.getElementById('streetTableWrapper').innerHTML = data;

});

});


/* ========================= */
/* AJAX PAGINATION */
/* ========================= */

document.addEventListener("click", function(e){

if(e.target.classList.contains("pagination-link")){

e.preventDefault();

let page = e.target.getAttribute("data-page");

let q = document.getElementById("streetSearch").value;

fetch("ajax_street_table_admin.php?page=" + page + "&q=" + q)

.then(res => res.text())

.then(data => {

document.getElementById("streetTableWrapper").innerHTML = data;

});

}

});

</script>


<?php include 'includes/footer.php'; ?>

