@extends('layouts.app')
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'Warranty Claim > New Claim';
                        $page_number = 1;
                    @endphp
                    @include('layouts.table_top')
                </div>
                <div class="col-md-12">
                    <div class="left-card">
                        <div class="row">

                            <div class="col-md-4 mb-1">
                                <div class="form-group">
                                    <label for="productTitle" class="mb-2">Product</label>
                                    <div class="form-group">
                                        <input type="text" class="form-control custom-form" id="product_search"
                                            placeholder="Type product name or code">
                                        <div id="product_suggestions" class="dropdown-menu" style="display: none;"> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2 mb-1">
                                <div class="form-group">
                                    <label for="productTitle" class="mb-2">Customer</label>
                                    <input type="search" name="name" id="customer_id" class="form-control custom-form"
                                        style="border:none !important;">
                                    <div id="customer_suggestions" class="dropdown-menu" style="display: none;"></div>
                                </div>
                            </div>

                            <div class="col-md-2 mb-1">
                                <div class="form-group">
                                    <label for="productTitle" class="mb-2">Start Date</label>
                                    <input type="date" class="form-control custom-form" placeholder="Start Date"
                                        id="start_date">
                                </div>
                            </div>

                            <div class="col-md-2 mb-1">
                                <div class="form-group">
                                    <label for="productTitle" class="mb-2">End Date</label>
                                    <input type="date" class="form-control custom-form" placeholder="Start Date"
                                        id="end_date">
                                </div>
                            </div>

                            <div class="col-md-2 mb-1">
                                <div class="form-group">
                                    <label for="productTitle" class="mb-2">Invoice No</label>
                                    <select id="invoice_no" class="form-select form-control selectpicker"
                                        aria-label="Default select example" data-live-search="true">
                                        <option value="">Select Invoice</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="table-fixed-head table-responsive" id="items-table"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {


            $(document).on("submit", "form#ajax_form_data_sale", function(e) {
                e.preventDefault();
                $('#loading-indicator').show();
                $("span.textdanger").text("");
                var url = $(this).attr("action");
                var method = $(this).attr("method");
                var formData = new FormData($(this)[0]);
                $.ajax({
                    type: method,
                    url: url,
                    data: formData,
                    async: false,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        $('#loading-indicator').hide();
                        if (res.status == true) {
                            toastr.success(res.msg);
                            if (res.id) {
                                var id = res.id;
                                url = "{{ url('claim-warranty/print-claim') }}" + '/' +
                                    id,
                                    window.open(url, '_blank');
                                url = "{{ url('/claim-warranty') }}";
                                window.location = url;
                            }
                        } else if (res.status == false) {
                            toastr.error(res.msg);
                        }
                    },
                    error: function(response) {
                        $('#loading-indicator').hide();
                        $.each(response.responseJSON.errors, function(field_name, error) {
                            $(document)
                                .find("[name=" + field_name + "]")
                                .after('<span style="color:red">' + error + "</span>");
                            toastr.error(error);
                        });
                    },
                });
            });

            $("#client_name").focus();
            $("#client_name").on("keyup", function() {
                $("#customer_id").val("");
                $("#address").val("");
                $("#mobile").val("");
            });

            $("#client_name").on("input", function() {
                const query = $(this).val();
                var branch_id = $("#company_branch_id").val();
                if (query.length >= 2) {
                    $.ajax({
                        url: "{{ route('customer.search') }}", // Route to fetch products
                        type: 'GET',
                        data: {
                            query: query,
                            branch_id: branch_id
                        },
                        success: function(data) {
                            let suggestions = '';
                            data.forEach(customer => {
                                suggestions +=
                                    `<a href="#" class="dropdown-item" 
                                    data-id="${customer.id}" 
                                    data-code="${customer.customer_code}" 
                                    data-name="${customer.nmae}"
                                    data-company="${customer.company}" 
                                    data-mobile="${customer.mobile}"
                                    data-address="${customer.address}"
                                    >${customer.company} - ${customer.mobile}</a>`;
                            });
                            $("#customer_suggestions").html(suggestions).show();
                        }
                    });
                } else {
                    $("#product_suggestions").hide();
                    $("#customer_id").val("");
                    $("#address").val("");
                    $("#mobile").val("");

                }
            });

            // Handle selection of a product
            $("#customer_suggestions").on("click", ".dropdown-item", function(e) {
                e.preventDefault();
                const customer_name = $(this).data("company");
                const customer_mobile = $(this).data("mobile");

                $("#client_name").val(customer_name); // Set product name in search box
                $("#customer_id").val(customer_id);
                $("#address").val(customer_address);
                $("#mobile").val(customer_mobile);
                $("#customer_suggestions").hide();
            });

            let selectedProductId = null; // Store the selected product ID
            $("#product_search").focus();
            $("#product_search").on("input", function() {
                let inputWidth = $(this).outerWidth();
                $('#product_suggestions').css('width', inputWidth);
                const query = $(this).val();
                var branch_id = $("#company_branch_id").val();
                if (query.length >= 2) {
                    $.ajax({
                        url: "{{ route('product.search') }}", // Route to fetch products
                        type: 'GET',
                        data: {
                            query: query,
                            branch_id: branch_id
                        },
                        success: function(data) {
                            let suggestions = '';
                            data.forEach(product => {
                                suggestions +=
                                    `<a href="#" class="dropdown-item" 
                                    data-id="${product.id}" 
                                    data-name="${product.name}">${product.name} - ${product.product_code}</a>`;
                            });
                            $("#product_suggestions").html(suggestions).show();
                        }
                    });
                } else {
                    $("#product_suggestions").hide();
                }
            });


            // Handle selection of a product
            $("#product_suggestions").on("click", ".dropdown-item", function(e) {
                e.preventDefault();
                selectedProductId = $(this).data("id"); // Store selected product ID
                const productName = $(this).data("name");
                const price = $(this).data("price");
                $("#product_search").val(productName); // Set product name in search box
                $("#product_suggestions").hide();
            });

            // Handle Enter key press on qty input
            $("#product_search").keypress(function(e) {
                if (e.which === 13) { // Enter key
                    e.preventDefault(); // Prevent form submission
                    // $("#qty").focus(); // Focus on qty input
                    const qty = 1;
                    if (selectedProductId && qty) {
                        addProductRow(selectedProductId, qty);
                        $(this).val(''); // Clear qty input
                        $("#product_search").val('').focus(); // Clear and refocus product search
                        $("#qty").val(''); // Clear and refocus product search
                        selectedProductId = null; // Reset selected product ID for next entry
                    } else {
                        toastr.error("Please select a product and enter a quantity.");
                    }
                }
            });


            $('#product_search').on('change', debounce(getInvoiceNo, 100));
            $('#customer_id').on('change', debounce(getInvoiceNo, 100));
            $('#start_date, #end_date').on('change', getInvoiceNo);

            function getInvoiceNo() {
                var product_id = selectedProductId; // আপনি যেভাবে খুঁজে পাচ্ছেন
                var customer_id = $("#customer_id").val();
                var start_date = $("#start_date").val();
                var end_date = $("#end_date").val();
                if (product_id) {
                    $.ajax({
                        url: "{{ route('warranty_claim.getInvoiceDetails') }}",
                        type: 'GET',
                        data: {
                            product_id: product_id,
                            customer_id: customer_id,
                            start_date: start_date,
                            end_date: end_date
                        },
                        success: function(data) {
                            $("#invoice_no").empty().html(data);
                            $('#invoice_no').selectpicker('refresh');
                        },
                        error: function(xhr) {
                            console.log(xhr.responseText);
                        }
                    });
                } else {
                    $("#invoice_no").empty();
                    $('#invoice_no').selectpicker('refresh');
                }
            }

            // Debounce function to prevent too many AJAX calls while typing
            function debounce(func, delay) {
                let timer;
                return function() {
                    clearTimeout(timer);
                    timer = setTimeout(func, delay);
                };
            }


            function getClaimRow() {
                var product_id = selectedProductId; // আপনি যেভাবে খুঁজে পাচ্ছেন
                var sale_id = $("#invoice_no").val();
                if (product_id && sale_id) {
                    $.ajax({
                        url: "{{ route('warranty_claim.getClaimRow') }}",
                        type: 'GET',
                        data: {
                            product_id: product_id,
                            sale_id: sale_id,
                        },
                        success: function(data) {
                            $("#items-table").empty().html(data);
                        },
                        error: function(xhr) {
                            console.log(xhr.responseText);
                        }
                    });
                } else {
                    $("#items-table").empty();
                }

            }
            $('#invoice_no').on('change', debounce(getClaimRow, 300));


        });
    </script>
@endpush