@extends('master') @section('main_content')

<section class="hero hero-page gray-bg padding-small">
  <div class="container">
    <div class="row d-flex">
      <div class="col-lg-9 order-2 order-lg-1">
        <h1>Shop</h1>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
      </div>
      <div class="col-lg-3 text-right order-1 order-lg-2">
        <ul class="breadcrumb justify-content-lg-end">
          <li class="breadcrumb-item"><a href="{{url('')}}">Home</a></li>
          <li class="breadcrumb-item active">Shop</li>
        </ul>
      </div>
    </div>
  </div>
</section>
<br><br><br>
<div class="row">
  @foreach ($categories as $value)
  <div class="item col-xl-3 col-lg-4 col-md-6">
    <div class="product is-gray">
      <div style="margin-left:5%" class="title"><small class="text-muted">{{ $value['title'] }}</small>
        <a href="detail.html">
          <h3 class="h6 text-uppercase no-margin-bottom">{{$value['url']}}</h3></a>
        </div>
      <div class="image d-flex align-items-center justify-content-center">
        <img src="{{ asset('images').'/'.$value['image'] }}" alt="product" class="img-fluid">
        <div class="hover-overlay d-flex align-items-center justify-content-center">
          <div class="CTA d-flex align-items-center justify-content-center">
            <a href="{{ url('shop') .'/'.$value['url'] }}" class="visit-product active">
                    <i class="icon-search"></i>Go to Category</a>
            <a data="{{$value['id']}}" href="#" data-toggle="modal" data-target="#{{$value['id']}}" class="quick-view">
                  <i class="fa fa-arrows-alt"></i></a></div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div id="{{$value['id']}}" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade overview">
    <div role="document" class="modal-dialog">
      <div class="modal-content">
        <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true"><i class="icon-close"></i></span></button>
        <div class="modal-body">
          <div class="ribbon-primary text-uppercase">Sale</div>
          <div class="row d-flex align-items-center">
            <div class="image col-lg-5"><img src="{{ asset('images').'/'.$value['image'] }}" alt="..." class="img-fluid d-block"></div>
            <div class="details col-lg-7">
              <h2>{{ $value['url'] }}</h2>
              <ul class="price list-inline">
              </ul>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
              <div class="d-flex align-items-center">
              </div>
              <ul class="CTAs list-inline">
                <li class="list-inline-item"><a href="{{ url('shop') .'/'.$value['url'] }}" class="visit-product active btn btn-template-outlined wide">View Category</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 @endforeach {{-- darkBox --}} {{--!!!NEED TO WORK ON IT!!! --}}
</div>
<br><br><br><br>


@endsection