@extends('adminlte::page')

@section('title', 'Projetos')

@section('meta')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@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;
}
.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;}
.dn{display: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;
    border-bottom: 1px solid #bbab97;
    padding: 30px 10px 20px;
    color: #333;
}
.title-project span {font-weight: bold;}
.pd-10{padding:10px;}
.pr20{padding-right:20px;}
.mb20{margin-bottom:20px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.pt10{padding-top:10px;}
.ml20{margin-left:50px;}

.cp{cursor:pointer;}
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);
}
.aling{text-align:center;margin:auto;}
#inp-banner{display:none;}
#for-inp-banner{ background-color: #18a1b7;border-radius: 5px;color: #fff;cursor: pointer;padding: 6px 20px}
#preloader {position: fixed;left: 0px;right: 0px;bottom: 0px;top: 0px;z-index:999999;text-align:center;margin:auto;background-color:#000;opacity: 0.8;}
#preloader img{margin-top:15%}





</style>
@endsection
@section('content_header')
    <a class="btn btn-sm btn-secundary elevation-1" href="{{ route('/') }}"><i class="fas fa-chevron-left"></i> Voltar</a></br>  
@endsection


@section('content')

<div id="preloader" class="dn"><img width="300" class="preimg" src="{{ route('/') }}/images/loading.gif"></div>

<div class="row">
  <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 class="aling mt10 pt10 mb20">
      <button class="btn btn-info btn-sm btn-edit aling mt10 ml20" 
        data-name="{{$p['name']}}"
        data-location="{{$p['location']}}"
        data-year="{{$p['year']}}"
        data-field="{{$p['field']}}"
        data-description="{{$p['description']}}"
        data-type="{{$p['type_id']}}"
      >Editar</button><br/>
      <button class="btn btn-sm btn-danger mt20 del-project" data-id="{{$p['id']}}" >Excluir Projeto</button>
    </div>
    

    
  </div>
  <div class="col-lg-9 col-md-12" >
   
    @if(!empty($p['photo']))
      <div class="row">
      @foreach($p['photo'] as $photo)      
        <div class="col-md-4 col-sm-12">
          <div class="card">
            <img class="card-img-top" src="{{ config('app.link_img') }}media/project/{{$p['id']}}/{{$photo->url}}" alt="">
            <div class="card-body">
              <div class="row ">
                <div class="col-6 aling">
                  <i style="font-size:26px;" class="far fa-image cp photo-main @if($photo->main == 1) text-success @endif" data-id="{{$photo->id}}"></i>
                </div>
                <div class="col-6 aling">
                  <button class="btn btn-xs btn-secundary elevation-1 text-danger del-photo" data-id="{{$photo->id}}"><i class="fas fa-times"></i> Remover</button>
                </div>
              </div>
             
            </div>
          </div>
        </div>      
      @endforeach
      </div>
    @endif
    <hr/>
    <div class="row mb20">
      <div class="col-12">
        <form method="POST" enctype="multipart/form-data" id="form-banner" action="{{ route('project_open.store')}}" > 
          @csrf
          <label for="inp-banner" id="for-inp-banner"> Adicionar foto</label>

          <input type="file" id="inp-banner" name="img[]"></br>
          <input type="hidden" name="id" value="{{$p['id']}}">
          <span id="qt-file-bg" class="text-success"></span>

          <div class="row mb20">
            <div class="col-12 img-1">
              <img class="my-image1" id="my-image1" style="width:300px;" src="" />                                    
            </div>
            <div class="col-12 img-2 dn">
              <div id="upload-demo"></div>                               
            </div>
          </div>   
          <button type="submit" class="btn btn-sm btn-info elevation-2 submit dn" style="width:100px;">Enviar</button>                                
        </form>
      </div>
    </div>
  </div>

</div>

<div class="modal fade bd-example-modal-sm" id="md-img">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      <img
          src=""
          class="w-100"
          alt=""
        />
    </div>
  </div>
</div>

<div class="modal fade" id="md-del-project">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">  
        <div class="row">
          <div class="col-12">
            <h4>Tem certeza que deseja excluir este projeto?</h4>
          </div>
        </div>
        <input type="hidden" id="id-del-project">               

      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Não</button>
        <button type="button" class="btn btn-primary" id="send-del-project">Sim</button>
      </div>
    </div>    
  </div>  
</div>


<div class="modal fade" id="md-edit-project">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"> Editar Projeto</h4>       
      </div>
      <div class="msg-g" style="display:none;color:green;text-align:center;">
            <span>Projeto adicionado com sucesso!</span>
      </div>
      <div class="modal-body">  
      
        <div class="row">
          <div class="col-md-12">
            <div class="form-group mb-3">
              @csrf
              <label>Nome do projeto</label>
              <input type="text" name="ed-name" id="ed-name" class="form-control elevation-1" required autocomplete="off" autofocus>
              <span class="add-name-alert dn text-danger aling">Preencha o nome do projeto</span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <div class="form-group">
              <label>Ano</label>
              <select class="form-control select2bs4" id="ed-year" style="width: 100%;">                    
                <option selected="selected" disabled="disabled"></option>
                @for($i=2022; $i > 1990; $i--)
                    <option>{{$i}}</option>
                @endfor
              </select>            
             <span class="add-year-alert dn text-danger aling">Selecione o ano</span>
            </div>
          </div>
          <div class="col-8">
            <div class="form-group">
              <label>Área - m²</label>
              <input type="text" name="ed-field" id="ed-field" class="form-control col-5 elevation-1" required autocomplete="off" autofocus>
              <span class="add-area-alert dn text-danger aling">Preencha a área</span>
           </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Tipo projeto</label>
              <select class="form-control select2bs4" id="ed-type" style="width: 100%;">                    
                <option selected="selected" disabled="disabled"></option>
                
              </select>
                <span class="add-type-alert text-danger dn aling">Selecione o tipo do projeto</span>
            </div>
          </div>
          <div class="col-6">
            <div class="form-group">
              <label>Local do projeto</label>
              <input type="text" name="add-lacation" id="ed-location" class="form-control elevation-1" required autocomplete="off" autofocus>
              <span class="add-location-alert dn text-danger aling">Preencha o local</span>
           </div>
          </div>
        </div>
        <div class="row">
            <div class="col-12">
              <div class="form-group">
                <label>Descrição</label>
                <textarea class="form-control" id="ed-description" rows="4" placeholder="..."></textarea>
              </div>
            </div>
        </div>            

      </div>
      <div class="modal-footer justify-content-between">
        <a type="button" class="btn btn-default elevation-1 " data-dismiss="modal">Sair</a>
        <button type="submit" id="sub-ed-p" class="btn btn-primary elevation-1" >Salvar</button>        
      </div>
    </div>    
  </div>  
