@extends ('backend.layouts.app')

@section ('title', app_name() . ' | ' . __('point::labels.backend.point.management'))

@section('breadcrumb-links')
    @include('point::includes.breadcrumb-links')
@endsection

@push('after-styles')
    {{ style("js/plugin/toastr/toastr.min.css") }}
    {{ style("https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css") }}
    {{ style('assets/plugins/select2/css/select2.min.css') }}
    {{ style('assets/plugins/select2/css/select2-bootstrap.min.css') }}

    <style>
        .dataTables_length {
            float: left;
        }
        div.dt-buttons {
            float: right;
        }
        .total_point {
            text-align: right;
        }
    </style>
@endpush

@section('content')
<div class="card">
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    {{ __('point::labels.backend.point.management') }} <small class="text-muted">{{ __('point::labels.backend.point.list') }}</small>
                </h4>
            </div><!--col-->

            <div class="col-sm-7">
                @include('point::includes.header-buttons')
            </div><!--col-->
        </div><!--row-->

        <div class="row mb-4">
            <div class="col-md-4">
                <select class="js-data-user-ajax" name="user" id="user" style="width: 100%;">
                    <option></option>
                </select>
            </div>
            <div class="col-md-4">
                <select class="js-data-customer-ajax" name="customer" id="customer" style="width: 100%;">
                    <option></option>
                </select>
            </div>
            <div class="col-md-4">
                <select name="method" id="method" class="form-control">
                    <option></option>
                    <option value="all">All</option>
                    <option value="Cash">Cash</option>
                    <option value="QR">QR</option>
                    <option value="Card">Card</option>
                    <option value="API">API</option>
                </select>
            </div>

            <div class="col-md-4 col-lg-4 mt-4">
                <select name="payment_status" id="payment_status" class="form-control">
                    <option></option>
                    <option value="all">All</option>
                    <option value="1">Paid</option>
                    <option value="0">Unpaid</option>
                </select>
            </div>

            <div class="col-md-4 col-lg-4 mt-4">
                {{-- <label class="control-label">Date Range</label> --}}
                <input name="payment_date_time" class="form-control date_range" type="text">
            </div>

            <div class="col-md-2 text-center  mt-4">
                <button type="button" id="pointSearch" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;Search</button>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive">
                    <table id="point-table" class="table table-condensed table-hover">
                        <thead>
                            <tr>
                                <th>{{ __('point::labels.backend.point.table.id') }}</th>
                                <th>{{ __('point::labels.backend.point.table.ref_no') }}</th>
                                <th>{{ __('point::labels.backend.point.table.name') }}</th>
                                <th>{{ __('point::labels.backend.point.table.mobile') }}</th>
                                <th>{{ __('point::labels.backend.point.table.township') }}</th>
                                <th>{{ __('point::labels.backend.point.table.point') }}</th>
                                <th>{{ __('point::labels.backend.point.table.amount') }}</th>
                                <th>{{ __('point::labels.backend.point.table.payment_mode') }}</th>
                                <th>{{ __('point::labels.backend.point.table.payment_date_time') }}</th>
                                <th>{{ __('point::labels.backend.point.table.created_user_name') }}</th>
                                <th>{{ __('point::labels.backend.point.table.updated_at') }}</th>
                                <th>{{ __('point::labels.backend.point.table.updated_user_name') }}</th>
                                <th>{{ __('point::labels.backend.point.table.status') }}</th>
                                <th>{{ __('point::labels.backend.point.table.remark') }}</th>
                                <th>{{ __('point::labels.backend.point.table.invoice_no') }}</th>
                                <th>{{ __('point::labels.backend.point.table.merchant_shop_id') }}</th>
                                <th>{{ __('labels.general.actions') }}</th>
                            </tr>
                        </thead>
                        <tfoot class="total">
                                <tr>
                                    <th colspan="3"></th>
                                    <th colspan="1"> Total </th>
                                    <th colspan="2">
                                        <div class="input-icon">
                                            <input class="form-control total_point" type="text" disabled="disabled">
                                        </div>
                                    </th>
                                    <th colspan="2">
                                        <div class="input-icon">
                                            <input class="form-control total_amount" type="text" disabled="disabled">
                                        </div>
                                    </th>
                                    <th colspan="7"></th>
                                </tr>
                        </tfoot>
                    </table>
                </div>
            </div><!--col-->
        </div><!--row-->
    </div><!--card-body-->
</div><!--card-->
@endsection

