<?php
include("db/cn.php");
if(isset($_SESSION['user_name']) && isset($_SESSION['user_role'])&& isset($_SESSION['outlet_name'])
&& isset($_SESSION['outlet_address'])) {
    $userName = $_SESSION['user_name'];
    $userRole = $_SESSION['user_role'];
	$outlet_address = $_SESSION['outlet_address'];
	$outlet_name = $_SESSION['outlet_name'];
}


if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["creditor"])){

	$cr_name = $_POST["cr_name"];
	$cr_address = $_POST["cr_address"];
	 // File upload handling
    $uploadDirectory = "uploads/"; // Directory where uploaded files will be saved
    $fileName = basename($_FILES["file"]["name"]);
    $targetFilePath = $uploadDirectory . $fileName;
    $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
	$cr_id = $_POST["cr_id"];
	 mysqli_query($connection,"insert into   credit_note(cr_name,cr_address,cr_image,cr_id,user_name,user_role,outlet_name,outlet_address,date_time)
values('".$cr_name."','".$cr_address."','".$targetFilePath."','".$cr_id."','".$userName."'
,'".$userRole."','".$outlet_name."','".$outlet_address."','".$date_time."')");

}
// Retrieve creditor from the database
$credit_query = "SELECT * FROM credit_note";
$credit_result = $connection->query($credit_query);



?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Creditor Management</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/custom_css.css" />
    <!-- QRCode.js -->
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</head>

<style>
/* Custom styles for sidebar */
    .sidebar {
    width: 100px;
    background-color: #8A1218;
    position: fixed;
    bottom: 0;
	top:60px;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
    z-index: 1;
    height: 100%;
    border-radius: 0px;
}
    .sidebar.hide {
      transform: translateX(-100px); /* Move sidebar out of the viewport when it is hidden */
    }
       .sidebar .nav-item {
    padding: 10px 0 ;
    text-align: center;
    position: relative;
	font-size:12px;
}
    .sidebar .nav-link {
      color: #fff;
      position: relative; /* Ensure icon and text are positioned relative to the nav link */
      z-index: 2; /* Ensure the text and icon are above the hover background */
    }
    .sidebar .nav-link i {
      margin-bottom: 5px; /* Adjust the margin of the icon */
    }
    /* Custom styles for hover effect */
    .sidebar .nav-item:hover:after {
      background-color: #fff;
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 1; /* Ensure the hover background is below the text and icon */
    }
    .sidebar .nav-item:hover .nav-link {
      color: #8A1218;
    }
    /* Custom styles for divider */
    .sidebar .nav-item:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #fff;
      transition: height 0.3s ease-in-out; /* Transition effect for smooth animation */
    }
    /* Custom styles for header */
    .header {
      background-color: #8A1218;
      color: #fff;
      padding: 10px;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2;
	  height:69px;
	  box-shadow:#FFF 2px 0px 0px 0px; /* Ensure header appears above sidebar */
    }
    .header .navbar-toggler {
      color: #fff;
    }
    .header .navbar-toggler-icon {
      color: #fff; /* Set the color of the toggle button to white */
    }
    .header .navbar-toggler.white {
      color: #fff !important; /* Ensure the toggle button is white */
    }
    .header .navbar-brand {
      color: #fff; /* Set navbar brand text color to white */
    }
    .header .nav-item .nav-link {
      color: #fff; /* Set nav link text color to white */
    }
    .main-content {
      margin-top: 50px; /* Height of fixed header + padding */
      margin-left: 100px; /* Width of sidebar */
      padding-top: 30px; /* Height of fixed header */
    }
	/* Custom styles for search bar */
    .search-container {
      display: flex;
      align-items: center;
      width: 300px;
      margin: 2px auto;
    }
    .search-input {
      width: 100%;
      padding: 10px 30px 10px 10px; /* Adjust padding to accommodate the icon */
      border: 1px solid #ccc;
      border-radius: 20px;
      font-size: 16px;
    }
    .search-icon {
      position: relative;
      left: -25px; /* Adjust the position of the icon */
      color: #aaa;
    }
    .search-icon i {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
.btn-dark
         {
			 background:#8A1218;
			 color:#fff;
			 border-radius:
                 	}
		.btn-dark:hover{
			background:#fff;
			 color:#8A1218;
			 border:1px solid #8A1218;
			}	
			.bg-dark2{
			background:#8A1218;
			color:#fff;	
				}	
	
	 .modal-content {
            animation: modal-animation 0.5s;
        }

        @keyframes modal-animation {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
</style>

<body>

<?php
if(isset($msg)){
	
	echo $msg;
	}
?>
<?php include("common/hd.php");?>
<!-- Sidebar -->
<?php include("common/sd.php"); ?>
<div class="main-content">
<br />
<div class="container">
<div class="row">
<div class="col-sm-9">
<h3 style="color:#881218;">Credit Management</h3>
</div>
<div class="col-sm-3">
<a href="pos.php"><button type="button" class="btn btn-dark"><i class="fa fa-arrow-left"></i></button></a>
</div>
</div>

</div>
<br />
<div class="container">
      <div class="row">
        <div class="col-sm-10" style="">
            <div class="row text-center" >
                <?php
                    // Fetch product data from the database
                    $sql = "SELECT * FROM credit_note";
                    $result = $connection->query($sql);

                    if ($result->num_rows > 0) {
                        while ($row = $result->fetch_assoc()) {
                            // Set a unique ID for each product
                            $crId = $row["cr_id"];
							$cr_Nickname= $row["cr_nickname"];
                            echo '<div id="product_' . $crId . '" class="col-sm-3 mb-3">
                                    <div class="card">
                                        <div class="card-body">
										
                        <a href="creditor_detail.php?cr_id='.$crId.'&&cr_nickname='.$cr_Nickname.'" style="color:#000;list-style-type:none;
											text-decoration:none;">
											<h5 class="card-title text-uppercase">' . $row["cr_name"] . '</h5>
                                            <p class="card-text text-uppercase">' . $row["cr_id"] . '</p>
                                            <img src=' . $row["cr_image"] . ' height="90" width="90" />
											
                                            <br>
                                            </a>
                                        </div>
                                    </div>
                                </div>';
                            echo '';
                        }
                    }

                    // Close the database connection
                    $connection->close();
                ?>
                </div>
        </div>
        
        <div class="col-sm-2" >
        <button type="button" class="btn btn-dark form-control" data-toggle="modal" data-target="#addProductModal">
                New Creditor
            </button>
       <!-- Modal HTML -->
        <div class="modal fade" id="addProductModal" tabindex="-1" role="dialog" aria-labelledby="addProductModalLabel" aria-hidden="true"
         style="margin-top:80px;">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addProductModalLabel">Add New Creditor</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Form for adding product -->
                <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
                    <input type="text" name="cr_name" placeholder="Creditor Name" class="form-control" />
                    <br />
                    <input type="text" name="cr_address" placeholder="Credit Address" class="form-control" />
                                        <br />
                    <input type="text" name="cr_id" placeholder="Creditor ID" class="form-control" />
                    <br />
                    <input type="date" name="date_time" placeholder="Date & Time" class="form-control" />

                    <br />
                    <div class="custom-file">
                        <input type="file" name="file" id="file-upload" accept="image/*">
                        
                    </div>
                    <br />
                    <button type="submit" name="creditor" class="btn btn-dark">Add New</button>
                </form>
            </div>
        </div>
    </div>
</div>
<br />


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

</div>    
</body>

<script>
        function toggleSidebar() {
      document.getElementById("sidebar").classList.toggle("hide");
    }
	</script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

</html>