@extends('layouts.master')

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

@section('content')
<style>
 #barcode_input {
    padding: 5px; /* Reduced padding for a smaller box */
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    font-size: 14px; /* Reduced font size */
    transition: background-color 0.3s ease-in-out;
    position: relative;
    width: 150px; /* Adjust the width as needed */
}

#barcode_input:focus {
    background-color: #fff;
}

.barcode {
    padding: 8px 12px; /* Adjust padding for a smaller button */
    font-size: 14px; /* Reduced font size */
    background-color: #fa5d09; /* Green background color (you can customize) */
    color: #fff; /* White text color */
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    margin-left: 2px;
}

.barcode:hover {
    background-color: #007bff; /* Darker green on hover (you can customize) */
}

</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-3" @if ($setting->business_location != '1') style="display: none" @endif>
                        <div class="form-group">
                            <label class="required" style="font-weight: bold" for="activate_code">business Location</label>
                            <select class="form-control select2" id="location_id" name="location_id">
                                <option value="">All</option>
                                @if (Auth::user()->role_id == '1')
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @else
                                    @foreach ($users_access_location as $business_location)
                                        @if ($business_location->is_active == '1')
                                            <option value="{{ $business_location->business_location_id }}">
                                                {{ $business_location->name }}
                                            </option>
                                        @else
                                        @endif
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <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="">All</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-3">
                        <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>
                                <option value="missed">Missed</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold">Return Reason</label>
                            <select required class="form-control" id="return_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="fault">Fault</option>
                                <option value="customer_fault">Customer Fault</option>
                                <option value="courier_fault">Courier Fault</option>
                                <option value="fault">Fault</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div> 
    @if ($setting->barcode_read == '1')
    <div class="row col-12">
        <div class="col-6">
            <div class="card">
                <div id="bottomDiv" class="alert-container"></div>
                <div class="col-xs-4">
                    <div class="card-body">
                        <h3>Barcode Return</h3>
                        <input style="margin-bottom: 12px" class="form-control col-md-6 col-12"  type="text" id="barcode_input" placeholder="Enter barcode...">
                    </div>

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

        <div class="col-6">
            <div class="card">
                <div id="manual_return_alert" class="alert-container"></div>
                <div class="card-body">
                    <h3>Quick Return Manual Entry</h3>
                    <form class="form-inline align-items-center">
                        <input class="form-control col-md-6 col-12 mr-2" type="number" id="manual"
                            placeholder="Enter waybill No">
                        <div style="margin-left:30px">
                            <button class="btn btn-primary mt-3" type="button" id="manual_return_btn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>



    </div>
    @endif

    <div class="col-12">
        <div class="card">
            <div class="card-body">
                &nbsp; &nbsp;
                <div class="float-right">
                    &nbsp; &nbsp;
                    <a href="{{ route('downloads.sale_return_import_template') }}" class="btn btn-primary"><i
                            class="dripicons-download"></i> Sale Return Template</a>
                </div>
                &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>Import Excel</button>
                <button class="btn btn-primary px-4 float-right mt-0 mb-3" data-toggle="modal" data-animation="bounce"
                    hidden 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>
                                    <input type="checkbox" class="check_all" id="multipale-select">
                                </th>
                                <th>Action</th>
                                <th>Return Date</th>
                                <th>Reference Number</th>
                                <th>Business Location</th>
                                <th>Waybill No</th>
                                <th>Invoice Total</th>
                                <th>Customer Name</th>
                                <th>Parent Invoice</th>
                                <th>Return Reason</th>
                                <th>Status</th>
                            </tr>
                            <!--end tr-->
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="5" style="text-align: center"></th>
                                <th style="font-weight: bold">Total</th>
                                <th colspan="4"></th>
                            </tr>
                        </tfoot>
                    </table>
                    <button id="btn_deleted" class="btn btn-xs btn_multipal_bulk_print btn_deleted" style="background-color: #e74c3c;">
                            Multiple Deleted
                    </button>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </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="Invoice Number" class="form-control"
                                        id="waybill_id" name="" 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="other">Other</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 () {
        $(document).on('input', '#barcode_input', function () {
            var barcode_input = $('#barcode_input');

            if (barcode_input.val().trim() !== "") {
                $.ajax({
                    url: '/processBarcode',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json',
                    },
                    data: JSON.stringify({
                        barcode_id: barcode_input.val(),
                    }),
                    success: function (response) {
                        console.log('Response:', response);
                        var bottomDiv = $('#bottomDiv');
                        if (response.output == 'success') {
                            bottomDiv.html(
                                '<div class="alert alert-success text-center" role="alert" style="font-size: 16px; font-weight: bold;">Return successfully added</div>'
                            );
                        } else if (response.output == 'alreadyHave') {
                            bottomDiv.html(
                                '<div class="alert alert-warning text-center" role="alert" style="font-size: 16px; font-weight: bold;">A Return has already been added for this waybill</div>'
                            );
                        } else {
                            bottomDiv.html(
                                '<div class="alert alert-danger text-center" role="alert" style="font-size: 16px; font-weight: bold;">The provided waybill does not match any records</div>'
                            );
                        }
                         
                        $('#barcode-waybill').val('');
                        setTimeout(function() {
                            bottomDiv.html('');
                            barcode_input.val("");
                            location.reload();
                        }, 1000);

                    },
                    error: function (error) {
                        console.error('Error:', error);
                    }
                });
            }
        });
    });

    $(document).ready(function () {
        $('#manual_return_btn').on('click', function () {
            var waybillNo = $('#manual').val();

            if (waybillNo.trim() !== "") {
                $.ajax({
                    url: '/processBarcode',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json',
                    },
                    data: JSON.stringify({
                        barcode_id: waybillNo,
                    }),
                    success: function (response) {
                        var manualReturnAlert = $('#manual_return_alert');

                        if (response.output == 'success') {
                            manualReturnAlert.html(
                                '<div class="alert alert-success" role="alert" style="font-size: 16px; font-weight: bold;">Manual return added successfully</div>'
                            );
                        } else if (response.output == 'alreadyHave') {
                            manualReturnAlert.html(
                                '<div class="alert alert-warning text-center" role="alert" style="font-size: 16px; font-weight: bold;">A Return has already been added for this waybill</div>'
                            );
                        } else {
                            manualReturnAlert.html(
                                '<div class="alert alert-danger" role="alert" style="font-size: 16px; font-weight: bold;">Failed to add manual return</div>'
                            );
                        }

                        $('#manual').val("");

                        setTimeout(function () {
                            manualReturnAlert.html('');
                            location.reload();
                        }, 1000);
                    },
                    error: function (error) {
                        console.error('Error:', error);
                    }
                });
            } else {
                alert('Please enter a waybill number.');
            }
        });
    });



        $(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: [2, 3, 4, 5, 6, 7, 8, 9]
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: [2, 3, 4, 5, 6, 7, 8, 9]
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: [2, 3, 4, 5, 6, 7, 8, 9]
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: [2, 3, 4, 5, 6, 7, 8, 9]
                        }
                    },
                ],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/delivery-returns') }}",
                    data: function(d) {
                        d.refund_type = $('#refund_type').val();
                        d.status = $('#status').val();
                        d.return_reason = $('#return_reason').val();
                        d.location_id = $('#location_id').val();
                        d.range = $('#reportrange').val();
                    }
                },
                columnDefs: [{
                        "targets": [0, 6],
                        "orderable": false,
                        "searchable": false,
                    },
                    {
                        "targets": [],
                        "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(6).data().reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                    $(api.column(6).footer()).html(formatNumber(grand_total) + '.00')
                },
                columns: [{
                        data: 'check',
                        name: 'check'
                    }, {
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'return_date',
                        name: 'return_date'
                    },
                    {
                        data: 'ref_no',
                        name: 'ref_no'
                    },
                    {
                        data: 'location_id',
                        name: 'location_id'
                    },
                    {
                        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'
                    },
                ]
            });
            $(document).on('change', '#refund_type, #status, #return_reason, #reportrange, #location_id',
                function() {
                    table.ajax.reload();
                })
                $(document).on('click', '.btn_deleted', function() {
                var selected_ids = $("#laravel_datatable input:checkbox:checked").map(function() {
                    return $(this).val();
                }).get();
                if (selected_ids.length > 0) {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        //document.location.reload();
                        // table.ajax.reload();
                        if (result.value) {
                            $.ajax({
                                type: "post",
                                url: '/sales_returns/delete/multiple',
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    selected_ids: selected_ids,
                                },
                                success: function(response) {
                                    // alert(response.success);
                                    if (response.success == 1) {
                                        $.toast({
                                            heading: 'Success',
                                            text: response.msg,
                                            position: 'top-right',
                                            bgColor: '#1ecab8',
                                            icon: 'success',
                                            showHideTransition: 'fade',
                                            hideAfter: 7000,
                                            loaderBg: '#ecf0f1',
                                        })
                                        table.ajax.reload();
                                        // document.location.reload();
                                    } else {
                                        $.toast({
                                            heading: 'Error',
                                            text: response.msg,
                                            position: 'top-right',
                                            bgColor: '#f1646c',
                                            icon: 'error',
                                            showHideTransition: 'fade',
                                            hideAfter: 7000,
                                            loaderBg: '#ecf0f1',
                                        })
                                    }
                                }
                            });
                        }
                    })
                }
            });
        });
        $(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).on('click', '#multipale-select', function() {
            if ($(this).prop('checked')) {
                $('.check-multipale').prop('checked', true);
            } else {
                $('.check-multipale').prop('checked', false);
            }
        })

        // var table = $('#laravel_datatable').DataTable();
        // $('#laravel_datatable tbody').on('click', 'tr', function() {
        //     $(this).toggleClass('selected');
        // });
    </script>
@endsection