@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.Packed 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.Packed Orders')</li>
                <!-- <h4>@lang('messages.Orders')</h4> -->
            </ul>

        </div>
    </div><!-- media -->
</div><!-- pageheader -->

<div class="clearfix form-blk top-group">
    <div class="form-inline pull-left">
        <div class="form-group filter-line">
            <label class="control-label pad-rt-15" style="display:block;">@lang('messages.Store')</label>
            <div class="input-group pad-rt-15">
                <select class="select2 form-control" id="warehouse_id">
                    @if (!empty($warehouseList))
                    <option value="">@lang('messages.Select Store')</option>
                        @foreach ($warehouseList as $id => $warehouse)
                            <option value="{{$id}}">{{$warehouse}}</option>
                        @endforeach
                    @else
                        <option value="">@lang('messages.No Store Found')</option>
                    @endif
                </select>
            </div>
        </div>
        <div class="form-group filter-line">
            <label class="control-label pad-rt-15" style="display:block;">@lang('messages.Partner')</label>
            <div class="input-group pad-rt-15">
                <select class="select2 form-control" id="partner_id">
                    <option value="">@lang('messages.Select Partner')</option>
                    <option value="1">DMS</option>
                </select>
            </div>
        </div>
    </div>
    <div class="pull-right mt-4 form-pack-btn pt-1 mr-2">
        <span class="" id="generate_to_pick_list_div">
            @if(IzoCommonHelper::hasPermission('genearate_awaiting_dispatch_button'))
                <div class="btn-group mr5">
                    <button class="btn btn-primary mr5" type="submit" name="submit" id="generate_to_pick_list" title="@lang('messages.Generate Awaiting Dispatch')">@lang('messages.Generate Awaiting Dispatch')</button>
                </div>
            @endif
        </span>
    </div>
</div>
<div class="clearfix"></div>

