
<?php $__env->startSection('title', 'About Deities'); ?>

<?php $__env->startSection('style-section'); ?>
    <style type="text/css">
        /* Style the Headings that are used to open and close the accordion panel */
        .accordion {
            background-color: #621A1D;
            color: #fff;
            ;
            cursor: pointer;
            padding: 10px;
            margin: 0;
            font-weight: 500;
            border: 0.01rem solid lightgray;

        }


        /* Add "plus" sign (+) after Accordion */
        .plus-sign::after {
            content: '\002B';
            color: #fff;
            font-weight: bold;
            float: right;
        }

        /* Add "minus" sign (-) after Accordion (when accordion is active) */
        .minus-sign::after {
            content: "\2212";
            color: #fff;
        }

        /* Style the accordion panel */
        .accordion-panel {
            padding: 0 10px;
            overflow: hidden;
            background-color: white;
            max-height: 0;
            transition: max-height 0.5s ease-out;
        }

        .list-style li {
            background: url(<?php echo e(asset('assets/img/flower.png')); ?>) left 8px no-repeat;
            padding-left: 36px;
            padding-bottom: 40px;
            background-size: 15px;
            width: auto;
            color: #ee1543;
        }

        .list-pn {
            list-style-type: none;
        }

        .l-h18 {
            line-height: 33px;
        }

        .font13 {
            font-size: 16px;
        }

        .font16 {
            font-size: 16px;
        }

        .m0 {
            margin: 0px;
        }

        .poppinsregular {
            font-family: 'poppinsregular';
        }

        ul {
            padding-left: 0rem;
        }

        b {
            color: #864F5E !important;
        }
    </style>
<?php $__env->startSection('content'); ?>
    <!-- ======= About Committee Section ======= -->
    <section
        style="background-image: url(<?php echo e(asset('assets/img/elegant-background-with-mandala.png')); ?>);background-size: auto;">
        <div class="responsive-container">
            <center>
                <h2 class="bottomborder p-4" style="font-weight:bold!important;font-size: 35px!important;">ABOUT DEITIES</h2>
            </center>
            <div class="px-3">

                <?php foreach ($deities_data as $key => $val) { ?>

                <h5 class="accordion plus-sign <?php echo e($key == 0 ? 'accordionFirst' : ''); ?>  "><b
                        style="color:white!important;"><?php echo e($val['refDataName']); ?></b>
                </h5>
                <div class="accordion-panel">
                    <div class="row ">
                        <div class="col-md-3">
                            <img src="<?php echo e(ApiBaseUrl()['url'] . $val['image']); ?>" class="img-fluid"
                                style="height:400px; width:auto;" alt="<?php echo e($val['refDataName']); ?>">
                        </div>
                        <div class="col-md-9 px-5">
                            <p class=""><?php echo e($val['description']); ?></p>
                            <div class="row">
                                <div class="col-md-6">
                                    <?php if($val['impFestivals']){ ?><h4 class="poppinsmedium font16 l-h16 dk-t"><b>IMPORTANT
                                            FESTIVALS:</b></h4>
                                    <ul class="list-pn m0 list-style poppinsregular font13 l-h18 tabhorizontal-b-p0">
                                        <li><?php echo e($val['impFestivals']); ?></li>
                                    </ul>
                                    <?php } ?>
                                    <?php if($val['auspiciousDays']){ ?>
                                    <h4 class="poppinsmedium font16 l-h16 dk-t"><b style="color:red;">AUSPICIOUS DAYS:</b>
                                    </h4>
                                    <ul class="list-pn m0 list-style poppinsregular font13 l-h18 tabhorizontal-b-p0">
                                        <li><?php echo e($val['auspiciousDays']); ?></li>
                                    </ul>
                                    <?php } ?>
                                    <?php if(isset($val['vahana'])){ ?>
                                    <h4 class="poppinsmedium font16 l-h16 dk-t"><b>VAHANA:</b></h4>
                                    <ul class="list-pn m0 list-style poppinsregular font13 l-h18 tabhorizontal-b-p0">
                                        <li><?php echo e($val['vahana']); ?></li>
                                    </ul>
                                    <?php } ?>
                                </div>
                                <div class="col-md-6">
                                    <?php if($val['favouriteOfferings']){ ?>
                                    <h4 class="poppinsmedium font16 l-h16 dk-t"><b>FAVORITE OFFERINGS:</b></h4>
                                    <ul class="list-pn m0 list-style poppinsregular font13 l-h18 tabhorizontal-b-p0">
                                        <li><?php echo e($val['favouriteOfferings']); ?></li>
                                    </ul>
                                    <?php } ?>
                                    <?php if($val['slokas']){ ?>
                                    <h4 class="poppinsmedium font16 l-h16 dk-t"><b>SLOKAS:</b></h4>
                                    <ul class="list-pn m0 list-style poppinsregular font13 l-h18 tabhorizontal-b-p0">
                                        <li style="background-image:none!important;padding-left: 0;">
                                            <i>"<?php echo e($val['slokas']); ?>"</i>
                                        </li>
                                    </ul>
                                    <?php } ?>
                                    <?php if($val['otherRecitals']){ ?>
                                    <h4 class="poppinsmedium font16 l-h16 dk-t"><b>OTHER RECITALS:</b></h4>
                                    <ul class="list-pn m0 list-style poppinsregular font13 l-h18 tabhorizontal-b-p0">
                                        <li><?php echo e($val['otherRecitals']); ?></li>
                                    </ul>
                                    <?php  } ?>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <?php } ?>

            </div>
        </div>
    </section><!-- End About Committee Section -->
<?php $__env->stopSection(); ?>
<script src="<?php echo e(asset('assets/js/jquery-3.6.0.min.js')); ?>"></script>
<script type="text/javascript">
    // Get all Accordion and Panel

    $(function() {
        let accHeading = document.querySelectorAll(".accordion");
        let accPanel = document.querySelectorAll(".accordion-panel");

        // alert('dd');
        for (let i = 0; i < accHeading.length; i++) {
            // Execute whenever an accordion is clicked
            accHeading[i].onclick = function() {
                if (this.nextElementSibling.style.maxHeight) {
                    hidePanels(); // Hide All open Panels
                } else {
                    showPanel(this); // Show the panel
                }
            };
        }



        // Function to Show a Panel
        function showPanel(elem) {
            hidePanels();
            elem.classList.add("active");
            elem.classList.add("minus-sign");
            elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px";
        }

        // Function to Hide all shown Panels
        function hidePanels() {
            for (let i = 0; i < accPanel.length; i++) {
                accPanel[i].style.maxHeight = null;
                accHeading[i].classList.remove("active");
                accHeading[i].classList.remove("minus-sign");
            }
        }
    });


    $(document).ready(function() {
        $(".accordionFirst").click();

        window.scrollTo({
            top: 225,
            behavior: 'smooth'
        });

    })
</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/about_deity.blade.php ENDPATH**/ ?>