@if(session('filtro2'))
    <style>
        .showDetail,
        .hideDetail {
            color: #3686EF;
            background-color: #E1EEFF;
            border-radius: 5px;
            padding: 10px;
            border: none;
            width: 116px;
            transition: 0.5s;
        }

        .showDetail:hover,
        .hideDetail:hover {
            background-color: #cbdcf2;
        }

        .table thead th {
            text-align: center;
        }

        .bootstrap-table .fixed-table-container.fixed-height .detail-view .table thead th {
            border-bottom: 1px solid #007bff;
            background: #c3ddff;
            color: #013d7e;
            text-align: center;
        }

        .table-bordered>thead>tr>th {
            border: 1px solid #f5f5f5;
        }

        table.table-bordered>thead>tr {
            background: none;
            border: 2px solid #f5f5f5;
        }

        .trSuperBlue {
            border: 2px solid #fff !important;
            padding: 15px !important;
        }
    </style>

    <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')}}
        <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:40px"><i class="fas fa-times"></i></button>
    </div>

    <div class="table-responsive" style="overflow:clip;">
        <table class="table-striped text-center" id="table" data-toggle="table" data-search="true" data-detail-view="true"
            data-detail-view-icon="false" data-detail-formatter="detailFormatter" data-show-footer="true" data-flat="true"
            data-show-refresh="true" data-click-to-select="true" data-show-fullscreen="true" data-toolbar="#toolbar"
            data-show-toggle="true" data-show-export="true" data-export-data-type="all" data-query-params="queryParams"
            data-url="/mscIntegration/json{{"?" . http_build_query($params)}}" data-show-columns="true">
            <thead>
                <tr class="trSuperBlue">
                    {{-- <th data-field="request_message" data-sortable="true" data-formatter="showDescription">User Name</th> --}}
                    <th data-field="request_message.fromPortUNCode" data-sortable="true" data-formatter="fromPlace">
                        Port
                        of Origin</th>
                    <th data-field="request_message.toPortUNCode" data-sortable="true" data-formatter="toPlace">Port
                        of
                        Destination</th>
                    <th data-field="request_message.fromDate" data-sortable="true" data-formatter="dateBrazilFormat">
                        from Date</th>
                    <th data-field="request_message.toDate" data-sortable="true" data-formatter="dateBrazilFormat">
                        to
                        Date</th>
                    <th data-field="integration_message_structured_data" data-sortable="true" data-formatter="showVoyages">
                        Voyage + Vessel</th>
                    <th data-field="response_date" data-sortable="true" data-formatter="dateTimeBrazilFormat">
                        Response
                        Date</th>
                    <th data-field="status" data-sortable="true">Status</th>
                    <th data-field="icon" class="detail" data-formatter="detailIconFormatter"
                        data-events="detailIconEvents"></th>
                </tr>
            </thead>
        </table>
    </div>

    <script>
        n = 0;

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

        function detailsClick(detail) {
            detailNum = '#show' + detail;
            hide = '#hide' + detail;

            $(detailNum).addClass('display-none');
            $(hide).removeClass('display-none');

        }

        function hideClick(hide) {
            hideNum = '#hide' + hide;
            detail = '#show' + hide;

            $(hideNum).addClass('display-none');
            $(detail).removeClass('display-none');
        }

        function detailIconFormatter(value, row, index) {
            n++;
            return [
                '<a class="icon" href="javascript:void(0)">',
                '<button class="showDetail" id="show' + n + '" onclick="detailsClick(' + n +
                ')"> Show Details <i class="fas fa-chevron-down"></i> </button>',
                '<button class="hideDetail display-none" id="hide' + n + '" onclick="hideClick(' + n +
                ')"> Hide Details <i class="fas fa-chevron-up"></i> </button>',
                '</a>'
            ].join('')
        }

        window.detailIconEvents = {
            'click .icon': function (e, value, row, index) {
                $(e.currentTarget).find('i').toggleClass('showDetail').toggleClass('hideDetail')
                $table.bootstrapTable('toggleDetailView', index)
            }
        }

        $(function () {
            $table.bootstrapTable({
                cache: false,
                height: 730,
                striped: true,
                pagination: true,
                pageSize: 100,
                pageList: [100, 200, 300, 400, 500]
            });
        })

    </script>
@endif