@extends('layouts.admin')
@section('content')
<link href="{{ URL::asset('css/dataTables.min.css') }}" media="all" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('css/select2.css') }}" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{ URL::asset('js/dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/select2.min.js') }}"></script>

<div class="pageheader">
    <div class="media">
        <div class="media-body">
            <h4>@lang('messages.Partially Picked Orders')</h4>
            <ul class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard') }}"><i class="fa fa-home"></i> @lang('messages.Home')</a>
                </li>
                <li>@lang('messages.Partially Picked Orders')</li>
            </ul>
        </div>
    </div>
</div>

<div class="clearfix form-blk top-group">
    <div class="form-inline pull-left">
        {!!Form::open(array( 'url' => 'admin/orders/partially-picked','method' =>'get','class'=>'tab-form attribute_form partially_picked_warehouse_form','id'=>'order_search_form'))!!}
            <div class="form-group filter-line">
                <label class="control-label pad-rt-15" style="display:block;">@lang('messages.Warehouse')</label>
                <div class="input-group pad-rt-15">
                    <select class="select2 form-control" required name="warehouse_id" id="warehouse_id">
                        @if (!empty($warehouseList))
                        <option value="">@lang('messages.Select Warehouse')</option>
                            @foreach ($warehouseList as $id => $warehouse)
                                <option value="{{$id}}">{{$warehouse}}</option>
                            @endforeach
                        @else
                            <option value="">@lang('messages.No Warehouse Found')</option>
                        @endif
                    </select>
                </div>
            </div>
            <div class="form-group filter-line export-btn" style="margin-top:20px;display:none;">
                <button type="button" id="export" title="@lang('messages.Export')" class="btn btn-primary">@lang('messages.Export')</button>
            </div>
        {!!Form::close()!!}
    </div>
</div>
<div class="clearfix"></div>

