<?php
include "../db.php";

$settings = $conn->query("SELECT * FROM site_settings WHERE id=1")->fetch_assoc();

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

$columns=$_POST['menu_columns'];
$padding=$_POST['menu_padding'];
$image_height=$_POST['menu_image_height'];
$radius=$_POST['menu_border_radius'];
$title_size=$_POST['menu_title_size'];
$grid_gap=$_POST['menu_grid_gap'];
$title_gap=$_POST['menu_title_gap'];

$header_title=$_POST['header_title'];
$header_height=$_POST['header_height'];
$footer_text=$_POST['footer_text'];

$conn->query("UPDATE site_settings SET
menu_columns='$columns',
menu_padding='$padding',
menu_image_height='$image_height',
menu_border_radius='$radius',
menu_title_size='$title_size',
menu_grid_gap='$grid_gap',
menu_title_gap='$title_gap',
header_title='$header_title',
header_height='$header_height',
footer_text='$footer_text'
WHERE id=1");

header("Location: site_settings.php?updated=1");
exit;

}
?>

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Site Settings</title>

<style>

/* GLOBAL */

body{
margin:0;
font-family:Arial;
background:#f2f2f2;
display:flex;
}

/* SIDEBAR */

.sidebar{
width:220px;
background:#009688;
color:white;
min-height:100vh;
padding:20px 10px;
box-sizing:border-box;
}

.sidebar h2{
text-align:center;
margin-bottom:20px;
}

.sidebar a{
display:block;
color:white;
text-decoration:none;
padding:10px;
border-radius:4px;
margin-bottom:6px;
}

.sidebar a:hover{
background:rgba(255,255,255,0.2);
}

/* MAIN */

.main{
flex:1;
padding:30px;
}

/* CARD */

.card{
background:white;
border-radius:10px;
padding:25px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
max-width:700px;
}

/* HEADER */

.page-header{
margin-bottom:20px;
}

.page-header h2{
margin:0;
}

/* FORM */

.form-group{
margin-bottom:18px;
}

label{
display:block;
margin-bottom:6px;
font-weight:bold;
font-size:14px;
}

input{
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
box-sizing:border-box;
}

/* BUTTON */

.btn{
background:#009688;
color:white;
padding:10px 18px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:14px;
}

/* SUCCESS */

.success{
background:#e8f5e9;
color:#2e7d32;
padding:10px;
border-radius:6px;
margin-bottom:15px;
font-size:14px;
}

/* SECTION TITLE */

.section-title{
margin-top:25px;
margin-bottom:10px;
font-weight:bold;
font-size:16px;
border-bottom:1px solid #eee;
padding-bottom:5px;
}

/* MOBILE */

@media(max-width:768px){

.sidebar{
display:none;
}

.main{
padding:20px;
}

}

</style>

</head>

<body>

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

<div class="main">

<div class="card">

<div class="page-header">
<h2>Site Settings</h2>
</div>

<?php if(isset($_GET['updated'])){ ?>
<div class="success">Settings Updated Successfully</div>
<?php } ?>

<form method="post">

<div class="section-title">Header Settings</div>

<div class="form-group">
<label>Header Title</label>
<input type="text" name="header_title"
value="<?php echo $settings['header_title']; ?>">
</div>

<div class="form-group">
<label>Header Height (px)</label>
<input type="number" name="header_height"
value="<?php echo $settings['header_height']; ?>">
</div>


<div class="section-title">Menu Layout</div>

<div class="form-group">
<label>Menu Columns</label>
<input type="number" name="menu_columns"
value="<?php echo $settings['menu_columns']; ?>">
</div>

<div class="form-group">
<label>Menu Padding</label>
<input type="number" name="menu_padding"
value="<?php echo $settings['menu_padding']; ?>">
</div>

<div class="form-group">
<label>Menu Image Height</label>
<input type="number" name="menu_image_height"
value="<?php echo $settings['menu_image_height']; ?>">
</div>

<div class="form-group">
<label>Menu Image Border Radius</label>
<input type="number" name="menu_border_radius"
value="<?php echo $settings['menu_border_radius']; ?>">
</div>

<div class="form-group">
<label>Menu Title Font Size</label>
<input type="number" name="menu_title_size"
value="<?php echo $settings['menu_title_size']; ?>">
</div>

<div class="form-group">
<label>Space Between Image & Title</label>
<input type="number" name="menu_title_gap"
value="<?php echo $settings['menu_title_gap']; ?>">
</div>

<div class="form-group">
<label>Menu Grid Gap</label>
<input type="number" name="menu_grid_gap"
value="<?php echo $settings['menu_grid_gap']; ?>">
</div>


<div class="section-title">Footer</div>

<div class="form-group">
<label>Footer Copyright Text</label>
<input type="text" name="footer_text"
value="<?php echo $settings['footer_text']; ?>">
</div>

<button class="btn" name="save">Save Settings</button>

</form>

</div>

</div>

</body>
</html>