@extends('layouts.app2')

@section('content')
<div class="container-fluid">
    <div class="row-fluid">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
            Customer Logs
        </h3>
        <ul class="breadcrumb">
            <li>
                <i class="icon-home"></i>
                <a href="#">Dashboard</a> 
                <i class="icon-angle-right"></i>
            </li>
            <li><a href="#">Logistic</a><i class="icon-angle-right"></i></li>
            <li><a href="#">All Customer Logs</a></li>
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
    @if(Session::has('flash_message'))
        <div class="row-fluid">
            <div class="span12">
                <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
            </div> 
        </div>   
    @endif
    <div class="row-fluid">
        <div class="span12">
            <div class="portlet box green">
                <div class="portlet-title">
                    <div class="caption"><i class="icon-globe"></i>Customer Logs</div>
                    <div class="tools">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="cargo-search-form col-md-12">
                      <table class="table table-striped table-bordered table-hover table-full-width dataTable" id="sample_5">
                        <thead>
                          <tr>
                            <th class="no-sort"></th>
                            <th>Date</th>
                            <th>User</th>
                            <th>Activity</th>
                            <th>Customer</th>
                            <th>Shipper/Consignee/Notify</th>
                            <th>Remarks</th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach($customer_logs as $item)
                          <tr>
                            <td><span class="row-details row-details-close" data-value="{{ ($item->customer) ? ucwords($item->customer->name) : '' }}" data-shipper="{{ ($item->shipper) ? ucwords($item->shipper->name) : '' }}"></span></td>
                            <td>{{ Helper::convert_to_ddmmyyhis($item->created_at) }}</td>
                            <td>{{ ucwords($item->user->name)  }}</td>
                            <td>{{ $item->activity }}</td>
                            <td>{{ ($item->customer) ? ucwords($item->customer->name) : '' }}</td>
                            <td>{{ ($item->shipper) ? ucwords($item->shipper->name) : '' }}</td>
                            <td>{{ $item->remarks }}</td>
                          </tr>
                          @endforeach
                        </tbody>
                      </table>
                      {{ $customer_logs->render()}}
                      <br/><br/><br/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
var TableAdvanced = function () {

    var initTable5 = function() {

        /* Formating function for row details */
        function fnFormatDetails ( oData )
        {
            var sOut = '<table>';

            if (oData.length != 0) {
                $.each(oData, function( index, value ) {
                    var ccstname = '';
                    if (value.customer_id != 0) {
                        ccstname = value.customer.name;
                    }
                    var shpval = '';
                    if (value.shipper_id  != null) {
                        shpval = value.shipper.name;
                    }
                    rmk = (value.remarks == null) ? "-": value.remarks;
                    sOut += '<tr>';
                    sOut += '<td style="padding:0px 15px"><label>Date: </label>'+convert_to_ddmmyyhis(value.created_at)+'</td>';
                    sOut += '<td style="padding:0px 15px"><label>User: </label>'+value.user.name+'</td>';
                    sOut += '<td style="padding:0px 15px"><label>Activity: </label>'+value.activity+'</td>';
                    sOut += '<td style="padding:0px 15px"><label>Customer: </label>'+ccstname+'</td>';
                    sOut += '<td style="padding:0px 15px"><label>Shipper: </label>'+shpval+'</td>';
                    sOut += '<td style="padding:0px 15px"><label>Remark: </label>'+rmk+'</td>';
                    sOut += '</tr>';
                });
            } else {
                sOut += '<tr>';
                sOut += '<td colspan="7">No Record Found!</td>';
                sOut += '</tr>';
            }

            sOut += '</table>';
             
            return sOut;
        }
         
        /*
         * Initialse DataTables, with no sorting on the 'details' column
         */
        var oTable = $('#sample_5').dataTable( {
            "aoColumnDefs": [
                {"bSortable": false, "aTargets": [ 0 ] }
            ],
            "aaSorting": [[1, 'asc']],
             "aLengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "iDisplayLength": 5,
        });

        jQuery('#sample_5_wrapper .dataTables_filter input').addClass("m-wrap small"); // modify table search input
        jQuery('#sample_5_wrapper .dataTables_length select').addClass("m-wrap small"); // modify table per page dropdown

        /* Add event listener for opening and closing details
         * Note that the indicator for showing which row is open is not controlled by DataTables,
         * rather it is done here
         */
        $('#sample_5').on('click', ' tbody td .row-details', function () {
            var nTr = $(this).parents('tr')[0];
            if ( oTable.fnIsOpen(nTr) )
            {
                /* This row is already open - close it */
                $(this).addClass("row-details-close").removeClass("row-details-open");
                oTable.fnClose( nTr );
            }
            else
            {
                $(this).addClass("row-details-open").removeClass("row-details-close");
                var val = $(this).data('value');
                var shipper = $(this).data('shipper');
                $.ajax({
                    url: "{{ route('mis.notifications.logistics.getdetails') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'name': val,
                        'shipper': shipper,
                        '_token': '{{csrf_token()}}'
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            /* Open this row */                
                            oTable.fnOpen( nTr, fnFormatDetails(response.data), 'details' );
                        }
                    }
                });
            }
        });
    }

    return {

        //main function to initiate the module
        init: function () {
            
            if (!jQuery().dataTable) {
                return;
            }

            initTable5();
        }

    };

}();
</script>
@endsection