@extends('welcome')

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


@section('meta')

@endsection



@section('css')
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700);
h1,h2,h3,h4,h5,h6{font-family:montserrat,sans-serif;line-height:1.3;margin:0}
.sp-page-title{padding:70px 0;text-align:center}
.sp-page-title .sp-page-title-heading,.sp-page-title .sp-page-title-sub-heading{margin:0;padding:0;color:#fff;position:relative;z-index:10;display:block}
.sp-page-title .sp-page-title-heading{font-size:43px;font-weight:500;letter-spacing:1px;text-align:center;margin:10px 0 20px;text-shadow:7px 7px 0 rgba(150,150,150,.2)}
.sp-page-title .sp-page-title-heading:before{content:'';display:block;width:90px;height:2px;margin:auto;margin-bottom:15px;background:#fff}
.sp-page-title .sp-page-title-sub-heading{font-size:12px;font-weight:500;letter-spacing:15px;color:#fff;text-align:center;text-transform:uppercase}

.fwb{font-weight:bold;}
.txtd-u{text-decoration: underline;}
.txtd-u{text-decoration: underline;}
.txt-after{font-size:14px;}
.pd15{padding:15px;}
.pt5{padding-top:5px;}
.hr1{
  border: 0;
  border-top: 1.5px solid red;
  margin-left:20px;
  margin-right:20px;
}
.type{
  margin:auto;
  text-align:center;
  list-style:none;
}

@font-face {
  font-family: 'artifakt';
  src: url("{{asset('/assets/css/font/artifakt/artifakt_element_regular.ttf')}}") format('truetype');
}


.type li{display: inline-block; padding: 4px 20px;font-size:16px;cursor:pointer;}

figure.snip0015 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
  background-color: #000;
}
figure.snip0015 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0015 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0015 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5em 3em;
  width: 100%;
  height: 100%;
}
figure.snip0015 figcaption::before {
  position: absolute;
  top: 50%;
  right: 30px;
  bottom: 50%;
  left: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015 h2,
figure.snip0015 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.snip0015 h2 {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(0%, 50%, 0);
  transform: translate3d(0%, 50%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0015 h2 span {
  font-weight: 800;
}
figure.snip0015 p {
  font-weight: 200  ;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0015 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0015:hover img {
  opacity: 0.35;
  transition: all 0.4s ease-out;
  transform: scale(1.15, 1.15);
}
figure.snip0015:hover figcaption h2 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;

}
figure.snip0015:hover figcaption p {
  opacity: 0.9;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0015:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  top: 30px;
  bottom: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}



</style>
@endsection



@section('body')

<!--<section>

  <div class="row">
    <div id="sp-title" class="col-lg-12 ">
      <div class="sp-column ">
        <div class="sp-page-title"style="background-color: #1d1d1d;">
          <div class="container">
            <h2 class="sp-page-title-heading">Projetos</h2>
            <h3 class="sp-page-title-sub-heading">Josicler Marques</h3>
          </div>
        </div>
      </div>
    </div>
  </div>



</section>-->

<section style="margin-top:30px;">

  <ul class="type ftn-art">
    <li class="type-span @if($type_id == 0) txtd-u text-danger fwb @endif" data-type="0">JMA All </br><span class="txt-after">( todos )</span></li>
    @if(!empty($type))
      @foreach($type as $t)
        <li class="type-span @if($type_id == $t->type_id) txtd-u text-danger fwb @endif" data-type="{{$t->type_id}}">JMA {{$t->type}} </br><span class="txt-after">( {{$t->type_name}} )</span></li>
      @endforeach
    @endif
  </ul>
  <hr class="hr1">
  

<div class="row" style="margin-top:30px;margin-bottom:50px;margin-left:15px;margin-right:15px; ">
  @if(!empty($project))
  @php
    $count = count($project);
    $row = 1;
    $row_photo = 1;
    $col = 6;
  @endphp

    @foreach($project as $p)    
      @if(!empty($p['url']))

      @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-lg-{{$col}} col-md-12 mb-{{$col}} mb-lg-0" style="padding-left:5px;padding-right:5px;padding-top:0px;  ">
          <figure class="snip0015 elevation-3 rounded">
            <img
              src="{{ config('app.link_img') }}media/project/{{$p['id']}}/{{$p['url']}}"
              class="w-100 shadow-1-strong rounded"
              alt=""
            />
            <figcaption>
              <h2><span>{{$p['name']}}</span></h2>
              <h2>{{$p['year']}}</h2>
              <a href="projetos/{{$p['slug']}}"></a>
            </figcaption>
            
            @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
          </figure>
        </div>
      @endif
    @endforeach
  @endif  
</div>






</section>


@endsection




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

$(function(){


$('.type-span').on('click', function () {

  var type = $(this).attr('data-type');
  var _method = 'GET';
  $.ajax({
  url: "{{ route('projetos.edit', 'type') }}",
  type:'POST',
  data:{type:type,_method:_method},
  dataType:'json',
  success:function(json){
    window.location.reload();
  }
  }); 

});




});

</script>

@endsection