@push('title')
    View User
@endpush

<x-app-layout>
    <div class="alertbox">
        @if (session('success'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true" id="success-alert">
                <div class="toast-header bg-success">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('success') }}</div>
            </div>
        @endif

        @if (session('info'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="info-alert">
                <div class="toast-header bg-info">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('info') }}</div>
            </div>
        @endif

        @if (session('warning'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="warning-alert">
                <div class="toast-header bg-warning">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('warning') }}</div>
            </div>
        @endif
    </div>

    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="card-title mb-0">User Details</h5>
                <div class="btn-group">
                    @can('update_user_management')
                        <a href="{{ route('users.edit', $user->id) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit me-1"></i> Edit User
                        </a>
                    @endcan
                    @can('delete_user_management')
                        @if ($user->approval_status !== 'deleted')
                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                data-bs-target="#deleteUserModal">
                                <i class="fas fa-trash me-1"></i> Delete User
                            </button>
                        @endif
                    @endcan
                    @can('approve_user_management')
                        @if ($user->approval_status === 'pending')
                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                data-bs-target="#approveUserModal">
                                <i class="fas fa-check me-1"></i> Approve User
                            </button>
                        @endif
                    @endcan
                </div>
            </div>

            <!-- User Status Badge -->
            <div class="mb-4">
                @if ($user->approval_status === 'approved')
                    <span class="badge bg-success fs-6">
                        <i class="fas fa-check-circle me-1"></i> Approved
                    </span>
                @elseif($user->approval_status === 'pending')
                    <span class="badge bg-warning fs-6">
                        <i class="fas fa-clock me-1"></i> Pending Approval
                    </span>
                @elseif($user->approval_status === 'deleted')
                    <span class="badge bg-danger fs-6">
                        <i class="fas fa-trash me-1"></i> Deleted
                    </span>
                @endif
            </div>

            <div class="row">

                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Name</label>
                        <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                            {{ $user->name ?? 'N/A' }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Email Address</label>
                        <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                            {{ $user->email ?? 'N/A' }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Phone Number</label>
                        <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                            {{ $user->mobile ?? 'N/A' }}
                        </div>
                    </div>
                </div>



                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Role</label>
                        <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                            @if ($user->roles->isNotEmpty())
                                @foreach ($user->roles as $role)
                                    <span class="badge bg-primary me-1">{{ ucfirst($role->name) }}</span>
                                @endforeach
                            @else
                                <em class="text-muted">No roles assigned</em>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Email Verified</label>
                        <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                            @if ($user->email_verified_at)
                                <span class="badge bg-success">
                                    <i class="fas fa-check-circle me-1"></i> Verified
                                </span>
                                <small class="text-muted d-block">
                                    {{ $user->email_verified_at->format('F j, Y \a\t g:i A') }}
                                </small>
                            @else
                                <span class="badge bg-warning">
                                    <i class="fas fa-exclamation-triangle me-1"></i> Not Verified
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Information -->
            @if ($user->address)
                <div class="mb-3">
                    <label class="form-label fw-bold">Address</label>
                    <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                        {{ $user->address }}
                    </div>
                </div>
            @endif

            @if ($user->bio)
                <div class="mb-3">
                    <label class="form-label fw-bold">Bio</label>
                    <div class="border rounded p-3 bg-light">
                        {{ $user->bio }}
                    </div>
                </div>
            @endif

            <!-- Permissions (if any) -->
            @if ($user->permissions->isNotEmpty())
                <div class="mb-3">
                    <label class="form-label fw-bold">Direct Permissions</label>
                    <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                        @foreach ($user->permissions as $permission)
                            <span class="badge bg-info me-1">{{ $permission->name }}</span>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Account Timestamps -->
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Account Created</label>
                        <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                            {{ $user->created_at ? $user->created_at->format('F j, Y \a\t g:i A') : 'N/A' }}
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Last Updated</label>
                        <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                            {{ $user->updated_at ? $user->updated_at->format('F j, Y \a\t g:i A') : 'N/A' }}
                        </div>
                    </div>
                </div>
            </div>

            @if ($user->last_login_at)
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Last Login</label>
                            <div class="form-control-plaintext border rounded px-3 py-2 bg-light">
                                {{ $user->last_login_at->format('F j, Y \a\t g:i A') }}
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Action Buttons -->
            <div class="d-flex justify-content-between">
                <a href="{{ route('users.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i> Back to Users
                </a>

                <div class="btn-group">
                    @can('update_user_management')
                        <a href="{{ route('users.edit', $user->id) }}" class="btn btn-primary">
                            <i class="fas fa-edit me-1"></i> Edit User
                        </a>
                    @endcan

                    @can('reset_user_password')
                        <button type="button" class="btn btn-warning" data-bs-toggle="modal"
                            data-bs-target="#resetPasswordModal">
                            <i class="fas fa-key me-1"></i> Reset Password
                        </button>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    @can('delete_user_management')
        <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteUserModalLabel">Confirm Delete</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete this user?</p>
                        <div class="alert alert-warning">
                            <strong>Name:</strong> {{ $user->name }}<br>
                            <strong>Email:</strong> {{ $user->email }}
                        </div>
                        <p class="text-danger"><strong>This action cannot be undone!</strong></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ route('users.destroy', $user->id) }}" method="GET" style="display: inline;">
                            @csrf
                            <button type="submit" class="btn btn-danger">Delete User</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <!-- Approve User Modal -->
    @can('approve_user_management')
        <div class="modal fade" id="approveUserModal" tabindex="-1" aria-labelledby="approveUserModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="approveUserModalLabel">Approve User</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to approve this user?</p>
                        <div class="alert alert-info">
                            <strong>Name:</strong> {{ $user->name }}<br>
                            <strong>Email:</strong> {{ $user->email }}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ route('users.approve', $user->id) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-success">Approve User</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <!-- Reset Password Modal -->
    @can('reset_user_password')
        <div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="resetPasswordModalLabel">Reset Password</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to reset the password for this user?</p>
                        <div class="alert alert-info">
                            <strong>Name:</strong> {{ $user->name }}<br>
                            <strong>Email:</strong> {{ $user->email }}
                        </div>
                        <p class="text-info">A new password will be generated and sent to the user's email address.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <form action="{{ route('users.reset-password', $user->id) }}" method="POST"
                            style="display: inline;">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-warning">Reset Password</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcan

    <script>
        $("#success-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });

        $("#validation-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });
    </script>
</x-app-layout>