@extends("website.layouts.layouts")
@section('customized_meta')
    <!------ page meta tag ------->
    <meta name="description" content="{{$og->description?$og->description:$mainOpenGraph->description}}">
    <meta name="keywords" content="{{$og->key_words?$og->key_words:$mainOpenGraph->key_words}}">
    <!--------------------------->
    <!------ open graph meta tag ------->

    <meta property="og:type"content="{{$og->openGraph->og_type?$og->openGraph->og_type:$mainOpenGraph->openGraph->og_type}}">
    <meta property="og:title"content="{{$og->openGraph->og_title?$og->openGraph->og_title:$mainOpenGraph->openGraph->og_title}}">
    <meta property="og:description"content="{{$og->openGraph->og_description?$og->openGraph->og_description:$mainOpenGraph->openGraph->og_description}}">
    <meta property="og:url"content="{{$og->openGraph->og_url?$og->openGraph->og_url:$mainOpenGraph->openGraph->og_url}}">
    <meta property="og:site_name"content="{{$og->openGraph->og_site_name?$og->openGraph->og_site_name:$mainOpenGraph->openGraph->og_site_name}}">


    @if($og->openGraph->image_url)
        <meta property="og:image"content="{{$og->openGraph->image_url}}">
    @elseif($mainOpenGraph->openGraph->image_url)
        <meta property="og:image"content="{{$mainOpenGraph->openGraph->image_url}}">
    @elseif($og->openGraph->og_image_id)
        <meta property="og:image"content="{{asset("/storage/uploads/".$og->openGraph->image->dir_name.'/'.$og->openGraph->image->name)}}">
    @elseif($mainOpenGraph->openGraph->og_image_id)
        <meta property="og:image"content="{{asset("/storage/uploads/".$mainOpenGraph->openGraph->image->dir_name.'/'.$mainOpenGraph->openGraph->image->name)}}">
    @endif

    <!------------->
@endsection
@section('customized_script')
<!-- WhatsHelp.io widget -->
<script>
    /*(function () {
        var options = {
            call_to_action: "Message us", // Call to action
            button_color: "#666666", // Color of button
            position: "right", // Position may be 'right' or 'left'
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();*/
    var body =$("body");
    body.addClass('toggle-body-overflowY');
</script>
<!-- /WhatsHelp.io widget -->
@endsection
@section('customized_home')
<div class="loading-div">
    <img src="{{asset("/website/images/icons/loading.gif")}}" alt="img">
  </div>
