@extends('m3::liberty-theme.layout.main')
@section('title')
Solon Sentinel Portal - Orders On Hold Summary
@endsection
@section('breadcrumb')
<div class="row">
    <hr class="hr-primary" />
    <nav class="navbar navbar-expand-lg navbar-light" aria-label="Page navigation">
        <div class="container-fluid">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
              <li class="breadcrumb-item"><a href="/" data-abc="true"><i class="fa fa-home"></i> Dashboard</a></li>
              <li class="breadcrumb-item active" aria-current="page"><i class="fa fa-truck"></i> Orders On Hold</li>
            </ol>
          </nav>
        </div>
    </nav>
</div>
@endsection
@section('content')
    <!-- /.row -->
    <div class="container-fluid px-4">
        <h1 class="mt-4">Orders on hold</h1>

        <div class="card mb-4">
            <div class="card-header" style="line-height: 34px;">
                <i class="fas fa-table me-1"></i>
                Filters
            </div>
            <div class="card-body">
                <div class="card-body">

                    <form>
                        @csrf

                        <div class="row mb-3">
                            <div class="col-sm-10">
                            <label for="inputWhs" class="col-sm-2 col-form-label">Please choose Selling warehouse subset</label>
                                @foreach($whs_list as $key => $val)
                                    <label for="sonar-input-5fd2d62166" class="visually-hidden">sonar input 5fd2d62166</label>
<label for="whs" class="visually-hidden">whs</label>
<input value="{{ $val->SLSRWH }}" id="whs" name="whs[]" type="checkbox" aria-describedby="textHelpBlock"
                                    @if(array_key_exists($val->SLSRWH, $checked_whs)) checked @endif
                                    > {{ $val->SLSRWH }} &nbsp; &nbsp; &nbsp;
                                @endforeach
                                <button name="submit" type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header" style="line-height: 34px;">
                <i class="fas fa-table me-1"></i>
                List of hold codes
            </div>
            <div class="card-body">
                <div class="card-body">

                    <table class="table table-striped table-bordered table-hover" id="datatablesSimple4">
                        <th scope="col"ead>
                            <tr>
                                <th scope="col">Reason</th>
                                <th scope="col" style="text-align:center">No of Orders</th>
                                <th scope="col" style="text-align:right">Total</th>
                                <th scope="col" style="text-align:right">Total for subset</th>
                                <th scope="col" style="text-align:right">Reserved for subset</th>
                                <th scope="col" style="text-align:right">On pick for subset</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $key=>$value)
                            <tr class="odd gradeX">
                                <td><a href="/ordersOnHoldReq/{{ ( $value->SHHLDC == ' ' ? "NotHold" : $value->SHHLDC) }}">
                                    {{ ( $value->SHHLDC == ' ' ? "Not On Hold" : $value->SHHLDC . " - " . $hold_code_array[$value->SHHLDC] ) }}</a></td>
                                <td class="text-right">{{ (isset($value->NBORDERS))?$value->NBORDERS:'' }}</td>
                                <td class="text-right">$ {{ number_format((float)$value->TOTAL, 2, '.', ',') }}</td>
                                <td class="text-right">$ {{ number_format((float)$value->TOTALWH, 2, '.', ',') }}</td>
                                <td class="text-right">$ {{ number_format((float)$value->TOTALWHRESERVED, 2, '.', ',') }}</td>
                                <td class="text-right">$ {{ number_format((float)$value->TOTALWHONPICK, 2, '.', ',') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr style="text-align:right">
                                <th scope="col" style="text-align:right"></th>
                                <th scope="col" style="text-align:center"></th>
                                <th scope="col" style="text-align:right"></th>
                                <th scope="col" style="text-align:right"></th>
                                <th scope="col" style="text-align:right"></th>
                                <th scope="col" style="text-align:right"></th>
                            </tr>
                        </tfoot>
                    </table>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('#datatablesSimple4').DataTable( {
            responsive: true,
            "pageLength": 50,
            "aaSorting": [],
            "columnDefs": [{ targets: [2, 3, 4, 5], className: 'dt-body-right' }, { targets: [1], className: 'dt-body-center' }],
            "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // computing column Total of the complete result
            var orderTotal = api
                .column( 1 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            var totalTotal = api
                .column( 2 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 ).toFixed(2);

            var whtotal = api
                .column( 3 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 ).toFixed(2);

            var whtotalReserved = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 ).toFixed(2);

            var whtotalOnpick = api
            .column( 5 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 ).toFixed(2);


            // Update footer by showing the total with the reference of the column index
            $( api.column( 0 ).footer() ).html('Total');
                $( api.column( 1 ).footer() ).html(Intl.NumberFormat('en-US').format(orderTotal));
                $( api.column( 2 ).footer() ).html('$ '+Intl.NumberFormat('en-US').format(totalTotal));
                $( api.column( 3 ).footer() ).html('$ '+Intl.NumberFormat('en-US').format(whtotal));
                $( api.column( 4 ).footer() ).html('$ '+Intl.NumberFormat('en-US').format(whtotalReserved));
                $( api.column( 5 ).footer() ).html('$ '+Intl.NumberFormat('en-US').format(whtotalOnpick));
            }
        });
    </script>
    <script src="/js/raphael.min.js"></script>
@endsection