<?php

session_start();

if(!isset($_SESSION['user_id'])){
    header("Location: login.php");
    exit;
}

require_once "config.php";


// Total Expenses
$stmt = $pdo->query("
    SELECT COALESCE(SUM(total),0) 
    FROM expenses
");

$totalExpenses = $stmt->fetchColumn();


// Current Month Expenses
$stmt = $pdo->query("
    SELECT COALESCE(SUM(total),0)
    FROM expenses
    WHERE MONTH(expense_date)=MONTH(CURRENT_DATE())
    AND YEAR(expense_date)=YEAR(CURRENT_DATE())
");

$monthExpenses = $stmt->fetchColumn();


// Today's Expenses
$stmt = $pdo->query("
    SELECT COALESCE(SUM(total),0)
    FROM expenses
    WHERE expense_date = CURDATE()
");

$todayExpenses = $stmt->fetchColumn();


// Pending Expense Requests
$stmt = $pdo->query("
    SELECT COUNT(*)
    FROM expense_requests
    WHERE status='Pending'
");

$pendingRequests = $stmt->fetchColumn();


// Approved Expenses
$stmt = $pdo->query("
    SELECT COUNT(*)
    FROM expense_requests
    WHERE status='Approved'
");

$approvedRequests = $stmt->fetchColumn();


// Paid Expenses
$stmt = $pdo->query("
    SELECT COUNT(*)
    FROM expense_requests
    WHERE status='Paid'
");

$paidExpenses = $stmt->fetchColumn();


// Total Vendors
$stmt = $pdo->query("
    SELECT COUNT(*)
    FROM vendors
    WHERE status=1
");

$totalVendors = $stmt->fetchColumn();


// Total Employees / Users
$stmt = $pdo->query("
    SELECT COUNT(*)
    FROM users
    WHERE status=1
");

$totalUsers = $stmt->fetchColumn();



// Recent Expenses

$stmt=$pdo->query("
SELECT 
expenses.*,
expense_categories.category_name,
vendors.vendor_name

FROM expenses

LEFT JOIN expense_categories
ON expenses.category_id=expense_categories.id

LEFT JOIN vendors
ON expenses.vendor_id=vendors.id

ORDER BY expenses.id DESC

LIMIT 10
");


$recentExpenses=$stmt->fetchAll();



?>

<!DOCTYPE html>

<html>

<head>


<meta name="viewport"
content="width=device-width,initial-scale=1">


<title>
Dashboard
</title>


<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">


<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<link rel="stylesheet" href="assets/css/sidebar.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>



<style>


*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;
}



body{

background:#f4f7f9;

transition:.3s;

}



body.dark{

background:#111827;

color:white;

}







.content{

margin-left:260px;

padding:25px;

}



.topbar{

display:flex;

justify-content:space-between;

align-items:center;

}


.toggle{

font-size:25px;

cursor:pointer;

color:#059669;

}



.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(160px,1fr));

gap:15px;

margin-top:20px;

}


.card{

background:white;

border-radius:14px;

padding:15px;

display:flex;

align-items:center;

gap:12px;

box-shadow:
0 5px 20px rgba(0,0,0,.08);

transition:.3s;

}


body.dark .card{

background:#1f2937;

}


.card:hover{

transform:translateY(-3px);

}



.icon-box{

width:45px;

height:45px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

background:#ecfdf5;

color:#059669;

font-size:20px;

}



.card-info p{

font-size:12px;

color:#777;

margin-bottom:5px;

}


body.dark .card-info p{

color:#ccc;

}


.number{

font-size:18px;

font-weight:700;

color:#065f46;

}


body.dark .number{

color:#10b981;

}




@media(max-width:600px){


.cards{

grid-template-columns:
repeat(2,1fr);

gap:10px;

}


.card{

padding:12px;

}


.icon-box{

width:38px;

height:38px;

font-size:17px;

}


.number{

font-size:15px;

}

}


.chart{

background:white;

margin-top:25px;

padding:20px;

border-radius:15px;

}


body.dark .chart{

background:#1f2937;

}




.mobile-btn{

display:none;

font-size:25px;

cursor:pointer;

}



@media(max-width:768px){


.sidebar{

left:-280px;

}


.sidebar.active{

left:0;

}


.content{

margin-left:0;

padding:15px;

}



.mobile-btn{

display:block;

}



.overlay{

display:none;

position:fixed;

inset:0;

background:#0008;

z-index:999;

}



.overlay.show{

display:block;

}



}


</style>


</head>



<body>


<?php include "sidebar.php"; ?>



<div class="content">


<div class="topbar">


<i class="fa fa-bars mobile-btn"
onclick="openMenu()">
</i>



<h2>
Dashboard
</h2>


<i class="fa fa-moon toggle"
onclick="theme()">
</i>



</div>




<div class="cards">


<div class="card">

<div class="icon-box">

<i class="fa fa-money-bill"></i>

</div>


<div class="card-info">

<p>Total Expenses</p>

<div class="number">

 <?=number_format($totalExpenses)?>

</div>

</div>


</div>





<div class="card">


<div class="icon-box">

<i class="fa fa-calendar"></i>

</div>


<div class="card-info">

<p>This Month</p>

<div class="number">

 <?=number_format($monthExpenses)?>

</div>

</div>


</div>





<div class="card">


<div class="icon-box">

<i class="fa fa-wallet"></i>

</div>


<div class="card-info">

<p>Today</p>

<div class="number">

<?=number_format($todayExpenses)?>

</div>

</div>


</div>










<div class="card">


<div class="icon-box">

<i class="fa fa-check-circle"></i>

</div>


<div class="card-info">

<p>Paid</p>

<div class="number">

<?=$paidExpenses?>

</div>

</div>


</div>





<div class="card">


<div class="icon-box">

<i class="fa fa-building"></i>

</div>


<div class="card-info">

<p>Vendors</p>

<div class="number">

<?=$totalVendors?>

</div>

</div>


</div>



</div>



<div class="chart">

<h3>
Expense Overview
</h3>


<canvas id="expenseChart"></canvas>


</div>


</div>





<script>


function openMenu(){

document.getElementById("sidebar")
.classList.add("active");


document.getElementById("overlay")
.classList.add("show");

}


function closeMenu(){

document.getElementById("sidebar")
.classList.remove("active");


document.getElementById("overlay")
.classList.remove("show");

}



function theme(){

document.body.classList.toggle("dark");

localStorage.setItem(
"dark",
document.body.classList.contains("dark")
);

}


if(localStorage.getItem("dark")=="true"){

document.body.classList.add("dark");

}



new Chart(
document.getElementById('expenseChart'),
{

type:'line',

data:{

labels:[
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun'
],

datasets:[{

label:'Expenses',

data:[
120000,
230000,
180000,
350000,
250000,
400000
]

}]

}

});



</script>



</body>

</html>