<div moe wide class="">
    <a class="" href="" show start>Update lines</a>
    <form url="/api/claim/update-claim-lines">
        <input type="hidden" name="uid" value="{{$claim->uid}}">
        <table class="table table-sm table-condensed" id="claim-lines-table-{{$claim->uid}}">
            <thead>
                <tr>
                    <td>CPT</td>
                    <td>Date of Service</td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                @if(count($claim->lines))
                @foreach($claim->lines as $line)
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-cpt" data-index="{{$loop->index}}" id="cpt_{{$loop->index}}" name="claimLineDTOs[{{$loop->index}}].cpt" value="{{$line->cpt}}"></td>
                    <td><input type="date" class="form-control claim-line-date_of_service" data-index="{{$loop->index}}" id="date_of_service_{{$loop->index}}" name="claimLineDTOs[{{$loop->index}}].dateOfService" value="{{$line->date_of_service}}"></td>
                    <td>
                        <button class="btn btn-sm btn-info cl-btn-remove-row">-</button>
                    </td>
                </tr>
                @endforeach
                @else
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-cpt"  data-index="0" id="cpt_0" name="claimLineDTOs[0].cpt"></td>
                    <td><input type="date" class="form-control claim-line-date_of_service" data-index="0" id="date_of_service_0" name="claimLineDTOs[0].date_of_service"></td>
                    <td>
                        <button class="btn btn-sm btn-info cl-btn-remove-row">-</button>
                    </td>
                </tr>
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-cpt" data-index="1" id="cpt_1" name="claimLineDTOs[1].cpt"></td>
                    <td><input type="date" class="form-control claim-line-date_of_service" data-index="1" id="date_of_service_1" name="claimLineDTOs[1].date_of_service"></td>
                    <td>
                        <button class="btn btn-sm btn-info cl-btn-remove-row">-</button>
                    </td>
                </tr>
                <tr class="data-row">
                    <td><input type="text" class="form-control claim-line-cpt" data-index="2" id="cpt_2" name="claimLineDTOs[2].cpt"></td>
                    <td><input type="date" class="form-control claim-line-date_of_service" data-index="2" id="date_of_service_2" name="claimLineDTOs[2].date_of_service"></td>
                    <td>
                        <button class="btn btn-sm btn-info cl-btn-remove-row">-</button>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
        <div class="form-group">
            <button class="btn btn-outline-primary btn-sm" id="cl-btn-add-row-{{$claim->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() {
        $('#cl-btn-add-row-{{$claim->uid}}').click(function() {
            var rowCount = $('#claim-lines-table-{{$claim->uid}}').find('tr').length;
            var nextIndex = rowCount -1;
            var clone = $('#claim-lines-table-{{$claim->uid}} tr.data-row:first').clone();
            clone.find('input').attr('data-index', nextIndex);
            clone.find('input.claim-line-cpt').attr('name','claimLineDTOs['+nextIndex+'].cpt').val('');
            clone.find('input.claim-line-cpt').attr('id','cpt_'+nextIndex);
            clone.find('input.claim-line-date_of_service').attr('name','claimLineDTOs['+nextIndex+'].date_of_service').val('');
            clone.find('input.claim-line-date_of_service').attr('id','date_of_service_'+nextIndex);
            $('#claim-lines-table-{{$claim->uid}}').append(clone);
            return false;
        });

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

    })();
</script>