@extends('admin.layout')

@section('title', 'Detail User')
@section('page-title', 'Detail User')

@section('content')
<div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-user me-2"></i>Detail User</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center mb-4">
                        <div class="avatar-lg bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
                            <i class="fas fa-user fa-3x text-white"></i>
                        </div>
                        <h4 class="mb-1">{{ $user->name }}</h4>
                        <div class="mb-2">
                            @if($user->role == 'superadmin')
                                <span class="badge bg-danger fs-6">Super Admin</span>
                            @elseif($user->role == 'admin')
                                <span class="badge bg-primary fs-6">Admin</span>
                            @elseif($user->role == 'staf')
                                <span class="badge bg-warning fs-6">Staf</span>
                            @else
                                <span class="badge bg-secondary fs-6">User</span>
                            @endif
                        </div>
                        @if($user->id == auth()->id())
                            <div class="alert alert-info py-2">
                                <i class="fas fa-info-circle me-1"></i>
                                <small>Ini adalah profil Anda</small>
                            </div>
                        @endif
                    </div>
                    
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Informasi Dasar</h6>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Nama Lengkap:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ $user->name }}
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Email:</strong>
                            </div>
                            <div class="col-sm-8">
                                <a href="mailto:{{ $user->email }}" class="text-decoration-none">
                                    {{ $user->email }}
                                </a>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Role:</strong>
                            </div>
                            <div class="col-sm-8">
                                @if($user->role == 'superadmin')
                                    <span class="badge bg-danger">Super Admin</span>
                                    <small class="text-muted d-block">Akses penuh ke semua fitur sistem</small>
                                @elseif($user->role == 'admin')
                                    <span class="badge bg-primary">Admin</span>
                                    <small class="text-muted d-block">Akses ke manajemen hotel dan booking</small>
                                @elseif($user->role == 'staf')
                                    <span class="badge bg-warning">Staf</span>
                                    <small class="text-muted d-block">Akses terbatas untuk operasional harian</small>
                                @else
                                    <span class="badge bg-secondary">User</span>
                                    <small class="text-muted d-block">Akses sebagai tamu/pelanggan</small>
                                @endif
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="row">
                            <div class="col-12">
                                <h6 class="text-muted mb-3">Informasi Sistem</h6>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Terdaftar:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ $user->created_at->format('d F Y, H:i') }}
                                <small class="text-muted d-block">{{ $user->created_at->diffForHumans() }}</small>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Terakhir Update:</strong>
                            </div>
                            <div class="col-sm-8">
                                {{ $user->updated_at->format('d F Y, H:i') }}
                                <small class="text-muted d-block">{{ $user->updated_at->diffForHumans() }}</small>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-sm-4">
                                <strong>Status Email:</strong>
                            </div>
                            <div class="col-sm-8">
                                @if($user->email_verified_at)
                                    <span class="badge bg-success">Terverifikasi</span>
                                    <small class="text-muted d-block">{{ $user->email_verified_at->format('d F Y, H:i') }}</small>
                                @else
                                    <span class="badge bg-warning">Belum Terverifikasi</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                
                <hr>
                
                <div class="d-flex justify-content-between align-items-center">
                    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Kembali ke Daftar
                    </a>
                    
                    <div class="btn-group">
                        <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-warning">
                            <i class="fas fa-edit me-1"></i>Edit User
                        </a>
                        @if($user->id != auth()->id())
                            <button type="button" class="btn btn-danger" 
                                    onclick="confirmDelete({{ $user->id }}, '{{ $user->name }}')">
                                <i class="fas fa-trash me-1"></i>Hapus User
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Additional Information Card -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-chart-line me-2"></i>Statistik Aktivitas</h6>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-4">
                        <div class="border-end">
                            <h4 class="text-primary mb-1">{{ $user->created_at->diffInDays(now()) }}</h4>
                            <small class="text-muted">Hari Bergabung</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border-end">
                            <h4 class="text-success mb-1">{{ $user->updated_at->diffInDays($user->created_at) }}</h4>
                            <small class="text-muted">Hari Terakhir Aktif</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h4 class="text-info mb-1">
                            @if($user->email_verified_at)
                                <i class="fas fa-check-circle"></i>
                            @else
                                <i class="fas fa-clock"></i>
                            @endif
                        </h4>
                        <small class="text-muted">Status Verifikasi</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus user <strong id="userName"></strong>?</p>
                <p class="text-muted small">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer">
                <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">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function confirmDelete(userId, userName) {
    document.getElementById('userName').textContent = userName;
    document.getElementById('deleteForm').action = `/admin/users/${userId}`;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>

<style>
.avatar-lg {
    width: 80px;
    height: 80px;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.border-end {
    border-right: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .border-end {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}

.badge.fs-6 {
    font-size: 0.875rem !important;
}
</style>
@endsection