@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 = 'Stock Transfer > New Recieved';
                        $page_number = 1;
                    @endphp
                    @include('layouts.table_top')
                </div>
                <div class="col-md-12">
                    <div class="left-card">
                        <div class="row">
                            @if (usertype() == 'admin')
                                <div class="col-md-3 mb-1">
                                    <div class="form-group">
                                        <label for="productTitle" class="mb-2">Location</label>
                                        <select id="company_branch_id" name="company_branch_id"
                                            class="form-control custom-form">
                                            <option value="">Select</option>
                                            @foreach (branches() as $company_branch)
                                                <option value="{{ $company_branch->id }}">
                                                    {{ $company_branch->branch_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @else
                                <input type="hidden" id="company_branch_id" name="company_branch_id"
                                    value="{{ branch_id() }}">
                            @endif

                            <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 custom-form"
                                        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);
                        });
                    },
                });
            });



            $('#company_branch_id').on('change', debounce(getInvoiceNo, 100));
            getInvoiceNo();

            function getInvoiceNo() {
                var branch_id = $("#company_branch_id").val();
                console.log(branch_id);
                if (branch_id) {
                    $.ajax({
                        url: "{{ route('stock_transfer_recieved.getInvoiceDetails') }}",
                        type: 'GET',
                        data: {
                            branch_id: branch_id,
                        },
                        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);
                };
            }

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

            function getRow() {
                var id = $("#invoice_no").val();
                if (id) {
                    $.ajax({
                        url: "{{ route('stock_transfer_recieved.getRow') }}",
                        type: 'GET',
                        data: {
                            id: id,
                        },
                        success: function(data) {
                            $("#items-table").empty().html(data);
                        },
                        error: function(xhr) {
                            console.log(xhr.responseText);
                        }
                    });
                } else {
                    $("#items-table").empty();
                }

            }

        });
    </script>
@endpush