204 lines
12 KiB
PHP
204 lines
12 KiB
PHP
@extends('layouts.account', ['title' => 'Account - Personal Info'])
|
|
|
|
@section('content')
|
|
<!-- Personal info content -->
|
|
<div class="col-lg-9">
|
|
<div class="ps-lg-3 ps-xl-0">
|
|
<!-- Page title -->
|
|
<h1 class="h2 mb-1 mb-sm-2">Personal info</h1>
|
|
<!-- Basic info -->
|
|
<div class="border-bottom py-4">
|
|
<div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
|
|
<h2 class="h6 mb-0">Basic info</h2>
|
|
<a aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="false"
|
|
class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
|
|
data-bs-toggle="collapse" href=".basic-info">Edit</a>
|
|
</div>
|
|
<div class="collapse basic-info show" id="basicInfoPreview">
|
|
<ul class="list-unstyled fs-sm m-0">
|
|
<li>Susan Gardner</li>
|
|
<li>May 12, 1996</li>
|
|
<li>English</li>
|
|
</ul>
|
|
</div>
|
|
<div class="collapse basic-info" id="basicInfoEdit">
|
|
<form class="row g-3 g-sm-4 needs-validation" novalidate="">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="fn">First name</label>
|
|
<div class="position-relative">
|
|
<input class="form-control" id="fn" required="" type="text" value="Susan" />
|
|
<div class="invalid-feedback">Please enter your first name!</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="ln">Last name</label>
|
|
<div class="position-relative">
|
|
<input class="form-control" id="ln" required="" type="text" value="Gardner" />
|
|
<div class="invalid-feedback">Please enter your last name!</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="birthdate">Date of birth</label>
|
|
<div class="position-relative">
|
|
<input class="form-control form-icon-end"
|
|
data-datepicker='{
|
|
"dateFormat": "F j, Y",
|
|
"defaultDate": "May 15, 1996"
|
|
}'
|
|
id="birthdate" placeholder="Choose date" type="text" />
|
|
<i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label">Language</label>
|
|
<select class="form-select"
|
|
data-select='{
|
|
"placeholderValue": "Select language",
|
|
"choices": [
|
|
{
|
|
"value": "",
|
|
"label": "Select language",
|
|
"placeholder": true
|
|
},
|
|
{
|
|
"value": "English",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/en-us.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"English\"> English</div>",
|
|
"selected": true
|
|
},
|
|
{
|
|
"value": "Français",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/fr.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Français\"> Français</div>"
|
|
},
|
|
{
|
|
"value": "Deutsch",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/de.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Deutsch\"> Deutsch</div>"
|
|
},
|
|
{
|
|
"value": "Italiano",
|
|
"label": "<div class=\"d-flex align-items-center\"><img src=\"/img/flags/it.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Italiano\"> Italiano</div>"
|
|
}
|
|
]
|
|
}'
|
|
data-select-template="true"></select>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex gap-3 pt-2 pt-sm-0">
|
|
<button class="btn btn-primary" type="submit">Save changes</button>
|
|
<button aria-controls="basicInfoPreview basicInfoEdit" aria-expanded="true"
|
|
class="btn btn-secondary" data-bs-target=".basic-info" data-bs-toggle="collapse"
|
|
type="button">Close</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Contact -->
|
|
<div class="border-bottom py-4">
|
|
<div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
|
|
<div class="d-flex align-items-center gap-3 me-4">
|
|
<h2 class="h6 mb-0">Contact</h2>
|
|
</div>
|
|
<a aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="false"
|
|
class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
|
|
data-bs-toggle="collapse" href=".contact-info">Edit</a>
|
|
</div>
|
|
<div class="collapse contact-info show" id="contactInfoPreview">
|
|
<ul class="list-unstyled fs-sm m-0">
|
|
<li class="mb-1">susan.gardner@email.com</li>
|
|
<li>+1 (805) 348 95 72 <span class="text-success ms-1">Verified</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="collapse contact-info" id="contactInfoEdit">
|
|
<form class="row g-3 g-sm-4 needs-validation" novalidate="">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="email">Email address</label>
|
|
<div class="position-relative">
|
|
<input class="form-control" id="email" required="" type="email"
|
|
value="susan.gardner@email.com" />
|
|
<div class="invalid-feedback">Please enter a valid email address!</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="phone">Phone number</label>
|
|
<div class="position-relative">
|
|
<input class="form-control"
|
|
data-input-format='{"numericOnly": true, "delimiters": ["+1 (", ")", " "], "blocks": [0, 3, 0, 3, 2, 2]}'
|
|
id="phone" placeholder="+1 (___) ___ __ __" required="" type="text"
|
|
value="+1 (805) 348 95 72" />
|
|
<div class="invalid-feedback">Please enter your phone number!</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex gap-3 pt-2 pt-sm-0">
|
|
<button class="btn btn-primary" type="submit">Save changes</button>
|
|
<button aria-controls="contactInfoPreview contactInfoEdit" aria-expanded="true"
|
|
class="btn btn-secondary" data-bs-target=".contact-info" data-bs-toggle="collapse"
|
|
type="button">Close</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Password -->
|
|
<div class="border-bottom py-4">
|
|
<div class="nav flex-nowrap align-items-center justify-content-between pb-1 mb-3">
|
|
<div class="d-flex align-items-center gap-3 me-4">
|
|
<h2 class="h6 mb-0">Password</h2>
|
|
</div>
|
|
<a aria-controls="passChangePreview passChangeEdit" aria-expanded="false"
|
|
class="nav-link hiding-collapse-toggle text-decoration-underline p-0 collapsed"
|
|
data-bs-toggle="collapse" href=".password-change">Edit</a>
|
|
</div>
|
|
<div class="collapse password-change show" id="passChangePreview">
|
|
<ul class="list-unstyled fs-sm m-0">
|
|
<li>**************</li>
|
|
</ul>
|
|
</div>
|
|
<div class="collapse password-change" id="passChangeEdit">
|
|
<form class="row g-3 g-sm-4 needs-validation" novalidate="">
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="current-password">Current password</label>
|
|
<div class="password-toggle">
|
|
<input class="form-control" id="current-password"
|
|
placeholder="Enter your current password" required="" type="password" />
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="new-password">New password</label>
|
|
<div class="password-toggle">
|
|
<input class="form-control" id="new-password" placeholder="Create new password"
|
|
required="" type="password" />
|
|
<label aria-label="Show/hide password" class="password-toggle-button">
|
|
<input class="btn-check" type="checkbox" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex gap-3 pt-2 pt-sm-0">
|
|
<button class="btn btn-primary" type="submit">Save changes</button>
|
|
<button aria-controls="passChangePreview passChangeEdit" aria-expanded="true"
|
|
class="btn btn-secondary" data-bs-target=".password-change" data-bs-toggle="collapse"
|
|
type="button">Close</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Delete account -->
|
|
<div class="pt-3 mt-2 mt-sm-3">
|
|
<h2 class="h6">Delete account</h2>
|
|
<p class="fs-sm">When you delete your account, your public profile will be deactivated
|
|
immediately. If you change your mind before the 14 days are up, sign in with your email and
|
|
password, and we'll send you a link to reactivate your account.</p>
|
|
<a class="text-danger fs-sm fw-medium" href="#!">Delete account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@endsection
|