@extends('backend.master')

@section('content')

<div class="page-content">
    <!-- profile content start -->
    <div class="profile-content">
      <div class="d-flex flex-column flex-lg-row gap-4 gap-lg-0">
        <!-- profile menu mobile start -->
        <div class="profile-menu-mobile">
          <button class="btn-menu-mobile" type="button" data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasWithBothOptionsMenuMobile" aria-controls="offcanvasWithBothOptionsMenuMobile">
            <span class="icon"><i class="fa-solid fa-bars"></i></span>
          </button>

          <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1"
            id="offcanvasWithBothOptionsMenuMobile">
            <div class="offcanvas-header">
              <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
                <span class="icon"><i class="fa-solid fa-xmark"></i></span>
              </button>
            </div>
            <div class="offcanvas-body">
              <!-- profile menu start -->
              <div class="profile-menu">
                <!-- profile menu head start -->
                <div class="profile-menu-head">
                  <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                      <img class="img-fluid rounded-circle" src="{{ asset('backend/assets/images/profile/user-avatar.jpg') }}"
                        alt="profile image" />
                    </div>
                    <div class="flex-grow-1">
                      <div class="body">
                        <h2 class="title">Robert Downey</h2>
                        <p class="paragraph">UI/UX Designer</p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- profile menu head end -->

                <!-- profile menu body start -->
                <div class="profile-menu-body">
                <nav>
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="./profile">{{ ___('common.my_profile') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="./profile-attendance">{{ ___('common.attendance') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="./profile-notices">{{ ___('common.notices') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="./profile-leaves">{{ ___('common.leaves') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="./profile-schedule">{{ ___('common.schedule') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="./profile-phonebook">{{ ___('common.phonebook') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="./profile-appointment">{{ ___('common.appointment') }}</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="./profile-support-ticket">{{ ___('common.support_tickets') }}</a>
                    </li>
                  </ul>
                </nav>
                </div>
                <!-- profile menu body end -->
              </div>
              <!-- profile menu end -->
            </div>
          </div>
        </div>
        <!-- profile menu mobile end -->

        <!-- profile menu start -->
        <div class="profile-menu">
          <!-- profile menu head start -->
          <div class="profile-menu-head">
            <div class="d-flex align-items-center">
              <div class="flex-shrink-0">
                <img class="img-fluid rounded-circle" src="{{ asset('backend/assets/images/profile/user-avatar.jpg') }}"
                  alt="profile image" />
              </div>
              <div class="flex-grow-1">
                <div class="body">
                  <h2 class="title">Robert Downey</h2>
                  <p class="paragraph">UI/UX Designer</p>
                </div>
              </div>
            </div>
          </div>
          <!-- profile menu head end -->

          <!-- profile menu body start -->
          <div class="profile-menu-body">
            <nav>
                    <ul class="nav flex-column">
                      <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="./profile">{{ ___('common.my_profile') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-attendance">{{ ___('common.attendance') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-notices">{{ ___('common.notices') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-leaves">{{ ___('common.leaves') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-schedule">{{ ___('common.schedule') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-phonebook">{{ ___('common.phonebook') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-appointment">{{ ___('common.appointment') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="./profile-support-ticket">{{ ___('common.support_tickets') }}</a>
                      </li>
                    </ul>
                  </nav>
            </div>
          <!-- profile menu body end -->
        </div>
        <!-- profile menu end -->

        <!-- profile body start -->
        <div class="profile-body">
          <h2 class="title">My Profile</h2>

          <!-- profile body nav start -->
          <nav>
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link" aria-current="page" href="./profile">{{ ___('common.personal') }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./profile-official">{{ ___('common.official') }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./profile-financial">{{ ___('common.financial') }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./profile-salary">{{ ___('common.salary') }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./profile-emergency">{{ ___('common.emergency') }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="./profile-security">{{ ___('common.security') }}</a>
            </li>
          </ul>
        </nav>

          <!-- profile body nav end -->

          <!-- profile body form start -->
          <div class="profile-body-form">
            <div class="form-item">
              <div class="d-flex justify-content-between align-content-center">
                <div class="align-self-center">
                  <h2 class="title">{{ ___('common.current_password') }}</h2>
                  <p class="paragraph">*************</p>
                </div>
                <div class="align-self-center">
                  <button type="button" class="btn-edit" data-bs-toggle="collapse"
                    data-bs-target="#collapseCurrentPassword" aria-expanded="false"
                    aria-controls="collapseCurrentPassword">
                    {{ ___('common.edit') }}
                  </button>
                </div>
              </div>
              <div class="collapse" id="collapseCurrentPassword">
                <div class="form-box">
                  <form>
                    <input name="current_password" type="password" class="form-control ot-input"
                      placeholder="*************" />
                    <button type="button" class="btn-update">
                      {{ ___('common.update') }}
                    </button>
                  </form>
                </div>
              </div>
            </div>
            <div class="form-item">
              <div class="d-flex justify-content-between align-content-center">
                <div class="align-self-center">
                  <h2 class="title">{{ ___('common.new_password') }}</h2>
                  <p class="paragraph">*************</p>
                </div>
                <div class="align-self-center">
                  <button type="button" class="btn-edit" data-bs-toggle="collapse"
                    data-bs-target="#collapseNewPassword" aria-expanded="false" aria-controls="collapseNewPassword">
                    {{ ___('common.edit') }}
                  </button>
                </div>
              </div>
              <div class="collapse" id="collapseNewPassword">
                <div class="form-box">
                  <form>
                    <input name="new_password" type="password" class="form-control ot-input" placeholder="*************" />
                    <button type="button" class="btn-update">
                      {{ ___('common.update') }}
                    </button>
                  </form>
                </div>
              </div>
            </div>
            <div class="form-item">
              <div class="d-flex justify-content-between align-content-center">
                <div class="align-self-center">
                  <h2 class="title">{{ ___('common.re_enter_password') }}</h2>
                  <p class="paragraph">*************</p>
                </div>
                <div class="align-self-center">
                  <button type="button" class="btn-edit" data-bs-toggle="collapse"
                    data-bs-target="#collapseRe-enterPassword" aria-expanded="false"
                    aria-controls="collapseRe-enterPassword">
                    {{ ___('common.edit') }}
                  </button>
                </div>
              </div>
              <div class="collapse" id="collapseRe-enterPassword">
                <div class="form-box">
                  <form>
                    <input name="reenter_password" type="password" class="form-control ot-input"
                      placeholder="*************" />
                    <button type="button" class="btn-update">
                      {{ ___('common.update') }}
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- profile body form end -->
      </div>
      <!-- profile body end -->
    </div>
  </div>

@endsection