@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.Generate Picklist')</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.Generate Picklist')</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="clearfix form-blk">
        <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.Township Name')</label>
                <div class="input-group pad-rt-15">
                    <select class="select2 form-control" id="township_id_dropdown" multiple width="50%">
                        @if (!empty($townshipsList))
                            <option value="" disabled>@lang('messages.Select TownShip')</option>
                            @foreach ($townshipsList as $township)
                                <option value="{{ $township->id }}">{{ ucfirst($township->name_en) }}</option>
                            @endforeach
                        @else
                            <option value="">@lang('messages.No Township Found')</option>
                        @endif
                    </select>
                </div>
            </div> -->
            <div class="form-group filter-line" style="margin-top:20px;">
                <button type="reset" title="@lang('messages.Reset')" class="btn btn-default" onclick="window.location='{{ url('admin/orders/generate-pick-list') }}'">@lang('messages.Reset')</button>
            </div>
        </div>
        <div class="pull-right mt-4 pt-1 mr-2">
            @if (IzoCommonHelper::hasPermission('generate_picklist_processing'))
                <span id="generate_to_pick_list_div">
                    <div class="btn-group mr5">
                        <button class="btn btn-primary mr5" type="submit" name="submit" id="generate_to_pick_list" title="@lang('messages.Generate to Picklist')">@lang('messages.Generate Picklist')</button>
                    </div>
                </span>
            @endif
        </div>
    </div>
    <div class="clearfix"></div>

    <div class="col-md-12">
        <div class="card order-page">
        @if(IzoCommonHelper::hasPermission('generate_picklist_list'))
            <div role="tabpanel" class="tab-pane" id="orders_confirmed">
                <div class="design-process-content">
                    <div class="table-responsive">
                        {!! Form::open(['class' => 'form-horizontal', 'id' => 'confirmedOrdersForm']) !!}
                        <!-- <input type="hidden" name="township_id[]" id="township_id" value=""> -->
                        <input type="hidden" name="warehouse_name" id="warehouse_name" value="">
                        <input type="hidden" name="warehouse_value_id" id="warehouse_value_id" value="">
                        <input type="hidden" name="picker_value_id" id="picker_value_id" value="">
                        <table id="confirmedOrders" class="table table-striped table-bordered responsive">
                            <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.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>
        @endif
        </div>
    </div>

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <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 & Stock Unavailable Items Report</button>
                    <button type="button" class="btn btn-default print">CSV</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div id="myPendingPOModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body" id="modal-pending-po-body">
                        <img src="{{ url('images/logo.png') }}" style="width:150px;height:70px;" />
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            $("#warehouse_id").select2();
            // $("#township_id_dropdown").select2({
            //     tags: true,
            // });
            $("#picker_id").select2();
            $('#select_all_orders').click(function() {
                $(".pick_order").prop('checked', $(this).prop('checked'));
            });

            token = $('meta[name="csrf-token"]').attr('content');
            var oTable = $('#confirmedOrders').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-confirmed-orders') }}',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    data: function(d) {
                        d.warehouse_id = $('#warehouse_id').val();
                        // d.township_id = $('#township_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: '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() {
                $('#confirmedOrdersForm').submit();
            });

            $('#confirmedOrdersForm').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();
                // var township = $("#township_id").val();
                if (warehouse == '') {// && township == ''
                    toastr.error("Select the warehouse.");// or township
                    return false;
                }
                var r = confirm("Are you sure want to generate this order pick list?");
                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/order-products') }}';
                    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() {
                if (!$('#picker_model_id').val()) {
                    toastr.error("You need to select picker");
                    return false;
                }
                /* To get the picker name */
                picker_name = $('select#picker_model_id').find(':selected').attr('data-picker-name');
                $('#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/order-products-csv') }}';
                data = new FormData($('#confirmedOrdersForm')[0]);
                data.append('picker_name',picker_name);
                $.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(typeof(resp.http_code) != "undefined" && resp.http_code !== null) {
                            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/generate-pick-list') }}';
                                $(location).attr('href', orders);
                            } else if (resp.http_code == 401) {
                                toastr.warning(resp.message);
                                var login = '{{ url('admin/login') }}';
                                $(location).attr('href', login);
                            }
                        } else {
                            $('#loader-wrapper').addClass('loader');
                            var downloadLink = document.createElement("a");
                            var fileData = ['\ufeff'+resp];
                            var blobObject = new Blob(fileData,{
                                type: "text/csv;charset=utf-8;"
                            });
                            var url = URL.createObjectURL(blobObject);
                            downloadLink.href = url;
                            downloadLink.download = "GeneratePickListOrderProducts.csv";
                            document.body.appendChild(downloadLink);
                            downloadLink.click();
                            document.body.removeChild(downloadLink);
                        }
                    }
                });
            });
            $(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;
                }
                var pick_count = $('#picker_model_id').val();
                if (!$('#picker_model_id').val()) {
                    toastr.error("You need to select picker");
                    return false;
                }
                var picker_value_id = $('#picker_model_id').find('option:selected').val();
                $("#picker_value_id").val(picker_value_id);
                $('#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-processing-orders') }}';
                data = new FormData($('#confirmedOrdersForm')[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(typeof(resp.http_code) != "undefined" && resp.http_code !== null) {
                            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/generate-pick-list') }}';
                                $(location).attr('href', orders);
                            } else if (resp.http_code == 401) {
                                toastr.warning(resp.message);
                                var login = '{{ url('admin/login') }}';
                                $(location).attr('href', login);
                            }
                        } else {
                            $('#loader-wrapper').addClass('loader');
                            var downloadLink = document.createElement("a");
                            var fileData = ['\ufeff'+resp];
                            var blobObject = new Blob(fileData,{
                                type: "text/csv;charset=utf-8;"
                            });
                            var url = URL.createObjectURL(blobObject);
                            downloadLink.href = url;
                            downloadLink.download = "GeneratePickListOrderProductsUnavailableQty.csv";
                            document.body.appendChild(downloadLink);
                            downloadLink.click();
                            document.body.removeChild(downloadLink);
                            var orders = '{{ url('admin/orders/generate-pick-list') }}';
                            $(location).attr('href', orders);
                        }
                    }
                });
            });

            $('#warehouse_id').on('change', function(e) {
                var warehouse_name = $(this).find('option:selected').text();
                var warehouse_id = $(this).find('option:selected').val();
                $("#warehouse_name").val(warehouse_name);
                $("#warehouse_value_id").val(warehouse_id);
                $('#generate_to_pick_list').attr("disabled", true);
                $('#generate_to_pick_list').button('loading');
                oTable.draw();
                e.preventDefault();
            });
            // $('#township_id_dropdown').on('change', function(e) {
            //     var township_id = $('#township_id_dropdown').select2("val");
            //     $("#township_id").val(township_id);
            //     $('#generate_to_pick_list').attr("disabled", true);
            //     $('#generate_to_pick_list').button('loading');
            //     oTable.draw();
            //     e.preventDefault();
            // });
        });
    </script>
    <style>
        @media print {
            body {
                font-size: 12pt;
                font-family: verdana;
            }
        }

    </style>
@endsection