@endsection
@section('content')
    <!-- start home main slider -->
    <div class="swiper-container home-main-slider swiper-container-fade swiper-container-initialized swiper-container-horizontal">
        <div class="swiper-wrapper" style="transition-duration: 0ms;"><div class="swiper-slide swiper-slide-duplicate swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="2" style="width: 943px; transition-duration: 0ms; opacity: 0; transform: translate3d(0px, 0px, 0px);">
                <div class="slider-img">
                    <img src="./images/home-main-slides/slide-3.jpg" alt="img">
                </div>
                <div class="slider-text">
                    <div class="text-buttons">
                        <div class="text">
                            <p>
                                Power Block
                            </p>
                            <p>
                                Power Block Factory (Blocks, Curbs &amp;Interlock tiles) is sister company of Power Ring contacting company
                            </p>
                        </div>
                        <div class="buttons">
                            <a href="/products">
                                <i class="linearicons-finger-tap2"></i>
                                <span>
                                  {{--Products--}}
                                    {{trans("trans.slider_product")}}
                                </span>
                            </a>
                            <a href="/about">
                                <i class="linearicons-pushpin"></i>
                                <span>
                                 {{-- About US--}}
                                    {{trans("trans.slider_about")}}
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @if($sliders)
                @foreach($sliders as $slider)
                    <div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 943px; transition-duration: 0ms; opacity: 0; transform: translate3d(-943px, 0px, 0px);">
                        <div class="slider-img">
                            <img src="/storage/uploads/slider/{{$slider->image->name}}" alt="img">
                        </div>
                        <div class="slider-text">
                            <div class="text-buttons">
                                <div class="text">
                                    <p>
                                        {{--Power Block--}}
                                        {{$slider->{'slider_'.HelperClass::currentLang()}->title}}
                                    </p>
                                    <p>
                                        {{--Power Block Factory (Blocks, Curbs &amp;Interlock tiles) is sister company of Power Ring contacting company--}}
                                        {{$slider->{'slider_'.HelperClass::currentLang()}->description}}
                                    </p>
                                </div>
                                <div class="buttons">
                                    <a href="/products">
                                        <i class="linearicons-finger-tap2"></i>
                                        <span>
                                  {{--Products--}}
                                            {{trans("trans.slider_product")}}
                                        </span>
                                    </a>
                                    <a href="/about">
                                        <i class="linearicons-pushpin"></i>
                                        <span>
                                            {{--About US--}}
                                            {{trans("trans.slider_about")}}
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                @endforeach
                @else
                @endif
           {{-- <div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0" style="width: 943px; transition-duration: 0ms; opacity: 0; transform: translate3d(-943px, 0px, 0px);">
                <div class="slider-img">
                    <img src="{{asset("website/images/home-main-slides/slide-1.jpg")}}" alt="img">
                </div>
                <div class="slider-text">
                    <div class="text-buttons">
                        <div class="text">
                            <p>
                                Power Block
                            </p>
                            <p>
                                Power Block Factory (Blocks, Curbs &amp;Interlock tiles) is sister company of Power Ring contacting company
                            </p>
                        </div>
                        <div class="buttons">
                            <a href="./products.html">
                                <i class="linearicons-finger-tap2"></i>
                                <span>
                                  Products
                                </span>
                            </a>
                            <a href="./about.html">
                                <i class="linearicons-pushpin"></i>
                                <span>
                                  About US
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide" data-swiper-slide-index="1" style="width: 943px; transition-duration: 0ms; opacity: 0; transform: translate3d(-1886px, 0px, 0px);">
                <div class="slider-img">
                    <img src="./images/home-main-slides/slide-2.jpg" alt="img">
                </div>
                <div class="slider-text">
                    <div class="text-buttons">
                        <div class="text">
                            <p>
                                Power Block
                            </p>
                            <p>
                                Power Block Factory (Blocks, Curbs &amp;Interlock tiles) is sister company of Power Ring contacting company
                            </p>
                        </div>
                        <div class="buttons">
                            <a href="./products.html">
                                <i class="linearicons-finger-tap2"></i>
                                <span>
                                  Products
                                </span>
                            </a>
                            <a href="./about.html">
                                <i class="linearicons-pushpin"></i>
                                <span>
                                  About US
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="2" style="width: 943px; transition-duration: 0ms; opacity: 0; transform: translate3d(-2829px, 0px, 0px);">
                <div class="slider-img">
                    <img src="./images/home-main-slides/slide-3.jpg" alt="img">
                </div>
                <div class="slider-text">
                    <div class="text-buttons">
                        <div class="text">
                            <p>
                                Power Block
                            </p>
                            <p>
                                Power Block Factory (Blocks, Curbs &amp;Interlock tiles) is sister company of Power Ring contacting company
                            </p>
                        </div>
                        <div class="buttons">
                            <a href="./products.html">
                                <i class="linearicons-finger-tap2"></i>
                                <span>
                                  Products
                                </span>
                            </a>
                            <a href="./about.html">
                                <i class="linearicons-pushpin"></i>
                                <span>
                                  About US
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="0" style="width: 943px; transition-duration: 0ms; opacity: 1; transform: translate3d(-3772px, 0px, 0px);">
                <div class="slider-img">
                    <img src="./images/home-main-slides/slide-1.jpg" alt="img">
                </div>
                <div class="slider-text">
                    <div class="text-buttons">
                        <div class="text">
                            <p>
                                Power Block
                            </p>
                            <p>
                                Power Block Factory (Blocks, Curbs &amp;Interlock tiles) is sister company of Power Ring contacting company
                            </p>
                        </div>
                        <div class="buttons">
                            <a href="./products.html">
                                <i class="linearicons-finger-tap2"></i>
                                <span>
                                  Products
                                </span>
                            </a>
                            <a href="./about.html">
                                <i class="linearicons-pushpin"></i>
                                <span>
                                  About US
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>--}}
        </div>

        <!-- rtl code -->
        <div class="swiper-button-prev home-main-slider-prev" tabindex="0" role="button" aria-label="Previous slide">
            <span class="ion-android-arrow-forward"></span>
        </div>
        <div class="swiper-button-next home-main-slider-next" tabindex="0" role="button" aria-label="Next slide">
            <span class="ion-android-arrow-back"></span>
        </div>
        <!-- rtl code -->

        <!-- ltr code -->
        <!-- <div class="swiper-button-next home-main-slider-next">
          <span class="ion-android-arrow-forward"></span>
        </div>
        <div class="swiper-button-prev home-main-slider-prev">
          <span class="ion-android-arrow-back"></span>
        </div> -->
        <!-- ltr code -->

        <div class="swiper-pagination home-main-slider-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
    <!-- end home main slider -->


    <!-- home about section -->
    <div class="home-about-section">
        <div class="section-body">
            <div class="left-section">
                <div class="section-heading">
                    <p class="heading">
            <span>
              {{--About--}}
                {{trans("trans.home_about_header")}}
            </span>
            <span>
              {{--Power Block--}}
                {{trans("trans.home_about_description")}}
            </span>
                    </p>
                </div>
                <div class="body">
                    <div class="text">
                        <ul>
                           {{-- <li>
                                <p>
                                    Power Block Factory (Blocks, Curbs &amp;Interlock tiles) is sister company of Power Ring contacting
                                    company
                                </p>
                            </li>
                            <li>
                                <p>
                                    Power Block aspires to penetrate the market quickly and to be one of the premier concrete blocks,
                                    curbs
                                    and interlock tiles manufacturing companyin megaprojectsall around Egypt.
                                </p>
                            </li>--}}
                            {!! $about?$about->{'about_'.HelperClass::currentLang()}->about_company:'' !!}

                        </ul>
                    </div>
                    <a class="more-btn" href="/about">
            <span>
              {{--More--}}
                {{trans("trans.home_about_more")}}
              <i class="ion-android-share"></i>
            </span>
                    </a>
                </div>
            </div>
            <div class="right-section">
                <div class="img-div">
                    @if($about)
                    <img src="/storage/uploads/about/{{$about->aboutImage->name}}" alt="img">
                        @else

                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- /home about section -->
    <!-- home Division section -->
    <div class="division-section">
        <div class="section-heading">
            <p>
                {{--PowerBlock Categories--}}
                {{trans("trans.home_categories")}}
            </p>
        </div>
        <div class="section-body">
            <ul class="main-section-ul">
                @if($shared_categories)
                    @foreach($shared_categories as $category_item)
                        <li>
                            <a href="/category/{{$category_item->id}}">
                                <div class="text-btn-wrapper">
                                    <div class="text">
                                        <div class="heading">
                                            <p>
                                                {{$category_item->{'category_'.HelperClass::currentLang()}->name}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-div">
                                    <img src="/storage/uploads/category/{{$category_item->image->name}}" alt="img">
                                </div>
                            </a>
                        </li>

                    @endforeach
                @else

                @endif

            </ul>
        </div>
    </div>
    <!-- /home Division section -->
    <!-- home contact section -->
    <div class="home-contact-section">
        <div class="section-heading">
            <p>
                {{--Product Quick Request--}}
                {{trans("trans.home_product_request")}}
            </p>
        </div>
        <div class="section-body">
            <div class="container">
                <div class="left-section">
                    <div class="form-wrapper">
                        @include('website.layouts.messages')
                        <form class="home-contact-form mfa-form"action="/home/product_request"method="post">
                            @csrf
                            <div class="form-div">
                                <label for="name">
                                      <span>
                                        {{--Name--}}
                                          {{trans("trans.requester_name")}}
                                      </span>
                                    <input type="text" id="name"name="name"value="{{old("name")}}">
                                    <i class="linearicons-user"></i>
                                </label>
                            </div>
                            <div class="form-div">
                                <label for="phone">
                                      <span>
                                        {{--Phone--}}
                                          {{trans("trans.requester_phone")}}
                                      </span>
                                    <input type="text" id="phone"name="phone"value="{{old("phone")}}">
                                    <i class="linearicons-phone"></i>
                                </label>
                            </div>
                            <div class="form-div">
                                <label for="email">
                                      <span>
                                        {{--Email--}}
                                          {{trans("trans.requester_email")}}
                                      </span>
                                    <input type="text" id="email"name="email"value="{{old("email")}}">
                                    <i class="linearicons-envelope"></i>
                                </label>
                            </div>
                            <div class="form-div">
                                <label class="select-label" for="select-service">
                                      <span>
                                        {{--Select Product--}}
                                          {{trans("trans.order_product")}}
                                      </span>
                                    <select id="select-service"name="product_id">
                                        <option value="" selected="true"></option>
                                        @if($categories)
                                            @foreach($categories as $category)
                                                <optgroup label="{{$category->{'category_'.HelperClass::currentLang()}->name}}">
                                                    @if($category->products)
                                                        @foreach($category->products as $category_products)
                                                            <option value="{{$category_products->id}}">
                                                               {{$category_products->{'product_'.HelperClass::currentLang()}->title}}
                                                            </option>
                                                        @endforeach
                                                    @else
                                                    @endif
                                                </optgroup>
                                                @endforeach
                                        @else
                                        @endif
                                    </select>
                                    <!-- <i class="linearicons-chevron-down"></i> -->
                                </label>
                            </div>
                            <div class="form-div">
                                <label for="message" class="message-label">
                                      <span>
                                       {{-- Message--}}
                                          {{trans("trans.requester_message")}}
                                      </span>
                                    <textarea id="message"name="message_content">{{old("message_content")}}</textarea>
                                    <i class="linearicons-bubble-text"></i>
                                </label>
                            </div>
                            <button type="submit">
                                <span>
                                  {{--Submit--}}
                                    {{trans("trans.submit")}}
                                  <i class="linearicons-paper-plane"></i>
                                </span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="right-section">
                    <div class="img-div">
                        <img src="{{asset("website/images/home-about/request.jpg")}}" alt="img">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /home contact section -->

    <!---<div class="home-testimonials-section">
        <div class="section-heading">
            <p>
               {{-- What Our Clients Say--}}
                {{trans("trans.home_clients")}}
            </p>
        </div>
        <div class="testimonials-slick-slider">
            @if($testimonials)
                @foreach($testimonials as $testimonial)
                    <div class="item-wrapper">
                        <div class="item-inner">
                            <div class="img-div">
                                <img src="/storage/uploads/testimonial/{{$testimonial->image->name}}" alt="img">
                            </div>
                            <div class="text">
                                <p>
                                    {{--Lorem ipsum dolor sit amet consectetur adipisicing elit. Non exercitationem provident cum repellat neque
                                    ducimus modi ullam--}}
                                    {{$testimonial->{'testimonial_'.HelperClass::currentLang()}->description}}
                                </p>
                            </div>
                            <div class="title">
                                <p>
                                    {{--Ahmed rady--}}
                                    {{$testimonial->{'testimonial_'.HelperClass::currentLang()}->name}}
                                </p>
                            </div>
                        </div>
                    </div>

                @endforeach
            @else
            @endif

        </div>
    </div> --->

    <!-- end testimonials section -->
   <!-- our clients section -->
    <div class="clients-section">

        <div class="section-heading">
            <p>
                {{--Our Partners--}}
                {{trans("trans.home_our_partner")}}
            </p>
        </div>
        <div class="swiper-container home-clients-slider">
            <div class="swiper-wrapper">
                @if($clients)
                    @foreach($clients as $client)
                        <div class="swiper-slide">
                            <div class="slider-img">
                                <img src="/storage/uploads/client/{{$client->image->name}}" alt="img">
                                {{--<img src="{{url("storage/uploads/client/".$client->image->name)}}" alt="img">--}}
                            </div>
                        </div>
                    @endforeach
                @else
                @endif
            </div>
        </div>
    </div>
    <!-- our clients section -->
    <!-- end home page -->

@endsection