@extends('layouts.main')

@section('content')

<div class="container-fluid">

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">

        <!-- Header -->
        <div class="card-header bg-white border-0 p-4">

            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">

                <div>
                    <h3 class="fw-bold text-dark mb-1">
                        Security Settings
                    </h3>

                    <p class="text-muted mb-0">
                        Manage your account privacy and protection settings.
                    </p>
                </div>

                <!-- Top Menu -->
                <ul class="list-unstyled d-flex flex-wrap gap-2 mb-0">

                    <li>
                        <a href="{{ route('counsellor.setting.accountsettings') }}"
                           class="btn btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
                            <i class="ri-user-line me-1"></i>
                            Account Settings
                        </a>
                    </li>

                    <li>
                        <a href="{{ route('counsellor.setting.privacypolicy') }}"
                           class="btn btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
                            <i class="ri-shield-check-line me-1"></i>
                            Privacy Policy
                        </a>
                    </li>

                    <li>
                        <a href="{{ route('counsellor.setting.termsconditions') }}"
                           class="btn btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
                            <i class="ri-file-list-3-line me-1"></i>
                            Terms & Conditions
                        </a>
                    </li>

                </ul>

            </div>

        </div>

        <!-- Body -->
        <div class="card-body p-4 p-lg-5 bg-light-subtle">

            <!-- Single Main Box -->
            <div class="bg-white border rounded-4 shadow-sm p-4 p-lg-5">

                <!-- Section -->
                <div class="d-flex gap-3 mb-5">

                    <div class="terms-icon bg-primary-subtle text-primary">
                        <i class="ri-notification-3-line"></i>
                    </div>

                    <div>
                        <h5 class="fw-bold text-dark mb-2">
                            Desktop, Email, Chat & Purchase Notifications
                        </h5>

                        <p class="text-muted mb-0 lh-lg">
                            Users may receive notifications related to account activity,
                            purchases, chats, updates, and important announcements.
                            Notifications may be delivered through desktop alerts,
                            email messages, or in-app communication systems.
                        </p>
                    </div>

                </div>

                <!-- Section -->
                <div class="d-flex gap-3 mb-5">

                    <div class="terms-icon bg-danger-subtle text-danger">
                        <i class="ri-delete-bin-6-line"></i>
                    </div>

                    <div>
                        <h5 class="fw-bold text-dark mb-2">
                            Delete This Account
                        </h5>

                        <p class="text-muted mb-0 lh-lg">
                            Users can request permanent account deletion at any time.
                            Once deleted, account information and related platform
                            data may not be recoverable.
                        </p>
                    </div>

                </div>

                <!-- Section -->
                <div class="d-flex gap-3 mb-5">

                    <div class="terms-icon bg-success-subtle text-success">
                        <i class="ri-shield-keyhole-line"></i>
                    </div>

                    <div>
                        <h5 class="fw-bold text-dark mb-2">
                            Two-factor Authentication
                        </h5>

                        <p class="text-muted mb-0 lh-lg">
                            For enhanced security, users are encouraged to enable
                            two-factor authentication to protect their accounts
                            from unauthorized access.
                        </p>
                    </div>

                </div>

                <!-- Section -->
                <div class="d-flex gap-3 mb-5">

                    <div class="terms-icon bg-warning-subtle text-warning">
                        <i class="ri-mail-check-line"></i>
                    </div>

                    <div>
                        <h5 class="fw-bold text-dark mb-2">
                            Secondary Verification
                        </h5>

                        <p class="text-muted mb-0 lh-lg">
                            Additional verification methods may be required during
                            login attempts or sensitive account actions to maintain
                            platform security and user safety.
                        </p>
                    </div>

                </div>

                <!-- Section -->
                <div class="d-flex gap-3">

                    <div class="terms-icon bg-info-subtle text-info">
                        <i class="ri-key-2-line"></i>
                    </div>

                    <div>
                        <h5 class="fw-bold text-dark mb-2">
                            Backup Codes
                        </h5>

                        <p class="text-muted mb-0 lh-lg">
                            Backup recovery codes may be provided for account
                            recovery purposes and should be stored securely
                            by the user for future access.
                        </p>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<style>

.terms-icon{
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.bg-light-subtle{
    background: #f8fafc;
}

.card{
    transition: 0.3s ease;
}

.card:hover{
    transform: translateY(-2px);
}

</style>

@endsection