@extends('layouts.app')

@section('styles')
    <!-- Data table css -->
    <link href="{{ URL::asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/datatable/responsivebootstrap4.min.css') }}" rel="stylesheet" />

    <!-- Date Picker css-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/datetimepicker/jquery.datetimepicker.css') }}" />

    <!-- File Uploads css-->
    <link href="{{ URL::asset('assets/plugins/fileuploads/css/dropify.css') }}" rel="stylesheet" type="text/css" />

    <!--Select2 css -->
    <link href="{{ URL::asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />

    <link href="{{ URL::asset('assets/custom/css/pdf-print.css') }}" rel="stylesheet" />
@endsection

@section('content')
    <!-- page-header -->
    <div class="page-header">
        <!-- breadcrumb -->
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a
                    href="{{ route('admin.dashboard.dashboard.index') }}">{{ __('admin.homepage') }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">ร้านค้า</li>
            <li class="breadcrumb-item active" aria-current="page">{{ __('order_admin.order_list') }}</li>
        </ol>
        <!-- End breadcrumb -->
        <div class="ml-auto">
            <div class="dropdown">
                <button type="button" class="btn btn-secondary dropdown-toggle btn-smพ" data-toggle="dropdown">
                    Export
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item"
                        href="javascript:exportOrders('{{ route('admin.order.order.export_payment') }}');">รายการสั่งซื้อ</a>
                    <a class="dropdown-item" href="{{ route('admin.order.order.export_shipping') }}">รายการรอการจัดส่ง</a>
                </div>
            </div>
        </div>
    </div>
    <!-- End page-header -->

    <div class="order-table-bottom">
        <div class="contaniner">
            <div class="row">
                <div class="col-md-12 col-lg-2 mb-2">
                    <select id="payment_status" name="payment_status" class="form-control select2" required="required"
                        onchange="setFilter();">
                        <option value="" selected="selected">ทั้งหมด</option>
                        <option value="0">อยู่ระหว่างการสั่งซื้อ</option>
                        <option value="1">แจ้งชำระเงินแล้ว</option>
                        <option value="2">ชำระเงินแล้ว</option>
                        <option value="3">ยกเลิก</option>
                    </select>
                </div>

                <div class="col-md-12 col-lg-2 mb-2">
                    <select id="shipping_filter_status" class="form-control select2" name="shipping_filter_status"
                        required="required" onchange="setFilter();">
                        <option value="">ทั้งหมด</option>
                        <option value="1">รอการจัดส่ง</option>
                        <option value="2">จัดส่งแล้ว</option>
                    </select>
                </div>

                <div class="col-md-12 col-lg-2 mb-2">
                    <select id="period_filter" class="form-control select2" name="period_filter" required="required"
                        onchange="setPeriodFilter(this.value);">
                        <option value="">ทั้งหมด</option>
                        <option value="1">วันนี้</option>
                        <option value="2">เมื่อวาน</option>
                        <option value="3">7 วันล่าสุด</option>
                        <option value="4">30 วันล่าสุด</option>
                        <option value="5">เดือนที่แล้ว</option>
                        <option value="6">เดือนนี้</option>
                        <option value="7">กำหนดเอง</option>
                    </select>
                </div>

                <div class="col-md-12 col-lg-4">
                    <div class="row" id="custom_date_filter" style="display: none;">
                        <div class="col-xl-5">
                            <input type="text" id="date_start_filter" autocomplete="off" name="date_start_filter"
                                placeholder="{{ __('order_admin.start_date') }}" class="form-control datetimepicker2"
                                onchange="setFilter();">
                        </div>
                        <div class="col-xl-2">
                            <h5 style="margin-top: 7px; margin-left: 15px;">{{ __('order_admin.to') }}</h5>
                        </div>
                        <div class="col-xl-5">
                            <input type="text" id="date_end_filter" autocomplete="off" name="date_end_filter"
                                placeholder="{{ __('order_admin.end_date') }}" class="form-control datetimepicker2"
                                onchange="setFilter();">
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-2"></div>

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

    <div class="row mt-3">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="order-datatable" class="table table-bordered key-buttons text-nowrap table-checkable"
                            style="width: 100%">
                            <thead>
                                <tr>
                                    <th class="border-bottom-0 checkbox-column" width="5%">ลำดับ</th>
                                    <th class="border-bottom-0" width="10%">{{ __('order_admin.date') }}</th>
                                    <th class="border-bottom-0" width="50%">{{ __('order_admin.order_list') }}</th>
                                    <th class="border-bottom-0" width="20%">{{ __('order_admin.order_info') }}</th>
                                    <th class="border-bottom-0" width="20%">สถานะคำสั่งซื้อ</th>
                                    <th class="border-bottom-0" width="10%">{{ __('order_admin.manage') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="order-table-bottom mb-3">
        <div class="contaniner">
            <div class="row">
                <div class="col-md-12">
                    <ul>
                        <li>
                            <div class="inner pr-2">
                                <span class="icon green"><i class="fas fa-check"></i></span>
                                <span class="des">ยืนยันคำสั่งซื้อ</span>
                            </div>
                        </li>
                        <li>
                            <div class="inner pr-2">
                                <span class="icon"><i class="fas fa-times"></i></span>
                                <span class="des">ยกเลิก</span>
                            </div>
                        </li>
                        <li>
                            <div class="inner pr-2">
                                <span class="icon"><i
                                        class="fas fa-truck text-warning border border-warning"></i></span>
                                <span class="des">{{ __('order_admin.not_yet_shipped') }}</span>
                            </div>
                        </li>

                        <li>
                            <div class="inner pr-2">
                                <span class="icon green"><i class="fas fa-truck"></i></span>
                                <span class="des">{{ __('order_admin.shipping_complete') }}</span>
                            </div>
                        </li>
                        <li>
                            <div class="inner pr-2">
                                <span class="icon"><i class="fas fa-credit-card warning"></i></span>
                                <span class="des">{{ __('order_admin.not_paid') }}</span>
                            </div>
                        </li>
                        <li>
                            <div class="inner pr-2">
                                <span class="icon"><i class="fas fa-credit-card info"></i></span>
                                <span class="des">แจ้งชำระเงินแล้ว</span>
                            </div>
                        </li>
                        <li>
                            <div class="inner pr-2">
                                <span class="icon"><i class="fas fa-credit-card success"></i></span>
                                <span class="des">{{ __('order_admin.paid') }}</span>
                            </div>
                        </li>

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

    <!-- SHIPPING POPUP -->
    <div class="modal fade" id="shipping_popup" tabindex="-1" role="dialog" aria-labelledby="shipping_popup"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form class="form-horizontal row-border frmshipping_class_bootbox" id="frm_shipping"
                    onsubmit="setSaveshippingOrder(); return false;">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">{{ __('order_admin.delivery_detail') }} <span
                                class="shipping_order_code">(-)</span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="data_shipping_popup">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                            data-dismiss="modal">{{ __('order_admin.close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('order_admin.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- END : SHIPPING POPUP -->

    <!-- CUSTOMER POPUP -->
    <div class="modal fade" id="customer_popup" tabindex="-1" role="dialog" aria-labelledby="customer_popup"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">{{ __('order_admin.buyer_info') }} <span
                            class="customer_order_code">(-)</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="data_customer_popup">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                        data-dismiss="modal">{{ __('order_admin.close') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- END : CUSTOMER POPUP -->

    <!-- STATUS POPUP -->
    <div class="modal fade" id="status_popup" tabindex="-1" role="dialog" aria-labelledby="status_popup"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="frm_order_status" onsubmit="setUpdateStatus(); return false;">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">สถานะการสั่งซื้อ <span
                                class="status_order_code">(-)</span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="data_status_popup">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                            data-dismiss="modal">{{ __('order_admin.close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('order_admin.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- END : STATUS POPUP -->

    <!-- PRODUCTS POPUP -->
    <div class="modal fade" id="products_popup" tabindex="-1" role="dialog" aria-labelledby="largemodal"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="largemodal1">{{ __('order_admin.product_list') }} <span
                            class="customer_order_code">(-)</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="grid-margin" id="data_products_popup">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                        data-dismiss="modal">{{ __('order_admin.close') }}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- END : PRODUCTS POPUP -->

    <!-- PAYMENT POPUP -->
    <div class="modal fade" id="payment_popup" tabindex="-1" role="dialog" aria-labelledby="shipping_popup"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="frm_payment" onsubmit="setSavePaymentInfo(); return false;">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">{{ __('order_admin.payment_details') }} <span
                                class="payment_order_id_show">(-)</span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="data_payment_popup">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                            data-dismiss="modal">{{ __('order_admin.close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('order_admin.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- END : PAYMENT POPUP -->

    {{-- html data for print --}}
    <div onafterprint="myFunction()" class="data-print" id="section-to-print"></div>
@endsection('content')

@section('scripts')
    <!-- Datepicker js -->
    <script type="text/javascript" src="{{ asset('assets/plugins/datetimepicker/jquery.datetimepicker.js') }}"></script>

    <!--  sweetalert2  -->
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.js') }}"></script>

    <!-- File uploads js -->
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/dropify-demo.js') }}"></script>

    <!--Select2 js -->
    <script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{ URL::asset('assets/plugins/datatable/js/jquery.dataTables.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/datatable/responsive.bootstrap4.min.js') }}"></script>
    <!-- <script src="{{ URL::asset('assets/plugins/datatable/datatable-2.js') }}"></script> -->

    <!-- Notifications js -->
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/jquery.growl.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/notifIt.css') }}" rel="stylesheet" />
    <script src="{{ URL::asset('assets/plugins/bootbox/bootbox.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/rainbow.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/jquery.growl.js') }}"></script>

    <!-- validator js -->
    <script src="{{ URL::asset('assets/plugins/validator/js/jquery.validate.min.js') }}"></script>

    <!-- mwz product js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js') }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/order.css') }}">
    <script src="{{ mix('js/order.js') }}"></script>

    <script src="{{ asset('assets/custom/js/pdf-print.js') }}"></script>

    <script>
        $('.datetimepicker2').datetimepicker({
            timepicker: false,
            inline: false,
            format: 'Y-m-d',
        });

        function myFunction() {
            // $('#section-to-print').html('')
            // var beforePrint = function() {
            //     console.log("before");
            // };
            // var afterPrint = function() {
            //     console.log("after");
            // };

            // var launchedFromMenu = true;
            // if (window.matchMedia) {
            //     var mediaQueryList = window.matchMedia('print');
            //     mediaQueryList.addListener(function(mql) {
            //         if (mql.matches) {
            //             if(launchedFromMenu) {
            //                 alert("There is a bug in Chrome/Opera and printing via the main menu does not work properly. Please use the 'print' icon on the page.");
            //             }
            //             beforePrint();
            //         } else {
            //             afterPrint();
            //         }
            //     });
            // }
        }

        // window.onafterprint = myFunction
    </script>
@endsection