@props(['user'])
<div>
    <table class="table table-bordered mb-4">
        <thead class="bg-dark text-light">
            <tr>
                <th>
                  <span class="fas fa-user"></span>  ACCOUNT DETAILS
                </th>
                <th>
                    @if ($user->application &&  $user->application->submissionstate)
                        <div class="fw-bold text-success"><span class="fas fa-check-circle"></span> Submitted</div>
                        @else
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-outline-secondary float-end" data-bs-toggle="modal" data-bs-target="#editAccountModal" onclick="$.fn.EditData('/editaccount/{{ auth()->user()->userid }}',$('#editAccountContainer'),$('#edituseraccount'));">
                            EDIT
                        </button>
                    @endif
                    
                    
                </th>
            </tr>
        </thead>
        <tr>
            <th>FIRST NAME</th>
            <td class="text-uppercase">{{ $user->fname }}</td>
        </tr>
        <tr>
            <th>MIDDLE NAME</th>
            <td class="text-uppercase">{{ $user->mname }}</td>
        </tr>
        <tr>
            <th>LAST NAME</th>
            <td class="text-uppercase">{{ $user->lname }}</td>
        </tr>
        <tr>
            <th>EMAIL</th>
            <td>{{ $user->email }}</td>
        </tr>
        <tr>
            <th>PHONE</th>
            <td>{{ $user->phone }}</td>
        </tr>
        <tr>
            <th>SUID</th>
            <td>{{ $user->suid }}</td>
        </tr>
        <tr>
            <th>OP-DATE</th>
            <td>{{ $user->created_at }}</td>
        </tr>
        <tr>
            <th>UPDATE</th>
            <td>{{ $user->updated_at }}</td>
        </tr>
    </table>
</div>