@push('after-scripts')
    {{ script('/js/plugin/toastr/toastr.min.js') }}
    {{ script('//cdn.jsdelivr.net/momentjs/latest/moment.min.js') }}
    {{ script('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js')}}

    {{ script('assets/plugins/select2/js/select2.full.min.js')}}
    {{ script("assets/plugins/select2/component/components-select2.js") }}

    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js ") }}
    {{ script("https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js") }}

    <script>
        $(function() {

            $('#method').select2({
                placeholder: "Choose Method"
            });

            $('#payment_status').select2({
                placeholder: "Choose Status"
            });

            $('.date_range').daterangepicker({
                "showDropdowns": true,
                "timePicker": true,
                "timePicker24Hour": true,
                locale: {
                      format: 'YYYY-MM-DD HH:mm:ss'
                    },
                ranges: {
                    'Today': [moment().startOf('days'), moment()],
                    'Yesterday': [moment().subtract(1, 'days').startOf('days'), moment().subtract(1, 'days').endOf('days')],
                    'Last 7 Days': [moment().subtract(6, 'days').startOf('days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days').startOf('days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                alwaysShowCalendars: true,
                maxSpan: { days: 365 }
            }, function(start, end, label) {
                console.log(start);
                console.log('New date range selected: ' + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss') + ' (predefined range: ' + label + ')');
            }).attr('readOnly','true').css('cursor','pointer');

            var table = $('#point-table').DataTable({
                language:
                    {
                        processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                    },
                dom: 'lBfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
                searching: false,
                serverSide: true,
                "lengthMenu": [ 10, 25, 50, 100, 200, 300, 500 ],
                ajax: {
                    url: '{!! route("admin.point.get") !!}',
                    type: 'post',
                    data: function (d) {
                        d.data = {
                                user_id: $('#user').val(),
                                customer_id: $('#customer').val(),
                                method: $('#method').val(),
                                payment_status: $('#payment_status').val(),
                                payment_date_time: $('.date_range').val()
                            };
                        return d;
                    },
                    error: function (xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'ref_no', name: 'ref_no'},
                    {data: 'customer.name', name: 'customer.name', sortable: false},
                    {data: 'customer.mobile', name: 'customer.mobile', sortable: false},
                    {data: 'township', name: 'tonwship', sortable: false},
                    {data: 'point', name: 'point'},
                    {data: 'amount', name: 'amount'},
                    {data: 'method', name: 'method'},
                    {data: 'payment_date_time', name: 'payment_date_time'},
                    {data: 'created_user_name', name: 'user.first_name', sortable: false},
                    {data: 'updated_at', name: 'updated_at'},
                    {data: 'updated_user_name', name: 'updated_user.first_name', sortable: false},
                    {data: 'status', name: 'status'},
                    {data: 'remark', name: 'remark'},
                    {data: 'invoice_no', name: 'invoice_no'},
                    {data: 'merchant_shop_id', name: 'merchant_shop_id'},
                    {data: 'actions', name: 'user.last_name', sortable: false}
                ],
                order: [[0, "desc"]],
                searchDelay: 500,
                fnDrawCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $('#pointSearch').on('click', function(e) {
                        table.draw();
                    });

                    $('#reset').on('click', function(e) {
                        $('input[name=search_name]').val(null).trigger("change");
                        table.draw();
                        e.preventDefault();
                    });
                    load_plugins();
                }
            });

            table.on( 'xhr', function () {
                var json = table.ajax.json();
                $('.total_point').val(json.total_points);
                $('.total_amount').val(json.total_amount);
                if(json.total_points == 0){
                    $('.total').hide();
                }else {
                    $('.total').show();
                }

            });

            $(document).on('click', '.changePayment', function() {

                var link = $(this).attr('data-url');
                var ref    = $(this).attr('data-ref');
                var remark = $(this).attr('data-remark');
                var message    =  'Are you sure want to change this : ' + ref ;

                swal({
                  title: 'Chaning Payment !',
                  text: message,
                  value: remark,
                  type: 'warning',
                  input: 'textarea',
                  inputPlaceholder: 'Enter Payment Remark',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'Yes'
                }).then((result) => {
                  if (result.value) {
                    $.ajax({
                                type: 'GET',
                                url: link,
                                data: {
                                    remark: result.value
                                },
                                success: function (data, textStatus, jQxhr) {
                                    toastr.success("Successfully Changed Payment");
                                    location.reload();
                                },
                                error:function(error,data){
                                    toastr.error(error.responseText);
                                 }
                            });
                  }
                })


            });
        });
    </script>
@endpush