@extends('main')
@section('styles')
  {!! Html::style(Theme::current()->assetPath.'/css/product-details-1.css') !!}
  {!! Html::style(Theme::current()->assetPath.'/prettyPhoto/css/prettyPhoto.min.css') !!}
@endsection
@section('page-title')
  <section class="navigation">
    <div class="breadcrumbs-wrap">
      <div class="container clearfix">
        <div class="row">
          <div class="col-md-12">
            <h2>
              {{ $project->title }}
            </h2>
            <ul class="breadcrumbs ul--inline ul--no-style">
              <li>
                <a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a>
              </li>
              <span>/</span>
              <li>
                <a href="{{ Route('mobily.AllProjects') }}"> {{ __('Projects') }} </a>
              </li>
              <span>/</span>
              <li class="active">
                {{ $project->title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection
@section('content')
  <section class="we-are">
    <div class="container">
      <div class="row shop-list single-pro-info no-sidebar">
        <div class="col-lg-12">
          <div class="single-product clearfix">
            <div class="single-pro-slider single-big-photo view-lightbox slider-for">
              <div>
                <img src="{{ asset($project->photo) }}" alt="" />
                <a class="prettyphoto view-fullscreen" rel="prettyPhoto['gall']"  href="{{ asset($project->photo) }}" data-title="{{ $project->title }}">
                  <i class="zmdi zmdi-zoom-in"></i>
                </a>
              </div>
              @if ($project->images->count())
                @foreach ($project->images as $key => $image)
                  <div>
                    <img src="{{ asset($image->path) }}" alt="" />
                    <a class="prettyphoto view-fullscreen" rel="prettyPhoto['gall']" href="{{ asset($image->path) }}"  data-title="{{ $project->title }}">
                      <i class="zmdi zmdi-zoom-in"></i>
                    </a>
                  </div>
                @endforeach
              @endif
            </div>
            <div class="product-info">
              <div class="fix">
                <h4 class="post-title {{ rtl() ? 'floatright' : 'floatleft' }}">{{ $project->title }}</h4>
              </div>
              <div class="product-description">
                {!! nl2br($project->content) !!}
              </div>
              <div class="clearfix">
              </div>
              @if ($project->images->count())
                <div class=" single-sml-photo slider-nav">
                  <div>
                    <div>
                      <img src="{{ asset($project->photo) }}" alt="{{ $project->title }}" />
                    </div>
                  </div>
                  @foreach ($project->images as $key => $image)
                    <div>
                      <div>
                        <img src="{{ asset($image->small) }}" alt="{{ $project->title }}" />
                      </div>
                    </div>
                  @endforeach
                </div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </section>
  @endsection
  @section('scripts')
    {!! Html::script(Theme::current()->assetPath.'/prettyPhoto/js/jquery.prettyPhoto.min.js') !!}
    <script type="text/javascript">
      jQuery(document).ready(function($){
        $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
      });
    </script>
  @endsection