@extends('front.layouts.app')
@section('style1')
<style>
</style>

@endsection
@section('content')
	

<div class="page home-layout home">

  <div class="home-page-content">

      <div id="intro-wrapper">

          <section id="intro">

              <div class="container-start-padding h-100 level">

                  <div class="intro-content-wrapper">

                      <div class="top">
                        <div class="start">
                          <div class="text-images-wrapper">
                                <img src="/assets/images/logo2.png" class="intro-logo d-block mb-2">
                                <img src="/assets/images/intro-text-1.png" class="intro-text-1 d-block mb-4">
                                <img src="/assets/images/intro-text-2.png" class="intro-text-2 d-block">
                          </div>
                        </div>
                        
                        <div class="end">


                            <div class="end-content">


                                <div class="images-wrapper">
                                    <img src="/assets/images/sponsor-logo-2.png" class="sponsor-logo-2 d-block mb-4">
                                    <img src="/assets/images/sponsor-logo-1.png" class="sponsor-logo-1 d-block mb-4">
                                </div>


                                <div class="social-media-and-statistics-wrapper mb-4">

                                    <div class="social-media-icons-wrapper bg-primary-icons mb-4">

                                        <ul class="reset-ul">

                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('facebook')}}">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
        
                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('twitter')}}">
                                                    <i class="fab fa-x-twitter"></i>
                                                </a>
                                            </li>
        
                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('instagram')}}">
                                                    <i class="fab fa-instagram"></i>
                                                </a>
                                            </li>
        
                                            
                                            <li class="item">
                                                <a class="item-link" href="{{getSettingValue('youtube')}}">
                                                    <i class="fab fa-youtube"></i>
                                                </a>
                                            </li>


                                        </ul>
                                    </div>

                                    <ul class="reset-list statistics-numbers-wrapper d-flex">
                                        <li class="d-block me-4">
                                            <p class="number lead color-primary mb-0 js-count-up" data-value="{{getCount('publishers')}}"> {{getCount('publishers')}}</p>
                                            <p class="text color-black h4 mb-0"> دار نشر </p>
                                        </li>
                                        <li class="d-block me-4">
                                            <p class="number lead color-primary mb-0 js-count-up" data-value="{{getCount('writers')}}"> + {{getCount('writers')}}</p>
                                            <p class="text color-black h4 mb-0">المؤلفون </p>
                                        </li>
                                        <li class="d-block">
                                            <p class="number lead color-primary mb-0 js-count-up" data-value="{{getCount('books')}}">{{getCount('books')}} </p>
                                            <p class="text color-black h4 mb-0"> الكتب </p>
                                        </li>
                                    </ul><!-- statistics-numbers-wrapper -->

                                </div><!-- social-media-and-statistics-wrapper -->

                                <div class="download-app-links mb-4 d-nones">
                                    <a target="_blank" href="https://apps.apple.com/eg/app/%D9%85%D8%B9%D8%B1%D8%B6-%D8%A7%D9%84%D9%83%D8%AA%D8%A7%D8%A8-%D8%A7%D9%84%D8%A5%D8%B3%D9%84%D8%A7%D9%85%D9%8A/id6744659960">
                                        <img src="assets/images/app-store.png" class="download-image">
                                    </a>
                                    <a target="_blank" href="https://www.installonair.com/app-download-link/pjKdGR">
                                        <img src="assets/images/google-play.png" class="download-image">
                                    </a>
                                </div>

                            </div>

                        </div>
                        
                      </div> <!-- top -->


                  </div> <!-- intro-content-wrapper -->

              </div> <!-- container-start-padding -->
              <div class="intro-video video-sea">
                    
                    <video
                        id="intro-video-v2"
                        class="video-js"
                        poster="/assets/images/intro-video-poster.png">
                        <source src="/assets/images/intro-video.mp4" type="video/mp4" />
                    </video>

            </div>
        </section>
          <div class="intro-image-wrapper">
              <img src="/assets/images/intro-book.svg" class="intro-book">
          </div>
      </div>
      <section id="live-frame" class="mb-5 d-none">

            <div class="container">

                <div class="row">

                    <div class="col-12 col-lg-9 m-auto">

                        <div class="live-wrapper d-none">

                            <img src="assets/images/live-frame.png" class="live-image">

                            <iframe
                                id="live-video"
                                src="https://www.youtube.com/embed/K8HuXiPLWWI"
                                title="YouTube Live Stream"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>

                        </div>

                    </div>
                    
                </div>
                
            </div>
  </section>
    
  

  <section id="books">

  <div class="container">

<div class="headline-wrapper mb-5">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h1 class="headline"> الكتب الاكثر قراءة </h1>
        <a href="{{route('page.books')}}" class="btn btn-outline-primary"> عرض الكل </a>
    </div>
</div> <!-- headline-wrapper -->

<div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

    <div class="swiper books-swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            
        </div>
    </div>

    <div class="arrows-wrapper">
        <div class="books-swiper-button-prev swiper-button-prev">
            <img src="/assets/images/arrow-left.svg">
        </div>
        <div class="books-swiper-button-next swiper-button-next">
            <img src="/assets/images/arrow-right.svg">
        </div>
    </div>

</div><!-- swiper-slider-wrapper -->

</div> <!-- container -->


</section><!-- books -->

  <section id="books">

  <div class="container">

<div class="headline-wrapper mb-5">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h1 class="headline"> احدث الكتب  </h1>
        <a href="{{route('page.books')}}" class="btn btn-outline-primary"> عرض الكل </a>
    </div>
</div> <!-- headline-wrapper -->

