<?php $noteRates = $pro->noteRates(); ?>
<span class="mx-2 text-secondary">|</span>
<div moe wide class="">
    <a class="" href="" show start>Create Bill</a>
    <form url="/api/bill/createForNote">
        <input type="hidden" name="noteUid" value="{{$note->uid}}">
        <div class="mb-2">
            <label for="" class="text-secondary text-sm">Effective Date</label>
            <input type="date" name="effectiveDate" class="form-control form-control-sm" value="{{date('Y-m-d')}}" required>
        </div>
        <div class="mb-2">
            @if($noteRates && count($noteRates))
                @if(count($noteRates) === 1)
                    <input type="hidden" name="code" value="{{$noteRates[0]->code}}">
                    <p class="mb-2">Service: <b>{{ $noteRates[0]->code }} (${{ $noteRates[0]->amount }}/hr)</b></p>
                @else
                    <select autofocus class="form-control" name="code" onchange="switchNumberOfUnitsByType(this)">
                        <option value="">-- Select Code --</option>
                        @foreach($noteRates as $noteRate)
                            <option data-amount="{{ $noteRate->amount }}" value="{{ $noteRate->code }}">{{ $noteRate->code }} (${{ $noteRate->amount }}/hr)</option>
                        @endforeach
                    </select>
                @endif
            @endif
        </div>

        <?php
            $maxMinutes = 120;
            if($note->new_or_fu_or_na === 'NEW') {
                $maxMinutes = 90;
            }
            else if($note->new_or_fu_or_na === 'FU') {
                if($note->method === 'VIDEO') {
                    $maxMinutes = 75;
                }
                else if($note->method === 'AUDIO') {
                    $maxMinutes = 45;
                }
            }
        ?>

        @if($noteRates && count($noteRates) && count($noteRates) === 1)
            @if(strpos(strtolower($noteRates[0]->code), "treatment services") !== FALSE)
                <div class="mb-2">
                    <select name="numberOfUnits" class="form-control form-control-sm"
                            onchange="calculateBillAmount(this)">
                        <option value=""> -- select -- </option>
                        <?php for ($i = 5; $i <= $maxMinutes; $i+=5) { ?>
                        <option value="{{ $i/60 }}" {{ $i === 30 ? 'selected' : '' }}>{{ $i }} minutes</option>
                        <?php } ?>
                    </select>
                </div>
                <div class="mb-2" calculated-amount></div>
            @else
                <input type="hidden" name="numberOfUnits" value="1">
            @endif
        @endif
        <div class="bill-conditional">

        </div>
        <div class="">
            <button class="btn btn-primary btn-sm" submit>Submit</button>
            <button class="btn btn-default border btn-sm" cancel>Cancel</button>
        </div>
    </form>
    <div class="d-none" hourly-template>
        <div class="mb-2">
            <select name="numberOfUnits" class="form-control form-control-sm"
                    onchange="calculateBillAmount(this)">
                <option value=""> -- select -- </option>
                <?php for ($i = 5; $i <= $maxMinutes; $i+=5) { ?>
                    <option value="{{ $i/60 }}" {{ $i === 30 ? 'selected' : '' }}>{{ $i }} minutes</option>
                <?php } ?>
            </select>
        </div>
        <div class="mb-2" calculated-amount></div>
    </div>
    <div class="d-none" non-hourly-template>
        <input type="hidden" name="numberOfUnits" value="1">
    </div>
</div>
<script>
    (function() {
        let selectedCodeHourlyRate = 0;
        @if($noteRates && count($noteRates) && count($noteRates) === 1)
            selectedCodeHourlyRate = {{ $noteRates[0]->amount }};
        @endif
        window.switchNumberOfUnitsByType = function(_trigger) {
            let container = $('.bill-conditional').empty();
            let selected  = $(_trigger).find('option:selected');
            if(!selected.length) return;
            let clone = null;
            selectedCodeHourlyRate = +selected.attr('data-amount');
            $('[calculated-amount]').text('');
            if(selected.text().toLowerCase().indexOf('treatment services') !== -1) {
                clone = $('[hourly-template]').clone()
                    .removeAttr('hourly-template')
                    .removeClass('d-none');
            }
            else {
                clone = $('[non-hourly-template]').clone()
                    .removeAttr('non-hourly-template')
                    .removeClass('d-none');
            }
            clone.appendTo(container)
            clone.focus();
        }
        window.calculateBillAmount = function(_trigger) {
            let amountTarget = $('[calculated-amount]');
            _trigger = $(_trigger);
            if(!_trigger.find('option:selected').length) {
                amountTarget.text('');
                return;
            }
            let hours = +_trigger.find('option:selected').attr('value');
            amountTarget.html('<b>Reimbursable Amount:</b> $' + (hours * selectedCodeHourlyRate).toFixed(2));
        }
    })();

</script>
