@extends($activeTemplate.'layouts.frontend')
@section('content')

@php
$banner = getContent('banner.content', true);
$categories = App\Models\Category::where('status',1)->get();
@endphp

<section class="hero hero-bg">
    <span class="circle1"></span>
    <span class="circle2"></span>
    <div class="circle3"></div>
    <img class="hero-shape-bg" data-value="-10" src="{{asset($activeTemplateTrue.'images/hero-shape.png')}}" alt="banner image3">


    <div class="container">
        <!--<div class="animationBox_container">-->

        <!--    <span class="box1 top_image_bounce">-->
        <!--        <span class="box-img" >-->
        <!--            <img class="animation-img" data-value="-2" src="{{asset($activeTemplateTrue.'images/gift.png')}}" alt="banner image1">-->
        <!--        </span>-->
        <!--    </span>-->

        <!--    <span class="box3 top_image_bounce">-->
        <!--        <span class="box-img">-->
        <!--            <img class="animation-img" data-value="-10" src="{{asset($activeTemplateTrue.'images/happy.png')}}" alt="banner image2">-->
        <!--        </span>-->
        <!--    </span>-->

        <!--    <span class="box6 left_image_bounce">-->
        <!--        <span class="box-img">-->
        <!--           <img class="animation-img" data-value="-2" src="{{asset($activeTemplateTrue.'images/employee.png')}}" alt="banner image5">-->
        <!--        </span>-->
        <!--    </span>-->

        <!--    <span class="box7 left_image_bounce">-->
        <!--        <span class="box-img">-->
        <!--           <img class="animation-img" data-value="10" src="{{asset($activeTemplateTrue.'images/human-resources.png')}}" alt="banner image6">-->
        <!--        </span>-->
        <!--    </span>-->

        <!--</div>-->

        <div class="row justify-content-center position-relative">
            <div class="col-xl-3 col-lg-3 col-md-3">
                <div class="heror-content">
                    <p class="sub-heading">BUY FROM SISAGAME</p>
                    <h1 class="text" style="font-size:18px !important;text-align:left !important;font-weight:400 ;">with sisagame you can sequrly buy and trade games and gaming services like boost and currencies.</h1>
                </div>
            </div>
            <div class="col-xl-6 col-lg-7 col-md-7 text-center">
                <div class="heror-content" style="top: -80px !important;
  position: relative;">
                    <span class="box-image-home">
                <span class="box-img-home" >
                    <img class="hero-image" style="transform: scale(1.3);" data-value="5" src="{{asset($activeTemplateTrue.'images/hero1.png')}}" alt="banner image1">
                </span>
                </span>
                    <!--<div class="search-bar">-->
                    <!--    <input class="search-form--control searchProduct" id="search" autocomplete="off" name="search" type="text" placeholder="@lang('Search')...">-->
                    <!--    <button class="search-btn" type="submit"> <i class="las la-search icon"></i></button>-->
                    <!--</div>-->
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 text-center">
                <div class="heror-content">
                    <!--<p class="sub-heading">{{__($banner->data_values->heading)}}</p>-->
                    <h2 class="" style="text-align:left !important;">Buy goods and gaming assets from sisagame </h2>
                </div>
            </div>
            {{-- search result --}}
            <div class="search-result-wrap d-none">
                <ul>
                    <li class="search-results searchResults"></li>
                </ul>
            </div>
        </div>

        <!--<div class="row gy-4 category-wraper justify-content-center pt-1">-->
        <!--    @foreach($categories as $category)-->
        <!--    <div class="col-lg-2 col-md-3 col-sm-4 col-6 ">-->
        <!--        <div class="category-card_body">-->
        <!--            <img class="category-bg" data-value="-2" src="{{asset($activeTemplateTrue.'images/category-bg.png')}}" alt="banner image1">-->

        <!--            <div class="category-img">-->
        <!--                <a href="{{route('filter.category.products',$category->id)}}">@php echo $category->icon;@endphp</a>-->
        <!--            </div>-->
        <!--            <div class="category-content">-->
        <!--                <a href="{{route('filter.category.products',$category->id)}}"><h6>{{__($category->name)}}</h6></a>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--    @endforeach-->
        <!--</div>-->
        
<!--        <div class="row gy-4 category-wrapper justify-content-center pt-1">-->
<!--    @foreach($categories as $category)-->
<!--    <div class="col-lg-2 col-md-3 col-sm-4 col-6">-->
<!--        <div class="category-card">-->
<!--            <div class="category-card_body">-->
<!--                <img class="category-bg" src="{{asset($activeTemplateTrue.'images/category-bg.png')}}" alt="banner image1">-->
<!--                <div class="category-img">-->
<!--                    <a href="{{route('filter.category.products',$category->id)}}">-->
<!--                        @php echo $category->icon; @endphp-->
<!--                    </a>-->
<!--                </div>-->
<!--                <div class="category-content">-->
<!--                    <a href="{{route('filter.category.products',$category->id)}}">-->
<!--                        <h6>{{__($category->name)}}</h6>-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    @endforeach-->
<!--</div>-->


