@extends('backend.layout.main')
@section('content')
<section class="forms">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h4>{{ __('Add Damage Stock') }}</h4>
                    </div>
                    <div class="card-body">
                        <p class="italic"><small>{{ __('db.The field labels marked with * are required input fields') }}.</small></p>
                        <form action="{{ route('damage-stock.store') }}" method="POST" enctype="multipart/form-data" id="damage-form">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>{{ __('db.Warehouse') }} *</label>
                                                <select required id="warehouse_id" name="warehouse_id"
                                                        class="selectpicker form-control"
                                                        data-live-search="true"
                                                        data-live-search-style="begins"
                                                        title="Select warehouse...">
                                                    @foreach($lims_warehouse_list as $warehouse)
                                                        <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>{{ __('db.date') }} *</label>
                                                <input type="text" name="damaged_at" class="form-control date"
                                                    value="{{ date(config('date_format')) }}" required />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>{{ __('db.Attach Document') }}</label>
                                                <input type="file" name="document" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-12">
                                            <label>{{ __('db.Select Product') }}</label>
                                            <div class="search-box input-group">
                                                <button type="button" class="btn btn-secondary btn-lg">
                                                    <i class="fa fa-barcode"></i>
                                                </button>
                                                <input type="text" name="product_code_name"
                                                    id="lims_productcodeSearch"
                                                    placeholder="{{ __('db.Please type product code and select') }}"
                                                    class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-5">
                                        <div class="col-md-12">
                                            <h5>{{ __('db.Order Table') }} *</h5>
                                            <div class="table-responsive mt-3">
                                                <table id="myTable" class="table table-hover order-list">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ __('db.name') }}</th>
                                                            <th>{{ __('db.Code') }}</th>
                                                            <th>{{ __('db.Unit Cost') }}</th>
                                                            <th>{{ __('db.Quantity') }}</th>
                                                            {{-- action column removed for damage --}}
                                                            <th><i class="dripicons-trash"></i></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                    <tfoot class="tfoot active">
                                                        <th colspan="3">{{ __('db.Total') }}</th>
                                                        <th id="total-qty" colspan="1">0</th>
                                                        <th><i class="dripicons-trash"></i></th>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <input type="hidden" name="total_qty" />
                                                <input type="hidden" name="item" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>{{ __('db.Note') }}</label>
                                                <textarea rows="5" class="form-control" name="note"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <input type="submit" value="{{ __('db.submit') }}"
                                            class="btn btn-primary" id="submit-button">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script type="text/javascript">
    $("ul#product").siblings('a').attr('aria-expanded', 'true');
    $("ul#product").addClass("show");
    $("ul#product #damage-stock-menu").addClass("active");

    var lims_product_array = [];
    var product_code = [];
    var product_name = [];
    var product_qty  = [];
    var unit_cost    = [];

    $('.selectpicker').selectpicker({ style: 'btn-link' });

    $('select[name="warehouse_id"]').on('change', function () {
        var id = $(this).val();
        $.get('getproduct/' + id, function (data) {
            lims_product_array = [];
            product_code = data[0];
            product_name = data[1];
            product_qty  = data[2];
            unit_cost    = data[3];
            $.each(product_code, function (index) {
                lims_product_array.push(
                    product_code[index] + ' (' + product_name[index] + ')' + '|' + unit_cost[index]
                );
            });
        });
    });

    var lims_productcodeSearch = $('#lims_productcodeSearch');

    lims_productcodeSearch.autocomplete({
        source: function (request, response) {
            var matcher = new RegExp(".?" + $.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(lims_product_array, function (item) {
                return matcher.test(item);
            }));
        },
        response: function (event, ui) {
            if (ui.content.length == 1) {
                var data = ui.content[0].value;
                $(this).autocomplete("close");
                productSearch(data);
            }
        },
        select: function (event, ui) {
            var data = ui.item.value;
            productSearch(data);
        }
    });

    $("#myTable").on('input', '.qty', function () {
        rowindex = $(this).closest('tr').index();
        checkQuantity($(this).val(), true);
    });

    $("table.order-list tbody").on("click", ".ibtnDel", function (event) {
        rowindex = $(this).closest('tr').index();
        $(this).closest("tr").remove();
        calculateTotal();
    });

    $(window).keydown(function (e) {
        if (e.which == 13) {
            var $targ = $(e.target);
            if (!$targ.is("textarea") && !$targ.is(":button,:submit")) {
                var focusNext = false;
                $(this).find(":input:visible:not([disabled],[readonly]), a").each(function () {
                    if (this === e.target) {
                        focusNext = true;
                    } else if (focusNext) {
                        $(this).focus();
                        return false;
                    }
                });
                return false;
            }
        }
    });

    $('#damage-form').on('submit', function (e) {
        var rownumber = $('table.order-list tbody tr:last').index();
        if (rownumber < 0) {
            alert("Please insert product to order table!");
            e.preventDefault();
        }
    });

    function productSearch(data) {
        $.ajax({
            type: 'GET',
            url: 'lims_product_search',
            data: { data: data },
            success: function (data) {
                console.log(data);
                var flag = 1;

                $(".product-code").each(function (i) {
                    if ($(this).val() == data[1]) {
                        rowindex = i;
                        var qty = parseFloat($('table.order-list tbody tr:nth-child(' + (rowindex + 1) + ') .qty').val()) + 1;
                        $('table.order-list tbody tr:nth-child(' + (rowindex + 1) + ') .qty').val(qty);
                        checkQuantity(qty);
                        flag = 0;
                    }
                });

                $("input[name='product_code_name']").val('');

                if (flag) {
                    var newRow = $("<tr>");
                    var cols  = '';

                    cols += '<td>' + data[0] + '</td>';
                    cols += '<td>' + data[1] + '</td>';
                    cols += '<td>' + data[4] + '<input type="hidden" name="unit_cost[]" value="' + data[4] + '" /></td>';
                    cols += '<td><input type="number" class="form-control qty" name="qty[]" value="1" required step="any" /></td>';
                    cols += '<td><button type="button" class="ibtnDel btn btn-md btn-danger">{{ __("db.delete") }}</button></td>';

                    cols += '<input type="hidden" class="product-code" name="product_code[]" value="' + data[1] + '"/>';
                    cols += '<input type="hidden" class="product-id" name="product_id[]" value="' + data[2] + '"/>';

                    newRow.append(cols);
                    $("table.order-list tbody").append(newRow);
                    rowindex = newRow.index();
                    calculateTotal();
                }
            }
        });
    }

    function checkQuantity(qty) {
        var row_product_code = $('table.order-list tbody tr:nth-child(' + (rowindex + 1) + ')').find('td:nth-child(2)').text();
        var pos = product_code.indexOf(row_product_code);

        if (qty > parseFloat(product_qty[pos])) {
            alert('Quantity exceeds stock quantity!');
            var row_qty = $('table.order-list tbody tr:nth-child(' + (rowindex + 1) + ')').find('.qty').val();
            row_qty = row_qty.substring(0, row_qty.length - 1);
            $('table.order-list tbody tr:nth-child(' + (rowindex + 1) + ')').find('.qty').val(row_qty);
        } else {
            $('table.order-list tbody tr:nth-child(' + (rowindex + 1) + ')').find('.qty').val(qty);
        }
        calculateTotal();
    }

    function calculateTotal() {
        var total_qty = 0;
        $(".qty").each(function () {
            if ($(this).val() == '') {
                total_qty += 0;
            } else {
                total_qty += parseFloat($(this).val());
            }
        });
        $("#total-qty").text(total_qty);
        $('input[name="total_qty"]').val(total_qty);
        $('input[name="item"]').val($('table.order-list tbody tr:last').index() + 1);
    }
</script>
@endpush