<?php
session_start();
include("../db.php");

/* SAVE MENU ORDER */

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

$order=$_POST['order'];

foreach($order as $position=>$id){
mysqli_query($conn,"UPDATE services SET sort_order='$position' WHERE id='$id'");
}

exit();
}

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

/* ADD SERVICE */

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

$title=$_POST['title'];
$link=$_POST['link'];
$image_url=$_POST['image_url'];

$name=$_FILES['image']['name'];
$tmp=$_FILES['image']['tmp_name'];

if(!empty($name)){

$path="../uploads/services/".$name;
move_uploaded_file($tmp,$path);

mysqli_query($conn,"INSERT INTO services(title,image,link,image_url)
VALUES('$title','$name','$link','')");

}else{

mysqli_query($conn,"INSERT INTO services(title,image,link,image_url)
VALUES('$title','','$link','$image_url')");

}

}

/* DELETE SERVICE */

if(isset($_GET['delete'])){
$id=$_GET['delete'];
mysqli_query($conn,"DELETE FROM services WHERE id='$id'");
}

/* EDIT SERVICE */

$edit_service=null;

if(isset($_GET['edit'])){
$id=$_GET['edit'];
$res=mysqli_query($conn,"SELECT * FROM services WHERE id='$id'");
$edit_service=mysqli_fetch_assoc($res);
}

/* UPDATE SERVICE */

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

$id=$_POST['id'];
$title=$_POST['title'];
$link=$_POST['link'];
$image_url=$_POST['image_url'];

$name=$_FILES['image']['name'];
$tmp=$_FILES['image']['tmp_name'];

if(!empty($name)){

$path="../uploads/services/".$name;
move_uploaded_file($tmp,$path);

mysqli_query($conn,"UPDATE services 
SET title='$title',link='$link',image='$name',image_url='' 
WHERE id='$id'");

}elseif(!empty($image_url)){

mysqli_query($conn,"UPDATE services 
SET title='$title',link='$link',image='',image_url='$image_url' 
WHERE id='$id'");

}else{

mysqli_query($conn,"UPDATE services 
SET title='$title',link='$link' 
WHERE id='$id'");

}

header("Location: services.php");
exit();
}

$services=mysqli_query($conn,"SELECT * FROM services ORDER BY sort_order ASC");
?>

<!DOCTYPE html>
<html>

<head>

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

<style>

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

*{box-sizing:border-box;}

.sidebar{
width:230px;
background:#0f6c74;
color:white;
height:100vh;
position:fixed;
padding-top:20px;
}

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

.sidebar a{
display:block;
padding:12px 20px;
color:white;
text-decoration:none;
}

.sidebar a:hover{background:#0a5258;}

.main{
margin-left:230px;
width:100%;
}

.topbar{
background:white;
padding:15px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.container{padding:20px;}

.card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
margin-bottom:20px;
}

button{
background:#0f6c74;
color:white;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
margin-top:10px;
}

input{
width:100%;
padding:10px;
margin-top:10px;
margin-bottom:10px;
border:1px solid #ccc;
border-radius:5px;
}

.slider-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

.slider-card{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
text-align:center;
cursor:move;
}

.slider-card img{
width:80px;
height:80px;
object-fit:contain;
margin-bottom:10px;
}

.action{
display:inline-block;
margin-top:8px;
padding:6px 10px;
border-radius:4px;
font-size:12px;
text-decoration:none;
color:white;
}

.edit{background:#007bff;}
.delete{background:red;}

.save-btn{
text-align:center;
margin-top:20px;
}

</style>

</head>

<body>

<?php include("layout/sidebar.php"); ?>

<div class="main">

<div class="topbar">
<h3>Manage Menu</h3>
<div>Super Admin</div>
</div>

<div class="container">

<!-- ADD / EDIT FORM -->

<div class="card">

<?php if($edit_service){ ?>

<h3>Edit Menu</h3>

<form method="post" enctype="multipart/form-data">

<input type="hidden" name="id" value="<?php echo $edit_service['id']; ?>">

<input type="text" name="title" value="<?php echo $edit_service['title']; ?>" required>

<input type="text" name="link" value="<?php echo $edit_service['link']; ?>" required>

<label>Upload Image</label>
<input type="file" name="image">

<label>OR Image URL</label>
<input type="text" name="image_url" value="<?php echo $edit_service['image_url']; ?>">

<button name="update">Update Menu</button>

</form>

<?php } else { ?>

<h3>Add New Menu</h3>

<form method="post" enctype="multipart/form-data">

<input type="text" name="title" placeholder="Menu Title" required>

<input type="text" name="link" placeholder="Menu Link" required>

<label>Upload Image</label>
<input type="file" name="image">

<label>OR Image URL</label>
<input type="text" name="image_url" placeholder="https://example.com/icon.png">

<button name="add">Add Menu</button>

</form>

<?php } ?>

</div>

<!-- MENU LIST -->

<div class="card">

<h3>Menu List (Drag to Reorder)</h3>

<div class="slider-grid" id="menuGrid">

<?php while($s=mysqli_fetch_assoc($services)){ ?>

<div class="slider-card" data-id="<?php echo $s['id']; ?>">

<?php
if(!empty($s['image'])){
$img="../uploads/services/".$s['image'];
}else{
$img=$s['image_url'];
}
?>

<img src="<?php echo $img; ?>">

<h4><?php echo $s['title']; ?></h4>

<a class="action edit" href="?edit=<?php echo $s['id']; ?>">Edit</a>

<a class="action delete" href="?delete=<?php echo $s['id']; ?>" onclick="return confirm('Delete this menu?')">Delete</a>

</div>

<?php } ?>

</div>

<div class="save-btn">
<button onclick="saveMenuOrder()">Save Menu Order</button>
</div>

</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>

var grid=document.getElementById("menuGrid");

new Sortable(grid,{
animation:150
});

function saveMenuOrder(){

var order=[];

document.querySelectorAll("#menuGrid .slider-card").forEach(function(el){

order.push(el.getAttribute("data-id"));

});

var xhr=new XMLHttpRequest();
xhr.open("POST","services.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.onload=function(){
alert("Menu order saved successfully");
};

xhr.send("update_order=1&order[]="+order.join("&order[]="));

}

</script>

</body>

</html>