<html>
<head>
<%- include("./partials/head") %>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.css"
rel="stylesheet"
/>
<title>My Services</title>
</head>
<body class="bg-light">
<div id="alert" class="alert alert-dismissible fade show position-sticky top-0" role="alert" style="display:none;z-index:99999;">
<span id="alert-text"></span>
<button id="alert-close" type="button" class="btn-close"></button>
</div>
<!-- Credits - https://bootstrapbrain.com/component/bootstrap-table-card-example/#preview -->
<section class="py-3 py-md-5">
<div class="container">
<div class="row justify-content-center">
<% data.forEach(function(listItem){ %>
<div class="col-12 col-lg-9 col-xl-8 mb-4">
<div class="card widget-card border-light shadow-sm">
<div id="<%= listItem.name.toLowerCase().split(' ').join('_') %>" class="card-body p-4">
<h5 class="card-title widget-card-title mb-4 border-bottom">
<%= listItem.name %>
</h5>
<% if(listItem.data?.length){ %>
<% if(listItem.name.includes("Servers")){ %>
<div class="d-flex align-items-center mb-2">
<span>
Delete All Servers And Its Services (Bulk Delete) ?
</span>
<button onclick="bulkDelete()" class="btn btn-danger">Delete</button>
</div>
<% } else if(listItem.name.includes("Services")) { %>
<div class="input-group mb-3">
<input id="search-service-input" type="text" class="form-control" placeholder="Service Id/ Name/ Code/ Price" aria-label="Recipient's username" aria-describedby="search-input-btn">
<button class="btn btn-primary input-group-append input-group-text" id="search-input-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
</button>
</div>
<% } %>
<div class="table-responsive">
<table
class="table table-striped bsb-table-xl text-wrap align-middle m-0"
>
<thead>
<tr>
<th>#</th>
<% Object.keys(JSON.parse(JSON.stringify(listItem.data[0]))).forEach(function(title){ %>
<% if(title != "id"){ %>
<th><%= title %></th>
<% } %>
<% }) %>
<th>Action</th>
</tr>
</thead>
<tbody>
<% listItem.data.forEach(function(myObject, index){ %>
<tr id="<%= listItem.type %>-<%= myObject.id %>">
<td><%= index + 1 %></td>
<% Object.entries(JSON.parse(JSON.stringify(myObject))).forEach(function(arr){ %>
<% if(arr[0] != "id"){ %>
<td class="text-secondary fs-7" style="max-width: 250px;
word-wrap: break-word;">
<%= arr[0] == "flag" ? (flags[arr[1]] ? flags[arr[1]] : "🚩") + " - " + arr[1] : arr[1] %>
</td>
<% } %>
<% }) %>
<td>
<% if(myObject.server_name){ %>
<button class="badge rounded-pill bg-secondary text-decoration-none mb-2" style="border:0px;" onclick="editPrice('<%= myObject.id %>', '<%= myObject.server_name %>')">% Edit Price</button>
<% } %>
<a href="<%= url %>&page=<%= listItem.type %>&q=edit&pid=<%= myObject.id %>" class="badge rounded-pill bg-info text-decoration-none"
>✎ Edit</a>
<button class="badge rounded-pill bg-danger btn mt-2"
onclick="deleteData('<%= listItem.type %>', '<%= listItem.from %>', <%= JSON.stringify(myObject) %>)">␡ Delete</button>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<% } else { %>
<p class="fs-6">You Don't have any <%= listItem.from %>...</p>
<% } %>
</div>
<nav id="<%= listItem.name.toLowerCase().split(' ').join('_') %>-btns" class="d-flex justify-content-center" aria-label="paginate-buttons">
<ul class="pagination">
<% listItem.paginateButtons.forEach((val)=>{ %>
<% if(val != "0"){ %>
<% var isActive = "" %>
<% if(val * listItem.limit == listItem.offset + listItem.limit) { %>
<% isActive = "active" %>
<% } %>
<li class="page-item"><a class="page-link <%= isActive %>" href="<%= listItem.paginateLink %><%= val %>#<%= listItem.name.toLowerCase().split(' ').join('_') %>"><%= val %></a></li>
<% } %>
<% }) %>
</ul>
</nav>
</div>
</div>
<% }) %>
</div>
</div>
</section>
<%- include("./partials/my-data") %>
<script>
function bulkDelete(){
let url = path.location + "/v3?id=" + path.query.id + "&page=bulk_delete";
swal({
title: "Bulk Delete",
text: "Are You Sure You Want To Delete All The Servers And Its Services ?",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function () {
fetch(url, {
method: "delete",
headers: {
"Content-Type": "application/json"
}
})
.then(r=>r.json())
.then(res=>{
swal({
title: res.status == 1 ? "Success" : "Error",
text: res.message,
imageUrl: res.status == 1 ? "https://www.freeiconspng.com/uploads/success-icon-10.png" : "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
});
})
.catch(err=>{
console.error(err)
swal({
title: "Error",
text: "Unable to communicate with Server",
imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
});
})
});
}
function editPrice(id, name) {
var url = path.location + "/v3?id=" + path.query.id + "&page=edit_server_price&qid=" + id;
swal({
title: "Edit Service Price",
text: "Enter A Percentage Number And The Services Price Connected To This Server Will Increase/Decrease Accordingly",
type: "input",
inputType: "number",
showCancelButton: true,
closeOnConfirm: false,
inputPlaceholder: "-10",
showLoaderOnConfirm: true
}, function (inputValue) {
if (!Number(inputValue)) {
swal.showInputError("You need to enter a valid number!");
return false
}
fetch(url, {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
id,
server_name: name,
percentage: inputValue
})
})
.then(r=>r.json())
.then(res=>{
swal({
title: res.status == 1 ? "Success" : "Error",
text: res.message,
imageUrl: res.status == 1 ? "https://www.freeiconspng.com/uploads/success-icon-10.png" : "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
});
})
.catch(err=>{
console.error(err)
swal({
title: "Error",
text: "Unable to communicate with server",
imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
});
})
});
}
</script>
<script>
document.getElementById("search-input-btn").addEventListener("click", searchMyServices)
let prevVal = "";
function searchMyServices(){
const value = document.getElementById("search-service-input").value;
if(!value && !prevVal) return;
prevVal = value;
let url = path.location + "/v3?id=" + path.query.id + "&q=get_services&search=" + value + "&server_page="+ (path.query.server_page || 1) +"&api_page=" + (path.query.api_page || 1);
fetch(url)
.then(r=>r.json())
.then(res => {
// console.log(res)
const body = document.querySelector("#my_services tbody")
const paginatedButtons = document.querySelector("#my_services-btns ul")
paginatedButtons.innerHTML = "";
body.innerHTML = "";
res.paginateButtons.forEach((val, i) => {
if(val != "0") {
paginatedButtons.innerHTML += `<li class="page-item"><a class="page-link ${i == 0 ? "active" : ""}" href="${res.paginateLink}${val}#my_services">${val}</a></li>`
}
});
if(!res.data.length) {
body.innerHTML = `<p class='fs-6'>You Don't have any "${value}" in your services...</p>`
} else {
res.data.forEach((myObject, index) => {
body.innerHTML += `<tr id="${res.type}-${myObject.id}">
<td>${index + 1}</td>
<td>${myObject.service_id}</td>
<td>${myObject.name}</td>
<td>${myObject.code}</td>
<td>${myObject.description}</td>
<td>${myObject.price}</td>
<td>${myObject.cancel_disable}</td>
<td>
<a href="${res.location}page=${res.type}&q=edit&pid=${myObject.id}" class="badge rounded-pill bg-info text-decoration-none"
>✎ Edit</a>
<button class="badge rounded-pill bg-danger btn mt-2"
onclick="deleteData('${res.type}', '${res.from}', ${JSON.stringify(myObject)})">␡ Delete</button>
</td>
</tr>`
});
}
})
.catch(err => {
console.error(err)
swal({
title: "Error",
text: "Unable to communicate with server",
imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
});
})
}
</script>
</body>
</html>