<div class="d-flex">
    <div class="flex-grow-1">
        @if($appointment->status === 'CREATED' && !$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->status === 'CONFIRMED')
                <div class="text-nowrap">
                    <b class="text-success">{{ucwords($appointment->status)}}</b>
                    <span class="text-secondary ml-1">on {{friendly_date_time($appointment->latest_confirmation_decision_at)}}</span>
                </div>
                <div>
                    @include('app.patient.partials.appointment-request-confirmation', ['label' => 'Re-request Confirmation'])
                </div>
            @elseif($appointment->status === 'REJECTED')
                <div class="text-nowrap">
                    <b class="text-warning-mellow">{{ucwords($appointment->status)}}</b>
                    <span class="text-secondary ml-1">on {{friendly_date_time($appointment->latest_confirmation_decision_at)}}</span>
                </div>
                <div>
                    <a href="/patients/view/{{$patient->uid}}/calendar/{{$appointment->uid}}" class="font-weight-bold">
                        Re-schedule
                    </a>
                </div>
            @endif
        @elseif($appointment->latest_confirmation_request_at) {{-- requested but not confirmed yet --}}
            <div class="text-nowrap">
                <b class="text-primary">Requested</b>
                <span class="text-secondary ml-1">on {{friendly_date_time($appointment->latest_confirmation_request_at)}}</span>
            </div>
            <div>
                @include('app.patient.partials.appointment-request-confirmation', ['label' => 'Re-request Confirmation'])
            </div>
        @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"
             data-uid="{{$appointment->uid}}">
            <i class="fa fa-history text-secondary"></i>
            <div class="appointment-confirmation-history">

            </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);
    }).call(window);
</script>