<!--<div class="row gy-4 category-wrapper justify-content-center pt-1">-->
<!--    @foreach($categories as $category)-->
<!--    <div class="col-lg-2 col-md-3 col-sm-4 col-6">-->
<!--        <div class="category-card">-->
<!--            <div class="category-card_body">-->
                <!-- SVG Hexagon Background -->
<!--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 110" fill="none" class="hexagon-background">-->
<!--                    <path fill="url(#hexGrad{{$category->id}})" d="M48 110L0 82.5V27.5L48 0l48 27.5V82.5L48 110z"/>-->
<!--                    <defs>-->
<!--                        <linearGradient id="hexGrad{{$category->id}}" x1="0" x2="0" y1="0" y2="110" gradientUnits="userSpaceOnUse">-->
<!--                            <stop stop-color="#C377FF"/>-->
<!--                            <stop offset="1" stop-color="#FAF3FF"/>-->
<!--                        </linearGradient>-->
<!--                    </defs>-->
<!--                </svg>-->
<!--                <div class="category-img">-->
<!--                    <a href="{{route('filter.category.products',$category->id)}}">-->
<!--                        @php echo $category->icon; @endphp-->
<!--                    </a>-->
<!--                </div>-->
<!--                <div class="category-content">-->
<!--                    <a href="{{route('filter.category.products',$category->id)}}">-->
<!--                        <h6>{{__($category->name)}}</h6>-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    @endforeach-->
<!--</div>-->


<div class="row gy-4 category-wrapper justify-content-center pt-1">
    @foreach($categories as $category)
    <div class="col-lg-2 col-md-3 col-sm-4 col-6">
        <div class="category-card">
            <div class="category-card_body">
                <!-- SVG Hexagon Background -->
                <svg width="96" height="110" viewBox="0 0 96 110" fill="none" xmlns="http://www.w3.org/2000/svg" class="hexagon-background">
                    <path d="M48 110L0 82.5002V27.5002L48 0.000244141L96 27.5002V82.5002L48 110ZM48 3.00024L3 29.0002V81.0002L48 107L93 81.0002V29.0002L48 3.00024Z" fill="url(#paint0_linear_{{ $category->id }})"></path>
                    <path d="M90 79.5002L48 104L6 79.5002V30.5002L48 6.00024L90 30.5002V79.5002Z" fill="#473C4F" fill-opacity="0.7"></path>
                    <defs>
                        <linearGradient id="paint0_linear_{{ $category->id }}" x1="0" y1="0" x2="96" y2="110" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#C377FF"/>
                            <stop offset="0.529" stop-color="#FAF3FF"/>
                            <stop offset="1" stop-color="#C377FF"/>
                        </linearGradient>
                    </defs>
                </svg>
                <div class="category-img">
                    <a href="{{ route('filter.category.products', $category->id) }}">
                        @php echo $category->icon; @endphp
                    </a>
                </div>
                <div class="category-content">
                    <a href="{{ route('filter.category.products', $category->id) }}">
                        <h6>{{ __($category->name) }}</h6>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>



        
        
    </div>
</section>

@if($sections->secs != null)
@foreach(json_decode($sections->secs) as $sec)
@include($activeTemplate.'sections.'.$sec)
@endforeach
@endif
@endsection


@push('script')
    <script>
        $(document).ready(function() {
            "use strict";
            $('.searchProduct').on('keyup', function() {
                var baseUrl = '{{ url('/') }}';
                var searchValue = $(this).val().trim();
                var searchResults = $(this).closest('.position-relative').find('.search-results');

                if (searchValue !== '') {
                    $.ajax({
                        url: '{{ route("product.search") }}',
                        type: 'get',
                        data: { search: searchValue },
                        dataType: 'json',
                        success: function(response) {
                            searchResults.empty();

                            $('.search-result-wrap').removeClass('d-none')

                            if (response.length > 0) {
                                $.each(response, function(index, product) {
                                    var productName = product.name;
                                    var productSlug = slugify(productName);
                                    var productId = product.id;

                                    var productLink = baseUrl + '/product/' + productSlug + '/' + productId;

                                    var resultItem = $('<a>' + productName + '</a>');
                                    resultItem.attr('href', productLink);
                                    // resultItem.css('opacity', 0);
                                    searchResults.append(resultItem);
                                    resultItem.animate({ opacity: 1, marginLeft: '10px' }, 500);
                                });
                                searchResults.show();
                            } else {
                                searchResults.html('<p>No results found.</p>');

                            }
                        }.bind(this)
                    });
                } else {
                    searchResults.empty();
                    $('.search-result-wrap').addClass('d-none');
                }
            });

            $('.close-hide-show').on('click', function() {
                var searchResults = $(this).closest('.position-relative').find('.search-results');
                searchInput.val('');
                searchResults.empty();
            });

            function slugify(text) {
                return text.toString().toLowerCase()
                    .replace(/\s+/g, '-')
                    .replace(/[^\w\-]+/g, '')
                    .replace(/\-\-+/g, '-')
                    .replace(/^-+/, '')
                    .replace(/-+$/, '');
            }
        });
    </script>

@endpush