<div moe wide class="">
    <a class="" href="" show start><i class="fa fa-edit"></i></a>
    <form url="/api/claimLine/update-claim-line-icds">
        <input type="hidden" name="uid" value="{{$line->uid}}">
        <table class="table table-sm table-condensed" id="claim-line-icds-table-{{$line->uid}}">
            <thead>
                <tr>
                    <td>Code</td>
                    <td>Description</td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
            <?php var_dump($line->icds); ?>
                @if($line->icds && $line->icds->count()))
               
                @foreach($line->icds as $icd)
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-icd" data-index="{{$loop->index}}" id="{{$line->uid}}-cl_icd_{{$loop->index}}" name="claimLineIcdDTOs[{{$loop->index}}].code" value="{{$icd->code}}"></td>
                    <td><input type="text" class="form-control claim-line-description" data-index="{{$loop->index}}" id="{{$line->uid}}-cl_description_{{$loop->index}}" name="claimLineIcdDTOs[{{$loop->index}}].description" value="{{$icd->description}}"></td>
                    <td>
                        <button class="btn btn-sm btn-info cli-btn-remove-row">-</button>
                    </td>
                </tr>
                @endforeach
                @else
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-icd"  data-index="0" id="{{$line->uid}}-cl_icd_0" name="claimLineIcdDTOs[0].code"></td>
                    <td><input type="text" class="form-control claim-line-description" data-index="0" id="{{$line->uid}}-cl_description_0" name="claimLineIcdDTOs[0].description"></td>
                    <td>
                        <button class="btn btn-sm btn-info cli-btn-remove-row">-</button>
                    </td>
                </tr>
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-icd" data-index="1" id="{{$line->uid}}-cl_icd_1" name="claimLineIcdDTOs[1].code"></td>
                    <td><input type="text" class="form-control claim-line-description" data-index="1" id="{{$line->uid}}-cl_description_1" name="claimLineIcdDTOs[1].description"></td>
                    <td>
                        <button class="btn btn-sm btn-info cli-btn-remove-row">-</button>
                    </td>
                </tr>
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-icd" data-index="2" id="{{$line->uid}}-cl_icd_2" name="claimLineIcdDTOs[2].code"></td>
                    <td><input type="text" class="form-control claim-line-description" data-index="2" id="{{$line->uid}}-cl_description_2" name="claimLineIcdDTOs[2].description"></td>
                    <td>
                        <button class="btn btn-sm btn-info cli-btn-remove-row">-</button>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
        <div class="form-group">
            <button class="btn btn-outline-primary btn-sm " id="btn-add-row-{{$line->uid}}">Add row</button>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-sm" submit>Submit</button>
            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
        </div>
    </form>
</div>
<script>
    (function() {
        $("#btn-add-row-{{$line->uid}}").click(function() {
            var rowCount = $('#claim-line-icds-table-{{$line->uid}}').find('tr').length;
            var nextIndex = rowCount -1;
            var clone = $('#claim-line-icds-table-{{$line->uid}} tr.data-row:first').clone();
            clone.find('input').attr('data-index', nextIndex);
            clone.find('input.claim-line-icd').attr('name','claimLineIcdDTOs['+nextIndex+'].code').val('');
            clone.find('input.claim-line-icd').attr('id','cl_icd_'+nextIndex);
            clone.find('input.claim-line-description').attr('name','claimLineIcdDTOs['+nextIndex+'].description').val('');
            clone.find('input.claim-line-description').attr('id','cl_description_'+nextIndex);
            $('#claim-line-icds-table-{{$line->uid}}').append(clone);
            attachAutocompleterToField(nextIndex);

            return false;
        });

        $('#claim-line-icds-table-{{$line->uid}}').on('click', '.cli-btn-remove-row', function() {
            $(this).closest('tr').remove();
            return false;
        });

        $('#claim-line-icds-table-{{$line->uid}} .claim-line-icd').each(function(i,e) {
            var fieldIndex = $(e).attr('data-index');
            attachAutocompleterToField(fieldIndex);
        });

        function attachAutocompleterToField(fieldIndex){
            var e = $('#{{$line->uid}}-cl_icd_'+fieldIndex)[0];
            new Def.Autocompleter.Search('{{$line->uid}}-cl_icd_'+fieldIndex, 'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name', {
                tableFormat: true,
                valueCols: [1],
                colHeaders: ['Code', 'Name']
            });
            Def.Autocompleter.Event.observeListSelections('{{$line->uid}}-cl_icd_'+fieldIndex, function(data) {
                console.log("DATA:", data);
                var descriptionInput = $(e).closest('tr').find('.claim-line-description')[0];
                console.log("Setting value of e to : ", data.item_code);
                $('#{{$line->uid}}-cl_icd_'+fieldIndex).val(data.item_code);
                $('#{{$line->uid}}-cl_description_'+fieldIndex).val(data.final_val);
                $('#{{$line->uid}}-cl_icd_'+fieldIndex).focus();
                return false;
            });
        }

    })();
</script>