@extends('app')
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Purchase Inventory Item
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{url('/')}}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Item</a></li>
            <li class="active">Purchase Item</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <!-- SELECT2 EXAMPLE -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">

                </h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-12">
                        <form action="{{route('save.item.purchase')}}" class="form-horizontal" id="myForm"
                              method="post" accept-charset="utf-8">

                            @csrf

                            <div class="box-body">

                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="inputPassword3" class="control-label"> Supplier </label>

                                        {!! Form::select('item_supplier_id', $suppliers, null, ['class'=> 'form-control select2', 'style'=>'width:100%;', 'placeholder'=>'Select Supplier']) !!}

                                    </div>

                                    <div class="col-md-6">
                                        <label for="inputPassword3" class="control-label">Purchase
                                            Date</label>

                                        <input type="text" class="form-control pull-right datepicker"
                                               value="{{now()->format('Y-m-d')}}"
                                               name="date">

                                        <input type="hidden" id="order_date">
                                    </div>

                                </div>

                                <div class="row top10">
                                    <div class="col-md-9">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered table-hover">

                                                <thead>
                                                <tr>
                                                    <th>SL</th>
                                                    <th>Name</th>
                                                    <th>Code</th>
                                                    <th>Quantity</th>
                                                    <th>MRP</th>
                                                    <th>Discount</th>
                                                    <th>Total</th>
                                                    <th>Action</th>
                                                </tr>
                                                </thead>

                                                <tbody id="item_list">

                                                </tbody>

                                            </table>
                                        </div>

                                        <div id="custom-templates">
                                            <input class="form-control typeahead" id="ps" type="text"
                                                   placeholder="Search Item">
                                        </div>

                                    </div>
                                    <div class="col-md-3">
                                        <table class="table table-hover table-bordered">
                                            <tbody>
                                            <tr>
                                                <td><span> Total Item Price</span></td>
                                                <td>
                                                    <div id="total-item-price" class="input-group">
                                                        0
                                                    </div>
                                                    <input type="hidden" name="total_price">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><span> Total Discount</span></td>
                                                <td>
                                                    <div class="input-group">
                                                        <input type="number" value="0" id="total-item-discount"
                                                               onchange="totalNetPayable()"
                                                               name="total_discount"
                                                               class="form-control">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><span> Total Net Payable</span></td>
                                                <td>
                                                    <div id="total-item-net-payable" class="input-group">
                                                        0
                                                    </div>
                                                </td>
                                            </tr>


                                            <tr>
                                                <td colspan="2">
                                                    <div class="input-group pull-right">
                                                        <button type="button"
                                                                class="btn btn-info pull-right btn-submit-action">
                                                            Add
                                                            Purchase
                                                        </button>
                                                        &nbsp
                                                    </div>
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>


                        </form>

                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection

@section('extra-css')
    {{Html::style('vendor/takielias/posui/css/posui.css')}}
@stop
@section('extra-js')
    {{ Html::script('vendor/takielias/posui/plugins/typeahead.js/typeahead.bundle.min.js') }}
@endsection

