1#@!#!123s

32759 1#@!#!123s
: / home / aissorg / public_html / demo22 /
Filename : online-pooja-booking.php
back
<!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'); ?>
        
        <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url(img/common_banner.jpg);">
            <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="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>