@extends('layouts.main')

@section('content')

<div class="container py-4">

    <!-- Page Title -->
    <h4 class="mb-4 fw-bold">Account Settings</h4>

    <!-- Top Navigation -->
    <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>

    <!-- PRIVACY POLICY -->
    <div class="card shadow-lg border-0 rounded-4 mb-4">

        <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-semibold">🛡️ Privacy Policy</h5>
            <small class="text-muted">Last updated: {{ date('d M Y') }}</small>
        </div>

        <div class="card-body">

            <div class="policy-box p-3">

                <p class="text-muted">
                    At our HealthTech platform, we are committed to protecting sensitive medical and personal data of doctors and patients with the highest standards of security and compliance.
                </p>

                <div class="policy-section">
                    <h6>1. Medical & Personal Data Collection</h6>
                    <p>
                        We collect essential data such as doctor profiles, patient information, appointment records, prescriptions, and communication logs to ensure smooth healthcare operations.
                    </p>
                </div>

                <div class="policy-section">
                    <h6>2. Usage of Data</h6>
                    <p>
                        Data is used for appointment scheduling, patient management, secure communication, billing, and improving healthcare services.
                    </p>
                </div>

                <div class="policy-section">
                    <h6>3. Data Security & Encryption</h6>
                    <p>
                        All sensitive data is protected using encrypted storage, secure APIs, and role-based access control to prevent unauthorized access.
                    </p>
                </div>

                <div class="policy-section">
                    <h6>4. Compliance & Regulations</h6>
                    <p>
                        Our platform follows healthcare data protection standards and complies with applicable laws to ensure confidentiality and integrity of medical records.
                    </p>
                </div>

                <div class="policy-section">
                    <h6>5. Third-Party Integration</h6>
                    <p>
                        We only integrate with trusted services such as payment gateways and communication providers required for system functionality.
                    </p>
                </div>

                <div class="policy-section">
                    <h6>6. Patient Confidentiality</h6>
                    <p>
                        Patient medical records and history are strictly confidential and accessible only to authorized doctors and system admins.
                    </p>
                </div>

                <div class="policy-section">
                    <h6>7. User Rights</h6>
                    <p>
                        You can access, update, or request deletion of your data anytime. Doctors are responsible for maintaining patient data integrity.
                    </p>
                </div>

            </div>

            <div class="text-end mt-3">
                <button class="btn btn-primary px-4">✔ Accept Policy</button>
            </div>

        </div>
    </div>

    <!-- SECURITY SECTION -->
    <div class="card shadow-lg border-0 rounded-4 mb-4">

        <div class="card-header bg-white border-0">
            <h5 class="fw-semibold mb-0">🔐 Security & Access Control</h5>
        </div>

        <div class="card-body">

            <div class="security-item d-flex justify-content-between">
                <div>
                    <h6>Two-Factor Authentication</h6>
                    <p class="text-muted">
                        Secure login using OTP verification to protect doctor accounts and patient data.
                    </p>
                </div>
                <input type="checkbox">
            </div>

            <hr>

            <div class="security-item d-flex justify-content-between">
                <div>
                    <h6>Session Management</h6>
                    <p class="text-muted">
                        Automatically log out inactive sessions to prevent unauthorized access.
                    </p>
                </div>
                <input type="checkbox" checked>
            </div>

            <hr>

            <div class="security-item">
                <h6>Backup Access Codes</h6>
                <p class="text-muted">
                    Generate emergency backup codes for account recovery in case OTP is unavailable.
                </p>
                <button class="btn btn-outline-primary btn-sm">Generate Codes</button>
            </div>

        </div>
    </div>

    <!-- DELETE ACCOUNT -->
    <div class="card border-danger shadow-lg rounded-4">

        <div class="card-header bg-danger text-white">
            <h5 class="mb-0">⚠ Delete Account</h5>
        </div>

        <div class="card-body">

            <p class="text-muted">
                Deleting your account will permanently remove:
            </p>

            <ul class="text-muted">
                <li>Doctor profile and login credentials</li>
                <li>Appointments and schedules</li>
                <li>Patient medical records</li>
                <li>Uploaded reports and documents</li>
            </ul>

            <p class="text-danger fw-semibold">
                This action cannot be undone.
            </p>

            <form action="#" method="POST">
                @csrf
                @method('DELETE')

                <button type="button" onclick="confirmDelete()" class="btn btn-danger">
                    Delete My Account
                </button>
            </form>

        </div>
    </div>

</div>

@endsection


<style>
.account-menu {
    display: flex;
    gap: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.menu-item {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    position: relative;
}

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

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

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

.policy-box {
    max-height: 350px;
    overflow-y: auto;
    background: #f8f9fb;
    border-radius: 10px;
}

.policy-section {
    margin-bottom: 15px;
}

.security-item h6 {
    font-weight: 600;
}

.security-item p {
    font-size: 14px;
    color: #6c757d;
}
</style>


<script>
function confirmDelete() {
    if(confirm("Are you sure you want to delete your account permanently?")) {
        document.querySelector('form').submit();
    }
}
</script>