@extends('layout.padrao')
@section('title', 'List - Local Hauling Rates')

@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('listHauling','localHaulingRate') }}" id = "searchHaulingForm" 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('hauling_id', 'Hauling: ', [ 'class' => 'w-100 control-label', ]) !!}
                    {!! Form::select('hauling_id[]', $select['haulings'], old('hauling_id',$returnSearchSelect['haulings']), ['class' => 'hauling_id form-control','multiple'=>'multiple']) !!}
                </div>
                <div class="col col-lg-6 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_id form-control', 'multiple'=>'multiple']) !!}
                </div>
            </div>
            <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('container_types_id', 'Container Type: ', [ 'class' => 'w-100 control-label', ]) !!}
                    {!! Form::select('container_types_id[]', $select['containerTypes'], old('container_types_id',$returnSearchSelect['containerTypes']), ['class' => 'container_types_id form-control', 'multiple'=>'multiple']) !!}
                </div>
                <div class="col col-lg-6 col-md-6 col-sm-12 form-group ">
                    {!! Form::label('origin', 'Origin', [ 'class' => 'w-100 control-label', ]) !!}
                    {!! Form::select('origin[]', $select['origins'], old('origin',$returnSearchSelect['origins']), ['class' => 'origin form-control','multiple' => 'multiple']) !!}
                </div>
            </div>
            <div class="col col-lg-12 col-md-12 col-sm-12">
                <div class="col col-lg-6 col-md-6 col-sm-12 form-group ">
                    {!! Form::label('destinationI', 'Destination I', [ 'class' => 'w-100 control-label']) !!}
                    {!! Form::select('destinationI[]', $select['destinationI'], old('destinationI',$returnSearchSelect['destinationI']), ['class' => 'destinationI form-control','multiple' => 'multiple']) !!}
                </div>
                <div class="col col-lg-6 col-md-6 col-sm-12 form-group ">
                    {!! Form::label('destinationII', 'Destination II', [ 'class' => 'w-100 control-label']) !!}
                    {!! Form::select('destinationII[]', $select['destinationII'], old('destinationII',$returnSearchSelect['destinationII']), ['class' => 'destinationII form-control','multiple' => 'multiple']) !!}
                </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:10px">
   
{{--        <a title="Export This Consult" href="{{ action('LocalHaulingRateController@list', ['tipo' => 'export']) }}" style='width:50px;' class="btn btn-padrao" >--}}
{{--            <i class="fas fa-download"></i>--}}
{{--        </a>--}}
    </div>
    <div class="table-responsive" style="overflow:clip; white-space: nowrap; height:950px;">
     @include('localHauling.table', $registers)
    </div>
    <div align="center"  class="d-flex justify-content-center">
        {{ $registers->links() }}
    </div>
    @include('localHauling.script')
    @include('bibliotecas.bootstrapTable2WithModal')

    <!-- Delete Model -->
    @include('include.modal_deletar', ["rota" => "localHauling"])

    <script>
        $(document).on('click', '#dropSearch', function (click) {
            var formulario = document.getElementById("searchHaulingForm");
            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(){
            $("#port_destinations").val(null).trigger('change');

        }
        $(function(){
            $("#searchclearSelect2").click(function(){
                $(".hauling_id").select2('val', 'All');
                $(".platforms_id").select2('val', 'All');
                $(".container_types_id").select2('val', 'All');
                $(".origin").select2('val', 'All');
                $(".container_types_id").select2('val', 'All');
                $(".destinationI").select2('val', 'All');
                $(".destinationII").select2('val', 'All');
                $("#searchHaulingForm").submit();
            });
        });
    </script>
@endsection