@extends('welcome')

@section('title', 'Projetos | JMA')

@section('meta')

@endsection

@section('css')
<style type="text/css">
.detalhes-txt {border-bottom: 1px solid #bbab97; padding-left:20px;}
.detalhes-txt p {
    font-family: 'asapregular', Verdana, sans-serif;
    color: #333;
    font-size: 12px;
    line-height: 18px;
    padding-bottom: 20px;
    text-align: center;
    margin: auto;
}
.detalhes-txt p span {color: #818181;}
.detalhes-txt .link-tags a {padding: 0 8px 0 8px; border-right: 1px solid #818181;}
.detalhes-txt .link-tags a:last-child {border-right: none;}

.title-project {text-align: center; margin-bottom: 50px; border-top: 2px solid #bbab97;}
.title-project h2 {
    display: inline-block;
    font-family: 'asapregular', Verdana, sans-serif;
    font-size: 23px;
    text-transform: uppercase;
    border-bottom: 1px solid #bbab97;
    padding: 30px 10px 20px;
    color: #333;
}
.title-project span {font-weight: bold;}
.pd-10{padding:10px;}

figure.snip0015 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
  background-color: #000;
  cursor:pointer;
}

figure.snip0015:hover img {
  opacity: 0.5;
  transition: all 0.4s ease-out;
  transform: scale(1.05, 1.05);
}
.card-img-top{cursor:pointer;}

.mt20{margin-top:20px;}
.ml10{margin-left:10px;}





</style>
@endsection


@section('body')
  <a class="btn btn-sm btn-secundary elevation-1 ml10" style="margin-top: 50px;" href="{{ route('/') }}/projetos"><i class="fas fa-chevron-left"></i> Voltar</a></br>  


<div class="row mt20">
  <div class="col-lg-3 col-md-12 bg-white mb20">
    <div class="title-project">
        <h2> <span>{{$p['name']}}</span></h2>
    </div>

    <div class="detalhes-txt">
      <input type="hidden" id="id-project" value="{{$p['id']}}" />
      <p><span>Local:</span><br />{{$p['location']}}</p>
      <p><span>Data do projeto:</span><br />{{$p['year']}}</p>
      <p><span>Área:</span><br />{{$p['field']}} m²</p>
      <p><span>Descrição:</span><br />{{$p['description']}}</p>
    </div> 
  </div>
  <div class="col-lg-9 col-md-12" >
   
    @if(!empty($p['photo']))
    @php
      $count = count($p['photo']);
      $row = 1;
      $row_photo = 1;
      $col = 6;
    @endphp
      <div class="row">
      @foreach($p['photo'] as $photo)

      @php

        if($count == 2){
          if($row == 1 && $row_photo <= 2){
            $col = 6;
          }else if($row == 2 && $row_photo == 1){
            $col = 4;
          }else if($row == 2 && $row_photo == 2){
            $col = 4;
          }else if($row == 2 && $row_photo == 3){
            $col = 4;
          }else if($row == 3){
            $col = 6;
          }
        }else if($count > 2){
          if($row == 1 && $row_photo <= 2){
            $col = 6;
          }else if($row == 2 && $row_photo == 1){
            $col = 4;
          }else if($row == 2 && $row_photo == 2){
            $col = 4;
          }else if($row == 2 && $row_photo == 3){
            $col = 4;
          }else if($row == 3){
            $col = 12;
          }
        }else if($count == 1){
          if($row == 1 && $row_photo == 1){
            $col = 12;
          }else if($row == 1 && $row_photo == 2){
            $col = 6;
          }else if($row == 2 && $row_photo == 1){
            $col = 12;
          }else if($row == 2 && $row_photo == 2){
            $col = 4;
          }else if($row == 2 && $row_photo == 3){
            $col = 4;
          }else if($row == 3 && $row_photo == 2){
            $col = 6;
          }else if($row == 3){
            $col = 12;
          }
        }
      @endphp
        <div class="col-md-{{$col}} col-sm-12">
          <div class="card">
            <img class="card-img-top" data-id="{{$photo->id}}" src="{{ config('app.link_img') }}media/project/{{$p['id']}}/{{$photo->url}}" alt="">
           
          </div>
        </div>
         @php
          $count --;

          if($row == 1 && $row_photo == 2){
            $row = 2;
            $row_photo = 0;
          }else if($row == 2 && $row_photo == 3){
            $row = 3;
            $row_photo = 0;
          }else if($row == 3 && $count == 1){
            $row = 3;
            $row_photo = 1;
          }else if($row == 3){
            $row = 1;
            $row_photo = 0;
          }

          $row_photo ++;
        @endphp
      @endforeach
      </div>
    @endif

</div>

<div class="modal fade " id="md-image">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          @if(!empty($p['photo']))
            @foreach($p['photo'] as $photo) 
            <li data-target="#carouselExampleIndicators" data-slide-to="{{$photo->id}}" class="photo photo{{$photo->id}}"></li>
            @endforeach          
          @endif
        </ol>
        <div class="carousel-inner">
          @if(!empty($p['photo']))
            @foreach($p['photo'] as $photo) 
            <div class="carousel-item photo photo{{$photo->id}}">
              <img class="d-block w-100" src="{{ config('app.link_img') }}media/project/{{$p['id']}}/{{$photo->url}}" alt="">
            </div>
            @endforeach          
          @endif
         
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>


@endsection




@section('js')
<script type="text/javascript">

$(function(){

 $('.card-img-top').on('click', function(){
  var id = $(this).attr('data-id');
  $('.photo').removeClass('active');

  $('.photo'+id).addClass('active'); 

  $('#md-image').modal('show');

 });

});

</script>

@endsection