<?php

session_start();


if(!isset($_SESSION['user_id'])){

    header("Location: login.php");
    exit;

}


require_once "config.php";



$id=$_GET['id'] ?? 0;


if(!$id){

    header("Location: expenses.php");
    exit;

}




$stmt=$pdo->prepare("

SELECT

expenses.*,

expense_categories.category_name,

vendors.vendor_name,

expense_items.item_name,

expense_items.registration_no,

users.fullname


FROM expenses


LEFT JOIN expense_categories

ON expenses.category_id=expense_categories.id

LEFT JOIN expense_items

ON expenses.item_id=expense_items.id



LEFT JOIN vendors

ON expenses.vendor_id=vendors.id


LEFT JOIN users

ON expenses.created_by=users.id


WHERE expenses.id=?

");


$stmt->execute([$id]);


$expense=$stmt->fetch();



if(!$expense){

    die("Expense not found");

}



?>



<!DOCTYPE html>

<html>

<head>


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


<title>
Expense Details
</title>




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



<link rel="stylesheet" href="assets/css/sidebar.css">



<link rel="stylesheet"

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



<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;

align-items:center;

justify-content:space-between;

margin-bottom:20px;

}




.mobile-btn{

display:none;

font-size:25px;

cursor:pointer;

color:#065f46;

}



.toggle{

font-size:25px;

cursor:pointer;

color:#059669;

}





.card{


background:white;

padding:25px;

border-radius:18px;

box-shadow:0 5px 20px #0002;


}



body.dark .card{

background:#1f2937;

}






.title{

display:flex;

align-items:center;

gap:10px;

color:#065f46;

margin-bottom:25px;

}




.details{


display:grid;

grid-template-columns:

repeat(2,1fr);


gap:15px;


}




.item{


background:#f8fafc;

padding:15px;

border-radius:12px;


}



body.dark .item{


background:#374151;


}




.item label{


display:block;

font-size:12px;

color:#64748b;

margin-bottom:5px;


}



body.dark .item label{

color:#d1d5db;

}




.item strong{

font-size:16px;

}




.amount{


font-size:25px;

font-weight:700;

color:#059669;

}




.description{


margin-top:20px;

background:#f8fafc;

padding:18px;

border-radius:12px;

line-height:1.6;


}



body.dark .description{

background:#374151;

}




.buttons{


display:flex;

gap:10px;

margin-top:25px;


}




.btn{


padding:12px 22px;

background:#059669;

color:white;

text-decoration:none;

border-radius:10px;

}



.back{


background:#64748b;

}




.overlay{


display:none;

position:fixed;

inset:0;

background:#0008;

z-index:999;


}



.overlay.show{

display:block;

}







@media(max-width:768px){


.content{

margin-left:0;

padding:15px;

}



.mobile-btn{

display:block;

}



.sidebar{

left:-260px;

}



.sidebar.active{

left:0;

}





.details{


grid-template-columns:1fr;


}



.card{


padding:18px;

}





.buttons{


flex-direction:column;


}



.btn{


text-align:center;

width:100%;

}


}





</style>



</head>


<body>




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




<div class="overlay"

id="overlay"

onclick="closeMenu()">

</div>






<div class="content">





<div class="topbar">



<i class="fa fa-bars mobile-btn"

onclick="openMenu()">

</i>



<h2>

<i class="fa fa-file-invoice-dollar"></i>

Expense Details

</h2>




<i class="fa fa-moon toggle"

onclick="theme()">

</i>



</div>







<div class="card">





<div class="title">


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


<h3>
Expense Information
</h3>


</div>






<div class="details">

<div class="item">

<label>
Expense Item
</label>

<strong>

<?= $expense['item_name'] ?? 'None' ?>

<?php if($expense['registration_no']){ ?>

(<?=$expense['registration_no']?>)

<?php } ?>

</strong>

</div>



<div class="item">

<label>
Expense Date
</label>


<strong>

<?=date("d M Y", strtotime($expense['expense_date']))?>

</strong>


</div>







<div class="item">

<label>
Category
</label>


<strong>

<?=$expense['category_name']?>

</strong>


</div>







<div class="item">

<label>
Vendor
</label>


<strong>

<?= $expense['vendor_name'] ?? 'Unknown Vendor' ?>

</strong>


</div>







<div class="item">

<label>
Payment Method
</label>


<strong>

<?=$expense['payment_method']?>

</strong>


</div>







<div class="item">


<label>
Amount
</label>


<strong class="amount">

MWK <?=number_format($expense['total'])?>

</strong>


</div>







<div class="item">


<label>
Created By
</label>


<strong>

<?= $expense['fullname'] ?? 'System'; ?>

</strong>


</div>





</div>







<div class="description">


<label>

<strong>
Description
</strong>

</label>


<br>


<?=htmlspecialchars($expense['description'])?>


</div>








<div class="buttons">



<a href="edit_expense.php?id=<?=$expense['id']?>"

class="btn">


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

Edit Expense


</a>






<a href="javascript:history.back()" class="btn">

<i class="fa fa-arrow-left"></i>

Back

</a>




</div>






</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");


}



</script>





</body>

</html>