@extends('layout.padrao')
@section('title', 'Ocean Freight Fee List')

@section ('content')
    <style>
        .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('listOceanFreightFee','oceanFreightFee') }}" id="searchOceanForm" style="display: none;">
                <h5 style="padding: 5px 29px;">Search For:</h5>
                <div class="col col-lg-12 col-md-12 col-sm-12">
                    <div class="col col-lg-6 col-md-12 col-sm-12 form-group ">
                        {!! Form::label('loading_ports_id', 'Loading Ports: ', [ 'class' => 'w-100 control-label', ]) !!}
                        {!! Form::select('loading_ports_id[]', $select['loadingPorts'], old('loading_ports_id',$returnSearchSelect['loadingPorts']), ['class' => 'loading_ports_id form-control','multiple'=>'multiple', 'id' => 'loading_ports_id']) !!}
                    </div>   
                    <div class="col col-lg-6 col-md-12 col-sm-12 form-group ">
                        {!! Form::label('port_destinations', 'Port of Destination: ', [ 'class' => 'w-100 control-label', ]) !!}
                        {!! Form::select('port_destinations[]', $select['destinationPorts'], old('port_destinations',$returnSearchSelect['destinationPorts']), ['class' => 'port_destinations form-control', 'multiple'=>'multiple' ]) !!}
                    </div>
                </div>
                <div class="col col-lg-12 col-md-12 col-sm-12">
                    <div class="col col-lg-2 col-md-12 col-sm-12 form-group ">
                        {!! Form::label('feeType', 'Fee Type: ', [ 'class' => 'w-100 control-label', ]) !!} 
                        {!! Form::select('feeType', $select['feeType'], old('feeType', $returnSearchSelect['feeType']), ['class' => 'feeType form-control','id' => 'feeType']) !!}
                    </div>
                    <div class="col col-lg-2 col-md-12 col-sm-12 form-group ">
                        {!! Form::label('cargo_types_id', 'Cargo Type: ', [ 'class' => 'w-100 control-label', ]) !!}   
                        {!! Form::select('cargo_types_id', $select['cargo_types_id'], old('cargo_types_id',$returnSearchSelect['cargo_types_id']), ['class' => 'cargo_type form-control']) !!} 
                    </div>
                    <div class="col col-lg-5 col-md-12 col-sm-12 form-group ">
                        {!! Form::label('container_types_id', 'Equipment Type: ', [ '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-12 col-sm-12 form-group ">
                        {!! Form::label('carriers_id', 'Carriers: ', [ 'class' => 'w-100 control-label', ]) !!}   
                        {!! Form::select('carriers_id[]', $select['carriers'], old('carriers_id',$returnSearchSelect['carriers']), ['class' => 'carriers form-control','multiple' => 'multiple']) !!} 
                    </div>
                </div>
                <div class="col col-lg-12 col-md-12 col-sm-12"> 
                    <div class="col col-lg-5 col-md-12 col-sm-12 form-group ">
                        {!! Form::label('platforms_id', 'Products: ', [ 'class' => 'w-100 control-label', ]) !!}   
                        {!! Form::select('platforms_id[]', $select['platforms'], old('platforms_id',$returnSearchSelect['platforms']), ['class' => 'platforms form-control','multiple' => 'multiple']) !!} 
                    </div>    
                    <div class="col col-lg-2 col-md-6 col-sm-12 form-group ">
                        {!! Form::label('maritimeValidadeFrom', 'Valid From', [ 'class' => 'w-100 control-label', ]) !!} 
                        {!! Form::date('maritimeValidadeFrom', old('maritimeValidadeFrom',$returnSearchSelect['maritimeValidadeFrom']) , ['class' => 'form-control ', 'min' => '2019-01-01', 'max' => '2080-01-01']) !!}   
                    </div>           
                    <div class="col col-lg-2 col-md-6 col-sm-12 form-group ">
                        {!! Form::label('maritimeValidadeTo', 'Valid To', [ 'class' => 'w-100 control-label', ]) !!} 
                        {!! Form::date('maritimeValidadeTo', old('maritimeValidadeTo',$returnSearchSelect['maritimeValidadeTo']) , ['class' => 'form-control ', 'min' => '2019-01-01', 'max' => '2080-01-01']) !!}   
                    </div>
                    <div class="col col-lg-1 col-sm-3 col-md-6 form-group " style="margin-top:28px"> 
                        {!! Form::label('dateMaritime', 'Válido', [ 'class' => 'w-80 control-label']) !!}
                        {!! Form::radio('dateMaritime', 'Valido' , old('dateMaritime',$returnSearchSelect['dateMaritime'] == 'Valido' ? true:false) , ['id' => 'dateTank'])!!}
                    </div>
                    <div class="col col-lg-2 col-sm-3 col-md-6 form-group " style="margin-top:28px" > 
                        {!! Form::label('dateMaritime', 'Expirado', [ 'class' => 'w-80 control-label']) !!}
                        {!! Form::radio('dateMaritime', 'Expirado' , old('dateMaritime',$returnSearchSelect['dateMaritime'] == 'Invalido' ? true:false), ['id' => 'dateTank']) !!}
                    </div>
                </div>
                <div class="col col-lg-12 col-md-12 col-sm-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>
            </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;margin-bottom:20px; margin-top:20px">
    @can('create', App\Usuario::class)
        <button onclick="location.href='{{ route('freightFeeSearch') }}'"  class="btn btn-padrao" style="margin-right:25px">+ New</button>
    @endcan
        <a title="Export This Consult" href="{{ action('MaritimeFreightRateController@index', ['tipo' => 'export']) }}" style='width:50px;' class="btn btn-padrao" >
            <i class="fas fa-download"></i>
        </a>
    </div>
    
    <div class="table-responsive tableMenor">
        @include('oceanFreightFee.tableFreight', $oceanFreightFee)
    </div>
    <div align="center"  class="d-flex justify-content-center">
        {{ $oceanFreightFee->links() }}
    </div>
    @include('oceanFreightFee.script')
    <!-- Delete Model -->
    @include('include.modal_deletar', ["rota" => "Maritime Freight Rate"])

    <script>
        $(document).on('click', '#dropSearch', function (click) {
            var formulario = document.getElementById("searchOceanForm");
            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";
            }
        })
    </script>
    
@endsection