</div>




@endsection




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

$(function(){
$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('.submit').on('click', function(){
  $('#preloader').fadeIn(700);
});

$('.del-project').on('click', function(){
  var id = $(this).attr('data-id');
  $('#id-del-project').val('');
  $('#id-del-project').val(id);

  $('#md-del-project').modal('show');
});

$('#send-del-project').on('click', function(){  
  $(this).prop('disabled', true); 
  id = $('#id-del-project').val();
  console.log(id);
  var _method = 'GET';
  $.ajax({
  url: "{{ route('project_open.show', 'del-project') }}",
  type:'POST',
  data:{id:id,_method:_method},
  dataType:'json',
  success:function(json){
    
      window.location.href = "{{ route('/') }}";
    
  }  
 });
});


$('#sub-ed-p').on('click', function(){
  var id = $('#id-project').val();
  var name = $('#ed-name').val();
  var location = $('#ed-location').val();
  var year = $('#ed-year').val();
  var field = $('#ed-field').val();
  var type = $('#ed-type').val();
  var description = $('#ed-description').val();

  _method = 'GET'
  $.ajax({
  url: "{{ route('project_open.show', 'sub-ed') }}",
  type:'POST',
  data:{id:id,name:name,location:location,year:year,field:field,type:type,description:description,_method:_method},
  dataType:'json',
  success:function(json){
    window.location.reload();
    return; 
  }
  });

});


$('.btn-edit').on('click', function(){
  var name = $(this).attr('data-name');
  var location = $(this).attr('data-location');
  var year = $(this).attr('data-year');
  var field = $(this).attr('data-field');
  var type = $(this).attr('data-type');
  var description = $(this).attr('data-description');

  $('#ed-name').val('');
  $('#ed-location').val('');
  $('#ed-year').val('');
  $('#ed-field').val('');
  $('#ed-type').html('');
  $('#ed-description').val('');

  $('#ed-name').val(name);
  $('#ed-location').val(location);
  $('#ed-year').val(year);
  $('#ed-field').val(field);
  $('#ed-description').val(description);

  _method = 'GET'
  $.ajax({
    url: "{{ route('project_open.show', 'get-type') }}",
    type:'POST',
    data:{_method:_method},
    dataType:'json',
    success:function(json){
      html = '';
      if(json){
        for (var i = 0; i < json.length; i++) {
          if(type == json[i].id){
            html += '<option value="'+json[i].id+'" selected="selected">'+json[i].type_name+'</option>';
          }else{
            html += '<option value="'+json[i].id+'">'+json[i].type_name+'</option>';
          }          
        }
      }
      $('#ed-type').html('');
      $('#ed-type').append(html);
      $('#md-edit-project').modal('show');
    }
  });

  
  
});

  $('.del-photo').on('click', function(){
    var id = $(this).attr('data-id');
    $('#preloader').fadeIn(700);
    _method = 'DELETE'
    $.ajax({
      url: "{{ route('project_open.destroy', 'del-photo') }}",
      type:'POST',
      data:{id:id,_method:_method},
      dataType:'json',
      success:function(json){
        window.location.reload();
        return;       
      }
    });
  });

  $('.photo-main').on('click', function(){
    var id = $(this).attr('data-id');
    $('#preloader').fadeIn(700);
    _method = 'GET'
    $.ajax({
      url: "{{ route('project_open.show', 'photo-main') }}",
      type:'POST',
      data:{id:id,_method:_method},
      dataType:'json',
      success:function(json){
        window.location.reload();
        return;       
      }
    });
  });

 $('#inp-banner').on('change', function(){
      var qt = $(this).val();
      var qtd = qt.length;

      if(qtd > 0){
        $('#qt-file-bg').html('Foto selecionada');
      }

      var file = $(this)[0].files[0];
      var fileReader = new FileReader();
      fileReader.onloadend = function(){
        $('.my-image1').attr('src', fileReader.result);
        /*$('.my-image1').croppie({
          viewport:{
            width:300,
            height:200
          },
          boundary: { width: 500, height: 300 },
        });
        var el = document.getElementById('my-image1');
        var vanilla = new Croppie(el, {
            viewport: { width: 300, height: 200 },
            boundary: { width: 500, height: 300 }
        });*/
      }
      fileReader.readAsDataURL(file);
      $('.transition').removeClass('dn');
      $('.submit').removeClass('dn');
      
  });

});

</script>

@endsection