@section('script')

    <script type="text/javascript">
        $(document).ready(function () {
            $('.btn-submit-action').on('click', function () {
                $("#myForm").submit();
            });

            var searchEngine = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '{{route('search.item','q=%QUERY%')}}',
                    wildcard: '%QUERY%',
                    prepare: function (query, settings) {
                        settings.url = settings.url.replace('%QUERY%', query);
                        // settings.url = settings.url.replace('%ui%', $('#dealer_id').val());
                        // settings.url = settings.url.replace('%date%', $('#order_date').val());
                        // settings.url = settings.url.replace('%sp%', $('select[name="sales_point_id"]').val());
                        return settings;
                    }
                }
            });
            searchEngine.initialize();
            $('#ps').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            }, {
                name: 'q',
                source: searchEngine,
                display: function (data) {
                    return data.item_name
                },
                templates: {
                    empty: [
                        '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing Found.</div></div>'
                    ],
                    header: [
                        '<div class="list-group search-results-dropdown">'
                    ],
                    footer: [
                        '</div>'
                    ],
                    suggestion: function (data) {
                        return `
        <div class="ProfileCard u-cf Typeahead-suggestion Typeahead-selectable">
    <div class="ProfileCard-details">
        <div class="ProfileCard-realName">` + data.item_name + `</div>
    </div>
    <div class="ProfileCard-stats">
        <div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Item Code : </span><b class="item_code">` + data.item_code + `</b>
        </div>
        <div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Price : </span><b class="item_price">` + data.item_price + `</b>
        </div>
        <div class="ProfileCard-stat"><span class="ProfileCard-stat-label">Unit Size : </span><b
                    class="item_quantity">` + data.item_quantity + `</b>
        </div>
    </div>
</div><li>
        `;
                    }
                }
            }).on('typeahead:selected', function (obj, itemData) {
                $.ajax({
                    url: "{{route('get.single.item')}}",
                    method: "GET",
                    data: {
                        "id": itemData.item_id,
                    },
                    success: function (data) {
                        if ($("#tr-" + itemData.item_id).length) {
                            $("#item-quantity-" + itemData.item_id).val(parseInt($("#item-quantity-" + itemData.item_id).val()) + 1);
                        } else {
                            $("#item_list").append(data);
                        }
                        $('.typeahead').typeahead('val', '');
                        totalCount(parseInt(itemData.item_id));
                    },
                    error: function (error) {
                        alert('Something Wrong')
                    }
                });
            });

            $('#itemDatatable')
                .addClass('nowrap')
                .dataTable({
                    columnDefs: [
                        {targets: [-1, -3], className: 'dt-body-right'}
                    ]
                });
        });

        function totalCount(obj) {

            if (obj === 'undefined') {
                alert('Something Went Wrong !!!');
                return;
            } else {

                if (!isNaN(obj)) {
                    var indx = obj;
                } else {
                    var indx = parseInt(obj.id.split("-")[2]);
                }

                if (parseInt($('#item-quantity-' + indx).val()) <= 0) {
                    alert('Please enter correct Product Quantity');
                    $('#item-quantity-' + indx).val(1);
                    return
                }

                if (parseInt($('#item-discount-' + indx).val()) < 0) {
                    alert('Please enter correct Discount');
                    $('#item-discount-' + indx).val(0);
                    return
                }

                var priceElement = $('input[name*="item_mrp"]');
                var quantityElement = $('input[name*="item_quantity"]');
                var totalDiscountElement = $('input[name*="item_discount"]');

                var total = 0;
                var totalQuantity = 0;
                var totalDiscount = 0;
                for (i = 0; i < priceElement.length; i++) {
                    $('#sr-' + parseInt($(priceElement[i]).attr('id').split("-")[2])).html(i + 1);
                    total = parseFloat(total) + parseFloat($(priceElement[i]).val() * $(quantityElement[i]).val());
                    totalQuantity = parseFloat(totalQuantity) + parseFloat($(quantityElement[i]).val());
                    totalDiscount = parseFloat(totalDiscount) + parseFloat($(totalDiscountElement[i]).val());
                }
                $('#item-total-' + indx).text($('#item-quantity-' + indx).val() * ($('#item-mrp-' + indx).val() - $('#item-discount-' + indx).val()));
                $("#total-item-price").html(parseFloat(total).toFixed(2));
                $('input[name="total_price"]').val(parseFloat(total).toFixed(2))
                $("#total-item-discount").val(parseFloat(totalDiscount).toFixed(2));
                // $("#total-item-net-payable").html(parseFloat(total - parseFloat($("#total-item-discount").val())).toFixed(2));
                totalNetPayable();
            }
        }

        function totalNetPayable() {
            var totalPrice = parseFloat($('#total-item-price').text());
            var totalDiscount = parseFloat($('#total-item-discount').val());
            $("#total-item-net-payable").html(totalPrice - totalDiscount)
        }

    </script>

@endsection