@extends('layouts.main')

@section('content')

<div class="container py-4">

    <!-- Top Menu -->
    <div class="account-menu mb-4">
        <a href="{{ route('doctor.settings') }}" 
           class="menu-item {{ request()->routeIs('doctor.settings') ? 'active' : '' }}">
            ⚙️ Settings
        </a>

        <a href="{{ route('doctor.change.password') }}" 
           class="menu-item {{ request()->routeIs('doctor.change.password') ? 'active' : '' }}">
            🔒 Change Password
        </a>

        <a href="{{ route('doctor.documents') }}" 
           class="menu-item {{ request()->routeIs('doctor.documents') ? 'active' : '' }}">
            📄 Documents
        </a>

        <a href="{{ route('doctor.privacy') }}" 
           class="menu-item {{ request()->routeIs('doctor.privacy') ? 'active' : '' }}">
            🛡️ Privacy Policy
        </a>

        <a href="{{ route('doctor.terms') }}" 
           class="menu-item {{ request()->routeIs('doctor.terms') ? 'active' : '' }}">
            🛡️ Terms & Conditions
        </a>
    </div>

    <!-- Header -->
    <div class="mb-4">
        <h4 class="fw-bold">🛡️ Terms & Conditions</h4>
        <p class="text-muted">Please read carefully before continuing.</p>
    </div>

    <!-- Terms Content -->
    <div class="card terms-card shadow-sm border-0">
<div class="card-body p-4 terms-scroll">

    <div class="term-block">
        <h6> Desktop, Email, Chat & Purchase Notifications</h6>
        <p>
            Our platform sends important notifications to keep you informed about your healthcare activities.
            These may include appointment confirmations, doctor communication, prescription updates,
            medical reports, and billing alerts via desktop, email, or chat.
        </p>
        <p>
            While you can manage general notification preferences, critical alerts related to your health
            and account security cannot be disabled.
        </p>
    </div>

    <div class="term-block">
        <h6> Delete This Account</h6>
        <p>
            You have the right to request account deletion at any time. Once initiated, your personal
            information will be permanently removed from our system.
        </p>
        <p>
            However, certain medical records may be securely retained to comply with legal and healthcare
            regulations. Please note that account deletion is irreversible.
        </p>
    </div>

    <div class="term-block">
        <h6> Two-Factor Authentication</h6>
        <p>
            To enhance security, our platform supports Two-Factor Authentication (2FA). You may be required
            to verify your identity using a One-Time Password (OTP) sent to your registered mobile number
            or email address.
        </p>
        <p>
            This helps protect your account and sensitive medical data from unauthorized access.
        </p>
    </div>

    <div class="term-block">
        <h6> Secondary Verification</h6>
        <p>
            In certain situations, additional verification may be required. This includes login attempts
            from new devices, unusual activity, or when making changes to sensitive account information.
        </p>
        <p>
            This extra layer of security ensures that only authorized users can access your account.
        </p>
    </div>

    <div class="term-block">
        <h6>Backup Codes</h6>
        <p>
            Backup codes are provided as a secure fallback option to access your account if you lose
            access to your primary authentication method.
        </p>
        <p>
            Each backup code can be used only once. It is your responsibility to store them securely
            and avoid sharing them with others.
        </p>
    </div>

    <div class="term-block">
        <h6> General Terms</h6>
        <ul>
            <li>All users must provide accurate and up-to-date information</li>
            <li>The platform is intended for healthcare assistance and informational purposes only</li>
            <li>We are not responsible for misuse or unauthorized access due to user negligence</li>
            <li>Continued use of the platform indicates acceptance of these Terms & Conditions</li>
        </ul>
    </div>

</div>
    <!-- Accept Box -->
    <div class="card accept-card mt-4 border-0 shadow-sm">
        <div class="card-body d-flex flex-md-row flex-column justify-content-between align-items-center">

            <div class="form-check mb-3 mb-md-0">
                <input class="form-check-input" type="checkbox" id="acceptTerms">
                <label class="form-check-label">
                    I agree to the Terms & Conditions
                </label>
            </div>

            <button class="btn btn-primary px-4" id="acceptBtn" disabled>
                Accept & Continue →
            </button>

        </div>
    </div>

</div>

<!-- CSS -->
<style>

/* MENU */
.account-menu {
    display: flex;
    gap: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.menu-item {
    text-decoration: none;
    font-weight: 500;
    color: #777;
    position: relative;
    transition: 0.3s;
}

.menu-item.active,
.menu-item:hover {
    color: #0d6efd;
}

.menu-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #0d6efd;
    bottom: -6px;
    left: 0;
    transition: 0.3s;
}

.menu-item:hover::after,
.menu-item.active::after {
    width: 100%;
}

/* TERMS CARD */
.terms-card {
    border-radius: 16px;
    background: #fff;
}

/* SCROLL AREA */
.terms-scroll {
    max-height: 480px;
    overflow-y: auto;
}

/* TERM BLOCK */
.term-block {
    margin-bottom: 20px;
}

.term-block h6 {
    font-weight: 600;
    margin-bottom: 6px;
}

.term-block p,
.term-block li {
    color: #666;
    font-size: 14px;
}

/* DANGER BLOCK */
.term-block.danger h6 {
    color: #dc3545;
}

/* ACCEPT CARD */
.accept-card {
    border-radius: 16px;
}

/* BUTTON */
.btn-primary {
    border-radius: 10px;
    padding: 10px 22px;
    font-weight: 500;
}

/* SCROLLBAR */
.terms-scroll::-webkit-scrollbar {
    width: 6px;
}
.terms-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

</style>

<!-- JS -->
<script>
    const checkbox = document.getElementById('acceptTerms');
    const button = document.getElementById('acceptBtn');

    checkbox.addEventListener('change', function () {
        button.disabled = !this.checked;
    });
</script>

@endsection