<?php $__env->startSection('panel'); ?>


   <style>
	.casino-banners {
		padding: 10px 10px 10px 10px;
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		margin-top: 6px;
	}
	.casino-banner-item {
		width: calc(16.5% - 8.4px);
		margin-right: 10px;
		margin-bottom: 10px;
		cursor: pointer;
		overflow: hidden;
		opacity: 0;
		transform: translateY(-50px);
		animation: slideDownFade 0.6s ease-out forwards;
	}		

	.card {
		padding-left: 15px;
	}

	.img-fluid {
		border-radius: 5%;
	}			

	.virtual_casino_sec .row .col-lg-12 .card{
		padding-left: 0;
		padding-right: 0;
	}	
	.casino-banners{
		padding:5px 10px;
	}

	.casino-banner-item:nth-child(1) {
      animation-delay: 0.2s;
    }

    .casino-banner-item:nth-child(2) {
      animation-delay: 0.4s;
    }

    .casino-banner-item:nth-child(3) {
      animation-delay: 0.6s;
    }

    .casino-banner-item:nth-child(4) {
      animation-delay: 0.8s;
    }

    .casino-banner-item:nth-child(5) {
      animation-delay: 1s;
    }

    .casino-banner-item:nth-child(6) {
      animation-delay: 1.2s;
    }

    .casino-banner-item img {
      width: 100%;
      display: block;
      border-radius: 5px;
    }

    /* Keyframes for top-to-down + fade-in animation */
    @keyframes slideDownFade {
      0% {
        opacity: 0;
        transform: translateY(-50px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
</style> 

<div class="virtual_casino_sec"> 

<div class="row">
    <div class="col-lg-12">
        <div class="card b-radius--10">		
			
		<!--- dmt7777 code --->	
					
			<div class="casino-banners">
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/teen20c.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/teen20c.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/btable2.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/btable2.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/ourroullete.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/ourroullete.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/superover3.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/superover3.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/teen41.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/teen41.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/btable2.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/btable2.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/ourroullete.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/ourroullete.jpg" lazy="loaded">
					</a>
				</div>		
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/sicbo2.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/sicbo2.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/teen32.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/teen32.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/war.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/war.jpg" lazy="loaded">
					</a>
				</div>		
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/teen41.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/teen41.jpg" lazy="loaded">
					</a>
				</div>	
				<div class="casino-banner-item">
					<a href="javascript:void(0)" class="">
					<img class="img-fluid" data-src="https://sitethemedata.com/casino_icons/lc/btable2.jpg" 
						 src="https://sitethemedata.com/casino_icons/lc/btable2.jpg" lazy="loaded">
					</a>
				</div>

			</div>			
			     <!--- dmt7777 code end --->              
            </div>
        </div>
    </div>	<!-- row -->

</div>
	
    <?php if (isset($component)) { $__componentOriginalbd5922df145d522b37bf664b524be380 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalbd5922df145d522b37bf664b524be380 = $attributes; } ?>
<?php $component = App\View\Components\ConfirmationModal::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('confirmation-modal'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\ConfirmationModal::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalbd5922df145d522b37bf664b524be380)): ?>
<?php $attributes = $__attributesOriginalbd5922df145d522b37bf664b524be380; ?>
<?php unset($__attributesOriginalbd5922df145d522b37bf664b524be380); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalbd5922df145d522b37bf664b524be380)): ?>
<?php $component = $__componentOriginalbd5922df145d522b37bf664b524be380; ?>
<?php unset($__componentOriginalbd5922df145d522b37bf664b524be380); ?>
<?php endif; ?>	

    <div class="offcanvas offcanvas-end" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" tabindex="-1">
        <div class="offcanvas-header">
            <h5 id="offcanvasRightLabel"><?php echo app('translator')->get('Filter by'); ?></h5>
            <button class="close bg--transparent" data-bs-dismiss="offcanvas" type="button" aria-label="Close">
                <i class="las la-times"></i>
            </button>
        </div>
        <div class="offcanvas-body">
            <form action="">
                <div class="form-group">
                    <label><?php echo app('translator')->get('Team One'); ?></label>
                    <select class="form-control select2-basic" name="team_one_id">
                        <option value=""><?php echo app('translator')->get('All'); ?></option>                       
                    </select>
                </div>
                <div class="form-group">
                    <label><?php echo app('translator')->get('Team Two'); ?></label>
                    <select class="form-control select2-basic" name="team_two_id">
                        <option value=""><?php echo app('translator')->get('All'); ?></option>                        
                    </select>
                </div>
                <div class="form-group">
                    <label><?php echo app('translator')->get('Leauge'); ?></label>
                    <select class="form-control select2-basic" name="league_id">
                        <option value=""><?php echo app('translator')->get('All'); ?></option>                       
                    </select>
                </div>
                <div class="form-group">
                    <label><?php echo app('translator')->get('Game Started From'); ?></label>
                    <input name="start_time" type="search" class="datepicker-here form-control bg--white pe-2 date-range" placeholder="<?php echo app('translator')->get('Start Date - End Date'); ?>" autocomplete="off" value="<?php echo e(request()->start_time); ?>">
                </div>
                <div class="form-group">
                    <label><?php echo app('translator')->get('Bet Started From'); ?></label>
                    <input name="bet_start_time" type="search" class="datepicker-here form-control bg--white pe-2 date-range" placeholder="<?php echo app('translator')->get('Start Date - End Date'); ?>" autocomplete="off" value="<?php echo e(request()->bet_start_time); ?>">
                </div>
                <div class="form-group">
                    <label><?php echo app('translator')->get('Bet Ended At'); ?></label>
                    <input name="bet_end_time" type="search" class="datepicker-here form-control bg--white pe-2 date-range" placeholder="<?php echo app('translator')->get('Start Date - End Date'); ?>" autocomplete="off" value="<?php echo e(request()->bet_end_time); ?>">
                </div>
                <div class="form-group">
                    <button class="btn btn--primary w-100 h-45"> <?php echo app('translator')->get('Filter'); ?></button>
                </div>
            </form>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('style'); ?>
    <style>
        .thumb img {
            width: 30px;
            height: 30px;
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('breadcrumb-plugins'); ?>
    <button class="btn btn-sm btn-outline--info " data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" type="button" aria-controls="offcanvasRight"><i class="las la-filter"></i> <?php echo app('translator')->get('Filter'); ?></button>
    <a class="btn btn-sm btn-outline--primary " href="<?php echo e(route('admin.game.create')); ?>"><i class="las la-plus"></i><?php echo app('translator')->get('Add New'); ?></a>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script-lib'); ?>
    <script src="<?php echo e(asset('assets/admin/js/moment.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/global/js/daterangepicker.min.js')); ?>"></script>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('style-lib'); ?>
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/css/daterangepicker.css')); ?>">
<?php $__env->stopPush(); ?>
<?php $__env->startPush('script'); ?>
    <script>
        (function($) {
            "use strict"

            const datePicker = $('.date-range').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                },
                showDropdowns: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 15 Days': [moment().subtract(14, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(30, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 6 Months': [moment().subtract(6, 'months').startOf('month'), moment().endOf('month')],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                },
                maxDate: moment()
            });
            const changeDatePickerText = (event, startDate, endDate) => {
                $(event.target).val(startDate.format('MMMM DD, YYYY') + ' - ' + endDate.format('MMMM DD, YYYY'));
            }


            $('.date-range').on('apply.daterangepicker', (event, picker) => changeDatePickerText(event, picker.startDate, picker.endDate));


            if ($('.date-range').val()) {
                let dateRange = $('.date-range').val().split(' - ');
                $('.date-range').data('daterangepicker').setStartDate(new Date(dateRange[0]));
                $('.date-range').data('daterangepicker').setEndDate(new Date(dateRange[1]));
            }

        })(jQuery)
    </script>

    <script>
    // Select all banner items
    const banners = document.querySelectorAll('.casino-banner-item');

    // Function to add active class with delay
    function animateBanners() {
      banners.forEach((banner, index) => {
        setTimeout(() => {
          banner.classList.add('active');
        }, index * 200); // Staggered delay (200ms per banner)
      });
    }

    // Trigger the animation when the page loads
    window.addEventListener('load', animateBanners);
  </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('admin.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/cuce22pe/public_html/bet.newgenguru.com/core/resources/views/admin/event/virtual_casino.blade.php ENDPATH**/ ?>