<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Admin Panel</title>
<!-- plugins:css -->
<link rel="stylesheet" href="assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="assets/vendors/ti-icons/css/themify-icons.css">
<link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
<link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_navbar.html -->
<nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
<div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
<a class="navbar-brand brand-logo" href="index.html"><img src="front/images/logo.png" alt="logo" /></a>
<a class="navbar-brand brand-logo-mini" href="index.html"><img src="assets/images/logo-mini.svg" alt="logo" /></a>
</div>
<div class="navbar-menu-wrapper d-flex align-items-stretch">
<button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
<span class="mdi mdi-menu"></span>
</button>
<div class="search-field d-none d-md-block">
<form class="d-flex align-items-center h-100" action="#">
<div class="input-group">
<div class="input-group-prepend bg-transparent">
<i class="input-group-text border-0 mdi mdi-magnify"></i>
</div>
<input type="text" class="form-control bg-transparent border-0" placeholder="Search projects">
</div>
</form>
</div>
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item nav-profile dropdown">
<a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
<div class="nav-profile-img">
<img src="assets/images/faces/face1.jpg" alt="image">
<span class="availability-status online"></span>
</div>
<div class="nav-profile-text">
<p class="mb-1 text-black">Admin</p>
</div>
</a>
<div class="dropdown-menu navbar-dropdown" aria-labelledby="profileDropdown">
<a class="dropdown-item" href="#">
<i class="mdi mdi-cached me-2 text-success"></i> Activity Log </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="mdi mdi-logout me-2 text-primary"></i> Signout </a>
</div>
</li>
<li class="nav-item d-none d-lg-block full-screen-link">
<a class="nav-link">
<i class="mdi mdi-fullscreen" id="fullscreen-button"></i>
</a>
</li>
<li class="nav-item nav-logout d-none d-lg-block">
<a class="nav-link" href="#">
<i class="mdi mdi-power"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_sidebar.html -->
@include('sidebar')
<!-- partial -->
<div class="main-panel">
<div class="content-wrapper">
<div class="page-header">
<h3 class="page-title"> Plan </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Plan</a></li>
<li class="breadcrumb-item active" aria-current="page">Add Plan</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<form class="forms-sample" id="planForm">
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="text" id="name" placeholder="Plan Name" class="form-control" required />
</div>
<div class="form-group">
<label for="exampleInputEmail3">Description</label>
<textarea id="description" placeholder="Description" class="form-control" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="exampleInputPassword4">Duration (in days)</label>
<input type="number" id="price" placeholder="Price" class="form-control" required />
</div>
<div class="form-group">
<label for="exampleInputPassword4">Duration (in days)</label>
<input type="number" id="duration" placeholder="Duration (in days)" class="form-control" required />
</div>
<!-- <div class="form-group">
<label for="exampleSelectGender">Gender</label>
<select class="form-select" id="exampleSelectGender">
<option>Male</option>
<option>Female</option>
</select>
</div> -->
<!-- <div class="form-group">
<label>File upload</label>
<input type="file" name="img[]" class="file-upload-default">
<div class="input-group col-xs-12">
<input type="text" class="form-control file-upload-info" disabled placeholder="Upload Image">
<span class="input-group-append">
<button class="file-upload-browse btn btn-gradient-primary py-3" type="button">Upload</button>
</span>
</div>
</div> -->
<!-- <div class="form-group">
<label for="exampleInputCity1">City</label>
<input type="text" class="form-control" id="exampleInputCity1" placeholder="Location">
</div>
<div class="form-group">
<label for="exampleTextarea1">Textarea</label>
<textarea class="form-control" id="exampleTextarea1" rows="4"></textarea>
</div> -->
<div id="message" class="message" style="display:none;"></div>
<button type="submit" class="btn btn-gradient-primary me-2">Submit</button>
<!-- <button class="btn btn-light">Cancel</button> -->
</form>
</div>
</div>
</div>
</div>
</div>
<!-- content-wrapper ends -->
<!-- partial:partials/_footer.html -->
<footer class="footer">
<div class="d-sm-flex justify-content-center justify-content-sm-between">
<span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2023 <a href="https://www.bootstrapdash.com/" target="_blank">BootstrapDash</a>. All rights reserved.</span>
<span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="mdi mdi-heart text-danger"></i></span>
</div>
</footer>
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="assets/vendors/chart.js/chart.umd.js"></script>
<script src="assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="assets/js/off-canvas.js"></script>
<script src="assets/js/misc.js"></script>
<script src="assets/js/settings.js"></script>
<script src="assets/js/todolist.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="assets/js/dashboard.js"></script>
<!-- End custom js for this page -->
<script>
document.getElementById('planForm').addEventListener('submit', async function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const price = document.getElementById('price').value;
const description = document.getElementById('description').value;
const duration = document.getElementById('duration').value;
const response = await fetch('/api/plans', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
name,
price,
description,
duration
})
});
const result = await response.json();
// Show success or error message
const messageContainer = document.getElementById('message');
messageContainer.textContent = result.message || 'Plan added successfully!';
messageContainer.style.backgroundColor = '#4CAF50';
messageContainer.style.borderColor = '#4CAF50';
messageContainer.style.color = 'white';
messageContainer.style.display = 'block';
});
</script>
<style>
.message {
margin-top: 10px;
font-size: 16px;
font-weight: bold;
padding: 15px;
border-radius: 5px;
border: 2px solid;
text-align: center;
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
transition: background-color 0.3s, color 0.3s;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</body>
</html> |