@extends('adminlte::page')

@section('title', 'Projetos')

@section('meta')
	<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('css')
	<link rel="stylesheet" type="text/css" href="{{ route('/') }}/assets/css/bootstrap-switch.min.css">
	<link rel="stylesheet" type="text/css" href="{{ route('/') }}/assets/css/icheck-bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="{{ route('/') }}/assets/plugins/select2/css/select2.min.css">
	<link rel="stylesheet" type="text/css" href="{{ route('/') }}/assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
	<link rel="stylesheet" type="text/css" href="{{ route('/') }}/assets/plugins/toastr/toastr.min.css">
  <style type="text/css">
		.txtarea-des{height:80px;width:100%;}
    .td{width:100px;text-align:center;}
    .mt10{margin-top:10px;}
    .mt20{margin-top:20px;}

    .mb10{margin-bottom:10px;}
    .mb30{margin-bottom:30px;}
    .mb50{margin-bottom:50px;}
    .mr20{margin-right:20px;}
    .ml20{margin-left:20px;}
    .img-p-edit{border-radius:10px; }
    .img-p-edit:hover {background-color:#000;opacity:0.3; }
    .aling{text-align:center;margin:auto;}
    .ws{white-space:nowrap;}
    .txtarea-des{border-radius:5px;}
    .txtarea-des:active {border-radius:1px;}

    .fs12{font-size:12px;}
    .fs13{font-size:13px;}
    .fs14{font-size:14px;}

    #img-add-p{display:none;}
    #for-inp-add-p{ background-color: #3498db;border-radius: 5px;color: #fff;cursor: pointer;margin: 10px;padding: 6px 20px}
    #img-edit-p{display:none;}
    #for-inp-edit-p{ background-color: #3498db;border-radius: 5px;color: #fff;cursor: pointer;margin: 10px;padding: 6px 20px}
    #preloader {position: fixed;left: 0px;right: 0px;bottom: 0px;top: 0px;z-index:999999;display:none;text-align:center;margin:auto;background-color:#000;opacity: 0.5;}
    .preimg{margin:auto;text-align:center;margin-top:15%;}
    .price{width:85px; }
    .psize2{display:none;}
    .psize3{display:none;}
    .closep{float:right;margin-bottom:15px;}
    .pg-home{cursor:pointer;}

    .alert-newprice{display:none;color:red;text-align:center;font-size:12px;}
    .alert-30-newprice{display:none;color:red;text-align:center;font-size:12px;}
    .alert-define{display:none;color:red;text-align:center;font-size:14px;}

    .dn{display:none;}
    .cp{cursor:pointer;}
    #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')
<section class="content">
  <div class="container">
    <button class="btn btn-sm btn-primary elevation-1" id="new-project">Novo Projeto</button></br>  
  </div>
</section>
<section>
  <div class="row">
    <div class="col-12">
      </br><h6><i class="fas fa-sort-amount-down"></i> Reordenar projetos</h6>
    </div>
    <div class="col-12">
      <button class="btn btn-sm btn-secundary elevation-1 mb30" id="btn-order-home">Página inicial</button></br>
    </div>
  </div>
</section> 
@endsection

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

<section class="content">
  <div class="container">

    @foreach($type as $t)
        @if(!empty($t['project']))
        <div class="row">
           <div class="col">
                <div class="card mb50">
                    <div class="card-header">
                      <h3 class="card-title" style="text-transform:uppercase;"><strong>{{$t['type_name']}}</strong></h3> 
                    </div>            
                    <div class="card-body table-responsive p-0">
                        <table class="table table-striped table-sm text-nowrap">
                        <thead>
                          <tr>
                            <th style="padding-left:10px;width:40px;"><i class="fas fa-sort-amount-down"></i></th>
                            <th>Nome</th>
                            <th class="td">Ano</th>
                            <th class="td">Área</th>
                            <th class="td">Local</th>
                            <th class="td">Home</th>
                            <th class="td">Ação</th>
                          </tr>
                        </thead>
                       <tbody>
                          @foreach($t['project'] as $p)
                          <tr class="product-sortable" id="{{$p['id']}}">
                            <td style="padding-left:10px;" class="btn-order-products"><i class="fas fa-bars"></i></td>
                            <td>{{$p['name']}}</td>
                            <td class="td">{{$p['year']}}</td>
                            <td class="" style="text-align:center;">{{$p['field']}} m²</td>                          
                            <td class="td">{{$p['location']}}</td>
                            <td class="td">@if($p['home'] == 1) <i class="fas fa-check-square text-success pg-home" data-home="0" data-id="{{$p['id']}}"></i> @else <i class="fas fa-times pg-home" data-home="1" data-id="{{$p['id']}}"></i> @endif</td>
                            <td class="td"><a class="btn btn-xs btn-info" href="projetos/{{$p['id']}}">Ver</a></td>
                          </tr>
                          @endforeach               
                        </tbody>
                      </table>
                    </div>
                </div>
            </div>
        </div>
        @endif
    @endforeach

  </div>
</section>

<div class="modal fade" data-backdrop="static" id="md-add-project">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"> Adicionar Projeto</h4>       
      </div>
      <div class="msg-g" style="display:none;color:green;text-align:center;">
            <span>Grupo 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="add-name" id="add-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="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="add-area" id="add-area" 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="type" style="width: 100%;">                    
                <option selected="selected" disabled="disabled"></option>
                @foreach($type as $t)
                    <option value="{{$t['id']}}">{{$t['type_name']}}</option>
                @endforeach
              </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="add-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="description" rows="4" placeholder="..."></textarea>
              </div>
            </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group mt20 mb-3 aling">
              <label for="exampleInputFile" class="mt20">Fotos</label>
              <div>
                <div class="custom-file">
                  <label for="img-add-p" id="for-inp-add-p">Selecione a foto</label>
                  <input type="file" id="img-add-p" name="img[]" multiple></br>
                  <span id="qt-file-ap" class="text-success"></span>
                </div>
              </div>                
            </div>
          </div>
        </div>  
    

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

<div class="modal fade" data-backdrop="static" id="md-order-home">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Ordenar projetos página inicial</h4>
      </div>
      <div class="modal-body">
        <div class="card-body sortable">
          @foreach($order_home as $t)            
            <div class="alert item" id="{{$t['id']}}" style="border: 1px solid #000;" >       
              {{$t['name']}}
            </div>
          @endforeach
        </div>
      </div>
      <div class="modal-footer ">
        <a type="button" class="btn btn-default elevation-1 refresh">Sair</a>
      </div>
    </div>    
  </div>  
</div> 

@endsection
@section('js')
<script src="{{ route('/') }}/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{{ route('/') }}/assets/js/jquery-sortable.min.js"></script>
<script src="{{ route('/') }}/assets/js/bootstrap-switch.min.js"></script>
<script src="{{ route('/') }}/assets/plugins/select2/js/select2.full.min.js"></script>
<script src="{{ route('/') }}/assets/adm/plugins/moment/moment.min.js"></script>
<script src="{{ route('/') }}/assets/js/jquery.mask.js"></script>
<script src="{{ route('/') }}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="{{ route('/') }}/assets/plugins/toastr/toastr.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajaxSetup({
	headers: {
	    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	}
});

$('.refresh').on('click', function(){
  window.location.reload();
});
$('.select2').select2();

$('.select2bs4').select2({
  theme: 'bootstrap4'
});
$(document).ready(function(){
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
});

$(document).on("focus", ".money", function() { 
   $(this).mask('000.000.000.000.000,00', {reverse: true});
});

$('#btn-order-home').on('click', function(){
  $('#md-order-home').modal('show');
});


$('#new-project').on('click', function(){
$('#inp-g-name').val('');
$('#inp-g-name-english').val('');
$('#inp-g-name').focus();
$('#md-add-project').modal('show');
$('.msg-error-g').css('display', 'none');
});

$('.pg-home').on('click', function(){
  var id = $(this).attr('data-id');
  var home = $(this).attr('data-home');

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



$('#sub-add-p').on('click', function(){
    $('.add-name-alert').addClass('dn');
    $('.add-type-alert').addClass('dn');
    $('.add-area-alert').addClass('dn');
    $('.add-year-alert').addClass('dn');
    $('.add-location-alert').addClass('dn');

    var name = $('#add-name').val();
    var name_tr = name.trim();
    if(name_tr.length < 1){
        $('.add-name-alert').removeClass('dn');
        return;
    }

    var year = $('#year').val();
    if(year == null){
        $('.add-year-alert').removeClass('dn');
        return;
    }    

    var area = $('#add-area').val();
    var area_tr = area.trim();
    if(area_tr.length < 1){
        $('.add-area-alert').removeClass('dn');
        return;
    }

    var type = $('#type').val();
    if(type == null){
        $('.add-type-alert').removeClass('dn');
        return;
    }

    var location = $('#add-location').val();
    var location_tr = location.trim();
    if(location_tr.length < 1){
        $('.add-location-alert').removeClass('dn');
        return;
    }
    $('#preloader').fadeIn(700);
    var data = new FormData();
    data.append('name', name);
    data.append('area', area);
    data.append('type', type);
    data.append('year', year);
    data.append('location', location);
    data.append('description', $('#description').val());
    var img = $('#img-add-p')[0].files;
    if(img.length > 0) {for (var i=0;i< img.length; i++) {data.append('img'+i, img[i]);}}
    $.ajax({
    url: "{{ route('projetos.store') }}",
    type:'POST',
    data:data,
    contentType:false,
    processData:false,
    dataType:'json',
    success:function(json){
       window.location.reload();
    }
    });

});



$(".sortable").sortable({
connectWith: ".sortable",
placeholder: 'dragHelper',
scroll: true,
revert: true,
cursor: "move",
update: function(event, ui) {
var id = $(this).sortable('toArray').toString();
$.ajax({
url: "{{ route('projetos.update', 'order')}}",
type: 'PUT',
data: {id:id},
success: function(data) {    
}
});
},
start: function( event, ui ) {                        
},
stop: function( event, ui ) {
}
});





});
</script>
@endsection