@extends('admin_dashboard')
@section('admin')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">All Sales Returns</a></li>
                        </ol>
                    </div>
                    <h4 class="page-title">Sales Return</h4>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8 col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <div class="tab-pane" id="settings">
                            <form id="returnForm" method="post" action="{{route('sales.returns.store')}}">
                                @csrf
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-10">
                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <label for="return_date" class="form-label">Return Date</label>
                                                        <input class="form-control" type="text" id="return_date" name="return_date"
                                                               value="19-05-2026" />
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label for="customer_id" class="form-label">Customer</label>
                                                        <select name="customer_id" id="customer_id" class="form-select" required>
                                                            <option selected disabled>Select Customer</option>
                                                            @foreach($customers as $customer)
                                                                <option value="{{ $customer->id }}">{{ $customer->name }}-{{ $customer->address }}-{{ $customer->phone }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <label for="invoice_no" class="form-label">Invoice No</label>
                                                        <input type="text" name="invoice_no" id="invoice_no" class="form-control" required>
                                                    </div>

                                                    <div class="col-md-2">
                                                        <div class="mb-2">
                                                            <label for="total_due" class="form-label">Due Amount</label>
                                                            <input type="text" name="previous_due" id="previous_due" class="form-control" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="mb-2">
                                                            <label for="address" class="form-label">Address</label>
                                                            <input type="text" name="address" id="address" class="form-control" readonly>
                                                        </div>
                                                    </div>

                                                </div>


                                            </div>
                                            <div class="col-lg-2">
                                                    <div class="mb-3 text-center">
                                                        <img
                                                            id="ceo_photo_blah1"
                                                            src="{{ !empty($adminData->image) ? url('upload/admin_image/'.$adminData->image) : url('upload/no_image.jpg') }}"
                                                            class="img-fluid rounded rounded-circle border border-dark"
                                                            style="max-width: 50%; max-height:60px; object-fit: cover;"
                                                            alt="profile-image"
                                                        >
                                                    </div>
                                            </div>
                                        </div>


                                            <div class="row">
                                                <div class="col-lg-10 col-xl-10">
                                                            <div class="tab-pane" id="settings">
                                                                    <div class="row">


                                                                        <div class="col-lg-4">
                                                                            <div class="form-group">
                                                                                <label for="product_id">Product:</label>
                                                                                <select name="product_id" id="product_id" class="form-control" required>
                                                                                    <option value="">Select Product</option>
                                                                                    @foreach($products as $product)
                                                                                        <option value="{{ $product->id }}">{{ $product->product_name }} - {{ $product->category->category_name ?? '' }} - {{ $product->subcategory->subcategory_name ?? '' }} - {{ $product->brand->brand_name ?? '' }}</option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </div>
                                                                        </div>

                                                                        <!-- Payment Info -->
                                                                        <div class="col-lg-2">
                                                                            <div class="form-group">
                                                                                <label for="qty_returned">Return Quantity</label>
                                                                                <input type="number" name="qty_returned" id="qty_returned" class="form-control" >
                                                                            </div>
                                                                        </div>
                                                                        <!-- Payment Info -->
                                                                        <div class="col-lg-2">
                                                                            <div class="form-group">
                                                                                <label for="buying_price">Selling Price</label>
                                                                                <input type="number" name="selling_price" id="selling_price" class="form-control" >
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-2">
                                                                            <div class="form-group">
                                                                                <label for="category_name">Category</label>
                                                                                <input type="text" name="category_name" id="category_name" class="form-control" >
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-lg-2">
                                                                            <div class="form-group">
                                                                                <label for="brand_name">Brand</label>
                                                                                <input type="text" name="brand_name" id="brand_name" class="form-control"  >
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                 </form>
                                                                <script>
                                                                    $(document).ready(function() {
                                                                        $('.refresh').on('click', function() {
                                                                            location.reload(); // This reloads the current page
                                                                        });
                                                                    });
                                                                </script>
                                                            </div>
                                                </div> <!-- end col -->
                                                <div class="col_lg_2 col-xl-2">
                                                    <div class="mb-3 text-center">
                                                        <img
                                                            id="ceo_photo_blah"
                                                            src="{{ !empty($adminData->image) ? url('upload/admin_image/'.$adminData->image) : url('upload/no_image.jpg') }}"
                                                            class="img-fluid rounded rounded-circle border border-dark"
                                                            style="max-width: 100%; max-height: 60px; object-fit: cover;"
                                                            alt="profile-image"
                                                        >
                                                    </div>
                                                </div>
                                                {{-- <div class="row"> --}}

                                                        {{-- <label for="cash_payment" class="form-label">If You Pay in Cash</label> --}}
                                                        If You Pay in Cash<input type="number" name="cash_payment" id="cash_payment" class="form-control" >

                                                {{-- </div> --}}
                                                <div class="col-lg-6 m-0">
                                                    <button type="submit" class="btn btn-success mt-3 w-50">Submit</button>
                                                </div>
                                                <div class="col-lg-6">
                                                    <button type="button" class="btn btn-warning mt-3 w-30 refresh float-right">Refresh</button>
                                                </div>

                                            </div> <!-- end row-->
                                    </div>
                                </div>

                                        <script>
                                            $(document).ready(function() {
                                                $('.refresh').on('click', function() {
                                                    location.reload(); // This reloads the current page
                                                });
                                            });
                                        </script>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <table class="table table-striped table-auto text-center" id="myTable" style="display:none;">
                                                <thead>

                                                <th>Product</th>
                                                <th>Quantity</th>
                                                <th>Selling Price</th>
                                                <th>Total</th>
                                                <th>Category</th>
                                                <th>Brand</th>
                                                </thead>
                                                <tbody style="background-color: #FFF59D"></tbody>
                                            </table>
                                        </div>
                                    </div>



                                {{-- <div class="row">
                                    <div class="col-lg-9">
                                        <div class="row">
                                            <div class="col-md-6 mb-2">
                                                <label for="return_date" class="form-label">Return Date</label>
                                                <input class="form-control" type="text" id="return_date" name="return_date"
                                                       value="19-05-2026" />
                                            </div>
                                            <div class="col-md-6 mb-2">
                                                <label for="invoice_no" class="form-label">Invoice No</label>
                                                <input type="text" name="invoice_no" id="invoice_no" class="form-control" required>
                                            </div>
                                            <div class="col-md-7">
                                                <label for="customer_id" class="form-label">Customer</label>
                                                <select name="customer_id" id="customer_id" class="form-select" required>
                                                    <option selected disabled>Select customer</option>
                                                    @foreach($customers as $customer)
                                                        <option value="{{ $customer->id }}">{{ $customer->name }}-{{ $customer->address }}-{{ $customer->phone }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-5">
                                                <div class="mb-2">
                                                    <label for="total_due" class="form-label">Due Amount</label>
                                                    <input type="text" name="previous_due" id="previous_due" class="form-control" readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mb-2">
                                            <label for="cash_payment" class="form-label">If You Pay in Cash</label>
                                            <input type="number" name="cash_payment" id="cash_payment" class="form-control" >
                                        </div>
                                    </div>

                                    <div class="table-responsive">
                                        <table class="table table-bordered mt-3">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Quantity Returned</th>
                                                    <th>Selling Price Per Unit</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="returnDetails">
                                                <tr>
                                                    <td>
                                                        <select name="details[0][product_id]" class="form-select product-select" required>
                                                            @foreach($products as $product)
                                                                <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td><input type="number" name="details[0][qty_returned]" class="form-control qty-returned" required></td>
                                                    <td><input type="number" name="details[0][selling_price]" class="form-control buying-price" required readonly></td>
                                                    <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <button type="submit" class="btn btn-success mt-3">Submit</button>
                                </div> --}}


                            </form>

                            <script>
                                $(document).ready(function() {
                                    // Focus flow for invoice_no -> customer_id
                                    $('#invoice_no').keypress(function(e) {
                                        if (e.which === 13) {
                                            e.preventDefault();
                                            $('#product_id').focus();
                                        }
                                    });

                                    // Focus flow for customer_id -> first product select
                                    $('#customer_id').keypress(function(e) {
                                        if (e.which === 13) {
                                            e.preventDefault();
                                            $('.product-select:first').focus();
                                        }
                                    });

                                    // Focus flow for product select -> qty_returned
                                    $(document).on('keypress', '.product-select', function(e) {
                                        if (e.which === 13) {
                                            e.preventDefault();
                                            $(this).closest('tr').find('.qty-returned').focus();
                                        }
                                    });

                                    // Add new row on Enter in qty_returned and focus new row's product_id
                                    $(document).on('keypress', '.qty-returned', function(e) {
                                        if (e.which === 13) {
                                            e.preventDefault();
                                            addNewRow();
                                            $('#returnDetails tr:last .product-select').focus();
                                        }
                                    });

                                    // Function to add new row
                                    function addNewRow() {
                                        var rowCount = $('#returnDetails tr').length;
                                        var newRow = `
                                            <tr>
                                                <td>
                                                    <select name="details[${rowCount}][product_id]" class="form-select product-select" required>
                                                        @foreach($products as $product)
                                                            <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td><input type="number" name="details[${rowCount}][qty_returned]" class="form-control qty-returned" required></td>
                                                <td><input type="number" name="details[${rowCount}][selling_price]" class="form-control buying-price" required></td>
                                                <td><button type="button" class="btn btn-danger remove-row">Remove</button></td>
                                            </tr>`;
                                        $('#returnDetails').append(newRow);
                                    }

                                    // Remove row functionality
                                    $(document).on('click', '.remove-row', function() {
                                        $(this).closest('tr').remove();
                                    });

                                });
                            </script>

                            <script>
                                $('#product_id').on('change', function () {
                                    var productId = $(this).val();

                                    if (productId) {
                                        $.ajax({
                                            url: '/get-product-store_by_id',
                                            type: 'POST',
                                            data: {
                                                product_id: productId,
                                                _token: $('meta[name="csrf-token"]').attr('content') // Include CSRF token
                                            },
                                            dataType: 'json',
                                            success: function (data) {
                                                if (data.product) {
                                                    $('#qty_returned').val(data.product.product_store);
                                                    $('#selling_price').val(data.product.selling_price);

                                                    var imagePath = data.product.product_image
                                                        ? `${location.origin}/${data.product.product_image}`
                                                        : `${location.origin}/upload/no_image.jpg`;
                                                    document.getElementById('ceo_photo_blah').src = imagePath;
                                                } else {
                                                    $('#qty_returned').val('');
                                                    $('#selling_price').val('');
                                                }

                                                if (data.category_name) {
                                                    $('#category_name').val(data.category_name);
                                                } else {
                                                    $('#category_name').val('');
                                                }

                                                if (data.brand_name) {
                                                    $('#brand_name').val(data.brand_name);
                                                } else {
                                                    $('#brand_name').val('');
                                                }
                                            },
                                            error: function () {
                                                alert('Error retrieving product data.');
                                            }
                                        });
                                    } else {
                                        $('#before_inventory').val('');
                                    }
                                    $('#qty_returned').focus().select();
                                });

                            </script>
                            <script>
                                $('#qty_returned').keypress(function(e) {
                                    if (e.which === 13) { // Check if Enter key (key code 13) is pressed
                                        var date = $("#date").val();
                                        var product_id = $("#product_id").val();
                                        var qty_returned = $("#qty_returned").val();
                                        var selling_price = $("#selling_price").val();
                                        var total = qty_returned * selling_price;
                                        var category_name = $("#category_name").val();
                                        var subcategory_name = $("#subcategory_name").val();
                                        var brand_name = $("#brand_name").val();
                                        var product_name = $("#product_id option:selected").text();

                                        // Log qty_returned value for debugging
                                        console.log('qty_returned:', qty_returned);

                                        // Check if qty_returned is undefined or empty
                                        if (!qty_returned) {
                                            alert('Return Quantity is missing!');
                                            return;
                                        }

                                        // Clear input fields after getting values
                                        $("#qty_returned").val("");
                                        $("#selling_price").val("");
                                        $("#category_name").val("");
                                        $("#brand_name").val("");
                                        $("#before_inventory").val("");

                                        // Display table
                                        $("#myTable").css("display", "");

                                        // Add new row to the table
                                        $('#myTable tbody').prepend(
                                            '<tr class="child">' +
                                            '<td class="td-sm" style="font-size:12px;" data-product-id="' + product_id + '">' + product_name + '</td>' +
                                            '<td class="td-sm" style="font-size:12px;" data-qty-returned="' + qty_returned + '">' + qty_returned + '</td>' +
                                            '<td class="td-sm" style="font-size:12px;">' + selling_price + '</td>' +
                                            '<td class="td-sm" style="font-size:12px;">' + total + '</td>' +
                                            // '<td class="td-sm" style="font-size:12px;">' + buying_price * qty_returned + '</td>' +
                                            '<td class="td-sm" style="font-size:12px;">' + category_name + '</td>' +
                                            '<td class="td-sm" style="font-size:12px;">' + brand_name + '</td>' +
                                            '<td><button class="btn btn-danger btn-sm btnDelete"><span class="glyphicon glyphicon-remove"></span></button></td>' +
                                            '</tr>'
                                        );

                                        // Set focus back to product_id field
                                        $('#product_id').focus().select();

                                        // Prevent default behavior of Enter key
                                        e.preventDefault();
                                    }
                                });


                                    // delete product from table
                                $("#myTable").on('click','.btnDelete',function(e){
                                    e.preventDefault();
                                    if(confirm("Do You want to delete this?")){
                                        $(this).closest('tr').remove();
                                        var rowCount = $('#myTable tbody tr').length;
                                        if(rowCount==0){
                                            $("#myTable").css("display", "none");
                                        }
                                    }
                                });
                            </script>
                            <script>
                                $(document).ready(function() {
                                    // Set focus to #ref_no on page load
                                    $('#customer_id').focus();
                                });
                            </script>

                            <script>

                                function collectWarishData() {
                                    var warishData = [];
                                    $('#myTable tbody tr').each(function() {
                                        var rowData = {
                                            'product_id': $(this).find('td:eq(0)').data('product-id'),
                                            'qty_returned': $(this).find('td:eq(1)').text(),
                                            'selling_price': $(this).find('td:eq(2)').text(),
                                            'total': $(this).find('td:eq(3)').text(),
                                            'category_name': $(this).find('td:eq(4)').text(),
                                            'brand_name': $(this).find('td:eq(5)').text(),
                                        };
                                        warishData.push(rowData);
                                    });
                                    return warishData;
                                }


                                $(document).ready(function() {


                                $('form').on('submit', function(event) {
                                        event.preventDefault(); // Prevent form submission

                                        var warishData = collectWarishData();

                                        // Append the warish data to the form as a hidden input
                                        $('<input>').attr({
                                            type: 'hidden',
                                            name: 'fmember_data',
                                            value: JSON.stringify(warishData)
                                        }).appendTo(this); // Make sure to append to 'this' form

                                        // Submit the form after adding the hidden input
                                        this.submit();
                                    });
                                });
                            </script>

                        <script>
                            $(document).ready(function() {
                                // Trigger the AJAX request when a customer is selected from the dropdown
                                $('#customer_id').on('change', function() {
                                    var customer_id = $(this).val();  // Get the selected customer_id from the dropdown

                                    // Make sure customer_id is not null (in case the user didn't select a valid option)
                                    if (customer_id) {
                                        $.ajax({
                                            url: '{{ route('getCustomerInfoById') }}',  // Route to your server-side handler
                                            type: 'POST',
                                            data: {
                                                customer_id: customer_id,
                                                _token: '{{ csrf_token() }}'  // Include CSRF token for security
                                            },
                                            success: function(response) {
                                                if (response.customerDetails) {
                                                    // Populate the form fields with the customer details from the response
                                                    // $('#customer_id').val(response.customerDetails.id);
                                                    $('#address').val(response.customerDetails.address);
                                                    // $('#email').val(response.customerDetails.email);
                                                    // $('#phone').val(response.customerDetails.phone);
                                                    $('#previous_due').val(response.customerDetails.due);

                                                    var imagePath = response.customerDetails.image
                                                        ? `{{ url('') }}/${response.customerDetails.image}`
                                                        : `{{ url('upload/no_image.jpg') }}`;
                                                    document.getElementById('ceo_photo_blah1').src = imagePath;

                                                    $('#invoice_no').focus().select();
                                                } else {
                                                    alert('No details found for the selected customer.');
                                                }
                                            },
                                            error: function() {
                                                alert('An error occurred while fetching the customer details.');
                                            }
                                        });
                                    } else {
                                        alert('Please select a valid customer.');
                                    }
                                });
                            });
                        </script>
                        </div>
                    </div>
                </div> <!-- end card-->
            </div> <!-- end col -->
        </div> <!-- end row-->
    </div> <!-- container -->
</div> <!-- content -->
@endsection