<div class="col-md-12">
    <div class="card order-page">
        <div role="tabpanel" class="tab-pane" id="orders_packed">
            <div class="design-process-content">
                <div class="table-responsive">
                    {!!Form::open(array('class'=>'form-horizontal','id'=>'packedOrdersForm'))!!}
                    <input type="hidden" name="warehouse_name" id="warehouse_name" value="">
                    <input type="hidden" name="partner_name" id="partner_name" value="">
                    <table id="packedOrders" class="table table-striped table-bordered responsive table-responsive-stack">
                        <thead>
                            <tr class="headings">
                                <th>
                                    <div id="select_all_orders_div">
                                        <input type="checkbox" id="select_all_orders" value="1">
                                    </div>@lang('messages.Order Id')
                                </th>
                                <th>@lang('messages.Customer Name')</th>
                                <!-- <th>@lang('messages.Store 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>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Order Products</h4>
            </div>
            <div class="modal-body" id="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default generate">Generate</button>
                <button type="button" class="btn btn-default print">Print</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#warehouse_id").select2();
        $("#partner_id").select2();
        $('#select_all_orders').click(function(){
            $(".pick_order").prop('checked', $(this).prop('checked'));
        });

        token = $('meta[name="csrf-token"]').attr('content');
        var oTable = $('#packedOrders').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-packed-orders') }}',
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: function (d) {
                    d.warehouse_id = $('#warehouse_id').val();
                },
                complete: function (data) {
                    $('#generate_to_pick_list').attr("disabled", false);
                    $('#generate_to_pick_list').button('reset');
                }
            },
            "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}
            ]
        });

        $('#generate_to_pick_list').click(function() {
            $('#packedOrdersForm').submit();
        });

        $('#packedOrdersForm').submit(function(e) {
            e.preventDefault();
            var count = $('input[type="checkbox"]:checked').length;
            if(count <= 0){
                toastr.error("You need to select atleast one order.");
                return false;
            }

            var warehouse = $("#warehouse_id").val();
            if(warehouse == ''){
                toastr.error("Select the warehouse.");
                return false;
            }

            var partner = $("#partner_id").val();
            if(partner == ''){
                toastr.error("Select the partner.");
                return false;
            }
            var r = confirm("Are you sure want to change this order status?");
            if (r == true) {
                $('#loader-wrapper').removeClass('loader');
                $('#generate_to_pick_list').attr("disabled", true);
                $('#generate_to_pick_list').button('loading');
                var token, url;
                token = $('meta[name="csrf-token"]').attr('content');
                url = '{{ url('admin/orders/packed-order-details') }}';
                data = new FormData(this);
                $.ajax({
                    url: url,
                    headers: {'X-CSRF-TOKEN': token},
                    data: data,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    datatype: 'json',
                    success: function (resp) {
                        $('#loader-wrapper').addClass('loader');
                        $('#generate_to_pick_list').attr("disabled", false);
                        $('#generate_to_pick_list').button('reset');
                        if (resp.http_code == 400) {
                            err_msg = resp.message.replace(/, \\n /g, '<br>');
                            toastr.error(err_msg);
                        } else if (resp.http_code == 200) {
                            $('.modal-body').html(resp.data);
                            $('#myModal').modal('show');
                        } else if (resp.http_code == 401) {
                            toastr.warning(resp.message);
                            var login = '{{ url('admin/login')}}';
                            $(location).attr('href', login);
                        }
                    }
                });
            }
        });

        $(document).on('click','.print',function(){
            var myWindow = window.open();
            var printContents = document.getElementById('modal-body').innerHTML;
            myWindow.document.write("<html><head><style>body{font-family:verdana;font-size:12px;}.show-top{display:block}table{width:100%;  border-collapse: collapse;border:1px solid #ccc;}td{padding:10px;text-align:left;border-top:1px solid #ccc;text-align:left;font-size:12px;}th{background:#f5f5f5 !important;text-align:left;padding:10px;border-right:1px solid #ccc;font-size:12px;}</style>");
            myWindow.document.write("</head><body><div>"+printContents+ "</div>");
            myWindow.document.write('</body></html>');
            myWindow.document.close();
            myWindow.focus();
            myWindow.print();
            myWindow.close();
        });

        $(document).on('click','.generate',function(e){
            e.preventDefault();
            var count = $('input[type="checkbox"]:checked').length;
            if(count <= 0){
                toastr.error("You need to select atleast one order.");
                return false;
            }
            $('#loader-wrapper').removeClass('loader');
            $('#generate_to_pick_list').attr("disabled", true);
            $('#generate_to_pick_list').button('loading');
            var token, url;
            token = $('meta[name="csrf-token"]').attr('content');
            url = '{{ url('admin/orders/update-dispatch-orders') }}';
            data = new FormData($('#packedOrdersForm')[0]);
            $.ajax({
                url: url,
                headers: {'X-CSRF-TOKEN': token},
                data: data,
                processData: false,
                contentType: false,
                type: 'POST',
                datatype: 'json',
                success: function (resp) {
                    $('#loader-wrapper').addClass('loader');
                    $('#generate_to_pick_list').attr("disabled", false);
                    $('#generate_to_pick_list').button('reset');
                    if (resp.http_code == 400) {
                        err_msg = resp.message.replace(/, \\n /g, '<br>');
                        toastr.error(err_msg);
                    } else if (resp.http_code == 200) {
                         toastr.success(resp.message);
                         var orders = '{{ url('admin/orders/packed')}}';
                         $(location).attr('href', orders);
                    } else if (resp.http_code == 401) {
                        toastr.warning(resp.message);
                        var login = '{{ url('admin/login')}}';
                        $(location).attr('href', login);
                    }
                }
            });
        });

        $('#warehouse_id').on('change', function (e) {
            var name = $(this).find('option:selected').text();
            $("#warehouse_name").val(name);
            $('#generate_to_pick_list').attr("disabled", true);
            $('#generate_to_pick_list').button('loading');
            oTable.draw();
            e.preventDefault();
        });

        $('#partner_id').on('change', function (e) {
            var id = $(this).val();
            $("#partner_name").val(id);
        });
    });
    $(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