<?php 
include 'fetch_details.php';
?>
<!DOCTYPE html>

<html class="no-js">

<head>
	<title>Shree Machhu Kathiya Darji Suthar Gnati Mandal</title>
	<meta charset="utf-8">
	
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="images/mkds.png" />
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/animations.css">
	<link rel="stylesheet" href="css/fonts.css">
	<link rel="stylesheet" href="css/main.css" class="color-switcher-link">
	<link rel="stylesheet" href="css/shop.css" class="color-switcher-link">
	<script src="js/vendor/modernizr-2.6.2.min.js"></script>
	<style>
/* EVENT LINK STYLE */
.event-link {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 6px;
}

.event-link:hover,
.event-link.active {
    background-color: #e02636;
    color: #ffffff !important;
    border-color: #e02636;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

/* EVENTS WIDGET CONTAINER */
.widget_apsc_widget {
    background-color: #fdfdfd;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    border: 1px solid #eee;
}

.widget_apsc_widget .widget-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #e02636;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* LIST STYLE RESET */
.news-list {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.news-list li {
    margin-bottom: 12px;
}
</style>

</head>

<body>
	<div class="preloader">
		<div class="preloader_image"></div>
	</div>
	<!-- search modal -->
	<div class="modal" tabindex="-1" role="dialog" aria-labelledby="search_modal" id="search_modal"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		<span aria-hidden="true">
			<i class="rt-icon2-cross2"></i>
		</span>
	</button>
		<div class="widget widget_search">
			<form method="get" class="searchform search-form form-inline" action="https://html.modernwebtemplates.com/diversify/">
				<div class="form-group bottommargin_0"> <input type="text" value="" name="search" class="form-control" placeholder="Search keyword" id="modal-search-input"> </div> <button type="submit" class="theme_button no_bg_button">Search</button> </form>
		</div>
	</div>
	<!-- Unyson messages modal -->
	<div class="modal fade" tabindex="-1" role="dialog" id="messages_modal">
		<div class="fw-messages-wrap ls with_padding">
			
		</div>
	</div>
	<div id="canvas">
		<div id="box_wrapper">
			<!-- template sections -->
			<section class="page_topline ds table_section table_section_lg section_padding_top_15 section_padding_bottom_15 columns_margin_0">
				<div class="container-fluid">
					<div class="row">
						<div class="col-lg-6 text-center text-lg-left hidden-xs">
							<div class="inline-content big-spacing">
								<div class="page_social"> </div> <span class="xs-block">
						<i class="fa fa-phone highlight3 rightpadding_5" aria-hidden="true"></i>
						9825660827 / 9909015295
					</span> </div>
						</div>
						<div class="col-lg-6 text-center text-lg-right">
							<div id="topline-animation-wrap">
								<div id="topline-hide" class="inline-content big-spacing"> <span class="hidden-xs">
							<i class="fa fa-map-marker highlight3 rightpadding_5" aria-hidden="true"></i>
							C / O Baroda Dairy Parlour , Near Iskon Temple , Hari Nagar , Vasna Road , Vadodara - 390021 , Gujarat ,India.
						</span> 
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<header class="page_header header_white toggler_xs_right columns_margin_0">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12 display_table">
							<div class="header_left_logo display_table_cell"> <a href="index.html" class="logo logo_with_text">
                        <img src="images/mkds.png" alt="">
                        
                    </a> </div>
							<div class="header_mainmenu display_table_cell text-center">
								<!-- main nav start -->
							<nav class="mainmenu_wrapper">
									<ul class="mainmenu nav sf-menu">
										<li class="active"> <a href="index.php">Home</a>
											
										</li>
										<li> <a href="history.php">History</a>
											
										</li>
				
										<!-- eof pages -->
										<li> <a href="">commiittee</a>
											<ul>
												<li> <a href="president.php">President</a> </li>
												<li> <a href="vice_president.php">Vice President</a> </li>
												<li> <a href="secretory.php">Secretory</a> </li>
												<li> <a href="joint_secretory.php">Joint Secretory</a> </li>
												<li> <a href="treasurer.php">Treasurer</a> </li>
												<li> <a href="other_commiittee_members.php">Commiittee Members</a> </li>
											</ul>
										</li>
										<!-- eof features -->
										<!-- gallery -->
										<li> <a href="news_events.php">News & Events</a>
											
										</li>
										<li> <a href="">Gallary</a>
											<ul>
												<li> <a href="image_gallary.php">Photo Gallary</a> </li>
												<li> <a href="video_gallary.php">Video Gallary</a> </li>
											</ul>
										</li>
										<li> <a href="circular.php">Circular</a>
											
										</li>
										<li> <a href="members.php">Member</a>
											
										</li>
										<li> <a href="#">Phone-Book</a>
											
										</li>
										
										<!-- eof contacts -->
									</ul>
								</nav>
								<!-- eof main nav -->
								<!-- header toggler --><span class="toggle_menu"><span></span></span>
							</div>
						
						</div>
					</div>
				</div>
			</header>
			<section class="page_breadcrumbs ds background_cover section_padding_top_65 section_padding_bottom_65">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<h2>Image Gallary</h2>
							<ol class="breadcrumb greylinks">
								<li> <a href="index.html">
							Home
						</a> </li>
								<li> <a href="#"> Gallery</a> </li>
								<li class="active">Photo Gallary</li>
							</ol>
						</div>
					</div>
				</div>
			</section>
			<section class="ls section_padding_top_100 section_padding_bottom_100 columns_padding_30">
				<div class="container">
					<div class="row">
						<div class="col-sm-7 col-md-8 col-lg-8 col-sm-push-5 col-md-push-4 col-lg-push-4">
							<div class="isotope_container isotope row masonry-layout columns_margin_bottom_20" data-filters=".isotope_filters">
								<div id="gallery-container" class="isotope_container isotope row masonry-layout columns_margin_bottom_20" data-filters=".isotope_filters">
									<!-- Dynamic images will be loaded here -->
								</div>


							</div>
						</div>
						<!--eof .col-sm-8 (main content)-->
						<!-- sidebar -->
						<aside class="col-sm-5 col-md-4 col-lg-4 col-sm-pull-7 col-md-pull-8 col-lg-pull-8">

							<!--News-->
							
							<!-- News Section -->
							<!-- News Section -->
							<div class="widget widget_apsc_widget" style="background: #f9f9f9; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
								<h4 class="widget-title" style="color: #e02636; margin-bottom: 20px;">Events</h4>
								<ul class="list-unstyled news-list">
									<?php foreach ($catagory as $item): ?>
									<li style="margin-bottom: 10px;">
										<a href="#" class="news-link d-block py-2 px-3 rounded transition event-link" data-id="<?php echo $item['id']; ?>">
											<?php echo htmlspecialchars($item['catagory_name']); ?>
										</a>
									</li>
									<?php endforeach; ?>
								</ul>
							</div>

						</aside>
						<!-- eof aside sidebar -->
					</div>
				</div>
			</section>
			<!-- Modal for Big Image -->
				<div id="imageModal" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
					<div class="modal-header">
						
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span>&times;</span>
						</button>
					</div>
					<div class="modal-body text-center">
						<img id="modalBigImage" src="" alt="Big View" class="img-fluid">
					</div>
					</div>
				</div>
				</div>

			<section class="ds ms parallax page_copyright overlay_color section_padding_top_30 section_padding_bottom_30">
				<div class="container">
					<div class="row">
						<div class="col-sm-6 text-center">
							<p>&copy; Copyright © 2016 mkdsvadodara.org All rights reserved.</p>
						</div>
						<div class="col-sm-6 text-center">
							<p>Designed By : Pooja Infotech</p>
						</div>
					</div>
				</div>
			</section>
		</div>
		<!-- eof #box_wrapper -->
	</div>
	<!-- eof #canvas -->
	 <script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".news-link").forEach(function (link) {
        link.addEventListener("click", function (e) {
            e.preventDefault();

            const eventId = this.getAttribute("data-id");
            const galleryContainer = document.getElementById("gallery-container");
            galleryContainer.innerHTML = '<p>Loading...</p>';

            fetch("load_event_images.php?event_id=" + eventId)
                .then(response => response.text())
                .then(data => {
                    galleryContainer.innerHTML = data;
                })
                .catch(error => {
                    console.error('Error fetching images:', error);
                    galleryContainer.innerHTML = '<p>Error loading images.</p>';
                });
        });
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const galleryContainer = document.querySelector(".isotope_container");
    const modalBigImage = document.getElementById("modalBigImage");

    // Handle opening of big image modal
    document.addEventListener("click", function (e) {
        if (e.target.classList.contains("open-big-image")) {
            const bigImgSrc = e.target.getAttribute("data-big");
            modalBigImage.src = bigImgSrc;
            $('#imageModal').modal('show');
        }
    });

    // Event click handler
    const eventLinks = document.querySelectorAll(".news-link");

    eventLinks.forEach(function (link) {
        link.addEventListener("click", function (e) {
            e.preventDefault();

            // Remove active class from all
            eventLinks.forEach(el => el.classList.remove("active"));
            this.classList.add("active");

            const eventId = this.getAttribute("data-id");
            galleryContainer.innerHTML = '<p>Loading...</p>';
            fetch("load_event_images.php?event_id=" + eventId)
                .then(response => response.text())
                .then(data => {
                    galleryContainer.innerHTML = data;
                })
                .catch(error => {
                    galleryContainer.innerHTML = '<p>Error loading images.</p>';
                    console.error(error);
                });
        });
    });

    // 👉 Trigger default event (first one)
    if (eventLinks.length > 0) {
        eventLinks[0].click();  // Simulates user click on first event
    }
});
</script>


	<script data-cfasync="false" src="../cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="js/compressed.js"></script>
	<script src="js/selectize.min.js"></script>
	<script src="js/main.js"></script>
	<script src="js/switcher.js"></script>
</body>



</html>