<script>
    window.noteReasons = [];
    @if(count($note->reasons))
        @foreach($note->reasons as $reason)
        window.noteReasons.push({
            code: '{{$reason->code}}',
            description: '{{$reason->description}}'
        });
        @endforeach
    @endif
</script>
<div moe wide class="">
    <a class="" href="" show start><i class="fa fa-edit"></i></a>
    <form url="/api/note/update-note-reasons">
        <input type="hidden" name="uid" value="{{$note->uid}}">
        <table class="table table-sm table-condensed" id="note-reasons-table">
            <thead>
                <tr>
                    <td>Code</td>
                    <td>Description</td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                @if(count($note->reasons))
                @foreach($note->reasons as $reason)
                <tr class="data-row">
                    <td><input type="text" class="form-control note-reason-icd" data-index="{{$loop->index}}" id="icd_{{$loop->index}}" name="noteReasonDTOs[{{$loop->index}}].code" value="{{$reason->code}}"></td>
                    <td><input type="text" class="form-control note-reason-description" data-index="{{$loop->index}}" id="description_{{$loop->index}}" name="noteReasonDTOs[{{$loop->index}}].description" value="{{$reason->description}}"></td>
                    <td>
                        <button class="btn btn-sm btn-info btn-remove-row">-</button>
                    </td>
                </tr>
                @endforeach
                @else
                <tr class="data-row">
                    <td><input type="text" class="form-control note-reason-icd"  data-index="0" id="icd_0" name="noteReasonDTOs[0].code"></td>
                    <td><input type="text" class="form-control note-reason-description" data-index="0" id="description_0" name="noteReasonDTOs[0].description"></td>
                    <td>
                        <button class="btn btn-sm btn-info btn-remove-row">-</button>
                    </td>
                </tr>
                <tr class="data-row">
                    <td><input type="text" class="form-control note-reason-icd" data-index="1" id="icd_1" name="noteReasonDTOs[1].code"></td>
                    <td><input type="text" class="form-control note-reason-description" data-index="1" id="description_1" name="noteReasonDTOs[1].description"></td>
                    <td>
                        <button class="btn btn-sm btn-info btn-remove-row">-</button>
                    </td>
                </tr>
                <tr class="data-row">
                    <td><input type="text" class="form-control note-reason-icd" data-index="2" id="icd_2" name="noteReasonDTOs[2].code"></td>
                    <td><input type="text" class="form-control note-reason-description" data-index="2" id="description_2" name="noteReasonDTOs[2].description"></td>
                    <td>
                        <button class="btn btn-sm btn-info btn-remove-row">-</button>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
        <div class="form-group">
            <button class="btn btn-outline-primary btn-sm btn-add-row">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").click(function() {
            var rowCount = $('#note-reasons-table').find('tr').length;
            var nextIndex = rowCount -1;
            var clone = $('#note-reasons-table tr.data-row:first').clone();
            clone.find('input').attr('data-index', nextIndex);
            clone.find('input.note-reason-icd').attr('name','noteReasonDTOs['+nextIndex+'].code').val('');
            clone.find('input.note-reason-icd').attr('id','icd_'+nextIndex);
            clone.find('input.note-reason-description').attr('name','noteReasonDTOs['+nextIndex+'].description').val('');
            clone.find('input.note-reason-description').attr('id','description_'+nextIndex);
            $('#note-reasons-table').append(clone);
            attachAutocompleterToField(nextIndex);

            return false;
        });

        $('#note-reasons-table').on('click', '.btn-remove-row', function() {
            $(this).closest('tr').remove();
            return false;
        });

        $('#note-reasons-table .note-reason-icd').each(function(i,e) {
            var fieldIndex = $(e).attr('data-index');
            attachAutocompleterToField(fieldIndex);
        });

        function attachAutocompleterToField(fieldIndex){
            var e = $('#icd_'+fieldIndex)[0];
            new Def.Autocompleter.Search('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('icd_'+fieldIndex, function(data) {
                console.log("DATA:", data);
                var descriptionInput = $(e).closest('tr').find('.note-reason-description')[0];
                console.log("Setting value of e to : ", data.item_code);
                $('#icd_'+fieldIndex).val(data.item_code);
                $('#description_'+fieldIndex).val(data.final_val);
                $('#icd_'+fieldIndex).focus();
                return false;
            });
        }

    })();
</script>
