@extends('app')
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Assign 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">Assign 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('update.assigned.item', $diagnosticTest->diagnostic_test_id)}}" 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"> Test Name </label>
                                        <span>{{$diagnosticTest->diagnostic_test_name}}</span>
                                        <input type="hidden" name="diagnostic_test_id[]"
                                               value="{{$diagnosticTest->diagnostic_test_id}}">

                                    </div>

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

                                        <input type="text" class="form-control pull-right datepicker"
                                               value="{{now()->format('Y-m-d')}}"
                                               name="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>MRP</th>
                                                    <th>Ratio</th>
                                                    <th>Action</th>
                                                </tr>
                                                </thead>

                                                <tbody id="item_list">
                                                @foreach($diagnosticTest->itemDetails as $item)
                                                    <tr id="tr-{{$item->id}}">
                                                        <td id="sr-{{$item->id}}"></td>
                                                        <td>
                                                            {{$item->item->name }}
                                                            <div class="help-block with-errors"></div>
                                                            <input type="hidden" name="item_id[]" value="{{$item->item->id}}">
                                                        </td>
                                                        <td>
                                                            {{$item->item->code}}
                                                        </td>

                                                        <td>
                                                            <div class="input-group col-md-12">
                                                                <span>{{$item->item->price}}</span>
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <div class="input-group col-md-12">
                                                                <input type="number" id="item-ratio-{{$item->id}}"
                                                                       name="item_ratio[]"
                                                                       value="{{$item->ratio}}"
                                                                       class="form-control">
                                                            </div>
                                                        </td>

                                                        <td>
                                                            <a href="javascript:;"
                                                               class="btn btn-danger btn-remove-row">
                                                                <i class="fa fa-trash" title="Delete"></i>
                                                            </a>
                                                        </td>
                                                    </tr>

                                                @endforeach
                                                </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 colspan="2">
                                                    <div class="input-group pull-right">
                                                        <button type="button"
                                                                class="btn btn-info pull-right btn-submit-action">
                                                            Update
                                                        </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);
                        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.assigning.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', '');
                    },
                    error: function (error) {
                        alert('Something Wrong')
                    }
                });
            });

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

@endsection