<div class="fu-appt-container">

    @if(!is_null($note->is_follow_up_needed))
        <div class="mb-3 d-flex align-items-baseline">
            <div>
                @if($note->is_follow_up_needed === true)
                    @if(!$note->follow_up_appointment_id)
                        {{-- this will/should never happen! --}}
                        Follow up appointment marked as needed but <b>not booked yet!</b>
                    @else
                        Follow up appointment on
                        <b>{{$note->followUpAppointment ? friendly_date($note->followUpAppointment->raw_date) . ' ' . ($note->followUpAppointment->raw_start_time ? friendly_time($note->followUpAppointment->raw_start_time): '') : '-'}}</b>
                        <span class="text-sm">(Status: {{$note->followUpAppointment ? $note->followUpAppointment->status : '-'}})</span>
                        with
                        <b>{{$note->followUpAppointment->pro->displayName()}}</b>
                    @endif
                @else
                    Follow up appointment not needed. Reason: <b>{{$note->follow_up_not_needed_memo}}</b>
                @endif
            </div>
            <a href="#" class="ml-3 update-fu-appt-status"><i class="fa fa-edit"></i></a>
        </div>
    @endif

    <div class="fu-appt-choices {{!is_null($note->is_follow_up_needed) ? 'd-none' : 'd-block'}}">
        <div class="d-flex align-items-center mb-3">
            <p class="font-weight-bold text-secondary my-0 mr-3">Would you like to book a follow-up appointment?</p>
            <label class="d-inline-flex align-items-center mr-3 my-0">
                <input type="radio" name="is_follow_up_needed" value="1">
                <span class="ml-1">Yes</span>
            </label>
            <label class="d-inline-flex align-items-center mr-3 my-0">
                <input type="radio" name="is_follow_up_needed" value="0">
                <span class="ml-1 mr-3">No</span>
            </label>
        </div>

        <div moe class="no-fu-memo-form mb-3 d-none">
            <form show url="/api/note/updateFollowUpStatus">
                <input type="hidden" name="uid" value="{{$note->uid}}">
                <input type="hidden" name="isFollowUpNeeded" value="0">
                <div class="d-flex align-items-start mb-3">
                    <span class="text-nowrap mr-2">Please indicate why follow-up<br>appointment is not needed:</span>
                    <textarea class="form-control form-control-sm width-300px no-fu-memo"
                             rows="2" name="followUpNotNeededMemo" required>{{$note->follow_up_not_needed_memo}}</textarea>
                </div>
                <div class="mb-0">
                    <button class="btn btn-primary btn-sm mr-1" submit>Submit</button>
                    <button class="btn btn-default bg-white border btn-sm mr-1 cancel-fu-appt-form">Cancel</button>
                </div>
            </form>
        </div>
    </div>

</div>
