@extends('layouts.app')

@section('title','Users')

@section('content')

<style>

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.page-header h2{
    color:#1f2937;
}

.add-btn{
    background:#2563eb;
    color:#fff;
    padding:12px 20px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}

.add-btn:hover{
    background:#1d4ed8;
}

.search-box{
    margin-bottom:20px;
}

.search-box input{
    width:350px;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
}

.card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    overflow:hidden;
}

table{
    width:100%;
    border-collapse:collapse;
}

thead{
    background:#1f2937;
    color:#fff;
}

th,td{
    padding:16px;
    text-align:left;
}

tbody tr{
    border-bottom:1px solid #eee;
}

tbody tr:hover{
    background:#f9fafb;
}

.badge{
    padding:6px 12px;
    border-radius:30px;
    color:#fff;
    font-size:13px;
}

.super{
    background:#dc2626;
}

.director{
    background:#2563eb;
}

.manager{
    background:#16a34a;
}

.head{
    background:#7c3aed;
}

.active{
    color:#16a34a;
    font-weight:bold;
}

.inactive{
    color:#dc2626;
    font-weight:bold;
}

.edit-btn{
    background:#f59e0b;
    color:#fff;
    padding:8px 15px;
    border-radius:6px;
    text-decoration:none;
}

.edit-btn:hover{
    background:#d97706;
}

.success{
    background:#dcfce7;
    color:#166534;
    padding:15px;
    border-radius:8px;
    margin-bottom:20px;
}

.pagination{
    padding:20px;
}

</style>

@if(session('success'))

<div class="success">
    {{ session('success') }}
</div>

@endif

<div class="page-header">

    <h2>Users Management</h2>

    <a href="/users/create" class="add-btn">
        + Add New User
    </a>

</div>

<div class="search-box">

    <input
        type="text"
        placeholder="Search user..."
    >

</div>

<div class="card">

<table>

<thead>

<tr>

<th>Serial No</th>

<th>Name</th>

<th>Email</th>

<th>Role</th>

<th>Status</th>

<th>Action</th>

</tr>

</thead>

<tbody>

@forelse($users as $user)

<tr>

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

<td>{{ $user->name }}</td>

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

<td>

@if($user->role=='Super Admin')

<span class="badge super">
{{ $user->role }}
</span>

@elseif($user->role=='Director')

<span class="badge director">
{{ $user->role }}
</span>

@elseif($user->role=='Manager')

<span class="badge manager">
{{ $user->role }}
</span>

@else

<span class="badge head">
{{ $user->role }}
</span>

@endif

</td>

<td>

@if($user->is_active)

<span class="active">
Active
</span>

@else

<span class="inactive">
Inactive
</span>

@endif

</td>

<td>

<a
href="/users/{{ $user->id }}/edit"
class="edit-btn">

Edit

</a>

</td>

</tr>

@empty

<tr>

<td colspan="6" align="center">

No Users Found

</td>

</tr>

@endforelse

</tbody>

</table>

<div class="pagination">

{{ $users->links() }}

</div>

</div>

@endsection