@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">

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

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

                        <div class="security-icon bg-primary-subtle text-primary">
                            <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">
                                Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem Ipsum has been the industry's
                                standard dummy text ever since the 1500s.
                            </p>
                        </div>

                    </div>

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

                        <div class="security-icon bg-success-subtle text-success">
                            <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">
                                It has survived not only five centuries, but also the leap
                                into electronic typesetting, remaining essentially unchanged.
                            </p>
                        </div>

                    </div>

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

                        <div class="security-icon bg-warning-subtle text-warning">
                            <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">
                                Lorem Ipsum passages, and more recently with desktop
                                publishing software like Aldus PageMaker including versions
                                of lorem ipsum.
                            </p>
                        </div>

                    </div>

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

                        <div class="security-icon bg-info-subtle text-info">
                            <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">
                                It is a long established fact that a reader will be distracted
                                by the readable content of a page when looking at its layout.
                            </p>
                        </div>

                    </div>

                    <!-- Delete Account -->
                    <div class="border border-danger rounded-4 bg-danger bg-opacity-10 p-4">

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

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

                            <div class="w-100">

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

                                <p class="text-muted mb-4 lh-lg">
                                    There are many variations of passages of Lorem Ipsum available,
                                    but the majority have suffered alteration in some form.
                                </p>

                                <form id="deactivateAccountForm"
                                    action="{{ route('counsellor.setting.deactivate-account') }}" method="POST"
                                    class="d-inline">
                                    @csrf
                                    @method('DELETE')

                                    <div class="d-flex flex-wrap gap-3">

                                        <button type="button"
                                            class="btn btn-light border rounded-pill px-4 py-2 fw-semibold"
                                            onclick="resetForm()">
                                            Cancel
                                        </button>

                                        <button type="button"
                                            class="btn btn-danger rounded-pill px-4 py-2 fw-semibold shadow-sm"
                                            onclick="confirmDeactivation()">
                                            <i class="ri-delete-bin-line me-1"></i>
                                            Close & Delete This Account
                                        </button>

                                    </div>
                                </form>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

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

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

        .card {
            transition: 0.3s ease;
        }

        .card:hover {
            transform: translateY(-2px);
        }
    </style>

    <script>
        function confirmDeactivation() {
            const confirmed = confirm(
                'Are you sure you want to deactivate your account? This action will make your account inactive.');

            if (confirmed) {
                const secondConfirm = confirm(
                    'This is a permanent action. Once deactivated, you will not be able to access your account. Continue?'
                    );

                if (secondConfirm) {
                    document.getElementById('deactivateAccountForm').submit();
                }
            }
        }

        function resetForm() {
            document.getElementById('deactivateAccountForm').reset();
        }
    </script>
@endsection