@extends('layout.padrao')
@section('title', 'List - Tank Leasing Rates')

@section ('content')
<style>
    .floatThead-container{
        font-size: 1.0rem;
    }

    .modal-footer{
        padding-bottom: 17px !important;
    }
</style>
    
    <div class="col col-lg-12 col-sm-12 col-md-12">
        <div class="row folha-branca-contornada rounded">
            <form class="form-inline2 w-100" method="GET" action="{{ route('listTankLeasing','tankLeasingRate') }}" id="searchTankLeasingForm" style="display: none;"> 
                <h5 style="padding: 5px 29px;">Search For:</h5>
                <div class="col col-lg-12 col-sm-12 col-md-12">
                    <div class="col col-lg-4 col-md-6 col-sm-12 form-group ">
                        {!! Form::label('loading_ports_id', 'Loading Port', [ 'class' => 'w-100 control-label', ]) !!} 
                        {!! Form::select('loading_ports_id[]', $select['loadingPorts'], old('loading_ports_id',$returnSearchSelect['loadingPorts']),  ['class' => 'loadingPorts form-control','multiple'=>'multiple']) !!} 
                    </div>        
                    <div class="col col-lg-4 col-md-6 col-sm-12 form-group ">
                        {!! Form::label('port_destinations', 'Port of Destination:', [ 'class' => 'w-100 control-label']) !!}
                        {!! Form::select('port_destinations[]', $select['destinationPort'] , old('port_destinations',$returnSearchSelect['destinationPorts']),  ['class' => 'destinationPort form-control','multiple'=>'multiple']) !!} 
                    </div>
                    <div class="col col-lg-4 col-md-6 col-sm-12 form-group ">
                        {!! Form::label('platforms_id', 'Product', [ 'class' => 'w-100 control-label', ]) !!} 
                        {!! Form::select('platforms_id[]', $select['platforms'], old('platforms_id',$returnSearchSelect['platforms']), ['class' => 'platforms form-control','multiple'=>'multiple']) !!} 
                    </div>
                </div>
                <div class="col col-lg-12 col-sm-12 col-md-12">
                    <div class="col col-lg-5 col-md-6 col-sm-12 form-group ">
                        {!! Form::label('container_types_id', 'Container Type/Equipment', [ 'class' => 'w-100 control-label', ]) !!} 
                        {!! Form::select('container_types_id[]', $select['containerTypes'], old('container_types_id',$returnSearchSelect['containerTypes']), ['class' => 'containerTypes form-control', 'multiple'=>'multiple']) !!}  
                    </div>          
                    <div class="col col-lg-3 col-md-6 col-sm-12 form-group ">
                        {!! Form::label('tankValidadeTo', 'Tank Valid To', [ 'class' => 'w-100 control-label', ]) !!} 
                        {!! Form::date('tankValidadeTo', null , ['class' => 'form-control ', 'min' => '2019-01-01', 'max' => '2080-01-01']) !!} 
                    </div>
                    <div class="col col-lg-1 col-sm-4 col-md-12 form-group " style="margin-top:28px"> 
                        {!! Form::label('dateTank', 'Válido', [ 'class' => 'w-80 control-label']) !!}
                        {!! Form::radio('dateTank', 'Valido' , null , ['id' => 'dateTank'])!!}
                    </div>
                    <div class="col col-lg-2 col-sm-4 col-md-12 form-group " style="margin-top:28px" > 
                        {!! Form::label('dateTank', 'Inválido', [ 'class' => 'w-80 control-label']) !!}
                        {!! Form::radio('dateTank', 'Invalido' , null, ['id' => 'dateTank']) !!}
                    </div>
                </div>
                <div class="col col-lg-12 col-sm-12 col-md-12">
                    <div class="col col-lg-2 col-md-6 col-sm-12 form-group " style="margin-top:28px"> 
                        {!! Form::checkbox('flexiTank', 1, null , ['id' => 'flexiTank']); !!}  
                        {!! Form::label('flexiTank', 'Flexitank', [ 'class' => 'pr-16 control-label']) !!}
                    </div>
                    <div class="col col-lg-2 col-md-6 col-sm-12 form-group " style="margin-top:28px"> 
                        {!! Form::checkbox('chemicalTank', 1, null, ['id' => 'chemicalTank']); !!}  
                        {!! Form::label('chemicalTank', 'Chemical Tank', [ 'class' => 'pr-16 control-label']) !!}
                    </div>
                    <div class="col col-lg-2 col-md-6 col-sm-12 form-group " style="margin-top:28px"> 
                        {!! Form::checkbox('foodGradeTank', 1, null , ['id' => 'foodGradeTank']); !!}  
                        {!! Form::label('foodGradeTank', 'Food Grade Tank', [ 'class' => 'pr-16 control-label']) !!}
                    </div>
                    <div class="col col-lg-2 col-md-6 col-sm-12 form-group" style="margin-top:28px"> 
                        {!! Form::checkbox('fosfaTank', 1, null , ['id' => 'fosfaTank']); !!}  
                        {!! Form::label('fosfaTank', 'Fosfa Tank', [ 'class' => 'pr-16 control-label', 'id' => 'fosfaTank']) !!}
                    </div> 
                </div>
                <div class="col col-lg-12 col-sm-12 col-md-12">
                    <div class="col col-lg-12 form-group " style="text-align: right; padding: 12px 30px 0px 0px; z-index: 7">
                        <button class="btn btn-primary " type="submit" >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>
            </form> 
            <!-- Botão para recolher a pesquisa -->
            <div class="col" id="colunaPesquisa" style="text-align: center; margin-top: 1px; z-index: 2">
                <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>
    @include('include.filtro_result')
    <div class="col col-lg-12 col-sm-12 col-md-12 input-group control-group" style="text-align: right; padding: 17px 28px 0 0;margin-bottom:20px">
    @can('create', App\Usuario::class)
        <button onclick="location.href='{{ route('createTankLeasing') }}'" class="btn btn-padrao" style="margin-right:19px">+ New</button>
    @endcan
        <a title="Export This Consult" href="{{ action('TankLeasingRateController@index', ['tipo' => 'export']) }}" style='width:50px;' class="btn btn-padrao" >
            <i class="fas fa-download"></i>
        </a>
    </div>
    <div class="wrapper">
        <div class="table-responsive tableMenor">
            @include('tankLeasingRate.table')        
        </div>
    </div>
    <div align="center"  class="d-flex justify-content-center">
        {{ $registers->links() }}
    </div>
        @include('bibliotecas.floattheadOverflow')
        <!-- Delete Model -->
        @include('include.modal_deletar', ["rota" => "Tank Leasing Rate"])
        @include('tankLeasingRate.script')

        <script>
            $(document).on('click', '#dropSearch', function (click) {
                var formulario = document.getElementById("searchTankLeasingForm");
                var seta = document.getElementById("dropSearch");
                var spanSearch = document.getElementById("spanSearch");
                var icone = document.getElementById("openBtn");
                var colunaPesquisa = document.getElementById("colunaPesquisa");

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

            function clearSelect2(){
                $("#destinationPort").val(null).trigger('change');
            }

            $(function(){
                $("#searchclearSelect2").click(function(){
                    $('[name="tankValidadeTo"]').val(null);
                    $('[name="dateTank"]').val(null);
                    $('[name="flexiTank"]').val(null);
                    $('[name="chemicalTank"]').val(null);
                    $('[name="foodGradeTank"]').val(null);
                    $('[name="fosfaTank"]').val(null);
                    $(".loadingPorts").select2('val', 'All');
                    $(".destinationPort").select2('val', 'All');
                    $(".platforms").select2('val', 'All');
                    $(".containerTypes").select2('val', 'All');
                    $("#searchTankLeasingForm").submit();
                });
            });
        </script> 
@endsection