@extends('layouts.app')
@section('title', 'Users')
@section('page-icon', 'users')

@section('content')
    <div class="container-fluid admin-list-page py-4 pb-0">

        {{-- Success Alert --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 rounded-3 mb-4" role="alert">
                <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        {{-- Stats Row – new card style --}}
        <div class="row g-4 mb-4">
            <div class="col-6 col-lg-3">
                <div class="stat-card">
                    <div class="stat-icon bg-soft-primary">
                        <i class="fas fa-users text-primary"></i>
                    </div>
                    <div class="stat-content">
                        <span class="stat-number">{{ $users->count() }}</span>
                        <span class="stat-label">Total Users</span>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="stat-card">
                    <div class="stat-icon bg-soft-success">
                        <i class="fas fa-user-check text-success"></i>
                    </div>
                    <div class="stat-content">
                        <span class="stat-number">{{ $users->where('status', 'Active')->count() }}</span>
                        <span class="stat-label">Active</span>
                    </div>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="stat-card">
                    <div class="stat-icon bg-soft-danger">
                        <i class="fas fa-user-slash text-danger"></i>
                    </div>
                    <div class="stat-content">
                        <span class="stat-number">{{ $users->where('status', 'Inactive')->count() }}</span>
                        <span class="stat-label">Inactive</span>
                    </div>
                </div>
            </div>

        {{-- Header with Search & Add --}}
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
            <div>
                <h4 class="fw-bold mb-0 text-dark" style="letter-spacing: -0.3px;">
                    <i class="fas fa-users-cog me-2" style="color: #0d9488;"></i>Manage all registered users and their accounts
                </h4>
            </div>
            <div class="d-flex gap-2 align-items-center flex-wrap">
                <a href="{{ route('users.create') }}" class="btn btn-primary rounded-pill px-4 py-2 fw-semibold shadow-sm d-inline-flex align-items-center gap-2" style="background: #0d9488; border-color: #0d9488;">
                    <i class="fas fa-plus"></i> Add User
                </a>
            </div>
        </div>

        {{-- Table Card --}}
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle mb-0 custom-table">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Name</th>
                                <th>Mail ID</th>
                                <th>Date</th>
                                <th>Phone Number</th>
                                <th>Status</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $key => $user)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <!-- <div class="avatar-sm bg-soft-primary text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; font-weight: 600; font-size: 0.9rem;">
                                                {{ strtoupper(substr($user->name, 0, 1)) }}
                                            </div> -->
                                            <span class="fw-semibold text-dark">{{ $user->name }}</span>
                                        </div>
                                    </td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ \Carbon\Carbon::parse($user->created_at)->format('d-m-Y') }}</td>
                                    <td>{{ $user->phone ?? 'N/A' }}</td>
                                    <td>
                                        @if($user->status == 'Active')
                                            <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2 fw-semibold">
                                                <i class="fas fa-check-circle me-1"></i> Active
                                            </span>
                                        @else
                                            <span class="badge bg-danger-subtle text-danger rounded-pill px-3 py-2 fw-semibold">
                                                <i class="fas fa-times-circle me-1"></i> Inactive
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex gap-2 justify-content-center">
                                            <a href="{{ route('users.edit', $user->id) }}" class="btn btn-edit btn-sm rounded-circle" title="Edit" style="width: 36px; height: 36px; transition: all 0.2s; border-color: #0d9488; color: #0d9488;">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form action="{{ route('users.destroy', $user->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger btn-sm rounded-circle delete-btn" title="Delete" style="width: 36px; height: 36px; transition: all 0.2s;">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-5">
                                        <i class="fas fa-user-slash fa-3x d-block mb-3" style="color: #cbd5e1;"></i>
                                        <h5 class="fw-bold">No users found</h5>
                                        <p class="small">Try adjusting your search or filter.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- SweetAlert2 Script --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.delete-btn').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const form = this.closest('form');

                    Swal.fire({
                        title: 'Delete User?',
                        text: "This action cannot be undone!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#dc2626',
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: 'Yes, Delete',
                        cancelButtonText: 'Cancel'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit();
                        }
                    });
                });
            });
        });
    </script>

    <style>
        /* ----- Global ----- */
body{
    background:#f4f6f9;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    font-size:14px;
}

.container-fluid{
    max-width:1100px;
    margin:auto;
    padding:12px;
}

/* ----- Stats Card ----- */
.stat-card{
    background:#fff;
    border-radius:14px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid #edf2f7;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    transition:.25s;
}

