@extends('dashboard.layout.user')
@section('content')
<div class="container-fluid p-0">
    <div class="mainDashboard">
        <h2 class="mainHeading">My Profile</h2>

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="personal-tab" data-toggle="tab" data-target="#personal" type="button" role="tab" aria-controls="personal" aria-selected="true">Personal</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link " id="preferences-tab" data-toggle="tab" data-target="#preferences" type="button" role="tab" aria-controls="preferences" aria-selected="false">Preferences</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link " id="password-tab" data-toggle="tab" data-target="#password" type="button" role="tab" aria-controls="password" aria-selected="false">Password</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link " id="mfa-tab" data-toggle="tab" data-target="#mfa" type="button" role="tab" aria-controls="mfa" aria-selected="false">MFA</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link " id="sec-tab" data-toggle="tab" data-target="#sec" type="button" role="tab" aria-controls="sec" aria-selected="false">Security Questions</button>
            </li>
        </ul>
        <div class="tab-content mb-5" id="myTabContent">
            <div class="tab-pane fade show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
                <div class="mainOrder">
                    <div class="orderContent">
                        <h4 class="card-heading">Personal</h4>
                    </div>
                    <form action="" class="profile profile-form1">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>First Name</label>
                                    <input type="text" class="form-control" placeholder="First Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Last Name</label>
                                    <input type="text" class="form-control" placeholder="Last Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Job Title</label>
                                    <input type="text" class="form-control" placeholder="Job Title">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="text" class="form-control" placeholder="Email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Phone Number</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Ext</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Alt. Phone</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Fax</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn borderBtn w-100">Cancel</button>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn w-100">Save</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <div class="tab-pane fade" id="preferences" role="tabpanel" aria-labelledby="preferences-tab">

                <div class="mainOrder">
                    <div class="orderContent">
                        <h4 class="card-heading">Preferences</h4>
                    </div>
                    <form action="" class="profile profile-form1">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Simple Search Default</label>
                                    <input type="text" class="form-control" placeholder="">

                                    <div class="check-wrap w-100 mt-4 py-3">
                                        <label class="text-black">
                                            <input type="checkbox">
                                            <span>Exclude Archived Files</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Page Left</label>
                                    <select class="form-control">
                                        <option value="">05</option>
                                        <option value="">10</option>
                                        <option value="">15</option>
                                        <option value="">20</option>
                                        <option value="">25</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Default Report Results Details</label>
                                    <select class="form-control">
                                        <option value="">Open</option>
                                        <option value="">Close</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Default Report Results Notes</label>
                                    <select class="form-control">
                                        <option value="">Open</option>
                                        <option value="">Close</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Pending Reports Sort Order</label>
                                    <select class="form-control">
                                        <option value="">Old to New</option>
                                        <option value="">New to Old</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Completed Reports Sort Order</label>
                                    <select class="form-control">
                                        <option value="">Old to New</option>
                                        <option value="">New to Old</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn borderBtn w-100">Cancel</button>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn w-100">Save</button>
                            </div>

                        </div>
                    </form>
                </div>

            </div>
            <div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">

                <div class="mainOrder">
                    <div class="orderContent">
                        <h4 class="card-heading">Password</h4>
                    </div>
                    <form action="" class="profile profile-form1">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Current Password*</label>
                                            <input type="password" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>New Password*</label>
                                            <input type="password" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Confirm Password*</label>
                                            <input type="password" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <fieldset>
                                    <legend>Default Report Results Notes</legend>
                                    <ul>
                                        <li>
                                            <label>
                                                <input type="radio" checked>
                                                <span>Minimum 12 characters</span>
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="radio" checked>
                                                <span>Contain at least one letter</span>
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="radio">
                                                <span>Contain at least one special character</span>
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="radio">
                                                <span>Contain at least one digit</span>
                                            </label>
                                        </li>
                                        <li>
                                            <label>
                                                <input type="radio">
                                                <span>Passwords must match</span>
                                            </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn borderBtn w-100">Cancel</button>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn w-100">Save</button>
                            </div>

                        </div>
                    </form>
                </div>

                <div class="mainOrder my-5">
                    <div class="textDetail-password">
                        <p><strong>Password Security</strong>
                            Keep passwords protected. Do not share your user name and password with anyone. All users must have their own login account. Enable a password protected screen saver. Passwords must not be words found in a dictionary. Passwords should have no personal significance for their user (e.g., names of spouses, friends, favorite sports, pets, hobbies and so on are too easy to guess for anyone who does a bit of background checking).
                        </p>
                    </div>
                    <div class="textDetail-password">
                        <p><strong>Password Content</strong>
                            Passwords should consist of at least 12 characters, including at least one number and one symbol (e.g., m7sVw7XJ^HD8 is a better password than msvwxjhdrkjtd). Passwords should not merely increment a numerical value from change to change (e.g., m7sVw7xJ^HD8 followed the next time by m7sVw7xJ^HD9 is poor choice of passwords). Passwords should also avoid: 2 or 4-digit year; 3-character abbreviations for any month; 3 or more characters in alphabetic order; Any string of 3 or more identical characters; Any string of 3 or more characters repeated or reversed; The username itself or its reverse.
                        </p>
                    </div>
                    <div class="textDetail-password">
                        <p><strong>Password Entry</strong>
                            When passwords are being keyed, users must be sure that no one is shoulder-surfing (observing their keystrokes). Anyone near a person entering a password must turn away so as not to observe the keys being used; this element of corporate culture is best modeled by upper management. Do not share your password with anyone for any reason. Passwords must be changed immediately when there is any suspicion that they have been compromised.
                        </p>
                    </div>
                </div>

            </div>
            <div class="tab-pane fade" id="mfa" role="tabpanel" aria-labelledby="mfa-tab">
                <div class="mainOrder mb-5">
                    <div class="orderContent">
                        <h4 class="card-heading">MFA</h4>
                    </div>
                    <form action="" class="profile profile-form1">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>MFA Method*</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Email Address*</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="accept-mfa">
                                        <input type="checkbox">
                                        <div>
                                            <span>I accept</span>
                                            <p>I do not have a texting enabled cell phone, access to an authenticator app, or I wish to use email instead. I understand that for best security, text messaging or an authenticator app is preferred</p>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn borderBtn w-100">Cancel</button>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn w-100">Save</button>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="mainOrder mb-5">
                    <div class="orderContent">
                        <h4 class="card-heading">MFA Change History</h4>
                    </div>
                    <div class="orderTable recentTable">
                        <table class="table table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col">Date</th>
                                    <th scope="col">MFA Method</th>
                                    <th scope="col">MFA Data</th>
                                    <th scope="col">Modified By</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Feb 23,2024</td>
                                    <td>Email</td>
                                    <td>N/A</td>
                                    <td>Holman,Stephanie</td>
                                </tr>
                                <tr>
                                    <td>Feb 23,2024</td>
                                    <td>Email</td>
                                    <td>N/A</td>
                                    <td>Holman,Stephanie</td>
                                </tr>
                                <tr>
                                    <td>Feb 23,2024</td>
                                    <td>Email</td>
                                    <td>N/A</td>
                                    <td>Holman,Stephanie</td>
                                </tr>
                                <tr>
                                    <td>Feb 23,2024</td>
                                    <td>Email</td>
                                    <td>N/A</td>
                                    <td>Holman,Stephanie</td>
                                </tr>
                                <tr>
                                    <td>Feb 23,2024</td>
                                    <td>Email</td>
                                    <td>N/A</td>
                                    <td>Holman,Stephanie</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade " id="sec" role="tabpanel" aria-labelledby="sec-tab">
                <div class="mainOrder">
                    <div class="textDetail-password">
                        <p><strong>Forgot Password Feature</strong>
                            As part of the automated "Forgot Password" process, you will be prompted to answer a security question. This question will be selected from the questions that you have chosen and are part of your account profile. If you have not answered these questions, you will not be able to reset your password without the help of an administrator.
                        </p>
                    </div>
                    <div class="textDetail-password">
                        <p><strong>Security Question & Answers</strong>
                            At some point after providing your credentials (username and password) to the system, you will be prompted to choose 3 security questions and provide answers to the questions you choose. In the event you either need to or would like to reset or reenter the questions and answers again, you may do so here.
                        </p>
                    </div>
                    <div class="textDetail-password pt-0 px-0 border-0">
                        <p class="text-black">You must select three questions and enter an answer for each question. You cannot use the same question more than once. Answers are NOT case sensitive (caps or no caps are okay). Question 1*</p>
                    </div>
                    <div class="orderContent">
                        <h4 class="card-heading">Password</h4>
                    </div>
                    <form action="" class="profile profile-form1">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Question 1*</label>
                                    <select class="form-control">
                                        <option value="">Question 1</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Answer to Question 1*</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Question 2*</label>
                                    <select class="form-control">
                                        <option value="">Question 2</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Answer to Question 2*</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Question 3*</label>
                                    <select class="form-control">
                                        <option value="">Question 3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Answer to Question 3*</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn borderBtn w-100">Cancel</button>
                            </div>
                            <div class="col-md-6">
                                <button class="btn themeBtn w-100">Save</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>



    </div>
</div>
@endsection