@extends('layouts.front-layout')
@section('title') Category @endsection
@section('content')
    <section class="innerBanner">
        <img src="{{asset('upload/images/inerbg1.png')}}" class="w-100" alt="img">
        <div class="overlay">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h2>{{$pageData['Category']['top_banner_title'] ? : ''}}</h2>
                    </div>
                    <div class="col-md-6">
                        <img src="{{ pagesSingleImage('Category', 'category_top_banner_image') }}" class="img-fluid heroGirl" alt="img">
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- CTA Card -->
    <section class="cta-section categorMain">
        <div class="container">
            @forelse($get_categories as $index =>  $category)
            <div class="card-apperal">
                <div class="row align-items-center {{ $index % 2 == 0 ? '' : 'justify-content-center flex-row-reverse' }}">
                    <div class="col-md-6">
                        <figure data-aos="fade-up">
                            <img src="{{$category->categoryImage('category_image') ? : ''}}" class="img-fluid logo-img" data-aos="fade-up" alt="">
                        </figure>
                    </div>
                    <div class="col-md-6">
                        <span class="sub-title" data-aos="fade-up">258 XTREME</span>
                        <h3 class="heading" data-aos="fade-up">{{$category->category_name ? : ''}}</h3>
                        {!! $category->description ? : ''!!}

                        <div data-aos="fade-up">
                            <a href="#" class="btn themeBtn">READ MORE</a>
                        </div>
                    </div>
                </div>
            </div>

            @empty
                <h1 class="text-center">Categories Not Found </h1>
            @endforelse
        </div>
    </section>
    <!-- CTA Card -->
@endsection