@extends('Frontend.layout.main')


@php

    $brandSlug = $brand->slug ?? null;

@endphp





@section('head')





<title>{{$pageData->meta_title ?? 'Eldiar'}}</title>

<meta content="{{$pageData->meta_description ?? 'Eldiar'}}" name="description">

<meta content="{{$pageData->meta_keyword ?? 'Eldiar'}}" name="keywords">




<meta property="og:title" content="{{$pageData->meta_title ?? 'Eldiar'}}" />

<meta property="og:description" content="{{ $pageData->meta_description ?? 'Eldiar' }}" />

@if ($brandSlug && ($pageData->og_image || $pageData->image))

        @php

            $ogImage = $pageData->og_image ?? $pageData->image;

        @endphp

        <meta property="og:image" content="{{ asset('app/public/brands/'.$ogImage) }}" />

    @else

        <meta property="og:image" content="{{ asset('frontend/images/logo.png') }}" />

    @endif

    <meta property="og:image:width" content="480" />

    <meta property="og:image:height" content="480" />




@endsection

@section('content')

<!-- Modal -->
@foreach($brands as $key => $brand)

<div class="modal" id="myModal-{{$key}}">
  <div class="modal-dialog">
    <div class="modal-content">
	 <div class="modal-header">
        <h4 class="modal-title">{{$brand->title}}</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
      <p>
      @if(strip_tags($brand->read_more))

      {!!  $brand->read_more !!}


      @else
      {!!  $brand->description !!}


      @endif
      </p>
      </div>
    </div>
  </div>
</div>
@endforeach

  <!-- model popup -->


    <div id="home" class=" tab-pane active"><br>
        <div id="myCarousel" class="carousel carousel1 slide" data-ride="carousel">

            <div class="carousel-inner carousel-inner1">
                @foreach($brands as $key => $brand)

                    <div class="carousel-item  homeslider @if($key==0) active @endif  ">
                        <img src="{{url('/storage/brands/banners/'.$brand->banner_image )}}" alt=" {{$brand->title}}">
                        <div class="techbanner2">
                            <h2> {{$brand->title}}</h2>
                            <p>{!!$brand->description!!}
                            <a  href="#" data-toggle="modal" class="a_tag_content" data-target="#myModal-{{$key}}">read more..</a>
                            </p>
                           <a href="{{url('/products/?brand='.$brand->slug)}}"><button  class="btn btn-outline-light">DISCOVER MORE</button></a> 
                        </div>
                    </div>
                @endforeach

            </div>

           <div class="mobileOnly">
              <div class="row no-gutters mx-3 my-4">
				  @foreach($brands as $key => $brand)

 

                <div class="col-6 col-md-3">
<a href="!#" data-target="#myCarousel" data-slide-to="{{ $key }}"  class="brand-box @if($key==0) active   @endif " >

 

                    <div class="borderSolid">

 

                        <img src="{{ url('/storage/brands/'.$brand->image) }}" id="{{$brand->slug}}"
                            alt="{{ $brand->title }}" class="img-fluid">

 

                    </div>
</a>

 

                </div>

 

        @endforeach
			  </div> 
			</div>
        </div>
    </div>
<hr>

@php
$currentURL = URL::current();
$slug =explode('/',$currentURL);
$slug =end($slug);

@endphp

@endsection

@section('script')

<script>

$(document).ready(function(){

  $('#{{$slug}}').trigger('click');



})
	
	$(document).ready(function(){

  $('.brand-box').click(function()
	{
	  
	   $('.brand-box').removeClass("active");
	  $("html, body").animate({ scrollTop: 0 }, 800);
	  $(this).addClass('active');
	  
	  
     }
 );



})
	
	 

</script>
@endsection