Viewing file:  5f27e7d635d0402e44ffa830fbd05651.php (17.01 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php $__env->startSection('title'); ?>
<?php echo e(__('All Games')); ?>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('styleplugins'); ?>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<div class="container mt-5">
<div class="details-page section-top-banner-carousel">
<div class="d-block">
<div class="row">
<div class="col-12">
<div class="event-heraders">
<div class="event-heraders-title">
<h1>Games</h1>
</div>
</div>
<div class="event-heraders-category">
<input type="hidden" id="variant">
<div class="event-heraders-category-content">
<ul>
<li>
<a href="#" data-variant="" class="event-heraders-category-content-item active">All Products</a>
</li>
<li>
<a href="#" data-variant="flash" class="event-heraders-category-content-item">Flash Top-Up</a>
</li>
<li>
<a href="#" data-variant="voucher" class="event-heraders-category-content-item">Voucher Purchase</a>
</li>
</ul>
</div>
</div>
<div class="mb-5 mt-4 row">
<div class="col-lg-4">
<div class="event-heraders-form ">
<form action="">
<div class="heraders-form-searchbar">
<div class="heraders-form-searchbar-name">Filter By</div>
<div class="input-group input-icon-group">
<input id="gameSearch" type="text" class="form-control custom-input"
placeholder="Search....">
<span class="input-icon-left">
<i class="fa fa-search"></i>
</span>
<span class="input-icon-right" id="clear-gameSearch">
<i class="fa fa-times"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-8">
<div class="event-heraders-filter">
<div class="heraders-form-searchbar">
<div class="heraders-form-searchbar-name">Sort By</div>
<div class="input-group input-icon-group">
<select name="" id="alphabetical" class="form-control custom-input">
<option value="asc">Alphabetical Order (A to Z)</option>
<option value="desc">Alphabetical Order (Z to A)</option>
</select>
</div>
</div>
<div class="view-container-style">
<span>View </span>
<div class="view-container-style-two ms-3">
<div class="view-container-style-two-data me-2 active"
id="view-container-style-one">
<i class="fa fa-th-large"></i>
</div>
<div class="view-container-style-two-data" id="view-container-style-two">
<i class="fa fa-list"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid p-1">
<div class="row">
<div class="col-12">
<div class="allgames-content mt-5">
<div class="allgames-content-sidebar">
<nav class="allgames-content-sidebar-text">
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-A">A</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-B">B</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-C">C</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-D">D</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-E">E</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-F">F</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-G">G</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-H">H</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-I">I</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-J">J</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-K">K</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-L">L</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-M">M</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-N">N</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-O">O</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-P">P</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-Q">Q</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-R">R</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-S">S</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-T">T</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-U">U</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-V">V</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-W">W</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-X">X</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-Y">Y</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-Z">Z</a>
<a href="#"
class="allgames-content-sidebar-text-char list-group-item allgames-content-sidebar-text-char-#">#</a>
</nav>
</div>
<div class="me-2" id="games-get"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('jsplugins'); ?>
<script>
$(document).ready(function() {
function loadGames() {
let gameSearch = $('#gameSearch').val();
let alphabetical = $('#alphabetical').val();
let variant = $('#variant').val();
$.ajax({
url: `<?php echo e(route('front.see.game')); ?>`,
type: "GET",
data: { game_name: gameSearch , alphabetical: alphabetical ,variant: variant},
success: function(response) {
$("#games-get").empty();
if (response.data.length > 0) {
let currentLetter = '';
response.data.forEach(function(game) {
let firstLetter = game.name.charAt(0).toUpperCase();
$('.allgames-content-sidebar-text-char-'+firstLetter).addClass('here');
if (firstLetter !== currentLetter) {
html = `<div id="section-${firstLetter}" class="allgame-content-data mr-2">
<div class="allgame-content-data-sort-letter-caption">${firstLetter}</div>
<div class="allgame-content-data-card">
</div>
</div>`;
$("#games-get").append(html);
currentLetter = firstLetter;
}
let topUpRoute = "<?php echo e(route('front.top.up', ':code')); ?>";
let assetPath = "<?php echo e(asset('assets/images')); ?>";
let gameCard = `
<div class="allgame-content-data-card-sizer">
<div class="allgame-content-data-card-sizer-container">
<div class="allgame-content-data-card-sizer-container-img">
<div class="allgame-content-data-card-sizer-container-new">
<div class="">New</div>
</div>
<img src="${assetPath}/${game.photo}" alt="${game.name}">
</div>
<div class="allgame-content-data-card-sizer-container-text">
<div class="main-title">${game.name}</div>
<div class="sub-title">${game.meta_keywords}</div>
</div>
<div class="top-up-action">
<a href="${topUpRoute.replace(':code', game.code)}">Top Up</a>
</div>
</div>
</div>
`;
$(".allgame-content-data-card:last").append(gameCard);
});
}
},
error: function(xhr, status, error) {
console.log("Error:", error);
}
});
}
loadGames();
$(".allgames-content-sidebar-text-char").click(function(e) {
e.preventDefault();
$(".allgames-content-sidebar-text-char").removeClass("active");
$(this).addClass("active");
let letter = $(this).text();
let target = $(`#section-${letter}`);
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 20
}, 100);
}
});
$(document).on('keyup','#gameSearch',function(e){
loadGames();
});
$(document).on('click','.event-heraders-category-content-item',function(e){
e.preventDefault();
let text = $(this).attr('data-variant');
$('.event-heraders-category-content-item').removeClass('active');
$(this).addClass('active');
$('#variant').val(text);
loadGames();
});
$(document).on('click','#clear-gameSearch',function(e){
e.preventDefault();
$('#gameSearch').val('');
loadGames();
});
$(document).on('change','#alphabetical',function(e){
loadGames();
});
});
$(window).on("scroll", function () {
let scrollPosition = $(window).scrollTop() + $(window).height() / 1.5;
$(".allgame-content-data").each(function () {
let sectionTop = $(this).offset().top;
let sectionId = $(this).attr("id");
if (scrollPosition >= sectionTop) {
$(".allgames-content-sidebar-text-char").removeClass("active");
let letter = sectionId.replace("section-", "");
$(".allgames-content-sidebar-text-char").each(function () {
if ($(this).text().trim() === letter) {
$(this).addClass("active");
}
});
}
});
});
$(document).on('click','#view-container-style-two',function(e){
$('.view-container-style-two-data').removeClass('active');
$('.allgame-content-data-card').addClass('view-two');
$(this).addClass('active');
});
$(document).on('click','#view-container-style-one',function(e){
$('.view-container-style-two-data').removeClass('active');
$('.allgame-content-data-card').removeClass('view-two');
$(this).addClass('active');
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('master.front', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\PicTech\unipin\unipin\core\resources\views/front/games.blade.php ENDPATH**/ ?>
|