<div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

    <div class="swiper books-swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            
        </div>
    </div>

    <div class="arrows-wrapper">
        <div class="books-swiper-button-prev swiper-button-prev">
            <img src="/assets/images/arrow-left.svg">
        </div>
        <div class="books-swiper-button-next swiper-button-next">
            <img src="/assets/images/arrow-right.svg">
        </div>
    </div>

</div><!-- swiper-slider-wrapper -->

</div> <!-- container -->


</section><!-- books -->


@if( getSettingValue('about') != '' &&  0 )
      <section>
          <div class="container">
              <div class="row">
                <div class="col-12">
                    <a href="{{ route('page.compitation') }}">
                    <img src="{{getImage(getSettingValue('about'))}}" style="max-height: 18rem;" />
                        
                    </a>
                    
                </div>
                  
              </div>
              
          </div>
      </section>
      @endif
      <section id="publishers">

          <div class="container">

              <div class="headline-wrapper mb-5">
                  <div class="d-flex justify-content-between align-items-center mb-2">
                      <h1 class="headline color-white"> دور النشر </h1>
                      <a href="{{route('page.publishers')}}" class="btn btn-outline-light"> عرض الكل </a>
                  </div>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                  <div class="swiper publishers-swiper ">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          



                      </div>
                  </div>

                  <div class="arrows-wrapper">
                      <div class="publishers-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="publishers-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->

          </div>

      </section><!-- publishers -->

      

      
      

      <section id="authers" class="mb-5 d-none5">

          <div class="container">

              <div class="headline-wrapper mb-5">   ///            
                  <div class="d-flex justify-content-between align-items-center mb-2">
                      <h1 class="headline"> الاعضاء الاكثر نشاطا </h1>
                      <a href="{{route('page.authers')}}" class="btn btn-outline-primary"> عرض الكل </a>
                  </div>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-bottom-center-arrows">

                  <div class="swiper authers-swiper">

                      <div class="swiper-wrapper">

                          
                      </div>

                  </div>

                  <div class="arrows-wrapper">
                      <div class="authers-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="authers-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>

              </div><!-- swiper-slider-wrapper -->

          </div> <!-- container -->

      </section><!-- authers -->







      <section id="exhibition-guide">
          <div class="exhibition-guide-wrapper text-center">

              <div class="text mb-5">
                  <h1 class="display-3 font-weight-400"> دليل المعرض</h1>
                  <h1 class="display-3 font-weight-400"> هل تبحث عن كتب جديدة؟ </h1>
                  <h3 class="display-4"> هنا ستجد كل ما تحتاجه من كتب لتغذي ذهنك. </h3>
              </div> <!-- text -->

              <div class="search-wrapper p-3">
                  <form action="{{route('page.guide')}}" method="get">
                      <div class="form-group input-with-start-icon m-0">
                          <div class="relative">
                              <input type="text" class="form-control" name="s" placeholder="البحث...">
                              <i class="fa fa-search start-icon"></i>
                          </div>
                      </div>
                      
                  </form>
              </div> <!-- search-wrapper  -->

          </div><!-- exhibition-guide-wrapper -->

          <div class="shape-warpper">
              <img src="/assets/images/exhibition-guide-shape.svg" class="w-100">
          </div>

      </section><!-- exhibition-guide -->

      <section id="sponsors">

          <div class="container">

              <div class="headline-wrapper text-center mb-5">
                  <h1 class="headline"> الرعاة  </h1>
              </div> <!-- headline-wrapper -->

              <div class="swiper-slider-wrapper swiper-with-start-end-arrows">

                  <div class="swiper sponsors-swiper">
                      <!-- Additional required wrapper -->
                      <div class="swiper-wrapper">
                          <!-- Slides -->
                          @foreach ($partners as $item) 
                              <div class="swiper-slide">
                                  <div class="slide-content">
                                      @include('front.shared-html.sponsor-card')
                                  </div>
                              </div>
                              @endforeach

                      </div>
                  </div>

                  <div class="arrows-wrapper">
                      <div class="sponsors-swiper-button-prev swiper-button-prev">
                          <img src="/assets/images/arrow-left.svg">
                      </div>
                      <div class="sponsors-swiper-button-next swiper-button-next">
                          <img src="/assets/images/arrow-right.svg">
                      </div>
                  </div>
              </div><!-- swiper-slider-wrapper -->

          </div>

      </section><!-- sponsors -->

  </div> <!-- home-layout -->

</div> <!-- page -->


@endsection
@section('js')
<script src="/assets/vendors/waypoints/noframework.waypoints.min.js"></script>

<script type="module">
  import {
      CountUp
  } from "{{ url('assets/vendors/countup/CountUp.js')}}"

  function countStart() {
      const $counters = document.querySelectorAll(".js-count-up"),
          options = {
              useEasing: true,
              useGrouping: true,
              separator: ",",
              decimal: "."
          };

      $counters.forEach((item) => {
          const value = item.dataset.value;
          const counter = new CountUp(item, value, options);
          counter.start();
      });
  }

  new Waypoint({
      element: document.querySelector('#intro'),
      handler: function() {
          countStart()
      },
      offset: '20%'
  });


  new Waypoint({
      element: document.querySelector('#statistics'),
      handler: function() {
          countStart()
      },
      offset: '20%'
  });
</script>

<script>
  $(function() {
      initSponsorsSwiper();
      initActivitiesSwiper();
      initPublishersSwiper();
      initBooksSwiper();
      initAuthersSwiper();
      initMediaSwiper();
  });
</script>
    
@endsection