@extends('layouts.dashboard')

@section('page_title', 'SHOW USER')

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0" style="font-size: 1.25rem;">User Details</h2>
    <a class="btn btn-outline-secondary btn-sm" href="{{ route('users.index') }}"><i class="fa fa-arrow-left"></i> Back</a>
</div>

<div class="ff-table-card table-responsive p-4">
    <div class="row g-4">
        <div class="col-12 border-bottom border-secondary pb-3">
            <h5 class="mb-1">Name</h5>
            <div class="ff-user-detail-value">{{ $user->name ?: 'N/A' }}</div>
        </div>
        
        <div class="col-12 border-bottom border-secondary pb-3">
            <h5 class="mb-1">Email</h5>
            <div class="ff-user-detail-value">{{ $user->email ?: 'N/A' }}</div>
        </div>
        
        <div class="col-12 border-bottom border-secondary pb-3">
            <h5 class="mb-2">Two-Factor Authentication</h5>
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    @if($user->two_factor_enabled)
                        <span class="ff-badge ff-done"><i class="fa fa-check-circle"></i> Enabled</span>
                        <p class="text-muted small mt-1 mb-0">Your account is protected with an extra layer of security.</p>
                    @else
                        <span class="ff-badge ff-delayed"><i class="fa fa-times-circle"></i> Disabled</span>
                        <p class="text-muted small mt-1 mb-0">Add an extra layer of security to your account by enabling 2FA.</p>
                    @endif
                </div>
                <div>
                    @php $isOwner = Auth::id() == $user->id; @endphp
                    @if($isOwner)
                        @if($user->two_factor_enabled)
                            <form id="disable-2fa-form" action="{{ route('2fa.disable') }}" method="POST">
                                @csrf
                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmAction({ title: 'Disable 2FA', message: 'Are you sure you want to disable 2FA? This will reduce your account security.', confirmText: 'Yes, Disable', confirmButtonClass: 'btn-danger', onConfirm: function() { document.getElementById('disable-2fa-form').submit(); } })">Disable 2FA</button>
                            </form>
                        @else
                            <a href="{{ route('2fa.setup') }}" class="btn btn-warning btn-sm text-dark fw-bold">Enable 2FA</a>
                        @endif
                    @endif
                </div>
            </div>
        </div>

        <div class="col-12">
            <h5 class="mb-2">Roles</h5>
            <div>
                @if(!empty($user->getRoleNames()))
                    @foreach($user->getRoleNames() as $v)
                        <span class="ff-badge ff-transit">{{ $v }}</span>
                    @endforeach
                @else
                    <span class="text-muted">No roles assigned</span>
                @endif
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .ff-user-detail-value {
        color: var(--text-main);
        font-weight: 500;
    }
</style>
@endpush
@endsection