| DIR: /home/aissorg/public_html /home/aissorg/public_html/ |
| Current File : /home/aissorg/public_html/online-pooja-booking.php |
<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
<title>Online Puja Booking</title>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<link rel="icon" href="img/favicon.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=DM+Serif+Display&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/main.min.css">
<style>
/* Calendar Container */
.calendar-container {
padding: 15px;
background: linear-gradient(150deg, #eed976, rgb(238, 194, 98), #fbf896, #d8a436, #e5c35b);
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Tooltip Styling */
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px;
border-radius: 5px;
z-index: 1000;
font-size: 14px;
max-width: 250px;
line-height: 1.4;
pointer-events: none;
}
/* Left Column Design */
.card-header {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.card-body ul {
list-style-type: none;
padding: 0;
}
.card-body ul li {
margin-bottom: 10px;
font-size: 16px;
}
.card-body ul li span {
font-weight: bold;
color: #007bff;
}
.fc .fc-button-primary {
background-color: #811111!important;
border-color: #811111!important;
color: var(--fc-button-text-color);
}
h3, h4 {
color: #900;
font-weight: bold;
}
</style>
</head>
<body>
<div class="page">
<?php include('includes/header.php'); ?>
<?php
$sql = "SELECT image FROM inner_banner WHERE id = 9 LIMIT 1";
$result = mysqli_query($con, $sql);
$bannerImage = 'assets/img/gallery/about_banner.jpg'; // default fallback image
if ($row = mysqli_fetch_assoc($result)) {
$bannerImage = $row['image']; // e.g. 'img/custom_banner.jpg'
}
?>
<section class="breadcrumbs-custom bg-image context-dark" style="background-image: url('admin/assets/img/gallery/<?php echo ($bannerImage); ?>');">
<div class="breadcrumbs-custom-inner">
<div class="container breadcrumbs-custom-container">
<div class="breadcrumbs-custom-main">
<h3 class="breadcrumbs-custom-title" style="color: #fff;">Pooja List</h3>
</div>
<ul class="breadcrumbs-custom-path">
<li><a href="./">Home</a></li>
<li class="active">Pooja List</li>
</ul>
</div>
</div>
</section>
<section class="section section-xs text-center bg-image context-dark" style="background-image: url('images/call-to-action.jpg')">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-10 col-md-12">
<div class="box-cta-thin">
<h4 class="wow-outer" style="color:#fff;"><span class="wow slideInRight">Join us in making a difference — Become a donor today!</h4>
<div class="wow-outer button-outer"><a class="button button-primary button-winona wow slideInLeft" href="donate-now.php">Donate Now</a></div>
</div>
</div>
</div>
</div>
</section>
<section class="container py-4">
<div class="row">
<!-- Left Column: Pooja Details & Terms -->
<div class="col-md-4">
<div class="card mb-3">
<div class="card-header bg-primary-color text-white">Pooja Details</div>
<div class="card-body bg-color-theme">
<ul class="list-marked">
<li><span>Ganesh Pooja:</span> ₹500</li>
<li><span>Satyanarayan Pooja:</span> ₹1000</li>
<li><span>Navagraha Pooja:</span> ₹1500</li>
<li><span>Rudrabhishek:</span> ₹2000</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header bg-primary-color text-white">Terms & Timing</div>
<div class="card-body bg-color-theme">
<p><span><b>Timings:</b></span> 6 AM - 8 PM</p>
<p><span><b>Reservation Policy:</b></span> Reservations must be made at least 24 hours in advance.</p>
<p><span><b>Cancellations:</b></span> Please contact temple authorities for cancellations.</p>
</div>
</div>
</div>
<!-- Right Column: Live Calendar -->
<div class="col-md-8">
<div class="row justify-content-center text-center" style="margin-bottom:25px">
<div class="col-sm-12 col-md-10 col-lg-7">
<div class="">
<div class="wow-outer">
<div class="wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
<h4>Take the First Step to Hinduism</h4>
</div>
</div>
<div class="wow-outer offset-top-30">
<div class="wow slideInDown" style="visibility: visible; animation-name: slideInDown;">
<a class="button button-primary button-winona" href="pooja-online-reservation.php"><div class="content-original">Pooja Booking</div><div class="content-dubbed">Pooja Booking</div></a>
</div>
</div>
</div>
</div>
</div>
<div class="calendar-container">
<div id="calendar"></div>
</div>
</div>
</div>
</section>
<?php include('includes/footer.php'); ?>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
dayCellContent: function(arg) {
const reservationsCount = {
'2025-04-05': 4,
'2025-04-10': 5,
'2025-04-15': 3,
'2025-04-20': 8
};
const date = arg.date.toISOString().split('T')[0];
const count = reservationsCount[date] || 0;
console.log(`Date: ${date}, Count: ${count}`); // Debugging log
return {
html: `
<div style="text-align: center;">
<span>${arg.dayNumberText}</span>
${count > 0 ? `<div style="font-size: 12px; color: red;">(${count})</div>` : ''}
</div>
`
};
},
dayCellDidMount: function(arg) {
const reservationsDetails = {
'2025-04-05': [
{ pooja: 'Ganesh Pooja', time: '09:00 AM', members: 2 },
{ pooja: 'Satyanarayan Pooja', time: '11:00 AM', members: 2 }
],
'2025-04-10': [
{ pooja: 'Ganesh Pooja', time: '10:00 AM', members: 5 },
{ pooja: 'Satyanarayan Pooja', time: '12:00 PM', members: 3 }
],
'2025-04-15': [
{ pooja: 'Navagraha Pooja', time: '03:00 PM', members: 2 }
]
};
const date = arg.date.toISOString().split('T')[0];
const details = reservationsDetails[date] || [];
if (details.length > 0) {
console.log(`Tooltip created for date: ${date}`); // Debugging log
const tooltipContent = details.map(d =>
`<div><strong>${d.pooja}</strong> - ${d.time} (${d.members} members)</div>`
).join('');
arg.el.addEventListener('mouseover', function(event) {
const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.innerHTML = tooltipContent;
document.body.appendChild(tooltip);
tooltip.style.top = `${event.clientY + 10}px`;
tooltip.style.left = `${event.clientX + 10}px`;
arg.el.addEventListener('mouseout', function() {
tooltip.remove();
});
});
}
}
});
calendar.render();
});
</script>
</body>
</html> |