@extends('layouts.app')

@section('page-title', 'Manage Users')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-lg glass-card" style="border-radius:20px;">
                <div class="card-header gradient-header d-flex justify-content-between align-items-center py-3">
                    <h4 class="mb-0 text-dark fw-semibold">All Users</h4>
                    <span class="badge bg-white text-primary px-3 py-2 rounded-pill shadow-sm">{{ $users->total() }} Users</span>
                </div>
                <div class="card-body p-4">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle modern-table">
                            <thead class="bg-light bg-opacity-50">
                                <tr>
                                    <th class="fw-semibold text-secondary">Name</th>
                                    <th class="fw-semibold text-secondary">Email</th>
                                    <th class="fw-semibold text-secondary">Joined Date</th>
                                    <th class="fw-semibold text-secondary">Transactions</th>
                                    <th class="fw-semibold text-secondary">Invoices</th>
                                    <th class="fw-semibold text-secondary">Expenses</th>
                                    <th class="fw-semibold text-secondary">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($users as $user)
                                    <tr class="border-bottom border-light">
                                        <td class="fw-medium">{{ $user->name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->created_at->format('M d, Y') }}</td>
                                        <td><span class="badge bg-info bg-gradient text-white rounded-pill px-3 py-2 shadow-sm">{{ $user->transactions_count }}</span></td>
                                        <td><span class="badge bg-success bg-gradient text-white rounded-pill px-3 py-2 shadow-sm">{{ $user->invoices_count }}</span></td>
                                        <td><span class="badge bg-warning bg-gradient text-white rounded-pill px-3 py-2 shadow-sm">{{ $user->expenses_count }}</span></td>
                                        <td>
                                            <a href="{{ route('admin.user-details', $user->id) }}" class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm">
                                                <i class="fas fa-eye me-1"></i> View
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4 text-muted">No users found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex justify-content-center mt-4">
                        {{ $users->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Professional gradient background for the page */
    body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
    }

    /* Glass-morphism card effect */
    .glass-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    /* Gradient header with rounded top */
    .gradient-header {
        background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
        border-radius: 20px 20px 0 0;
        padding: 1.2rem 1.5rem;
    }

    /* Modern table styling */
    .modern-table th {
        border-bottom: 2px solid rgba(0, 0, 0, 0.05);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .modern-table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        font-size: 0.95rem;
    }

    .modern-table tbody tr:hover {
        background: rgba(78, 115, 223, 0.03);
        transition: background 0.2s ease;
    }

    /* Enhanced badges with gradient and rounded pill */
    .badge.bg-gradient {
        font-weight: 500;
        font-size: 0.85rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    /* Custom pagination styling (Bootstrap's default with rounded edges) */
    .pagination {
        gap: 5px;
    }

    .pagination .page-link {
        border-radius: 12px !important;
        border: none;
        padding: 0.5rem 1rem;
        color: #4e73df;
        font-weight: 500;
        background: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .pagination .page-link:hover {
        background: #4e73df;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 10px rgba(78, 115, 223, 0.3);
    }

    .pagination .active .page-link {
        background: #4e73df;
        color: white;
        border: none;
        box-shadow: 0 5px 10px rgba(78, 115, 223, 0.3);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .glass-card {
            border-radius: 15px;
        }
        .gradient-header {
            border-radius: 15px 15px 0 0;
        }
        .modern-table td, .modern-table th {
            font-size: 0.85rem;
        }
    }
</style>
@endpush
