@extends('layout.padrao')
@section('title', '  Trade Recaps')

<style>
    /* Ajuste na seta do dropdown de usuario no navbar */
    .upArrowMenu{
        top: -18px !important;
    }
</style>


@section('pesquisa')
    <form class="form-inline w-100 search-listas-int" method="GET" action="{{ route('listTradeRecaps','trade_recaps') }}">
        <input class="form-control mr-sm-2 text-primary" type="search" placeholder="Search for Client Name" name="trade_recaps">   
        <button class="btn btn-outline-light " type="submit">Pesquisar</button>
    </form> 
@endsection

@section('content')

    <div class="row w-100 col-lg-12 col-sm-12 col-md-12">

        <p>TABLE 1</p>
        <div class="table-responsive">
            <table class="table-striped text-center" id="table"
            data-detail-view="true"
            data-toggle="table"
            data-search="true"
            data-detail-formatter="detailFormatter"
            data-page-list="[100, 200, 300, 400, all]"
            data-show-footer="true"
            data-show-pagination-switch="true"
            data-show-refresh="true"
            data-click-to-select="true"
            data-show-fullscreen="true"
            data-pagination="true"
            data-toolbar="#toolbar"
            data-show-toggle="true"
            data-height="600"
            data-show-export="true"
            data-export-data-type="all"
            data-query-params="queryParams"
            data-url="traderecapdash/json/"
            data-show-columns="true" >
            <thead>
              <tr>
                  <th  data-field="id" id="details" data-formatter="operateFormatter" ></th>
                  {{-- <th class="icon-action" data-field="id" data-formatter="operateFormatter" ></th> --}}
                  <th data-field="responsableUser" data-sortable="true">User Responsable</th>
                  <th data-field="carrier" data-sortable="true">Carrier</th>
                  <th data-field="bookingNumber" data-sortable="true">Booking</th>
                  <th data-field="cargooReference" data-sortable="true">cargooReference</th>
                  <th data-field="commodityDescription" data-sortable="true">commodityDescription</th>
                  <th data-field="commodityName" data-sortable="true">commodityID</th>
                  <th data-field="vessel" data-sortable="true">vessel</th>
                  <th data-field="voyage" data-sortable="true">voyage</th>
                  <th data-field="etd" data-sortable="true">etd</th>
                  <th data-field="currentStatus" data-sortable="true"> Cargoo Status </th>
                  <th data-field="status" data-sortable="true"> Status </th>
                  <th data-field="created_at" data-sortable="true"> created_at </th>
              </tr>
            </thead>
        </table>
      </div>
      <!--<p>TABLE 2</p>-->
        <div class="table-responsive">
            <table class="table-striped text-center" id="detailTable"
            data-toggle="detailTable"
            data-show-fullscreen="true"
            data-pagination="true"
            data-toolbar="#toolbar"
            data-show-toggle="true"
            data-height="600"
            data-show-export="true"
            data-export-data-type="all"
            data-show-columns="true">
            <thead>
              <tr>
                  <th  data-field="id"  data-formatter="operateFormatter" ></th>
                  <th  data-field="id"   ></th>
                  {{-- <th class="icon-action" data-field="id" data-formatter="operateFormatter" ></th> --}}
                  
              </tr>
            </thead>
        </table>
      </div>

  
    <script>
  
        var $table = $('#table')
        $(function() {
            $table.bootstrapTable({
                            cache: false,
                            height: 1000,
                            striped: true,
                            pagination: true,
                            detailFormatter: detailFormatter,
                            pageSize: 100, //specify 5 here
                            pageList: [100, 200, 300,400,500]//list can be specified here
            });      
        })
         function detailFormatter(index, row, element) {
            
                console.log('row.id:'+row.id);
                var $url = "/traderecapdash/json/" + row.id;
                
                var detail = $.ajax({
                    type: "GET",
                    url: $url,
                    async: false
                }).responseJSON;


                $detailTable.bootstrapTable({
                    method: 'get',
                    data: detail,
                    striped: false,
                    pageSize: 5,
                    pageList: [5, 10],
                    onLoadError: function () {  },
                    columns: [
                        { field: 'bookingNumber',title: 'Booking Number', sortable: true },
                        { field: 'id',title: 'ID', sortable: true }
                        
                    ]
                });

                $table.on('expand-row.bs.table', function (e, index, row, $detail) {
                    $detail.html('Loading from ajax request...');
                    $.get($url, function (res) {

                        $detail.html($('#detailTable').clone(true).attr('id',"tbl_"+row.id).show()); 
                     });
                });
                
                 
        }
        
    
        function operateFormatter(value, row, index) {
            
            return [
            '<a class="icone-padding" href="/microservice/sendMigrationUpdateCargoo/'+row['cargooReference']+'/" alt="Edit"  data-placement="top" title="View"><i alt="Edit" class="fas fa-sync"></i></a> '  

            ].join('')
        }

      



      
        $("#detailTable").hide();
        
    </script>
  
@endSection