@extends('layout.padrao')
@section('title', 'Open Claims View')

{{-- @section('pesquisa')
    <form class="form-inline w-100 search-listas-int" method="GET" action="{{ route('listClaim','claims') }}">
        <input class="form-control mr-sm-2 text-primary" type="search" placeholder="Search for Claim Reference " name="claims">   
        <button class="btn btn-outline-light " type="submit">Search</button>
    </form> 
@endsection --}}

@section ('content')

<script src="{!! asset ('/typeahead/dist/typeahead.bundle.min.js')!!}"></script>
<script src="{!! asset ('/typeahead/dist/bloodhound.min.js')!!}"></script>
{{-- @dd(http_build_query($params)) --}}
        <!-- Barra de Pesquisa -->
        <div class="col col-lg-12 col-sm-12 col-md-12 folha-interna shadow folha-branca-contornada rounded" >
          <div style="padding-top: 25px; padding-bottom: 7px">
              <div class="col" style="margin-right: 0px !important; margin-left: 0px !important;">
                  <div class="formulario" id="formPesquisa" style="display: none;">
                      <form class="form-inline" method="GET" action="{{ route('listClaim','claims') }}"
                          id="loadingForm">
                          <div class="row">
                            <div class="col-6" >
                                {!! Form::text('claims', null , ['class' => 'form-control ']) !!}
                                <div class="smallFont">Claim Reference</div>
                            </div>
  
                            <div class="col-6" >
                                {!! Form::text('booking', null , ['class' => 'form-control ']) !!}
                                <div class="smallFont">Booking</div>
                            </div>
                                  
                          </div>
                          <div class="w-100"></div>
                          <!-- Botões de Busca e de Limpar os Filtros -->
                          <div class="col col-lg-12 form-group " style="margin-top: 10px; margin-bottom: 20px; text-align: right;">
                              <button class="btn btn-primary " type="submit">
                                  <i class="fas fa-search"></i> Search
                              </button>
                              <button
                                  onclick="if(tipo){window.location = window.location.pathname+'?tipo=clear'+tipo}else{window.location = window.location.pathname};"
                                  id="searchclearSelect2" class="btn btn-primary " type="button">Clear Filter</button>
                          </div>
                  </div>
              </div>
              </form>

              <!-- Botão para recolher a pesquisa -->
              <div class="col-12" style="text-align: center; margin-top: -16px;">
                  <div class="btn" id="dropSearch">
                      <div title="Open Search" style="color: #0d6397 !important; font-size: 1.1 rem;">
                          <span id="spanSearch" style="margin-bottom:-23px">Search</span> </br><i id="openBtn" class="fas fa-chevron-down"></i> 
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <script>

        $(document).on('click', '#dropSearch', function (click) {
            var formulario = document.getElementById("formPesquisa");
            var seta = document.getElementById("dropSearch");
            var spanSearch = document.getElementById("spanSearch");
            var icone = document.getElementById("openBtn"); 

            $('.table').floatThead('reflow')

            if (formulario.style.display == "none") {
                formulario.style.display = "block";
                spanSearch.style.display = "none";
                icone.style.transition = "0.3s";
                icone.style.transform = "rotate(180deg)";
            } else {
                formulario.style.display = "none";
                spanSearch.style.display = "block";
                icone.style.transition = "0.3s";
                icone.style.transform = "rotate(0deg)";
            }

        })

    </script>

    <!--Filtro Tag return-->

@include('include.filtro_result')
<div class="col-lg-12 col-md-12 col-sm-12" style="margin-top:50px;margin-bottom:50px">
    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="card" style="background-color:#4f92c1 !important; width:80%">
            <div class="card-body">
                <div class="col-lg-2 col-md-2 col-sm-2" style="height:71px">
                    <i class="fas fa-exclamation-triangle fa-3x" style="color:white;position:absolute;top:15%;left:50%"></i>  
                </div>
                
                    <div class="col-lg-9 col-md-9 col-sm-9 text-right">
                        <h5 class="card-title" style="font-size:22px;color:white"><b>{{count($openClaims)}}</b></h5>
                        <p class="card-text" style="font-size:18px;color:white">Open Claim</p>
                    </div>
            
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="card" style="background-color:#36854f !important; width:80%">
            <div class="card-body">
                <div class="col-lg-2 col-md-2 col-sm-2" style="height:71px">
                    <i class="far fa-check-square fa-3x" style="color:white;position:absolute;top:15%;left:50%"></i>  
                </div>
                <a href="{{route('listClosedClaim')}}">
                    <div class="col-lg-9 col-md-9 col-sm-9 text-right">
                        <h5 class="card-title" style="font-size:22px;color:white"><b>{{count($countClosedclaim)}}</b></h5>
                        <p class="card-text" style="font-size:18px;color:white"> Closed Claim</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3">
    <a href="{{route('createClaim')}}">
        <div class="card" style="background-color:#4f6d81 !important; width:80%">
            
                <div class="card-body">
                    <div class="col-lg-2 col-md-2 col-sm-2" style="height:71px">
                        <i class="far fa-file-alt fa-3x" style="color:white;position:absolute;top:15%;left:50%"></i>  
                    </div>
                    <div class="col-lg-9 col-md-9 col-sm-9 text-right">
                        <p class="card-text" style="font-size:18px;color:white;margin-top:40px"> New Claim</p>
                    </div>
                </div>
            
        </div>
    </a>   
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="card" style="background-color:#424D53 !important; width:80%">
            <div class="card-body">
                <div class="col-lg-2 col-md-2 col-sm-2" style="height:71px">
                    <i class="fas fa-chart-line fa-3x" style="color:white;position:absolute;top:15%;left:50%"></i>  
                </div>
                <div class="col-lg-9 col-md-9 col-sm-9 text-right">
                    <p class="card-text" style="font-size:18px;color:white;margin-top:40px">KPI</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="table-responsive tableMenor">
        @include('claim.table')
    </div>
</div>
<div align="center"  class="d-flex justify-content-center">
    {{ $claims->links() }}
</div>
@include('bibliotecas.floattheadOverflow')
@include('include.modal_deletar', ["rota" => "Claim"])
@endsection