<div class="d-flex" id="appointment-confirmation">
    <div class="flex-grow-1">
        @if($appointment->status === 'PENDING' && !$appointment->latest_confirmation_request_at && !$appointment->latest_confirmation_decision_at)
            <b class="text-warning-mellow">Not requested yet</b>
            <div>
                @include('app.patient.partials.appointment-request-confirmation', ['label' => 'Request Confirmation'])
            </div>
        @endif
        @if($appointment->latest_confirmation_decision_at)
            @if($appointment->latestConfirmationDecision->decision_enum === 'CONFIRMED')
                <div class="text-nowrap">
                    <b class="text-success">{{ucwords($appointment->latestConfirmationDecision->decision_enum)}}</b>
                    <span class="text-secondary ml-1">on {{friendlier_date_time(convertToTimezone($appointment->latest_confirmation_decision_at, 'US/Eastern'))}}</span>
                </div>
            @elseif($appointment->latestConfirmationDecision->decision_enum === 'CANCELLED')
                <div class="text-nowrap">
                    <b class="text-warning-mellow">{{ucwords($appointment->latestConfirmationDecision->decision_enum)}}</b>
                    <span class="text-secondary ml-1">on {{friendlier_date_time(convertToTimezone($appointment->latest_confirmation_decision_at, 'US/Eastern'))}}</span>
                </div>
                <div>
                    <a href="/patients/view/{{$patient->uid}}/calendar/{{$appointment->uid}}" class="font-weight-bold">
                        Re-schedule
                    </a>
                </div>
            @elseif($appointment->latestConfirmationDecision->decision_enum === 'WAIVED')
                <div class="text-nowrap">
                    <b class="text-warning-mellow">{{ucwords($appointment->latestConfirmationDecision->decision_enum)}}</b>
                    <span class="text-secondary ml-1">on {{friendlier_date_time(convertToTimezone($appointment->latest_confirmation_decision_at, 'US/Eastern'))}}</span>
                </div>
            @endif
            @if($appointment->latestConfirmationDecision && $appointment->latestConfirmationDecision->memo)
                <div class="my-1 border text-sm px-2 py-1 bg-white max-width-300px">
                    <span>Client feedback:</span>
                    <span class="pl-2">{{ $appointment->latestConfirmationDecision->memo }}</span>
                </div>
            @endif
        @endif
        @if($appointment->latest_confirmation_request_at) {{-- requested but not confirmed yet --}}
            <div class="text-nowrap">
                <b class="">Requested</b>
                <span class="text-secondary ml-1">on {{friendlier_date_time(convertToTimezone($appointment->latest_confirmation_request_at, 'US/Eastern'))}}</span>
            </div>
            @if($appointment->is_request_pending)
                <div class="text-sm">
                    <i class="fa fa-exclamation-triangle text-warning-mellow"></i>
                    Request Pending
                </div>
            @endif
            @if($appointment->status !== 'COMPLETED' && $appointment->status !== 'CONFIRMED' && $appointment->status !== 'CANCELLED')
            <div>
              @include('app.patient.partials.appointment-request-confirmation', ['label' => 'Re-request Confirmation'])
            </div>
            @endif
        @endif
    </div>
    @if($appointment->latest_confirmation_request_at || $appointment->latest_confirmation_decision_at)
        <div class="ml-4 px-2 c-pointer position-relative appointment-confirmation-history-trigger on-hover-show"
             data-uid="{{$appointment->uid}}">
            <i class="fa fa-history text-secondary"></i>
            <div class="appointment-confirmation-history on-hover-content">

            </div>
        </div>
    @endif
</div>

<script>
    (function() {
        function init() {
            $('.appointment-confirmation-history-trigger')
                .off('mouseenter.appointment-confirmation-history')
                .on('mouseenter.appointment-confirmation-history', function() {
                    let container = $(this).find('.appointment-confirmation-history')
                        .empty()
                        .append('<span class="text-secondary">Please wait ...</span>');
                    container.load('/appointment-confirmation-history/' + $(this).attr('data-uid'));
                });
        }
        addMCInitializer('appointment-confirmation', init, '#appointment-confirmation');
    }).call(window);
</script>
