@extends('layouts.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 action="{{route('user.update-password')}}" method="POST"
                      enctype="multipart/form-data"> @csrf
                    <div class="mb-3 input-group">
                        <input type="password" class="form-control form__field" name="new_password"
                               placeholder="Enter New Password">

                        <button class="btn btn-outline-secondary" type="button"><i class="fa-regular fa-eye"></i></button>

                    </div>
                    <span
                        class='text-danger'>@error ('new_password'){{$message}} @enderror</span>
                    <div class="mb-3 input-group">
                        <input type="password" class="form-control form__field" name="confirm_password"
                               placeholder="Enter Confirm Password">

                        <button class="btn btn-outline-secondary" type="button"><i class="fa-regular fa-eye"></i></button>

                    </div>
                    <span
                        class='text-danger'>@error ('confirm_password') {{$message}} @enderror</span>
                    <br>
                    <button type="submit" 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