@if(session('filtro2'))
    <div class="alert alert-dark" role="alert">
        Search Results From :

        @foreach(session('filtro2') as $error)
        @if($error != null)
        <span class="badge badge-primary">
            {{ str_replace('"',' ', (str_replace('"]','',str_replace('["','',$error)))) }}
        </span>
        @endif
        @endforeach
        {{session()->forget('filtro2')}}
        <a href="https://app.cargoo.com/shipments" target="_blank" style="position: absolute; margin-top: -8px; right: 42px;">
            <button class="btn btn-cargoo">
                <img src="{!! asset('/image/cargoo-logo.png') !!}" height="22">
            </button>
        </a>
        <a href="http://" target="_blank" rel="noopener noreferrer"></a>
        <button onclick="if(tipo){window.location = window.location.pathname+'?tipo=clear'+tipo}else{window.location = window.location.pathname};"
            class="btn btn-clear" 
            type="button" 
            style="height: 37px !important; margin-top: -8px;"
        >
            <i class="fas fa-times"></i>
        </button>
    </div>
    
    <div class="col-12 folha-interna shadow folha-branca-contornada radius-5 schedules">
        <div class="col margin-top-15">

            <!-- Conteúdo a ser duplicado -->
            @if( ! (empty($data) && isset($data) ))  
                @foreach ($data as $key1 => $obj)
                        <div class="col-12 margin-bottom-15 folha-interna shadow folha-branca-contornada radius-5">
                            <div class="row">
                                <div class="col-6 col-lg-6 col-md-12 col-sm-12 cSchedule align-self-center">
                                    <div class="originPortSchedules">
                                        <i class="fas fa-compass"></i>
                                        <span class="descriptionPortSchedules">{!!($obj["origin"]["Description"] ?? '')!!}</span>
                                        <span class="codeSchedules">- {!!($obj["origin"]["Code"] ?? '')!!} -</span>
                                        <span class="dateSchedules">{!!($obj["origin"]["ETD"] ?? '')!!}</span>
                                    </div>
                                    @isset($obj["itineraries"])
                                        @foreach ($obj["itineraries"] as $key2 => $element) 
                                            @if ($loop->first)
                                                <div class="vLine"></div>
                                                <div class="portCenter">
                                                    <div class="linhaH"></div>
                                                    <div class="shipInfo">
                                                        <i class="fas fa-ship"></i>
                                                        <span class="vessel">{!!($element["vessel"] ?? '')!!}</span>
                                                        <span class="voyage"> {!!(($element["voyage"] ?? ''))!!} </span>
                                                        <span class="serviceName badge badge-light">{!!($element["serviceName"] ?? '')!!}</span>
                                                    </div>
                                                </div>  
                                                <!-- display-none -->
                                                <div class="dateLine obj dateLine{!! $key1 !!} display-none"></div> 
                                                <div class="row obj">
                                                @foreach ($element["call"] as $key5 => $desc1) 
                                                    @if (! empty($desc1["callDates"]))               
                                                        @foreach ($desc1["callDates"] as $key6 => $dates1)   
                                                        
                                                            <!-- display-none -->
                                                            <div class="dtobj col col-6 col-lg-6 col-md-12 col-sm-12 margin-bottom-10 dateObj{!! $key1 !!} display-none">       
                                                                <div class="dateObj">               
                                                                    <span class="typeOfDate">{!!(($dates1["Type"] ?? ''))!!}</span></br>
                                                                    <span class="callDateTime dateSchedules"><i class="far fa-calendar-check"></i> {!!(($dates1["CallDateTime"] ?? ''))!!}</span>
                                                                </div> 
                                                            </div> 
                                                        @endforeach                             
                                                    @endif
                                                @endforeach     
                                                </div>                            
                                            @else
                                                
                                                <div class="vLine vLine{!! $key1 !!} display-none"></div>
                                            
                                                <!-- display-none -->
                                                <div class="portCenter portCenter{!! $key1 !!} display-none">
                                                    <div class="linhaH"></div>
                                                    <div class="shipInfo">
                                                        <i class="fas fa-ship"></i>
                                                        <span class="vessel">{!!($element["vessel"] ?? '')!!}</span>
                                                        <span class="voyage"> {!!(($element["voyage"] ?? ''))!!} </span>
                                                        <span class="serviceName badge badge-light">{!!($element["serviceName"] ?? '')!!}</span>
                                                    </div>
                                                </div>

                                                @foreach ($element["call"] as $key3 => $desc) 
                                                    <div class="dateLine polpod dateLine{!! $key1 !!} display-none"></div>
                                                    <div class="infoSchedule infoSchedule{!! $key1 !!} display-none">
                                                        <span class="typeSchedule">{!!($desc["Type"] ?? '')!!}:</span>
                                                        <span class="codeSchedule">{!!($desc["Description"] ?? '')!!} -</span>
                                                        <span class="descriptionSchedule">{!!($desc["Code"] ?? '')!!}</span> </br>
                                                        @if ( ! (empty($desc["ETD"])) )      
                                                            <span> 
                                                            <span class="typeOfDate"> ETD: </span>
                                                                <span class="callDateTime dateSchedules"> <i class="far fa-calendar-check"></i>
                                                                    {!!($desc["ETD"] ?? '')!!}
                                                                </span> 
                                                            </span>
                                                        @endif
                                                        @if ( ! (empty($desc["ETA"])) )   
                                                            <span>
                                                            <span class="typeOfDate"> ETA: </span> 
                                                                <span class="callDateTime dateSchedules"><i class="far fa-calendar-check"></i>
                                                                    {!!($desc["ETA"])!!}
                                                                </span> 
                                                            </span>
                                                        @endif
                                                        </br>
                                                        </br>
                                                    </div>          
                                                @endforeach
                                            @endif
                                        @endforeach                                        
                                    @endisset

                                    <div class="destinationPortSchedules" id="destinationPortSchedules{!! $key1 !!}">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span class="descriptionPortSchedules">{!!($obj["destination"]["Description"] ?? '')!!}</span>
                                        <span class="codeSchedules">- {!!($obj["destination"]["Code"] ?? '')!!} -</span>
                                        <span class="dateSchedules">{!!($obj["destination"]["ETA"] ?? '')!!}</span>
                                    </div>
                                </div>

                                <div class="col-2 col-lg-2 col-md-2 col-sm-12 text-center transitTime cSchedule align-self-center">
                                    <div class="transit">Transit Time</div>
                                    <span class="tt">{!!($obj["transitTime"] ?? '')!!}</span>
                                </div>

                                <div class="col-2 col-lg-2 col-md-2 col-sm-12 text-center cSchedule align-self-center">
                                    @if(isset($obj["transhipment"]) && (! $obj["transhipment"] == 0) )
                                        <span class="routing">{!!($obj["transhipment"] ?? '') !!} Transhipment</span>
                                    @else
                                        <span class="routing">Direct Routing</span>
                                    @endif
                                </div>
              
                                <div class="col-2 col-lg-2 col-md-2 col-sm-12 text-center cSchedule align-self-center">
                                    <button class="showDetail" id="showDetail{!! $key1 !!}" onclick="showDetailSchedule({!! $key1 !!})"> Show Details <i class="fas fa-chevron-down" id="chevron{!! $key1 !!}"></i> </button>
                                </div>

                            </div>
                        </div>
                @endforeach
                @else
                <span class="text-center align-self-center margin-bottom-15 naoDisponivel">
                    Not found!
                </span>
            @endif
        </div>
    </div>

    <script>
        n = 0;

        $(document).ready(function () {
            $(".bgSchedules").addClass("display-none");
            $(".col-9").removeClass("img-wrapper");

            var elements = document.getElementsByClassName("dateSchedules");
            Array.from(elements).forEach( element =>
                element.innerHTML = element.innerHTML.replace(/T/g," ")
            )
        });

        function showDetailSchedule(n){
            var vLine = document.getElementsByClassName("vLine"+n);
            var portCenter = document.getElementsByClassName("portCenter"+n);
            var dateLine = document.getElementsByClassName("dateLine"+n);
            var infoSchedule = document.getElementsByClassName("infoSchedule"+n);
            var dateObj = document.getElementsByClassName("dateObj"+n);
            var showDetail = document.getElementById("showDetail"+n);
            var chevron = document.getElementById("chevron"+n);
            var destPort = document.getElementById('destinationPortSchedules'+n);
            var cSchedule = document.getElementsByClassName("cSchedule");

            if(($(vLine).hasClass("display-none")) || ($(dateLine).hasClass("display-none"))){
                $(vLine).removeClass("display-none");
                $(dateLine).removeClass("display-none");
                $(portCenter).removeClass("display-none");               
                $(infoSchedule).removeClass("display-none");
                $(dateObj).removeClass("display-none");

                chevron.style.transform = "rotate(180deg)";

                destPort.style.marginTop="6px";

                showDetail.innerHTML = showDetail.innerHTML.replace(/Show/g,"Hide");
            } else{
                $(vLine).addClass("display-none");
                $(dateLine).addClass("display-none");
                $(portCenter).addClass("display-none");
                $(infoSchedule).addClass("display-none");
                $(dateObj).addClass("display-none");

                chevron.style.transform = "rotate(0deg)";

                destPort.style.marginTop="-8px";

                showDetail.innerHTML = showDetail.innerHTML.replace(/Hide/g,"Show");
            }
        }
    </script>
@endif