
<?php $__env->startSection('title', 'Event'); ?>
<?php $__env->startSection('style-section'); ?>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/css/services-cart.css')); ?>">
    <style type="text/css">
        .bookeventbtn:hover {
            box-shadow: 1px 1px 10px red;
            transition: .4s;
        }

        .viewmorebtn:hover {
            box-shadow: 1px 1px 10px green;
            transition: .4s;
        }

        .btn {
            border-radius: 26px !important;
        }
    </style>
<?php $__env->startSection('content'); ?>
    <section style="background-color:#fff8e1!important">

        <center>
            <h2 class="bottomborder p-4" style="font-weight:bold!important;font-size: 35px!important;">All Upcoming Events
            </h2>
        </center><br>
        <div class="pb-5 responsive-container">
            <div class="row m-0 p-0 pb-4" id="searchField">
                <div class="col-md-12 m-0 p-0">
                    <div class="px-2">
                        


                    </div>
                    <div class="px-2">
                        <input type="search" name="q" id="search" class="search-text searchKey"
                            placeholder="Search..." autocomplete="off"
                            style="margin-left: -10px;     width: 400px;height: 56px;">
                    </div>
                </div>
            </div>

            <div id="serviceSearch">
                <?php

				foreach($upcoming_events as $item){


					if($item['startDate'] >= date('m/d/Y') || $item['endDate'] >= date('m/d/Y')) {

						$ServicePrice = str_replace("$","",$item['serviceAmount']);?>

                <div class="row justify-content-center mb-3">
                    <div class="col-md-12 col-xl-12">
                        <div class="card shadow-0 border rounded-3" style="background:transparent!important;">
                            <div class="card-body">
                                <div class="row" id="searchHere">
                                    <div class="col-md-12 col-lg-3 col-xl-2 mb-4 mb-lg-0">
                                        <div class="bg-image hover-zoom ripple rounded ripple-surface">
                                            <?php if (!empty($item['Image'])) { ?>
                                            <a href="<?php echo e(ApiBaseUrl()['url'] . $item['Image']); ?>" data-lightbox="set">
                                                <img src="<?php echo e(ApiBaseUrl()['url'] . $item['Image']); ?>" class="img-fluid"
                                                    style="max-height: 150px; width:150px;border-radius: 5px;" /></a>
                                            <?php }else{ ?>
                                            <img src="<?php echo e(asset('assets/img/bskst-watermark.png')); ?>" class="img-fluid"
                                                style="max-height: 150px; width:150px;border-radius: 5px;" />
                                            <?php } ?>

                                            <a href="#!">
                                                <div class="hover-overlay">
                                                    <div class="mask"
                                                        style="background-color: rgba(253, 253, 253, 0.15);"></div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>

                                    <style type="text/css">
                                        .col-md-6,
                                        .col-lg-6,
                                        .col-xl-7 {
                                            display: flex;
                                            flex-direction: column;
                                            align-items: flex-center;
                                        }

                                        .col-md-6 h5 {
                                            margin-bottom: 0;
                                            /* Remove default margin */
                                        }
                                    </style>
                                    <div class="col-md-6 col-lg-6 col-xl-7 d-flex flex-column justify-content-center">
                                        <h5 class="fw-bold" style="font-size: 25px;"><?php echo e($item['refDataName']); ?></h5>
                                        <div class="mt-1 mb-0 text-danger small" style="text-shadow: yellow!important;">
                                            <?php if (!empty($item['startDate'])) { ?>
                                            <div class="mt-2">
                                                <?php echo $item['endDate']
                                                    ? "<span style='font-size:20px!important'><i class='fa fa-calendar'></i> " .
                                                        $item['startDate'] .
                                                        "</span><span style='font-size:20px!important'> - " .
                                                        $item['endDate'] .
                                                        '</span><br>'
                                                    : "<span style='font-size:20px!important'><i class='fa fa-calendar'></i> " . $item['startDate'] . '</span><br>'; ?>

                                            </div>
                                            <?php } ?>
                                            <?php if (!empty($item['startTime'])) { ?>
                                            <div class="mt-2">
                                                <?php echo $item['endTime']
                                                    ? "<span style='font-size:20px!important'><i class='fa fa-clock-o'></i> " .
                                                        $item['startTime'] .
                                                        "</span><span style='font-size:20px!important' class'text-primary'> - " .
                                                        $item['endTime'] .
                                                        '</span><br>'
                                                    : "<span style='font-size:20px!important'><i class='fa fa-clock-o'></i> " . $item['startTime'] . '</span><br>'; ?>

                                            </div>
                                            <?php } ?>
                                        </div>
                                        
                                    </div>



                                    <?php $ServicePrice = str_replace("$", '', $item['serviceAmount']); ?>
                                    <div class="col-md-6 col-lg-3 col-xl-3 border-sm-start-none border-start">

                                        <?php if($ServicePrice != 0.00 ){ ?>
                                        <div class="d-flex flex-row align-items-center mb-1">
                                            
                                        </div>
                                        <div class="d-flex flex-column mt-4">


                                            <a href="<?php echo e(route('event', [urlencode($item['refDataName']), $item['_id']])); ?>"
                                                class="mt-3 btn btn-primary viewmorebtn btn-sm"
                                                style="background-color: #008080;padding: 5px 15px;border: 1px solid white;color: white!important;"
                                                type="button">EVENT DETAILS</a>

                                        </div>
                                        <?php }else{?>
                                        <div class="d-flex flex-column mt-4">
                                            <a href="<?php echo e(route('event', [urlencode($item['refDataName']), $item['_id']])); ?>"
                                                class="mt-3 btn btn-primary viewmorebtn btn-sm"
                                                style="background-color: #008080; padding: 5px 15px; border: 1px solid white; color: white !important;"
                                                type="button">
                                                EVENT DETAILS
                                            </a>

                                        </div>
                                        <?php } ?>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="emptyServices" class="text-center" style="font-size: 21px; font-weight: 700;"></div>
                <?php 			} } ?>
            </div>

        </div>
    </section>

<?php $__env->stopSection(); ?>
<script src="<?php echo e(asset('assets/js/jquery-3.6.0.min.js')); ?>"></script>
<script type="text/javascript">
    $(document).ready(function() {
        window.scrollTo({
            top: 215,
            behavior: 'smooth'
        });
    });


    $(document).ready(function() {
        $("#search").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            var $serviceDiv = $("#serviceSearch .row");
            var noResults = true;

            $serviceDiv.filter(function() {
                var rowText = $(this).text().toLowerCase();
                var isMatch = rowText.indexOf(value) > -1;
                $(this).toggle(isMatch);
                if (isMatch) {
                    noResults = false;
                }
            });

            if (noResults && value !== "") {
                $("#emptyServices").text("No events found!").show();
            } else {
                $("#emptyServices").hide();
            }

        }).on("search", function() {
            if ($(this).val() === "") {
                $("#serviceSearch .row").show();
                $("#emptyServices").hide();
            }
        });
    });
</script>

<?php echo $__env->make('includes.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\project\vaap\carolinamurugantemple\resources\views/events/all-upcoming-events.blade.php ENDPATH**/ ?>