@extends('layouts.admin')

@section('content')
    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title">@lang('keyword.reported')@lang('keyword.order')</h6>
                        </div>

                        <div class="card-body">
{{--                            <form action="{{ route('admin.orders.report.search') }}" method="GET">--}}
{{--                                @csrf--}}
                                <div class="row">
                                    <div class="col-md-4 form-group">
                                        <label for="">@lang('keyword.select-date'):&nbsp; </label>
                                        <br>
                                        <div id="reportrange" name="date-rang" class="btn" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;width: 100%;height: 36px;">
                                            <i class="icon-calendar5"></i>&nbsp;
                                            <span></span> <i class="fa fa-caret-down"></i>
                                        </div>
                                        <input type="hidden" name="start">
                                        <input type="hidden" name="end">
                                    </div>
                                    <div class="col-md-4 form-group">
                                        <label for="">@lang('keyword.merchant'):&nbsp; </label>
                                        <select class="form-control custom-select" name="merchantID">
                                            <option value="">@lang('keyword.list')</option>
                                            @foreach ($merchants as $merchant)
                                                <option value="{{ $merchant->id }}">{{ $merchant->brand_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4 form-group">
                                        <label for="">@lang('keyword.status'):&nbsp; </label>
                                        <select class="form-control custom-select" name="status">
                                            {{--                                        <option value="">@lang('keyword.list')</option>--}}
                                            <option value="completed" selected>@lang('keyword.complete')</option>
                                            <option value="rejected">@lang('keyword.reject')</option>
                                            <option value="cancelled">@lang('keyword.cancel')</option>
                                            <option value="pending">@lang('keyword.pending')</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <button type="submit" id="search" class="btn btn-primary">@lang('keyword.search')</button>
                                    </div>
                                </div>
{{--                            </form>--}}
                            <hr>

                            <div class="table-responsive  p-3">
                                <table class="table text-nowrap" id="ordersReport_table">
                                    <thead>
                                    <tr>
                                        <th>លេខសម្គាល់</th>
                                        <th>@lang('keyword.brand_name')</th>
                                        <th>វីធីបង់ប្រាក់</th>
                                        <th>អាសយដ្ឋាន</th>
                                        <th>សរុបតម្លៃ</th>
                                        <th>@lang('keyword.status')</th>
                                        <th>@lang('keyword.created_at')</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var start = moment().subtract(29, 'days');
            var end = moment();

            $('select[name="merchantID"]').on('change',function(){
                // $(document).trigger('reDrawTable');
            })
            let s = start;
            let e = end;
            function cb(startDate, endDate) {
                $('#reportrange span').html(startDate.format('MMMM D, YYYY') + ' - ' + endDate.format('MMMM D, YYYY'));
                start = startDate;
                end = endDate;
                $("[name='start']").val('');
                $("[name='end']").val('');
                // $(document).trigger('reDrawTable');
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                locale: {
                    "customRangeLabel": "@lang('keyword.custom-range')",
                },
                ranges: {
                    '@lang('keyword.today')': [moment(), moment()],
                    '@lang('keyword.yesterday')': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '@lang('keyword.last-7-days')': [moment().subtract(6, 'days'), moment()],
                    '@lang('keyword.last-30-days')': [moment().subtract(29, 'days'), moment()],
                    '@lang('keyword.this-month')': [moment().startOf('month'), moment().endOf('month')],
                    '@lang('keyword.last-month')': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb);

            cb(start, end);
            $(document).on('reDrawTable',function(e){
                $('#laundryTable').DataTable().ajax.reload(null, false);
                e.preventDefault();
            });

            let table = $("#ordersReport_table").DataTable({
                responsive: true,
                // 'dom': 'f<"bulkAction float-left row">ltip',
                dom: 'Bfrtip',
                lengthChange: false,
                buttons: [
                    {
                            extend: 'excel',
                            text: 'Excel',
                            filename: "E-Ticket - Order_Report"
                    }
                ],
                'processing': true,
                'severSide': true,
                'ajax':{
                    url: '{{ route("admin.orders.report.search") }}',
                    type: 'GET',
                    data: function (param) {
                        param.start = $("[name='start']").val();
                        param.end = $("[name='end']").val();
                        param.merchantID = $("[name='merchantID']").val();
                        param.status = $("[name='status']").val();
                    }
                },
                language: {
                    "paginate": {
                        "first":      "@lang('keyword.first')",
                        "last":       "@lang('keyword.latest')",
                        "next":       "@lang('keyword.next')",
                        "previous":   "@lang('keyword.previous')"
                    },
                    "search": '@lang('keyword.search') : ',
                    "zeroRecords":    "@lang('keyword.no-result')",
                    "lengthMenu":     "បង្ហាញ  _MENU_  @lang('keyword.report')",
                    "info":           "បង្ហាញ _START_ ទៅ _END_ នៃ _TOTAL_ @lang('keyword.report')",
                    "infoEmpty":      "គ្មានទិន្នន័យ",
                },
                columns: [
                    { data: 'order_num', name: 'order_num', class: 'text-center', },
                    { data: 'merchant_name', name: 'merchant_name', class: 'text-center',},
                    { data: 'payment_method', name: 'payment_method', class: 'text-center',  orderable: false, searchable: false, },
                    { data: 'shipping_address', name: 'shipping_address', class: 'text-center',  orderable: false, searchable: false,},
                    { data: 'total', name: 'total', class: 'text-center' },
                    { data: 'status', name: 'status', class: 'text-center', orderable: false, searchable: false,},
                    { data: 'created_at', name: 'created_at', class: 'text-center', },
                ],
                footerCallback: function ( row, data, start, end, display ) {
                    var api = this.api();
                    // Remove the formatting to get integer data for summation
                    var intVal = function ( i ) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    // Total over all pages
                    total = api
                        .column( 4 )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    // Total over this page
                    pageTotal = api
                        .column( 4, { page: 'current'} )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    // Update footer
                    $( api.column( 4 ).footer() ).html(
                        '$'+pageTotal.toFixed(2) +' ( $'+ total.toFixed(2) +' សរុប)'
                    );
                },
            });

            $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
                var d1= picker.startDate.format('YYYY-MM-DD');
                var d2= picker.endDate.format('YYYY-MM-DD');
                
                $("[name='start']").val(d1);
                $("[name='end']").val(d2);

            });

            table.buttons().container()
                .appendTo( '#example_wrapper .col-md-6:eq(0)' );
            {{--var table = $('#ordersReport_table').DataTable({--}}
            {{--    'dom': 'f<"bulkAction float-left row">ltip',--}}
            {{--    'processing': true,--}}
            {{--    'severSide': true,--}}

            {{--    'ajax':{--}}
            {{--        url: 'orders-report/search',--}}
            {{--        type: 'GET',--}}
            {{--        data: function (param) {--}}
            {{--            param.start = $("[name='start']").val();--}}
            {{--            param.end = $("[name='end']").val();--}}
            {{--            param.merchantID = $("[name='merchantID']").val();--}}
            {{--            param.status = $("[name='status']").val();--}}
            {{--        }--}}
            {{--    },--}}
            {{--    language: {--}}
            {{--        "paginate": {--}}
            {{--            "first":      "@lang('keyword.first')",--}}
            {{--            "last":       "@lang('keyword.latest')",--}}
            {{--            "next":       "@lang('keyword.next')",--}}
            {{--            "previous":   "@lang('keyword.previous')"--}}
            {{--        },--}}
            {{--        "search": '@lang('keyword.search') : ',--}}
            {{--        "zeroRecords":    "@lang('keyword.no-result')",--}}
            {{--        "lengthMenu":     "បង្ហាញ  _MENU_  @lang('keyword.report')",--}}
            {{--        "info":           "បង្ហាញ _START_ ទៅ _END_ នៃ _TOTAL_ @lang('keyword.report')",--}}
            {{--        "infoEmpty":      "គ្មានទិន្នន័យ",--}}
            {{--    },--}}
            {{--    'columns': [--}}
            {{--        {--}}
            {{--            data: 'order_num',--}}
            {{--            width: '20px'--}}
            {{--        },--}}
            {{--        {--}}
            {{--            data: 'merchant',--}}
            {{--            class: 'text-center',--}}
            {{--            width: '20px'--}}
            {{--        },--}}
            {{--        {--}}
            {{--            data: 'payment'--}}
            {{--        },--}}
            {{--        {--}}
            {{--            data: 'address'--}}
            {{--        },--}}
            {{--        {--}}
            {{--            data: 'total'--}}
            {{--        },--}}
            {{--        {--}}
            {{--            data: 'status'--}}
            {{--        },--}}
            {{--        {--}}
            {{--            data: 'created_at'--}}
            {{--        },--}}
            {{--    ],--}}
            {{--    "aoColumnDefs": [ {--}}
            {{--        "aTargets": [ 1,5,6 ],--}}
            {{--        "mRender": function ( data, type, full ) {--}}
            {{--            return $("<div/>").html(data).text();--}}
            {{--        }--}}
            {{--    } ]--}}
            {{--    // 'order': [[1, 'desc']]--}}
            {{--});--}}

            $("#search").on('click', function () {
                // $("[name='start']").val(s);
                // $("[name='end']").val(e);
                let start =  $("[name='start']").val();
                let end =  $("[name='end']").val();
                if (start !='' && end !=''){
                    table.ajax.reload();
                }
            });


        });

    </script>
    <style media="screen">
        div.bulkAction{
            width: 20%;
            margin-left: 20px;
        }
    </style>
@endsection