@extends('front-end.inc.layout')

@section('css')
<style>
    .photo-gallery {
  color:#313437;
  background-color:#fff;
}

.photo-gallery p {
  color:#7d8285;
}

.photo-gallery h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}

@media (max-width:767px) {
  .photo-gallery h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}

.photo-gallery .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 40px;
}

.photo-gallery .intro p {
  margin-bottom:0;
}

.photo-gallery .photos {
  padding-bottom:20px;
}

.photo-gallery .item {
  padding-bottom:30px;
}

</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
@endsection
@section('content')

        <!-- Page Header End -->
        <div class="container">
            <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
                <h1 class="m-5"><span class="section-title text-primary text-uppercase">{{$product->name}}</span></h1>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <img class="img-fluid rounded w-100 wow zoomIn" data-wow-delay="0.3s" src="{{asset('storage/'.$product->image)}}" style="visibility: visible; animation-delay: 0.3s; animation-name: zoomIn;">
                </div>
                <div class="col-md-6">
                    <h6>{{__('main.Description')}}</h6>
                    <p>
                        {!! $product->description !!}
                    </p>
                </div>
            </div>
            <div class="photo-gallery">
                <div class="container">
                    <div class="intro">
                        <h2 class="text-center">{{__('main.Gallery')}}</h2>
                    </div>
                    <div class="row photos">
                        @foreach (json_decode($product->gallery) as $images)
                        <div class="col-sm-6 col-md-4 col-lg-3 item"><a href="{{asset('storage/'.$images)}}" data-lightbox="photos"><img class="img-fluid" src="{{asset('storage/'.$images)}}"></a></div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
@endsection