@extends('includes.master')
@section('title', 'Event')
@section('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="{{ 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>
@section('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">
                        {{-- <span class="mb-4" style="font-weight:normal; font-size:15px!important; color:#B02135"
                            class="mt-4"><strong>Note*:&nbsp;</strong>If you cannot find the puja you are looking for,
                            then please fill up the <strong style="text-decoration:underline;">"Request for Puja
                                Services"</strong> form in services or email at <a href="mailto:manager@srihanuman.org"
                                target="_blank"><strong
                                    style="color:#B02135;text-decoration: underline;">manager@rajdhanimandir.org</strong></a>.
                        </span> --}}


                    </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">
                            </div>

        </div>
    </section>

@endsection
<script src="{{ 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>