@php
  $configData = Helper::appClasses();
@endphp

@extends('layouts.layoutMaster')

@section('title', 'Store')

<!-- Page Styles -->
@section('page-style')
  @vite([
      'resources/assets/vendor/scss/pages/front-page-payment.scss',
      'resources/assets/vendor/scss/pages/front-page-landing.scss',
      'resources/assets/vendor/scss/pages/app-academy.scss',
      'resources/assets/vendor/libs/animate-css/animate.scss'
  ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
  @vite([
      'resources/assets/vendor/libs/jquery/jquery.js',
      'resources/assets/vendor/libs/cleavejs/cleave.js'
  ])
@endsection

<!-- Page Scripts -->
@section('page-script')
  @vite([
      'resources/assets/js/front/list-front.js',
  ])
@endsection


@section('content')
  <!--
  <section id="landingHero" class="section-py landing-hero position-relative">
    <img src="{{asset('assets/img/front-pages/backgrounds/hero-bg-'.$configData['style'].'.png') }}" alt="hero background" class="position-absolute top-0 start-0 w-100 h-100 z-n1" data-speed="1"  data-app-light-img="front-pages/backgrounds/hero-bg-light.png" data-app-dark-img="front-pages/backgrounds/hero-bg-dark.png" />
    <div class="container">
      <div class="hero-text-box text-center">
        <h3 class="text-primary hero-title fs-2">All in one sass application for your business</h3>
        <h2 class="h6 mb-8">
          No coding required to make customisations.<br />The live customiser has everything your marketing need.
        </h2>
        <a href="#" class="btn btn-lg btn-primary">Get early access</a>
      </div>
    </div>
  </section>
  -->
  @if($carrier['showSection1'])
    @if($carrier['isGallery1'])
      <div id="myCarousel" class="carousel slide mb-10" data-bs-ride="carousel">
        <div class="carousel-indicators">
          @foreach($carrier['gallery1'] as $gallery1)
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="{{ $loop->index === 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide {{ $gallery1->id }}"></button>
          @endforeach

          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>

        <div class="carousel-inner">
          @foreach($carrier['gallery1'] as $gallery1)
            <div class="carousel-item {{ $loop->index === 0 ? 'active' : '' }}">
              <a href="{{ $gallery1->url }}">
                <img src="{{ $gallery1->img }}" class="d-block w-100" alt="Slide {{ $gallery1->id }}">
              </a>
            </div>
          @endforeach
        </div>

      </div>
     @endif
  @endif



  <div class="app-academy container">
    @if($carrier['showSection2'])
      @if($carrier['isGallery2'])
        <div class="card p-0 mb-6">
          <h1>GALLERYA</h1>
        </div>
      @else
        <div class="card p-0 mb-6">
          <div class="card-body d-flex flex-column flex-md-row justify-content-between p-0 pt-6">
            <div class="app-academy-md-25 card-body py-0 pt-6 ps-12">
              <img src="{{asset('assets/img/illustrations/bulb-'.$configData['style'].'.png') }}"
                   class="img-fluid app-academy-img-height scaleX-n1-rtl" alt="Bulb in hand"
                   data-app-light-img="illustrations/bulb-light.png" data-app-dark-img="illustrations/bulb-dark.png"
                   height="90" />
            </div>
            <div class="app-academy-md-50 card-body d-flex align-items-md-center flex-column text-md-center mb-6 py-6">
            <span class="card-title mb-4 lh-lg px-md-12 h4 text-heading">
              Other text or we can change it
              <span class="text-primary text-nowrap">for a banner carousel</span>.
            </span>
              <p class="mb-4 px-0 px-md-2">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer.
              </p>
              <div class="d-flex align-items-center justify-content-between app-academy-md-80">
                <input type="search" placeholder="I can put any input" class="form-control form-control-sm me-4" />
                <button type="submit" class="btn btn-primary btn-icon"><i class="ri-search-line ri-22px"></i></button>
              </div>
            </div>
            <div class="app-academy-md-25 d-flex align-items-end justify-content-end">
              <img src="{{asset('assets/img/illustrations/pencil-rocket.png')}}" alt="pencil rocket" height="180"
                   class="scaleX-n1-rtl" />
            </div>
          </div>
        </div>
      @endif
    @endif





  </div>

@endsection