@extends('admin::layouts.admin')

@section('title', 'Manajemen Pengguna')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
@endpush

@section('content')
<div class="cms-page">
    {{-- Page Title --}}
    <h1 class="page-title-setting">Manajemen Pengguna</h1>

    {{-- Data Card --}}
    <div class="setting-card">
        {{-- Card Header with Gradient --}}
        <div class="setting-card-header">
            <div class="header-icon">
                <i class="fas fa-users"></i>
            </div>
            <span class="header-title">Data Pengguna</span>
        </div>

        {{-- Toolbar - Hidden
        <div class="setting-toolbar">
            <a href="{{ route('admin.users.create') }}" class="btn-add-data">
                <i class="fas fa-user-plus"></i>
                Tambah Pengguna
            </a>
        </div>
        --}}

        {{-- Data Table --}}
        <div class="setting-table-wrapper">
            <table class="setting-table" id="usersTable">
                <thead>
                    <tr>
                        <th>Avatar</th>
                        <th>Nama</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Bergabung</th>
                        <th>Login Terakhir</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        <tr>
                            <td class="image-cell">
                                @if($user->avatar)
                                    <img src="{{ asset('storage/' . $user->avatar) }}"
                                         alt="{{ $user->name }}"
                                         class="table-avatar">
                                @else
                                    <div class="avatar-placeholder-table">
                                        <span>{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                    </div>
                                @endif
                            </td>
                            <td class="name-cell">
                                <span class="data-title">{{ $user->name }}</span>
                            </td>
                            <td class="email-cell">
                                <span class="email-text">{{ $user->email }}</span>
                            </td>
                            <td class="phone-cell">
                                <span class="phone-text">{{ $user->phone ?? '-' }}</span>
                            </td>
                            <td class="role-cell">
                                @if($user->role === 'admin')
                                    <span class="badge-custom badge-danger">Admin</span>
                                @else
                                    <span class="badge-custom badge-info">User</span>
                                @endif
                            </td>
                            <td class="status-cell">
                                @if($user->status === 'active')
                                    <span class="badge-custom badge-success">Active</span>
                                @elseif($user->status === 'inactive')
                                    <span class="badge-custom badge-secondary">Inactive</span>
                                @else
                                    <span class="badge-custom badge-warning">Suspended</span>
                                @endif
                            </td>
                            <td class="date-cell">
                                {{ $user->created_at->format('d M Y') }}
                            </td>
                            <td class="date-cell">
                                @if($user->last_login_at)
                                    <span class="last-login-text" title="{{ $user->last_login_at->format('d M Y H:i:s') }}">
                                        {{ $user->last_login_at->diffForHumans() }}
                                    </span>
                                @else
                                    <span class="text-muted">Belum pernah login</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
/* CMS Page Styles */
.cms-page {
    max-width: 1400px;
}

.page-title-setting {
    font-family: 'Plus Jakarta Sans', sans-serif;itron', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--purple-primary);
    margin-bottom: 24px;
}

/* Setting Card */
.setting-card {
    background: rgba(26, 23, 48, 0.6);
    border-radius: 16px;
    overflow: hidden;
}

/* Card Header with Gradient */
.setting-card-header {
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.header-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

/* Toolbar Section */
.setting-toolbar {
    padding: 20px 24px;
    display: flex;
    justify-content: flex-end;
}

.btn-add-data {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-add-data:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
    color: white;
}

/* Setting Table */
.setting-table-wrapper {
    padding: 0 24px 24px;
}

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

.setting-table th {
    padding: 16px 12px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(109, 40, 217, 0.2) 100%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.setting-table th:nth-child(2) {
    text-align: left;
}

.setting-table td {
    padding: 16px 12px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.setting-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}

/* Table Cells */
.image-cell {
    text-align: center;
    width: 80px;
}

.table-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(139, 92, 246, 0.3);
}

.avatar-placeholder-table {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
}

.name-cell {
    text-align: left;
    min-width: 150px;
}

.data-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.email-cell {
    text-align: left;
    min-width: 200px;
}

.email-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.phone-cell {
    min-width: 120px;
}

.phone-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.role-cell,
.status-cell {
    width: 100px;
}

.date-cell {
    white-space: nowrap;
}

.last-login-text {
    color: var(--cyan-primary);
    font-size: 0.85rem;
}

.text-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.badge-custom {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-secondary {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.badge-info {
    background: rgba(6, 182, 212, 0.2);
    color: var(--cyan-primary);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.badge-warning {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}


/* DataTables Custom Styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary);
    padding: 12px 24px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: var(--cyan-primary);
    padding: 6px 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    background: transparent;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    margin: 0 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: var(--cyan-primary);
    color: var(--cyan-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--cyan-primary) !important;
    border-color: var(--cyan-primary);
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.3;
}
</style>

<script>
// Show success/error message if exists
@if(session('success'))
Swal.fire({
    icon: 'success',
    title: 'Berhasil!',
    text: '{{ session('success') }}',
    confirmButtonColor: '#8b5cf6',
    background: 'rgba(26, 23, 48, 0.95)',
    color: '#e2e8f0',
    timer: 3000,
    timerProgressBar: true
});
@endif

@if(session('error'))
Swal.fire({
    icon: 'error',
    title: 'Gagal!',
    text: '{{ session('error') }}',
    confirmButtonColor: '#8b5cf6',
    background: 'rgba(26, 23, 48, 0.95)',
    color: '#e2e8f0'
});
@endif

</script>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
    $('#usersTable').DataTable({
        responsive: true,
        pageLength: 10,
        order: [[7, 'desc']], // Order by last_login_at column
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
            infoEmpty: "Menampilkan 0 data",
            infoFiltered: "(difilter dari _MAX_ total data)",
            paginate: {
                first: "Pertama",
                last: "Terakhir",
                next: "Selanjutnya",
                previous: "Sebelumnya"
            },
            zeroRecords: "Tidak ada data yang cocok",
            emptyTable: "Tidak ada data tersedia"
        },
        columnDefs: [
            { orderable: false, targets: [0] } // Disable sorting for avatar column
        ]
    });
});
</script>
@endpush

@endsection