@extends('layouts.app')

@section('title', 'Daftar Users')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header Section -->
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4">
                <div class="mb-3 mb-md-0">
                    <h1 class="h3 mb-1">Daftar Users</h1>
                    <p class="text-muted mb-0">Kelola pengguna sistem</p>
                </div>
                <a href="{{ route('users.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Tambah User
                </a>
            </div>

            <!-- Alert Messages -->
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" 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

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Main Content -->
            <div class="card shadow-sm">
                <div class="card-header bg-white d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                    <h5 class="card-title mb-2 mb-md-0">
                        <i class="fas fa-users me-2 text-primary"></i>Data Users
                    </h5>
                    <div class="d-flex flex-column flex-sm-row gap-2">
                        <div class="input-group" style="width: auto;">
                            <input type="text" class="form-control form-control-sm" placeholder="Cari users..." id="searchInput">
                            <button class="btn btn-outline-secondary btn-sm" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-filter me-1"></i>Filter
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" data-filter="all">Semua Role</a></li>
                                <li><a class="dropdown-item" href="#" data-filter="administrator">Administrator</a></li>
                                <li><a class="dropdown-item" href="#" data-filter="admin">Admin</a></li>
                                <li><a class="dropdown-item" href="#" data-filter="teknisi">Teknisi</a></li>
                                <li><a class="dropdown-item" href="#" data-filter="reseler">Reseler</a></li>
                                <li><a class="dropdown-item" href="#" data-filter="pelanggan">Pelanggan</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="card-body p-0">
                    @if($users->count() > 0)
                        <!-- Desktop Table View -->
                        <div class="d-none d-lg-block">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="5%">#</th>
                                            <th width="8%">Avatar</th>
                                            <th width="20%">Nama & Username</th>
                                            <th width="22%">Email</th>
                                            <th width="12%">Role</th>
                                            <th width="10%">Status</th>
                                            <th width="13%">Tanggal</th>
                                            <th width="10%">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($users as $user)
                                            <tr data-role="{{ $user->role }}">
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    @if($user->foto && file_exists(storage_path('app/public/users/' . $user->foto)))
                                                        <img src="{{ asset('storage/users/' . $user->foto) }}" 
                                                             alt="{{ $user->name }}" 
                                                             class="rounded-circle" 
                                                             width="32" height="32"
                                                             style="object-fit: cover;">
                                                    @else
                                                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white fw-bold" 
                                                             style="width: 32px; height: 32px; font-size: 12px;">
                                                            {{ strtoupper(substr($user->name, 0, 2)) }}
                                                        </div>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div>
                                                        <div class="fw-bold">{{ $user->name }}</div>
                                                        <small class="text-muted">{{ $user->username }}</small>
                                                    </div>
                                                </td>
                                                <td>{{ $user->email }}</td>
                                                <td>
                                                    @php
                                                        $roleColors = [
                                                            'administrator' => 'danger',
                                                            'admin' => 'primary',
                                                            'teknisi' => 'info',
                                                            'reseler' => 'warning',
                                                            'pelanggan' => 'success'
                                                        ];
                                                    @endphp
                                                    <span class="badge bg-{{ $roleColors[$user->role] ?? 'secondary' }}">
                                                        {{ ucfirst($user->role) }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <span class="badge bg-{{ $user->status == 'aktif' ? 'success' : 'danger' }}">
                                                        {{ ucfirst($user->status) }}
                                                    </span>
                                                </td>
                                                <td>
                                                    <small>{{ $user->created_at->format('d/m/Y') }}</small>
                                                </td>
                                                <td>
                                                    <div class="btn-group" role="group">
                                                        <a href="{{ route('users.show', $user) }}" class="btn btn-sm btn-outline-info" title="Lihat">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                        <a href="{{ route('users.edit', $user) }}" class="btn btn-sm btn-outline-warning" title="Edit">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        @if($user->id != auth()->id())
                                                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                                                    onclick="deleteUser({{ $user->id }}, '{{ $user->name }}')" title="Hapus">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Mobile Card View -->
                        <div class="d-lg-none">
                            @foreach($users as $user)
                                <div class="border-bottom p-3" data-role="{{ $user->role }}">
                                    <div class="d-flex align-items-start">
                                        <div class="me-3">
                                            @if($user->foto && file_exists(storage_path('app/public/users/' . $user->foto)))
                                                <img src="{{ asset('storage/users/' . $user->foto) }}" 
                                                     alt="{{ $user->name }}" 
                                                     class="rounded-circle" 
                                                     width="48" height="48"
                                                     style="object-fit: cover;">
                                            @else
                                                <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white fw-bold" 
                                                     style="width: 48px; height: 48px;">
                                                    {{ strtoupper(substr($user->name, 0, 2)) }}
                                                </div>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
                                                <div class="mb-2 mb-sm-0">
                                                    <h6 class="mb-1">{{ $user->name }}</h6>
                                                    <div class="text-muted small mb-1">{{ $user->username }}</div>
                                                    <div class="text-muted small">{{ $user->email }}</div>
                                                </div>
                                                <div class="d-flex flex-column align-items-start align-items-sm-end">
                                                    @php
                                                        $roleColors = [
                                                            'administrator' => 'danger',
                                                            'admin' => 'primary',
                                                            'teknisi' => 'info',
                                                            'reseler' => 'warning',
                                                            'pelanggan' => 'success'
                                                        ];
                                                    @endphp
                                                    <span class="badge bg-{{ $roleColors[$user->role] ?? 'secondary' }} mb-1">
                                                        {{ ucfirst($user->role) }}
                                                    </span>
                                                    <span class="badge bg-{{ $user->status == 'aktif' ? 'success' : 'danger' }}">
                                                        {{ ucfirst($user->status) }}
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <small class="text-muted">{{ $user->created_at->format('d M Y') }}</small>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('users.show', $user) }}" class="btn btn-sm btn-outline-info">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('users.edit', $user) }}" class="btn btn-sm btn-outline-warning">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    @if($user->id != auth()->id())
                                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                                onclick="deleteUser({{ $user->id }}, '{{ $user->name }}')">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <!-- Pagination -->
                        @if($users->hasPages())
                            <div class="card-footer bg-white border-top">
                                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                                    <div class="mb-2 mb-md-0">
                                        <small class="text-muted">
                                            Menampilkan {{ $users->firstItem() }} - {{ $users->lastItem() }} dari {{ $users->total() }} data
                                        </small>
                                    </div>
                                    <div>
                                        {{ $users->links('pagination::bootstrap-4') }}
                                    </div>
                                </div>
                            </div>
                        @endif
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-users text-muted mb-3" style="font-size: 3rem;"></i>
                            <h5 class="text-muted">Tidak ada data user</h5>
                            <p class="text-muted">Belum ada user yang terdaftar dalam sistem.</p>
                            <a href="{{ route('users.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>Tambah User Pertama
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>Konfirmasi Hapus
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p class="mb-0">Apakah Anda yakin ingin menghapus user <strong id="deleteUserName"></strong>?</p>
                <p class="text-danger small mt-2 mb-0">Tindakan ini tidak dapat dibatalkan!</p>
            </div>
            <div class="modal-footer border-0 justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-2"></i>Hapus User
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Search functionality
    $('#searchInput').on('keyup', function() {
        let value = $(this).val().toLowerCase();
        $('tbody tr, .d-lg-none .border-bottom').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });

    // Filter functionality
    $('.dropdown-item[data-filter]').on('click', function(e) {
        e.preventDefault();
        let filter = $(this).data('filter');
        
        if (filter === 'all') {
            $('tbody tr, .d-lg-none .border-bottom').show();
        } else {
            $('tbody tr, .d-lg-none .border-bottom').hide();
            $('[data-role="' + filter + '"]').show();
        }
        
        $('.dropdown-toggle').html('<i class="fas fa-filter me-1"></i>' + $(this).text());
    });

    // Auto-hide alerts
    $('.alert').each(function() {
        setTimeout(() => {
            $(this).fadeOut();
        }, 5000);
    });
});

function deleteUser(userId, userName) {
    $('#deleteUserName').text(userName);
    $('#deleteForm').attr('action', '{{ route("users.index") }}/' + userId);
    $('#deleteModal').modal('show');
}
</script>
@endpush