<?php

session_start();

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

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

}

require_once "config.php";


$success="";
$error="";


if(isset($_POST['save'])){

    $vendor_name=trim($_POST['vendor_name']);
    $contact_person=trim($_POST['contact_person']);
    $phone=trim($_POST['phone']);
    $email=trim($_POST['email']);
    $address=trim($_POST['address']);
    $tax_number=trim($_POST['tax_number']);
    $bank_name=trim($_POST['bank_name']);
    $account_number=trim($_POST['account_number']);
    $status=$_POST['status'];

    if($vendor_name==""){

        $error="Vendor name is required.";

    }else{

        $stmt=$pdo->prepare("
        INSERT INTO vendors
        (
        vendor_name,
        contact_person,
        phone,
        email,
        address,
        tax_number,
        bank_name,
        account_number,
        status
        )
        VALUES
        (?,?,?,?,?,?,?,?,?)
        ");

        $stmt->execute([

            $vendor_name,
            $contact_person,
            $phone,
            $email,
            $address,
            $tax_number,
            $bank_name,
            $account_number,
            $status

        ]);

        $success="Vendor added successfully.";

    }

}

?>

<!DOCTYPE html>

<html>

<head>

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

<title>Add Vendor</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;

}

body.dark{

background:#111827;
color:white;

}

.content{

margin-left:260px;
padding:25px;

}

.topbar{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}

.mobile-btn{

display:none;
font-size:25px;
cursor:pointer;

}

.toggle{

font-size:24px;
cursor:pointer;
color:#059669;

}

.form-box{

background:white;
padding:25px;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.08);

}

body.dark .form-box{

background:#1f2937;

}

.row{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;

}

.form-group{

margin-bottom:18px;

}

label{

display:block;
margin-bottom:6px;
font-weight:600;

}

input,
textarea,
select{

width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;

}

textarea{

resize:vertical;
min-height:100px;

}

.btn{

padding:12px 22px;
border:none;
border-radius:10px;
cursor:pointer;
font-size:15px;
text-decoration:none;
display:inline-block;

}

.save{

background:#059669;
color:white;

}

.cancel{

background:#6b7280;
color:white;

}

.alert{

padding:12px;
border-radius:10px;
margin-bottom:20px;

}

.success{

background:#dcfce7;
color:#166534;

}

.error{

background:#fee2e2;
color:#991b1b;

}

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

}

}

</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-plus-circle"></i>

Add Vendor

</h2>

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

</div>

<div class="form-box">

<?php if($success!=""){ ?>

<div class="alert success">

<?=$success?>

</div>

<?php } ?>

<?php if($error!=""){ ?>

<div class="alert error">

<?=$error?>

</div>

<?php } ?>

<form method="post">

<div class="row">

<div class="form-group">

<label>Vendor Name *</label>

<input type="text" name="vendor_name" required>

</div>

<div class="form-group">

<label>Contact Person</label>

<input type="text" name="contact_person">

</div>

<div class="form-group">

<label>Phone</label>

<input type="text" name="phone">

</div>

<div class="form-group">

<label>Email</label>

<input type="email" name="email">

</div>

<div class="form-group">

<label>Tax Number</label>

<input type="text" name="tax_number">

</div>

<div class="form-group">

<label>Bank Name</label>

<select name="bank_name">

<option value="">-- Select Bank --</option>

<option value="National Bank of Malawi">National Bank of Malawi (NBM)</option>

<option value="Standard Bank Malawi">Standard Bank Malawi</option>

<option value="FDH Bank">FDH Bank</option>

<option value="First Capital Bank">First Capital Bank (FCB)</option>

<option value="NBS Bank">NBS Bank</option>

<option value="Ecobank Malawi">Ecobank Malawi</option>

<option value="CDH Investment Bank">CDH Investment Bank</option>

<option value="MyBucks Banking Corporation">MyBucks Banking Corporation</option>

<option value="Opportunity International Bank of Malawi">Opportunity International Bank of Malawi (OIBM)</option>

<option value="Airtel Money">Airtel Money</option>

<option value="TNM Mpamba">TNM Mpamba</option>

<option value="Other">Other</option>

</select>

</div>

<div class="form-group">

<label>Account Number</label>

<input type="text" name="account_number">

</div>

<div class="form-group">

<label>Status</label>

<select name="status">

<option value="1">Active</option>

<option value="0">Inactive</option>

</select>

</div>

</div>

<div class="form-group">

<label>Address</label>

<textarea name="address"></textarea>

</div>

<br>

<button class="btn save" name="save">

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

Save Vendor

</button>

<a href="vendors.php" class="btn cancel">

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

Back

</a>

</form>

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