@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": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/en-us.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"English\"&gt; English&lt;/div&gt;",
                            "selected": true
                          },
                          {
                            "value": "Français",
                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/fr.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Français\"&gt; Français&lt;/div&gt;"
                          },
                          {
                            "value": "Deutsch",
                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/de.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Deutsch\"&gt; Deutsch&lt;/div&gt;"
                          },
                          {
                            "value": "Italiano",
                            "label": "&lt;div class=\"d-flex align-items-center\"&gt;&lt;img src=\"/img/flags/it.png\" class=\"flex-shrink-0 me-2\" width=\"20\" alt=\"Italiano\"&gt; Italiano&lt;/div&gt;"
                          }
                        ]
                      }'
                                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
