{{-- <style>
    .hover-item:hover {
        transform: scale(1.1);
        cursor: pointer;
        transition: all 0.5s ease-in-out;
    }
</style>


@if (!empty($req['requested_by']))
    <div class="hover-item" data-toggle="modal" data-target="#view_modal">Requestor - <i
            class="fa fa-check-double text-success"></i></div>

    <div class="modal fade" id="view_modal" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Requestor</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Requested Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $req->requestor_user->name }} {{ $req->requestor_user->middle_name }}
                                {{ $req->requestor_user->last_name }}</td>
                            <td>{{ $req->requested_date }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@else
    <div>Requestor - <i class="fa fa-times-circle text-danger"></i></div>
@endif

@if (!empty($req['issued_by']))
    <div class="hover-item" data-toggle="modal" data-target="#view_modal_approved">Approver - <i
            class="fa fa-check-double text-success"></i></div>

    <div class="modal fade" id="view_modal_approved" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Approver</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Requested Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $req->issuer_user->name }} {{ $req->issuer_user->middle_name }}
                                {{ $req->issuer_user->last_name }}</td>
                            <td>{{ $req->issued_date }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@else
    <div>Approver - <i class="fa fa-times-circle text-danger"></i></div>
@endif

@if (!empty($req['received_by']))
    <div class="hover-item" data-toggle="modal" data-target="#view_modal_received">Receiver - <i
            class="fa fa-check-double text-success"></i></div>
    <div class="modal fade" id="view_modal_received" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Receiver</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Requested Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ $req->receiver_user->name }} {{ $req->receiver_user->middle_name }}
                                {{ $req->receiver_user->last_name }}</td>
                            <td>{{ $req->received_date }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@else
    <div>Receiver - <i class="fa fa-times-circle text-danger"></i></div>
@endif --}}
<div class="d-flex justify-content-center flex-column align-items-start" style="margin-right:0;width:fit-content">
    @if (!empty($req['requested_by']))
        <div class="text-center">{{ $req->requestor_user->name }} {{ $req->requestor_user->middle_name }} {{ $req->requestor_user->last_name }}</div>
    @else
        <div class="text-center"></div>
    @endif
    
    @if (!empty($req['issued_by']))
        <div class="text-center">{{ $req->issuer_user->name }} {{ $req->issuer_user->middle_name }} {{ $req->issuer_user->last_name }}</div>
    @else
        <div class="text-center"></div>
    @endif
    
    @if (!empty($req['received_by']))
        <div class="text-center">{{ $req->receiver_user->name }} {{ $req->receiver_user->middle_name }} {{ $req->receiver_user->last_name }}</div>
    @else
        <div class="text-center"></div>
    @endif
</div>