<?php
require "../Backend/controller/accessControl.php";
require "../bootstrap.php";
use Backend\Model\Post;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<script src="Assets/JS/bootstrap.min.js"></script>
<script src="Assets/JS/jquery-3.6.0.min.js"></script>
<script src="Assets/JS/sweetalert2.all.min.js"></script>
<script src="Assets/JS/datatables.min.js"></script>
<link rel="stylesheet" href="Assets/CSS/datatables.min.css">
<link rel="stylesheet" href="Assets/CSS/bootstrap.min.css">
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.w-1em {
width: 1em;
}
a > img, th > img {
width: 1em;
margin: auto;
}
a:hover:not('text-decoration-none') {
cursor: pointer
}
.mr-auto {
margin-right: auto;
}
.ml-auto {
margin-left: auto;
}
</style>
<body>
<div class="container mb-4 mt-4">
<div class="row mb-4">
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
<div class="container">
<a class="navbar-brand" href="admin.php">Admin panel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
</ul>
<ul class="navbar-nav ml-auto align-items-center">
<li class="nav-item active">
<a class="nav-link" href="index.php">Index</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Backend/controller/logout.php">Log af</a>
</li>
<li class="nav-item">
<a class="nav-link text-decoration-none"><u><?php echo ucfirst($_SESSION['name']);?></u></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="row pt-4">
<div class="col">
<button class="btn btn-success mb-5" onclick="createPostSwal()">Opret Post</button>
<table class="pt-2" id="table_id">
<thead>
<th>Oprettet</th>
<th>Titel</th>
<th class="w-1em"><img src="Assets/Images/Icons/pencil-dark.svg" alt="Edit"></th>
<th class="w-1em"><img src="Assets/Images/Icons/trashcan-dark.svg" alt="Delete"></th>
</thead>
<tbody id="dis">
</tbody>
</table>
</div>
</div>
</div>
<script src="Assets/Ajax/fetchAndDisplayData.js"></script>
<script src="Assets/Ajax/deletePost.js"></script>
<script src="Assets/Ajax/createPost.js"></script>
<script src="Assets/Ajax/editPost.js"></script>
<script>
function createPostSwal() {
Swal.fire({
title: 'Opret Post',
html: '<div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-12 col-form-label text-md-right">Titel</label><div class="col-md-9"><input type="text" class="form-control" id="title" name="title" maxlength="255" required autofocus></div></div><div class="form-group row mb-4 justify-content-center"><label for="title" class="col-md-12 col-form-label text-md-right">Beskrivelse</label><div class="col-md-9"><textarea type="text" class="form-control" id="description" name="description" maxlength="2000" required autofocus>',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Opret',
focusConfirm: false,
preConfirm: () => {
const title = Swal.getPopup().querySelector('#title').value
const desc = Swal.getPopup().querySelector('#description').value
if (!title || !desc) {
Swal.showValidationMessage(`Skriv noget i begge felter!`)
}
return {title: title, desc: desc}
}
}).then((result) => {
createPost(result.value.title.trim(), result.value.desc.trim());
})
}
function deletePostSwal(id) {
Swal.fire({
title: 'Er du sikker?',
text: "Dette kan ikke blive ændret tilbage!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Slet Post',
cancelButtonText: 'Annuller'
}).then((result) => {
if (result.isConfirmed) {
deletePost(id);
}
})
}
</script>
</body>
</html>