@extends('layouts.welcomelayouts.app')
@section('title')
<title> All Categories  - {{$appSetting->h1}} | {{$appSetting->slogan}}</title>
@endsection
@section('SEO')
<meta name="description" content="{!!$appSetting->meta_description!!}">
<meta name="keywords" content="{{$appSetting->meta_keyword}}">
<meta property="og:title" content="All Categories - {{$appSetting->h1}} {{$appSetting->slogan}}">
<meta property="og:description" content="{!!$appSetting->meta_description!!}">
<meta property="og:image" content="{asset($appSetting->logo())}}">
<meta property="og:url" content="{{ route('welcome.productCategoryAll')}}">
@endsection
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" type="text/css" media="all" />
<style>
   .allctglist{
       padding:5px 10px;
   }
   
   .allctglist p{
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid #d4d4d4;
   }
   
   .allctglist a{
    text-decoration: none;
    color: black;
    font-weight: bold;
   }
   
   .allctglist span{
    float: right;
    color: gray;
    cursor: pointer;
    padding: 0 10px;
   }
   
   .subctglist ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    
    .subctglist ul li {
    border-bottom: 1px solid #d4d4d4;
    }
    
    .subctglist ul li a {
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    }
   
   
</style>
@endpush
@section('contents')

<div class="row" style="background: #e7e7e7;margin: 0;">
    <div class="col-md-2 hidemobiletopsidebar" style="padding: 0;">
        @include('layouts.welcomelayouts.topsidebarmenu')
    </div>
    <div class="col-md-10" style="background: white;">
        <p style="margin: 0;cursor: pointer;padding: 5px;">
            <a style="text-decoration: none;color: gray;font-size: 14px;" href="">All Category</a> 
        </p>
    </div>
</div>

<div style="border-top: 2px solid #c6c6c6;">
    <div class="row" style="margin:0;">
        
        <div class="col-md-12" style="padding: 10px 0;">
            <div class="productsdivctg" style="padding:15px;background: white;min-height: 550px;">
                  <div class="row" style="margin:0;">
                      @foreach(App\Model\ProductCategory::get() as $category)
                      <div class="col-md-3 allctglist">
                          <p><a href="{{ route('welcome.productCategory',[$category,new_slug($category->title)]) }}">{{$category->title}}</a> @if($category->subcats->count() > 0)<span data-toggle="modal" data-target=".category{{$category->id}}"><i class="fas fa-chevron-down"></i></span> @endif</p>
                      </div>

                        <div class="modal fade category{{$category->id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                          <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">{{$category->title}}</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                 </div>
                                 <div class="modal-body">
                                    @foreach($category->subcats->chunk(3) as  $subcids)
                                    <div class="row">
                                        @foreach($subcids as $subc)
                                        <div class="col-md-4">
                                            <div class="subctglist">
                                                <ul>
                                                    <li><a href="{{ route('welcome.productSubcategory',[$subc, new_slug($subc->title)]) }}" style="font-weight: bold;">{{$subc->title}}</a></li>
                                                    @foreach($subc->subsubcats as $ssc)
                                                    <li><a href="{{ route('welcome.productSubsubcategory',[$ssc,new_slug($ssc->title)]) }}">{{ $ssc->title }}</a></li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    @endforeach
                                 </div>
                            </div>
                          </div>
                        </div>
                      @endforeach
                  </div>
            </div> 
        </div>
    </div>

</div>
@endsection
@push('js')
@endpush