@extends('layouts.org_dashboard')

@section('content')

<style>

.employee-wrapper{
width:100%;
padding:20px;
}

.employee-box{
background:#fff;
border-radius:22px;
padding:24px;
box-shadow:0 8px 24px rgba(34,197,94,0.08);
border:1px solid #e7f7eb;
}

.employee-title{
font-size:24px;
font-weight:700;
color:#14532d;
margin-bottom:20px;
}

.table-responsive{
overflow-x:auto;
}

.employee-table{
width:100%;
border-collapse:collapse;
min-width:700px;
}

.employee-table thead{
background:#22c55e;
color:#fff;
}

.employee-table th{
padding:14px;
font-size:14px;
font-weight:600;
text-align:left;
}

.employee-table td{
padding:14px;
border-bottom:1px solid #e5e7eb;
font-size:14px;
color:#374151;
}

.employee-table tbody tr:hover{
background:#f0fdf4;
}

.badge-count{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 15px;
background:#dcfce7;
color:#166534;
border-radius:20px;
font-weight:600;
margin-bottom:15px;
}

@media(max-width:768px){

.employee-wrapper{
padding:10px;
}

.employee-box{
padding:15px;
}

.employee-title{
font-size:20px;
}

}

</style>

<div class="employee-wrapper">

<div class="employee-box">

<div class="employee-title">
Employee List
</div>

<div class="badge-count">
Total Employees : {{ $employees->count() }}
</div>

<div class="table-responsive">

<table class="employee-table">

<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone Number</th>
</tr>
</thead>

<tbody>

@forelse($employees as $employee)

<tr>
<td>{{ $loop->iteration }}</td>

<td>
{{ $employee->first_name }}
{{ $employee->last_name }}
</td>

<td>{{ $employee->email }}</td>

<td>{{ $employee->phone_number }}</td>
</tr>

@empty

<tr>
<td colspan="4" class="text-center">
No Employees Found
</td>
</tr>

@endforelse

</tbody>

</table>

</div>

</div>

</div>

@endsection