@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 Purchase Returns</a></li>
                        </ol>
                    </div>
                    <h4 class="page-title">Purchase 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('purchase.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="supplier_id" class="form-label">Supplier</label>
                                                        <select name="supplier_id" id="supplier_id" class="form-select" required>
                                                            <option selected disabled>Select Supplier</option>
                                                            @foreach($suppliers as $supplier)
                                                                <option value="{{ $supplier->id }}">{{ $supplier->name }}-{{ $supplier->address }}-{{ $supplier->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">BuyingPrice</label>
                                                                                <input type="number" name="buying_price" id="buying_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="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>Buying Price</th>
                                                <th>Total</th>
                                                <th>Category</th>
                                                <th>Brand</th>
                                                </thead>
                                                <tbody style="background-color: #FFF59D"></tbody>
                                            </table>
                                        </div>
                                    </div>
                            </form>


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

                                    // Make sure supplier_id is not null (in case the user didn't select a valid option)
                                    if (supplier_id) {
                                        $.ajax({
                                            url: '{{ route('getSupplierInfoById') }}',  // Route to your server-side handler
                                            type: 'POST',
                                            data: {
                                                supplier_id: supplier_id,
                                                _token: '{{ csrf_token() }}'  // Include CSRF token for security
                                            },
                                            success: function(response) {
                                                if (response.supplierDetails) {

                                                    $('#previous_due').val(response.supplierDetails.due);
                                                    $('#address').val(response.supplierDetails.address);
                                                    $('#email').val(response.supplierDetails.email);
                                                    $('#phone').val(response.supplierDetails.phone);
                                                    var imagePath = response.supplierDetails.image
                                                        ? `{{ url('') }}/${response.supplierDetails.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 supplier.');
                                                }
                                            },
                                            error: function() {
                                                alert('An error occurred while fetching the supplier details.');
                                            }
                                        });
                                    } else {
                                        alert('Please select a valid supplier.');
                                    }
                                });

                            });
                        </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 before_inventory = $("#before_inventory").val();
                                    var buying_price = $("#buying_price").val();
                                    var total = qty_returned * buying_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
                                    $("#after_inventory").val("");
                                    $("#subcategory_name").val("");
                                    $("#cr_amount").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;">' + buying_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>
                            $('#invoice_no').keypress(function(e) {
                                if (e.which === 13) { // Check if Enter key (key code 13) is pressed

                                    $('#product_id').focus().select();

                                    // Prevent default behavior of Enter key (like form submission)
                                    e.preventDefault();
                                }
                            });
                        </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(),
                                        'buying_price': $(this).find('td:eq(2)').text(),
                                        // 'total': $(this).find('td:eq(3)').text(),
                                        'category_name': $(this).find('td:eq(3)').text(),
                                        'brand_name': $(this).find('td:eq(4)').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() {
                                // Set focus to #ref_no on page load
                                $('#supplier_id').focus().select();
                            });
                        </script>
                        </div>
                    </div>
                </div> <!-- end card-->
            </div> <!-- end col -->
        </div> <!-- end row-->
    </div> <!-- container -->
</div> <!-- content -->
@endsection