@extends('front.user-dashboard.user-dashboard-layout')
@section('user-dashboard-content')
    <style>
        .section-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .section-divider {
            margin: 1.5rem 0;
            border-top: 1px solid #ddd;
        }

        @media (max-width: 768px) {
            .section-title {
                font-size: 1rem;
            }

            .verification{
            flex-direction: column;
            gap: 10px;
        }
        }
    </style>
    <div class="container">
        <div class="container bg-white p-4 my-4 rounded shadow-sm">


            <h5 class="section-title"><i class="fa-solid fa-lock"></i> Security Options</h5>

            <div class="mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="fw-bold">Password:</label>
                    <button class="btn btn-sm btn-outline-secondary">Edit</button>
                </div>
                <form>
                    <div class="mb-3 input-group">
                        <input type="password" class="form-control" placeholder="New password">
                        <button class="btn btn-outline-secondary" type="button"><i class="fa-regular fa-eye"></i></button>
                    </div>
                    <div class="mb-3 input-group">
                        <input type="password" class="form-control" placeholder="Confirm password">
                        <button class="btn btn-outline-secondary" type="button"><i class="fa-regular fa-eye"></i></button>
                    </div>
                    <button class="btn button-blue">Update</button>
                </form>
            </div>

            <div class="section-divider"></div>

            <div class="mb-4">
                <h6 class="fw-bold">2FA:</h6>
                <p class="text-muted">Set up Two Factor Authentication</p>
                <p>Scan the code below in your authenticator application and enter the 6 digit code below to confirm your
                    authentication setup.</p>

                <div class="text-center mb-3">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=PAZQLFD52UUAUFKP2WASDRAJJ7RX5Y"
                        alt="QR Code">
                </div>

                <p class="text-center small">Or enter the following code into your authenticator app</p>
                <p class="text-center fw-bold">PAZQLFD52UUAUFKP2WASDRAJJ7RX5Y</p>

                <div class="d-flex justify-content-center verification">
                    <input type="text" class="form-control w-auto me-2" placeholder="Enter Code">
                    <button class="btn button-blue">Verify & Enable</button>
                </div>
            </div>

            <div class="section-divider"></div>


            <div class="mb-3 d-flex justify-content-between align-items-center">
                <div class="container">
                    <h6 class="fw-bold">Disable Account:</h6>
                    <p class="text-muted">Permanently disable your Pharmica account</p>
                </div>

                <button class="btn btn-danger">Disable</button>
            </div>

        </div>
    </div>
@endsection