@extends('layouts.front')
@section('page_title')
@parent
@if($page->metatitle) {{$page->metatitle}} @else {{$page->title}} @endif
@endsection
@section('head-js')
@stop
@section('meta')
    <!-- SEO -->
    <meta name="description" content="@if($page->metatitle) {{$page->metadescr}} @else {{$page->title}} @endif">
    <link rel="canonical" href="{{url('/'.$page->slug)}}" />
    <!-- <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="{{asset('/')}}" /> -->

    <!-- OG -->
    <meta property="og:site_name" content="{{$defaultset->metatitle}}">
    <meta property="og:locale" content="fa_IR" />
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{url('/'.$page->slug)}}">
    <meta property="og:title" content="@if($page->metatitle) {{$page->metatitle}} @else {{$page->title}} @endif">
    <meta property="og:description" content="@if($page->metatitle) {{$page->metadescr}} @else {{$page->title}} @endif">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@Netito28592456" />
    <meta name="twitter:description" content="@if($page->metatitle) {{$page->metadescr}} @else {{$page->title}} @endif" />
    <meta name="twitter:title" content="@if($page->metatitle) {{$page->metatitle}} @else {{$page->title}} @endif" />
@stop
@section('main')
<main class="default">
    <section class="breadcrumb-section section-b-space">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-title">
                        <h1>{{$page->title}}</h1>
                    </div>
                </div>
                <div class="col-12">
                    <nav aria-label="breadcrumb" class="theme-breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{url('/')}}">خانه</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{$page->title}}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <section class="dralipor-pagebody mmt40">
      <div class="container">
          <div class="row section-b-space">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        {!! $page->content !!}
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                      <div class="form-group brand-search-box">
                        <input type="text" placeholder="برند مورد نظر خود را جستجو نمائید" class="input-serach" id="BrnadInput" onkeyup="BrandSelection()">
                      </div>
                      <div class="Brand-Div">
                          <div id="aghayedaroo-brands">
                            @foreach($brands as $brand)
                            <div class="brand-cards">
                              <a href="{{asset('/shop/brand/'.$brand->slug)}}">
                                  @if($brand->src)
                                  <img class="mb-4" @if($brand->src) src="{{asset('/uploads/brand-images/'.$brand->src)}}" @else src="/no-image.jpg" @endif title="{{$brand->title}}" alt="{{$brand->title}}">
                                  @endif
                                {{$brand->title}}
                              </a>
                            </div>
                            @endforeach
                          </div>
                      </div>
                    </div>
                </div>
            </div>
          </div>
      </div>
    </section>
</main>
<!--Section ends-->
@stop
@section('js')
<script>
function BrandSelection() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('BrnadInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("aghayedaroo-brands");
    li = ul.getElementsByClassName("brand-cards");

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>
@stop