@extends('layouts.master')

@section('page_title', 'Return Details')
@section('title', 'Return Details')
@section('main_item', 'Returns')
@section('sub_item', 'Return Details')

@section('content')
    <style>
        div.dt-buttons {
            position: relative;
            float: right;
        }

        div.dataTables_filter {
            margin-top: 7px
        }
    </style>
    <div class="col-12">
        <div class="card">
            <div id="accordion">
                <div class="border-bottom card-header" style="background-color: white; cursor: pointer;" data-toggle="collapse"
                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <h4 class="mb-0 header-title">
                        Filter
                    </h4>
                </div>
                <div id="collapseOne" class="collapse show mt-3" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold">Refund Type</label>
                                    <select required class="form-control" id="refund_type" name="refund_type">
                                        <option value="">Select</option>
                                        <option value="refund">Refund</option>
                                        <option value="item_replacement">Item Replacement</option>
                                        <option value="non_delivery_return">Non Delivery Return</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold">Status</label>
                                    <select required class="form-control" id="status" name="status">
                                        <option value="">All</option>
                                        <option value="pending">Pending</option>
                                        <option value="recived">Recived</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="reportrange"> Date </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="dates-d" id="reportrange"
                                            value="" readonly>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                &nbsp; &nbsp;
                <button class="btn btn-primary px-4 float-right mt-0 mb-3" data-animation="bounce" id="add_bulk_return"
                    data-href="{{ route('delivery_returns.get_export_modal') }}" style="margin-left: 10px"
                    href="javascript:void(0)"><i class="mdi mdi-chevron-double-down mr-2"></i>Excel</button>
                <button class="btn btn-primary px-4 float-right mt-0 mb-3" data-toggle="modal" data-animation="bounce"
                    data-target=".order-return-model"><i class="mdi mdi-plus-circle-outline mr-2"></i>Add Return</button>
                <h4 class="header-title mt-0">Return Details</h4>
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>Action</th>
                                <th>Return Date</th>
                                <th>Reference Number</th>
                                <th>Waybill No</th>
                                <th>Invoice Total</th>
                                <th>Customer Name</th>
                                <th>Parent Invoice</th>
                                <th>Return Reason</th>
                                <th>Status</th>
                                <th>Item Name</th>
                                <th>Item Size</th>
                                <th>Item QTY</th>
                            </tr>
                            <!--end tr-->
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="3" style="text-align: center"></th>
                                <th style="font-weight: bold">Total</th>
                                <th colspan="4"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
          
        </div>
       
    </div>
    <div class="modal fade order-return-model" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title mt-0" id="mySmallModalLabel">Add Return</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <form action="{{ route('delivery-returns.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="sale_id">Waybill Number</label>
                                    <input type="text" placeholder="Waybill Number" class="form-control" id="waybill_id"
                                        name="waybill_id" required="">
                                    <input type="hidden" placeholder="" class="form-control" id="contact_id"
                                        name="contact_id" required="" value="" readonly>
                                    <input type="hidden" placeholder="" class="form-control" id="sale_id"
                                        name="sale_id" required="" value="" readonly>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="customer">Customer</label>
                                    <input type="text" placeholder="Customer" class="form-control" id="contact"
                                        name="" required="" readonly>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="re_date">Return Date</label>
                                    <input type="text" class="form-control mdate" placeholder="2017-06-04"
                                        id="mdate" name="return_date" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="re_reason">Return Reason</label>
                                    <select class="form-control" id="re_reason" name="return_reason">
                                        <option value="">Select</option>
                                        <option value="delivery_issue">Delivery Issue</option>
                                        <option value="delivery_damage">Delivery Damage</option>
                                        <option value="exchange">Exchange</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold">Refund Type</label>
                                    <select required class="form-control" id="refund_type2" name="refund_type">
                                        <option value="">Select</option>
                                        <option value="refund">Refund</option>
                                        <option value="item_replacement">Item Replacement</option>
                                        <option value="non_delivery_return">Non Delivery Return</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="other_reason">Other Reason</label>
                                    <input type="text" placeholder="Other Reason" class="form-control"
                                        id="other_reason" name="other_reason">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary  btn-sm">Save</button>
                        <button type="button" class="btn btn-danger  btn-sm " data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="package-status-update" class="modal fade"></div>
    <div id="package-status-edit" class="modal fade"></div>
    <div id="add_bulk_return_modal" class="modal fade"></div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
            $('#mdates').val(moment(new Date()).format("YYYY-MM-DD"));
        })

        $(document).on('click', '#view', function() {
            $('#package-status-update').load($(this).data('href'), function() {
                $('#package-status-update').modal('show');
            })
        });

        $(document).on('click', '#edit', function() {
            $('#package-status-edit').load($(this).data('href'), function() {
                $('#package-status-edit').modal('show');
                let payment_type_return = $('#payment_type_return').val();
                let refund_type = $('#refund_type_set').val();
                if (payment_type_return == 'online') {
                    $('.refund_account_div').hide();
                } else {
                    if (refund_type == 'refund') {
                        $('.refund_account_div').show();
                    } else {
                        $('.refund_account_div').hide();
                    }
                }
            })
        });
        $(document).on('change', '#refund_type', function() {
            let refund_type = $(this).val();
            let payment_type_return = $('#payment_type_return').val();
            if (payment_type_return == 'online') {
                $('.refund_account_div').hide();
            } else {
                if (refund_type == 'refund') {
                    $('.refund_account_div').show();
                } else {
                    $('.refund_account_div').hide();
                }
            }
        });

        $(document).ready(function() {
            var table = $('#laravel_datatable').DataTable({
                lengthMenu: [
                    [25, 50, 100, -1],
                    ['25 ', '50 ', '100', 'All']
                ],
                dom: 'Blfrtip',
                buttons: [{
                        extend: 'copy',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        }
                    },
                ],
                processing: false,
                serverSide: true,
                ajax: {
                    url: "{{ url('/delivery-returns') }}",
                    data: function(d) {
                        d.refund_type = $('#refund_type').val();
                        d.status = $('#status').val();
                        d.range = $('#reportrange').val();
                    }
                },
                columnDefs: [{
                        "targets": [0, 04, 07, 09, 10],
                        "orderable": false,
                        "searchable": false,
                    },
                    {
                        "targets": [09, 10],
                        "orderable": false,
                        "searchable": false,
                        "visible": false,
                    }
                ],
                "fnDrawCallback": function(oSettings) {
                    $.fn.tooltip && $('[data-toggle="tooltip"]').tooltip()
                },
                "footerCallback": function(row, data, start, end, display) {
                    var api = this.api(),
                        data;
                    // converting to interger to find total
                    var intVal = function(i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };
                    let grand_total = api.column(4).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                    $(api.column(4).footer()).html(formatNumber(grand_total) + '.00')
                },
                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'return_date',
                        name: 'return_date'
                    },
                    {
                        data: 'ref_no',
                        name: 'ref_no'
                    },
                    {
                        data: 'waybill_no',
                        name: 'waybill_no'
                    },
                    {
                        data: 'invoice_nettotal',
                        name: 'invoice_nettotal'
                    },
                    {
                        data: 'contact_id',
                        name: 'contact_id'
                    },
                    {
                        data: 'sale_id',
                        name: 'sale_id'
                    },
                    {
                        data: 'return_reason',
                        name: 'return_reason'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'item_name',
                        name: 'item_name'
                    }, {
                        data: 'item_qty',
                        name: 'item_qty'
                    },
                ]
            });

            $(document).on('change', '#refund_type, #status, #reportrange', function() {
                table.ajax.reload();
            })
        });

        $(document).on('change', '#waybill_id', function() {
            let waybill = $('#waybill_id').val();
            axios.get('/delivery-returns/waybill/get/' + waybill + '')
                .then(function(response) {
                    if (response.data != 'NA') {
                        let data = response.data[0];
                        $('#contact_id').val(data.contact_id);
                        $('#sale_id').val(data.sale_id);
                        $('#contact').val(data.customer);
                    } else {
                        swal('No Records Found')
                    }
                })
                .catch(function(error) {
                    swal('No Records Found')
                    console.log(error);
                });
        })

        $(document).on('change', '#waybills_id', function() {
            let waybill = $('#waybills_id').val();
            axios.get('/delivery-returns/waybill/edit/' + waybill + '')
                .then(function(response) {
                    if (response.data != 'NA') {
                        let data = response.data[0];
                        $('#contacts_id').val(data.contacts_id);
                        $('#sales_id').val(data.sales_id);
                        $('#contacts').val(data.customers);
                    } else {
                        swal('No Records Found')
                    }
                })
                .catch(function(error) {
                    swal('No Records Found')
                    console.log(error);
                });
        })

        $(document).on('click', '#add_bulk_return', function() {
            let href = $(this).data('href');
            $('#add_bulk_return_modal').load(href, function() {
                $('#add_bulk_return_modal').modal('show');
            });
        });
        $(document).ready(function() {
            let clicks = 0;
            $('.btn-sm').click(function() {
                clicks++;
                if (clicks == 2) {
                    $(this).prop('disabled', true);
                }
            });
        });
        setTimeout(function() {
            $('#my-button').prop('disabled', false);
        }, 10000);
    </script>
@endsection