.stat-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.stat-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    flex-shrink:0;
}

.bg-soft-primary{
    background:#e0f2fe;
    color:#0891b2;
}

.bg-soft-success{
    background:#dcfce7;
    color:#16a34a;
}

.bg-soft-warning{
    background:#fef3c7;
    color:#d97706;
}

.bg-soft-danger{
    background:#fee2e2;
    color:#dc2626;
}

.stat-number{
    font-size:22px;
    font-weight:700;
    line-height:1;
    color:#0f172a;
}

.stat-label{
    font-size:11px;
    color:#64748b;
    text-transform:uppercase;
    margin-top:3px;
}

/* ----- Card ----- */
.card{
    border:none;
    border-radius:16px;
    box-shadow:0 4px 14px rgba(0,0,0,.04);
}

.card-header{
    padding:12px 18px;
}

.card-body{
    padding:16px;
}

.card-footer{
    padding:12px 18px;
}

/* ----- Table ----- */
.custom-table{
    font-size:13px;
    margin-bottom:0;
}

.custom-table thead th{
    background:#f8fafc;
    color:#475569;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    padding:10px 14px;
    border-bottom:2px solid #e2e8f0;
}

.custom-table tbody td{
    padding:10px 14px;
    vertical-align:middle;
    border-bottom:1px solid #edf2f7;
}

.custom-table tbody tr:hover{
    background:#f8fafc;
}

/* ----- Avatar ----- */
.avatar-sm{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#eef2ff;
    color:#0891b2;
    font-size:13px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ----- Badge ----- */
.badge{
    padding:5px 10px;
    font-size:11px;
    font-weight:600;
    border-radius:20px;
}

/* ----- Buttons ----- */
.btn{
    border-radius:8px;
    font-size:13px;
    padding:6px 14px;
}

.btn-sm{
    width:48px;
    height:48px;
    border:1.5px solid #0ea5a4;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0ea5a4;
    background:#fff;
    text-decoration:none;
    transition:all .3s ease;
}

.btn-edit{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff !important;
    color:#0ea5a4 !important;
    border:1.5px solid #0ea5a4 !important;
    transition:all .3s ease;
}

.btn-edit i{
    color:#0ea5a4 !important;
}

/* Hover */
.btn-edit:hover,
.btn-edit:focus,
.btn-edit:active{
    background: #0ea5a4 !important;
    border-color: #0ea5a4 !important;
    color: #fff !important;
}

.btn-edit:hover i,
.btn-edit:focus i,
.btn-edit:active i{
    color: #fff !important;
}

.btn-primary{
    background:#0d9488;
    border:none;
}

.btn-primary:hover{
    background: #0f766e;
}

.btn-outline-primary{
    border-color:#0d9488;
    color:#0d9488;
}

.btn-outline-secondary{
    border-color:#d1d5db;
    color:#475569;
}


/* ----- Inputs ----- */
.input-group-text{
    height:36px;
    border-radius:8px 0 0 8px;
    background:#fff;
}

.form-control,
.form-select{
    height:36px;
    font-size:13px;
    border-radius:8px;
    border:1px solid #dbe3ec;
}

.form-control:focus,
.form-select:focus{
    border-color:#0d9488;
    box-shadow:0 0 0 3px rgba(13,148,136,.12);
}

/* ----- Pagination ----- */
.pagination{
    gap:4px;
}

.pagination .page-link{
    font-size:12px;
    padding:5px 10px;
    border-radius:8px!important;
}

.pagination .page-item.active .page-link{
    background:#0d9488;
    border-color:#0d9488;
}

/* ----- Alert ----- */
.alert{
    border-radius:10px;
    padding:10px 14px;
    font-size:13px;
}

/* ----- Responsive ----- */
@media(max-width:768px){

.container-fluid{
    padding:10px;
}

.stat-card{
    padding:10px;
}

.stat-icon{
    width:34px;
    height:34px;
    font-size:15px;
}

.stat-number{
    font-size:18px;
}

.stat-label{
    font-size:10px;
}

.custom-table thead th,
.custom-table tbody td{
    padding:8px;
    font-size:12px;
}

.avatar-sm{
    width:26px;
    height:26px;
    font-size:11px;
}

.btn{
    font-size:12px;
    padding:5px 10px;
}

.btn-sm{
    width:26px;
    height:26px;
}

.form-control,
.form-select{
    height:32px;
    font-size:12px;
}
}
    </style>
@endsection