@extends('layout.app')

@section('title', 'Detail User - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Detail User" 
    :breadcrumbs="[
        ['name' => 'Manajemen User', 'url' => route('user-management.index')],
        ['name' => 'Detail User']
    ]"
    :action="route('user-management.edit', $user)" 
    actionLabel="Edit User" 
    actionIcon="edit"
/>

<div class="container-fluid py-4">
    <div class="row">
        <!-- User Information -->
        <div class="col-md-4">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi User</h6>
                </div>
                <div class="card-body pt-0">
                    <div class="text-center mb-4">
                        @if($user->avatar)
                            <img src="{{ Storage::url($user->avatar) }}" alt="Avatar" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
                        @else
                            <img src="{{ asset('img/theme/team-1-800x800.jpg') }}" alt="Avatar" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
                        @endif
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Nama</label>
                        <p class="mb-0 font-weight-bold">{{ $user->name }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Username</label>
                        <p class="mb-0">{{ $user->username }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Email</label>
                        <p class="mb-0">{{ $user->email }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Nama Lengkap</label>
                        <p class="mb-0">{{ $user->nama_lengkap }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Role</label>
                        <p class="mb-0">
                            <span class="badge badge-sm bg-gradient-{{ $user->role_badge_class }}">{{ ucfirst($user->role) }}</span>
                        </p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Status</label>
                        <p class="mb-0">
                            <span class="badge badge-sm bg-gradient-{{ $user->status_badge_class }}">{{ $user->status }}</span>
                        </p>
                    </div>
                    
                    @if($user->pelanggan)
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Pelanggan Terkait</label>
                        <p class="mb-0">
                            <a href="{{ route('pelanggan.show', $user->pelanggan) }}" class="text-primary">
                                {{ $user->pelanggan->nama }} - {{ $user->pelanggan->nomor_pelanggan }}
                            </a>
                        </p>
                    </div>
                    @endif
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Dibuat</label>
                        <p class="mb-0">{{ $user->created_at->format('d M Y H:i') }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label font-weight-bold text-muted">Diupdate</label>
                        <p class="mb-0">{{ $user->updated_at->format('d M Y H:i') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Roles -->
        <div class="col-md-8">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Roles yang ditetapkan ({{ $user->roles->count() }})</h6>
                </div>
                <div class="card-body pt-0">
                    @if($user->roles->count() > 0)
                    <div class="row">
                        @foreach($user->roles as $role)
                        <div class="col-md-6 mb-3">
                            <div class="card border-start border-primary h-100 py-2">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                                {{ $role->display_name }}
                                            </div>
                                            <div class="h6 mb-0 font-weight-bold text-gray-800">
                                                {{ $role->name }}
                                            </div>
                                            @if($role->description)
                                                <small class="text-muted">{{ Str::limit($role->description, 50) }}</small>
                                            @endif
                                        </div>
                                        <div class="col-auto">
                                            @if($role->is_active)
                                                <i class="material-symbols-rounded text-success" style="font-size: 32px; vertical-align: middle;">check_circle</i>
                                            @else
                                                <i class="material-symbols-rounded text-danger" style="font-size: 32px; vertical-align: middle;">cancel</i>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-4">
                        <i class="material-symbols-rounded" style="font-size: 48px; color: #6c757d; margin-bottom: 1rem;">badge</i>
                        <h6 class="text-muted">Belum ada role</h6>
                        <p class="text-muted">User ini belum memiliki role yang ditetapkan</p>
                        <a href="{{ route('user-management.edit', $user) }}" class="btn btn-sm bg-gradient-primary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 16px; vertical-align: middle;">edit</i> Edit User
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="row mt-4">
        <div class="col">
            <div class="card my-4">
                <div class="card-body pt-0">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="{{ route('user-management.edit', $user) }}" class="btn bg-gradient-primary mb-0 w-100">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">edit</i> Edit User
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('user-management.index') }}" class="btn bg-gradient-secondary mb-0 w-100">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Kembali
                            </a>
                        </div>
                        <div class="col-md-3">
                            <button class="btn bg-gradient-warning mb-0 w-100" onclick="toggleStatus({{ $user->id }})">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">power_settings_new</i> 
                                {{ $user->status === 'Aktif' ? 'Nonaktifkan' : 'Aktifkan' }}
                            </button>
                        </div>
                        @if($user->id !== auth()->user()->id)
                        <div class="col-md-3">
                            <button class="btn bg-gradient-danger mb-0 w-100" onclick="deleteUser({{ $user->id }})">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">delete</i> Hapus User
                            </button>
                        </div>
                        @endif
                    </div>
                </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">
                <h5 class="modal-title" id="deleteModalLabel">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Apakah Anda yakin ingin menghapus user ini? Tindakan ini tidak dapat dibatalkan.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn bg-gradient-danger mb-0">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function toggleStatus(userId) {
    if (confirm('Apakah Anda yakin ingin mengubah status user ini?')) {
        fetch(`/user-management/${userId}/toggle-status`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            alert('Error: ' + error.message);
        });
    }
}

function deleteUser(userId) {
    document.getElementById('deleteForm').action = `/user-management/${userId}`;
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>
@endsection