Viewing file:  index.blade.php (15.77 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('master.front')
@section('title')
{{__('Home')}}
@endsection
@section('styleplugins')
@endsection
@section('content')
<div class="container mt-4">
@php
$setting = DB::table('settings')->first();
$socialLink = json_decode($setting->social_link, true);
if (is_array($socialLink) && isset($socialLink['links']) && isset($socialLink['icons'])) {
$links = $socialLink['links'];
$icons = $socialLink['icons'];
} else {
$links = [];
$icons = [];
}
@endphp
<div class="owl-carousel owl-theme section-top-banner-carousel">
@foreach ($posts as $post)
<div class="item">
<div class="row slider-item-content">
<div class="col-lg-9 slider-img-sec col-12">
<a href="{{ route('front.details',[$post->slug]) }}"><img class="slider-main-img" src="{{ isset($post->photo) ? asset('assets/images/'.$post->photo) : asset('assets/images/placeholder.png')}}" alt="Slide 1"></a>
</div>
<div class="col-lg-3 slider-content-sec col-12">
<div class="slider-sub-title">
{{ \Carbon\Carbon::parse($post->updated_at)->format('Y-m-d') }}
</div>
<div class="slider-text">
{{ $post->title }}
</div>
<div class="slider-footer-content">
<div class="read-more-btn-sec">
<a class="read-more-btn" href="{{ route('front.details',[$post->slug]) }}">Read More</a>
</div>
<div class="slider-social-icon-sec justify-content-end mt-4">
@if(!empty($links) && !empty($icons))
@foreach($links as $index => $link)
<div class="facebook-link">
<a class="share-item rounded-circle me-1" href="{{ $link }}">
<i class="{{ $icons[$index]}}"></i>
</a>
</div>
@endforeach
@endif
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
<div class="popular-section mt-4">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="popular-title">
@if (isset($popular_category) && $popular_category->popular_title)
{{ $popular_category->popular_title }}
@endif
</div>
<div class="trending-title">
Now Trending
</div>
</div>
</div>
<div class="row mt-5 d-none">
<div class="col-lg-2">
<div class="popular-games-items">
<div class="popular-games-img-sec">
<img class="popular-games-img" src="/images/p1.png" alt="">
</div>
<div class="game-publisher-sec">
<div class="publisher-name">
Pren Goorl
</div>
<div class="game-title">
UniPin Voucher
</div>
</div>
<div class="card-action-sec text-center">
<a class="top-up-btn" href="#">Top Up</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="popular-games-items">
<div class="popular-games-img-sec">
<img class="popular-games-img" src="/images/p2.jpg" alt="">
</div>
<div class="game-publisher-sec">
<div class="publisher-name">
Pren Goorl
</div>
<div class="game-title">
UniPin Voucher
</div>
</div>
<div class="card-action-sec text-center">
<a class="top-up-btn" href="#">Top Up</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="popular-games-items">
<div class="popular-games-img-sec">
<img class="popular-games-img" src="/images/p3.png" alt="">
</div>
<div class="game-publisher-sec">
<div class="publisher-name">
Pren Goorl
</div>
<div class="game-title">
UniPin Voucher
</div>
</div>
<div class="card-action-sec text-center">
<a class="top-up-btn" href="#">Top Up</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="popular-games-items">
<div class="popular-games-img-sec">
<img class="popular-games-img" src="/images/p4.jpg" alt="">
</div>
<div class="game-publisher-sec">
<div class="publisher-name">
Pren Goorl
</div>
<div class="game-title">
UniPin Voucher
</div>
</div>
<div class="card-action-sec text-center">
<a class="top-up-btn" href="#">Top Up</a>
</div>
</div>
</div>
</div>
<div class="custom-carousel owl-carousel owl-theme mt-5">
@if (isset($popular_category) && $popular_category->category_id1)
@php
$categories = DB::table('categories')->whereIn('id', $popular_category->category_id1)->get();
@endphp
@foreach($categories->chunk(5) as $categoryChunk)
<div class="allgame-content-data-card">
@foreach ($categoryChunk as $game)
<div class="allgame-content-data-card-sizer allgame-content-data-card-sizer-font">
<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="{{asset('assets/images/'.$game->photo)}}"
alt="">
</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="{{ route('front.top.up',$game->code) }}">top up</a>
</div>
</div>
</div>
@endforeach
</div>
@endforeach
@endif
</div>
</div>
</div>
<div class="mobile-games-n-game-voucher">
<div class="container">
<div class="row">
<div class="col-lg-12 mt-5">
<ul class="nav nav-pills" id="myTabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="mobile-games-tab" data-bs-toggle="pill" href="#mobile-games"
role="tab" aria-controls="mobile-games" aria-selected="true"> Games</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="game-vouchers-tab" data-bs-toggle="pill" href="#game-vouchers"
role="tab" aria-controls="game-vouchers" aria-selected="false">Game Vouchers</a>
</li>
</ul>
<!-- Tab content -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="mobile-games" role="tabpanel"
aria-labelledby="mobile-games-tab">
<div class="allgame-content-data-card mt-5" id="games-get">
</div>
<div class="row">
<div class="col-lg-12">
<div class="learn-more-btn-sec">
<button id="loadMoreBtn-games" class="learn-more-btn">Load more</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="game-vouchers" role="tabpanel"
aria-labelledby="game-vouchers-tab">
<div class="allgame-content-data-card mt-5" id="vouchers-get">
</div>
<div class="row">
<div class="col-lg-12">
<div class="learn-more-btn-sec">
<button id="loadMoreBtn-vouchers" class="learn-more-btn">Load more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- <div class="row">
<div class="col-lg-12">
<div class="learn-more-btn-sec">
<button id="loadMoreBtn" class="learn-more-btn">Load more</button>
</div>
</div>
</div> --}}
</div>
</div>
@endsection
@section('jsplugins')
<script>
$(document).ready(function() {
let html = '';
let limit = 10;
let totalGames = 0;
function loadGames() {
$.ajax({
url: `{{route('front.get.all.games')}}`,
type: "GET",
data: { limit: limit },
success: function(response) {
$("#games-get").empty();
if (response.data.length > 0) {
response.data.forEach(function(game) {
let topUpRoute = "{{ route('front.top.up', ':code') }}";
let assetPath = "{{ asset('assets/images') }}";
html = `
<div class="allgame-content-data-card-sizer allgame-content-data-card-sizer-font">
<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="">
</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>
`;
$('#games-get').append(html);
totalGames = response.totalGames;
if (limit >= totalGames) {
$("#loadMoreBtn-games").hide();
}
});
}else {
$("#loadMoreBtn-games").hide();
}
},
error: function(xhr, status, error) {
console.log("Error:", error);
}
});
}
loadGames();
$("#loadMoreBtn-games").click(function() {
limit += 10;
loadGames();
});
});
</script>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: { items: 1 },
600: { items: 1 },
1000: { items: 1 }
}
});
});
$(document).ready(function(){
$(".custom-carousel").owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive:{
0:{ items: 1 },
600:{ items: 2 },
1000:{ items: 4 }
}
});
});
</script>
<script>
$(document).ready(function() {
let html = '';
let limit = 10;
let totalGames = 0;
function loadGames() {
$.ajax({
url: `{{route('front.get.all.vouchers')}}`,
type: "GET",
data: { limit: limit },
success: function(response) {
$("#vouchers-get").empty();
if (response.data.length > 0) {
response.data.forEach(function(game) {
let topUpRoute = "{{ route('front.top.up', ':code') }}";
let assetPath = "{{ asset('assets/images') }}";
html = `
<div class="allgame-content-data-card-sizer allgame-content-data-card-sizer-font">
<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="">
</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>
`;
$('#vouchers-get').append(html);
totalGames = response.totalGames;
if (limit >= totalGames) {
$("#loadMoreBtn-vouchers").hide();
}
});
}else {
$("#loadMoreBtn-vouchers").hide();
}
},
error: function(xhr, status, error) {
console.log("Error:", error);
}
});
}
loadGames();
$("#loadMoreBtn-vouchers").click(function() {
limit += 10;
loadGames();
});
});
</script>
@endsection
|