<div class="col-md-12">
    <div class="card order-page">
        <div role="tabpanel" class="tab-pane" id="orders_partially_picked">
            <div class="design-process-content">
                <div class="table-responsive">
                    {!!Form::open(array('class'=>'form-horizontal','id'=>'partiallyPickedOrdersForm'))!!}
                    <table id="partiallyPcikedOrders" class="table table-striped table-bordered table-responsive- stack">
                        <thead class="thead-dark">
                            <tr class="headings">
                                <th>@lang('messages.Order Id')</th>
                                <th>@lang('messages.Customer Name')</th>
                                <!-- <th>@lang('messages.Warehouse Name')</th> -->
                                <!-- <th>@lang('messages.Order Date')</th> -->
                                <th>@lang('messages.Grand Total')</th>
                                <!-- <th>@lang('messages.Delivery Charge')</th> -->
                                <!-- <th>@lang('messages.Picker Name')</th> -->
                                <!-- <th>@lang('messages.Promocode')</th> -->
                                <!-- <th>@lang('messages.Scheduled Date/Time')</th> -->
                                <!-- <th>@lang('messages.Collected Amount')</th> -->
                                <!-- <th>@lang('messages.Payment Mode')</th> -->
                                <th>@lang('messages.Status')</th>
                                <th>@lang('messages.View')</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="empty-text" colspan="12" style="background-color: #fff!important;">
                                    <div class="list-empty-text text-center"> @lang('messages.No records found.') </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#warehouse_id").select2();
        token = $('meta[name="csrf-token"]').attr('content');
        var oTable = $('#partiallyPcikedOrders').DataTable({
            dom: 'lfrtip',
            search: {
                'caseInsensitive': true
            },
            "lengthMenu": [
                [25, 50, 100],
                [25, 50, 100]
            ],
            processing: true,
            serverSide: true,
            responsive: true,
            autoWidth: false,
            destroy: true,
            ajax: {
                url: '{{ URL::to('admin/orders/ajax-partially-picked') }}',
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: function (d) {
                    d.warehouse_id = $('#warehouse_id').val();
                }
            },
            "order": [
                [0, "desc"]
            ],
            columns: [
                {data: 'id',name: 'id',searchable: true,orderable: false},
                {data: 'customer_name',name: 'customer_name',searchable: true,orderable: true},
                // {data: 'warehouse_name_en',name: 'warehouse_name_en',searchable: true,orderable: true},
                // {data: 'OrderDate',name: 'OrderDate',searchable: true,orderable: true},
                {data: 'grand_total',name: 'grand_total',searchable: true,orderable: true},
                // {data: 'delivery_charge',name: 'delivery_charge',searchable: true,orderable: true},
                // {data: 'picker_full_name',name: 'picker_full_name',searchable: true,orderable: true},
                // {data: 'promo_code',name: 'promo_code',orderable: true,searchable: true},
                // {data: 'date',name: 'date',orderable: true,searchable: false},
                // {data: 'collected_amount',name: 'collected_amount',orderable: true,searchable: false},
                // {data: 'payment_mode',name: 'payment_mode',orderable: true,searchable: false},
                {data: 'status',name: 'status',orderable: true,searchable: true},
                {data: 'view',name: 'view',orderable: true}
            ],
            // "columnDefs": [
            // {
            //     "render": function ( data, type, row ) {
            //         return '<span class="hide-desk"> <strong>ID :</strong> </span>' + data;
            //     },
            //     "targets": 0,
            // },
            // {
            //     "render": function ( data, type, row ) {
            //         return '<span class="hide-desk"> <strong>Name :</strong> </span>' + data;
            //     },
            //     "targets": 1,
            // },
            // {
            //     "render": function ( data, type, row ) {
            //         return '<span class="hide-desk"> <strong>Amount :</strong> </span>' + data;
            //     },
            //     "targets": 2,
            // },
            // {
            //     "render": function ( data, type, row ) {
            //         return '<span class="hide-desk"> <strong>Status :</strong> </span>' + data;
            //     },
            //     "targets": 3,
            // },

            // ]
        });


        $('#warehouse_id').on('change', function (e) {
            var warehouse_id = $('#warehouse_id').find('option:selected').val();
            if(warehouse_id != ''){
                $('.export-btn').show();
            } else {
                $('.export-btn').hide();
            }
            oTable.draw();
            e.preventDefault();
        });

        $('#export').click(function() {
            var warehouse_id = $('#warehouse_id').find('option:selected').val();
            if(warehouse_id > 0) {
                var e = "partially-picked/" + warehouse_id ;
                $(location).attr('href', e);
            } else {
                toastr.error('you have to select warehouse');
            }
        });
    });




    $(document).ready(function() {


// inspired by http://jsfiddle.net/arunpjohny/564Lxosz/1/
$('.table-responsive-stack').find("th").each(function (i) {
   $('.table-responsive-stack td:nth-child(' + (i + 1) + ')').prepend('<span class="table-responsive-stack-thead">'+ $(this).text() + ':</span> ');
   $('.table-responsive-stack-thead').hide();
});





$( '.table-responsive-stack' ).each(function() {
var thCount = $(this).find("th").length;
var rowGrow = 100 / thCount + '%';
//console.log(rowGrow);
$(this).find("th, td").css('flex-basis', rowGrow);
});




function flexTable(){
if ($(window).width() < 768) {

$(".table-responsive-stack").each(function (i) {
   $(this).find(".table-responsive-stack-thead").show();
   $(this).find('thead').hide();
   $('.hide-desk').show();
});


// window is less than 768px
} else {


$(".table-responsive-stack").each(function (i) {
   $(this).find(".table-responsive-stack-thead").hide();
   $(this).find('thead').show();

   $('.hide-desk').hide();
});



}
// flextable
}

flexTable();

window.onresize = function(event) {
 flexTable();
};






// document ready
});


</script>
<style>
    @media print {
        body  {
            font-size: 12pt;
            font-family: verdana;
        }
    }

.table-responsive-stack .table-responsive-stack-thead {
   font-weight: bold;
}

@media screen and (max-width: 768px) {
    .table-responsive-stack tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}


.table-responsive-stack td,
.table-responsive-stack th {
   display:block;
/*
   flex-grow | flex-shrink | flex-basis   */
   -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

   .table-responsive-stack tr {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      border-bottom: 3px solid #ccc;
      display:block;

   }

        td:nth-of-type(1):before { content: "ID : "; font-weight:bold; }
		td:nth-of-type(2):before { content: "Name : "; font-weight:bold;}
		td:nth-of-type(3):before { content: "Amount : ";font-weight:bold; }
		td:nth-of-type(4):before { content: "Status : ";font-weight:bold; }
   /*  IE9 FIX   */
   .table-responsive-stack td {
      float: left\9;
      width:100%;
   }
}


</style>
@endsection