@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 class="col-md-3">
                        <div class="form-group">
                            <label style="font-weight: bold" for="date"> Date </label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="dates" id="date" 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> 
    @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="text" 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("");
                        }, 1000);

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

    $(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">Manual return added successfully</div>'
                            );
                        } else if (response.output == 'alreadyHave') {
                            manualReturnAlert.html(
                                '<div class="alert alert-warning" role="alert">A return has already been added for this waybill</div>'
                            );
                        } else {
                            manualReturnAlert.html(
                                '<div class="alert alert-danger" role="alert">Failed to add manual return</div>'
                            );
                        }

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

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



        $(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, 10]
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                }
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [2, 3, 4, 5, 6, 7, 8, 9, 10]
                }
            },
        ],
        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();
                
                // Get selected date range
                let dateRange = $('#date').val();
                if (dateRange) {
                    let dates = dateRange.split(' - ');
                    d.start_date = dates[0];
                    d.end_date = dates[1];
                }
            }
        },
        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;
            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'
            },
        ]
    });

    // Event binding to reload table on any filter change, including the date range
    $(document).on('change', '#refund_type, #status, #return_reason, #reportrange, #location_id, #date', function() {
        table.ajax.reload();
    });

    // Handle delete operation
    $(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();
                if (result.value) {
                    $.ajax({
                        type: "post",
                        url: '/sales_returns/delete/multiple',
                        data: {
                            "_token": "{{ csrf_token() }}",
                            selected_ids: selected_ids,
                        },
                        success: function(response) {
                            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();
                            } 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