@extends('agent.layouts.layout')
@section('content')

    <div class="pxp-dashboard-content-details">
            

         <div class="row justify-content-between align-content-center mb-2">
            <div class="col-md-6">
                <h1>Student</h1>
                <p class="pxp-text-light">Detailed list of your Manage Student.</p>                        
            </div>
            <div class="col-md-6 mt-3" style="text-align: right;">
               <a href="{{ route('agent.student.add') }}" class="btn btn-block btn-primary">Invite Student</a>
            </div>
        </div>
               

        <div class="row mt-2">
            <div class="col-md-12">

               

                <div class="mt-4 mt-lg-5">

                    <div class="table-responsive">
                        <table id="example1" class="table table-hover align-middle">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Country</th>
                                    <th>Address</th>
                                    <th>Staff</th>
                                    <th>Created at</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($agents ?? [] as $key => $agent)
                                    <tr class="tableRowItem odd">
                                        <td>
                                            <div class="tableContent">{{ $key + 1 }}</div>
                                        </td>
                                        <td>
                                            <div class="tableContent">{{ $agent->first_name }} {{ $agent->middle_name }} {{ $agent->last_name }}</div>
                                        </td>
                                        <td>
                                            <div class="tableContent">{{ $agent->email }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="tableContent">{{ $agent->countries_name }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="tableContent">{{ $agent->address }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="tableContent">
                                                {{ !empty($agent->staff_name) ? $agent->staff_name : 'N/A' }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="tableContent">
                                                {{ date('M d, Y', strtotime($agent->created_at)) }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="pxp-dashboard-table-options">
                                                <ul class="list-unstyled">                
                                                   <li><a href="{{ route('agent.student.edit', ['id'=> $agent->id]) }}" title="Edit"><span class="fa fa-edit"></span></a></li>
                                                   <li><a onclick="return confirm('Are you sure you want to delete this Agents?');" href="{{ route('agent.student.delete',['id'=> $agent->id]) }}"  title="Delete"><span class="fa fa-trash"></span></a></li>
                                                </ul>
                                            </div>
                                        </td>

                                    </tr>

                                @empty
                                    No staff are available
                                @endforelse

                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection