@extends('dashboard.main')

@section('main-content')

<div class="card shadow border-0" style="width:100%;">
    <div class="card-header d-flex justify-content-between align-items-center"
        style="background:linear-gradient(135deg,#1F3044,#2E4864);padding:20px 25px;">

        <h4 class="mb-0 text-white">
            <i class="fas fa-users me-2"></i>
            Users Management
        </h4>

        <span class="badge bg-light text-dark px-3 py-2 rounded-pill fs-6">
            Total : {{ $users->count() }}
        </span>

    </div>

    <div class="card-body p-0">

        @if(session('success'))

            <div class="alert alert-success m-3">

                {{ session('success') }}

            </div>

        @endif

        <div class="table-responsive">

            <table class="table align-middle mb-0">

                <thead style="background:#F5F7FA;">

                    <tr>

                        <th class="py-3 text-center">ID</th>

                        <th class="py-3 text-center">Profile</th>

                        <th class="py-3">Name</th>

                        <th class="py-3">Email</th>

                        <th class="py-3 text-center">Phone</th>

                        <th class="py-3 text-center">Status</th>

                        <th class="py-3 text-center">Created At</th>

                        <th class="py-3 text-center" width="180">

                            Actions

                        </th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($users as $user)

                        <tr style="transition:.3s;">

                            <td class="text-center fw-bold">

                                {{ $user->id }}

                            </td>

                            <td class="text-center">

                                @if($user->profile_image)

                                    <img src="{{ asset('uploads/profile/'.$user->profile_image) }}"
                                        width="65"
                                        height="65"
                                        class="rounded-circle shadow-sm"
                                        style="object-fit:cover;border:3px solid #e9edf3;">

                                @else

                                    <img src="{{ asset('assets/images/default-user.png') }}"
                                        width="65"
                                        height="65"
                                        class="rounded-circle shadow-sm"
                                        style="border:3px solid #e9edf3;">

                                @endif

                            </td>

                            <td>

                                <strong style="color:#1F3044;font-size:16px;">

                                    {{ $user->name }}

                                </strong>

                            </td>

                            <td style="color:#6c757d;">

                                {{ $user->email }}

                            </td>

                            <td class="text-center">

                                {{ $user->phone }}

                            </td>

                            <td class="text-center">

                                @if($user->status=='active')

                                    <span class="badge"
                                        style="background:#198754;padding:8px 18px;border-radius:30px;">

                                        Active

                                    </span>

                                @else

                                    <span class="badge"
                                        style="background:#dc3545;padding:8px 18px;border-radius:30px;">

                                        Inactive

                                    </span>

                                @endif

                            </td>

                            <td class="text-center">

                                <strong>

                                    {{ $user->created_at->format('d M Y') }}

                                </strong>

                                <br>

                                <small class="text-muted">

                                    {{ $user->created_at->format('h:i A') }}

                                </small>

                            </td>

                            <td class="text-center">

                                <a href="{{ route('user.edit',$user->id) }}"
                                    class="btn btn-sm me-2"
                                    style="background:#1F3044;color:#fff;border-radius:8px;">

                                    <i class="fas fa-edit"></i>

                                    Edit

                                </a>

                                <a href="{{ route('user.delete',$user->id) }}"
                                    class="btn btn-sm btn-danger"
                                    style="border-radius:8px;"
                                    onclick="return confirm('Are you sure you want to delete this user?')">

                                    <i class="fas fa-trash"></i>

                                    Delete

                                </a>

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="8" class="text-center py-5">

                                <i class="fas fa-users fa-3x text-muted mb-3"></i>

                                <h5 class="text-muted">

                                    No Users Found

                                </h5>

                            </td>

                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

<style>

.table thead th{

    color:#1F3044 !important;

    font-weight:700;

    border:none;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.table tbody td{

    padding:18px;

    border-color:#edf1f5;

    vertical-align:middle;

}

.table tbody tr{

    transition:.3s;

}

.table tbody tr:hover{

    background:#F8FAFD;

}

.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-2px);

}

</style>

@endsection
