@extends('layout.default')
@section('content')
@section('page_toolbar')
    &nbsp;<a class="btn btn-success px-2 font-weight-bold btn-sm" href="{{ URL::previous() }}">
        <i class="fas fa-angle-double-left" aria-hidden="true"></i>
        Back
    </a>
@endsection

<!--begin::Content-->
<div class="card card-custom">
    <div class="card-body">
        <!-- filter Start -->
        <div class="row">
            <div class="form-group  col-md-3 col-xs-12">
                <label class="col-form-label ">Search </label>
                {!! Form::text('keyword', '', ['class' => 'form-control ', 'placeholder'=>'Search by Keyword']) !!}
            </div>
            <!-- <div class="form-group  col-md-3 col-xs-12">
                <label class="col-form-label ">Payment Status </label>
                <div id="curriculum_blck_filter">
                    {!! Form::select('payment_status', $page->payment_status ,'', ['class' => 'form-control new-drop-section select2', 'id' => 'payment_status','placeholder' => 'Select Payment Status']) !!}
                </div>
            </div>
            <div class="form-group  col-md-3 col-xs-12">
                <label class="col-form-label ">Order Status </label>
                <div id="curriculum_blck_filter">
                    {!! Form::select('order_status', $page->order_status ,'', ['class' => 'form-control new-drop-section select2','id' => 'order_status', 'placeholder' => 'Select Order Status']) !!}
                </div>
            </div> -->
            <div class="col-md-3 col-xs-12">
                <div class="form-group row">
                    <label class="col-form-label font-weight-bolder">&nbsp;</label>
                    <div class="col-sm-12 text-right">
                        <button type="button" class="btn btn-light-primary font-weight-bold filterSubmit">Filter
                        </button>
                        <button type="button" class="btn btn-light-success font-weight-bold" id="filterClear">Clear
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <!-- filter end -->
        <table class="table table-hover display" id="dataTables" style="width:100%">
            <thead>
            <tr>
                <th>Invoice No</th>
                <th>Name</th>
                <th>User type</th>
                <th>Amount</th>
                <th>Payment Status</th>
                <th>Sales Status</th>
                <th>Sales Date</th>
                <th class='no-export'> Action</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!--end::Content-->
@endsection
@section('styles')
    <link href="{{ url('plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css"/>
@endsection
@section('scripts')
    <script src="{{ url('plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}"></script>
    <script>
        var table;
                ajaxListing();

                function ajaxListing() {
            $(function () {
                $('#payment_status').select2({
                    placeholder: "Select Payment Status",
                    width: '100%',
                    allowClear: true
                });
                $('#order_status').select2({
                    placeholder: "Select Order Status",
                    width: '100%',
                    allowClear: true
                });
                //Generate List
                table = $('#dataTables').DataTable({
                    order:[],
                    searching: false,
                    pagination: true,
                    // pageLength: 10,
                    responsive: true,
                    searchDelay: 500,
                    processing: true,
                    serverSide: true,
                    lengthMenu: [[50, 100, 500, -1], [50, 100, 500, "All"]],
                    pageLength: 50,
                    ajax: {
                        url: '{{ url('admin/orders/lists') }}',
                        data: search
                    },
                    dom: '<\'row\'<\'col-sm-6\'l><\'col-sm-6 text-right\'B>>+\n' +
                        '<\'row\'<\'col-sm-12\'tr>> +\n' +
                        '<\'row\'<\'col-sm-5\'i><\'col-sm-7\'p>>',
                    buttons: [
                        {
                            extend: 'excel',
                            text: '<i class="fas fa-download" aria-hidden="true"></i> Export',
                            title: 'Orders',
                            className: 'btn btn-info px-2 font-weight-bold btn-sm quiz-export',
                            exportOptions: {
                                columns: ':not(.no-export)'
                            },
                            action: newexportaction
                        }],
                    columns: [
                        {data: 'invoice_no', name: 'invoice_no'},
                        {data: 'billing_first_name', name: 'billing_first_name'},
                        {data: 'user_type', name: 'user_type'},
                        {data: 'grand_total', name: 'grand_total'},
                        {data: 'payment_status', name: 'payment_status'},
                        {data: 'order_status', name: 'order_status'},
                        {data: 'created_at', name: 'created_at'},
                        {data: 'action', name: 'action', orderable: !1, searchable: !1}
                    ],
                    columnDefs: [
                {
                    targets: 6,
                    render: function (data, type) {

                            var date = new Date(data);
                            var options = {  year: 'numeric', month: 'numeric', day: 'numeric',hour:'numeric',minute:'numeric',hour12: true };
                            return date.toLocaleDateString("en-UK", options);

                    }
                }
            ],
                });


                $(".searchs").keyup(function () {
                    table.draw();
                });
            });
        }

        function newexportaction(e, dt, button, config) {
            var self = this;
            var oldStart = dt.settings()[0]._iDisplayStart;
            dt.one('preXhr', function (e, s, data) {
                // Just this once, load all data from the server...
                data.start = 0;
                data.length = 2147483647;
                dt.one('preDraw', function (e, settings) {
                    // Call the original action function
                    if (button[0].className.indexOf('buttons-excel') >= 0) {
                        $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
                            $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
                            $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
                    }
                    dt.one('preXhr', function (e, s, data) {
                        settings._iDisplayStart = oldStart;
                        data.start = oldStart;
                    });
                    setTimeout(dt.ajax.reload, 0);
                    return false;
                });
            });
            dt.ajax.reload();
        }

        $(document).on('click', '.filterSubmit', function () {
            console.log("here");
            table.ajax.reload();

        });

        function search(value) {
            value.search_name = $('input[name=keyword]').val();
            value.search_payment = $("#payment_status").val();
            value.search_order = $("#order_status").val();
        }

        function softDelete(b) {

            Swal.fire({
                title: "Are you sure?",
                text: "You wont be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, delete it!"
            }).then(function (result) {
                if (result.value) {

                    $.ajax({url: "{{ url('admin/students') }}/" + b, type: "DELETE", dataType: "html"})
                        .done(function (a) {
                            var data = JSON.parse(a);

                            if (data.flagError) {
                                showAlert(data.message, "error");
                            } else {

                                showAlert(data.message, "success");
                                setTimeout(function () {
                                    table.ajax.reload(null, false);
                                }, 2000);

                            }
                        }).fail(function () {
                        showAlert("Somthing went wrong!", "error");


                    });

                } else if (result.dismiss === "cancel") {
                    Swal.fire(
                        "Cancelled",
                        "",
                        "error"
                    )
                }
            });
        }

        $(document).on('click', '#filterClear', function () {

            // $("#country").val(null).trigger('change');
            // $('#curriculum').val(null).trigger('change');
            // $("#subject").val(null).trigger('change');
            // $("#student_type").val(null).trigger('change');
            $('input[name=keyword]').val(null).trigger('change');
            table.draw();

        });

    </script>

@endsection