@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"
                    >Attendance</a
                  >
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./profile-notices"
                    >Notices</a
                  >
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./profile-leaves">Leaves</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./profile-schedule">Schedule</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./profile-phonebook">Phonebook</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./profile-appointment">Appointment</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./profile-support-ticket">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 active" 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" 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.tin') }}</h2>
                  <p class="paragraph">N/A</p>
                </div>
                <div class="align-self-center">
                  <button
                    type="button"
                    class="btn-edit"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseTIN"
                    aria-expanded="false"
                    aria-controls="collapseTIN"
                  >
                    {{ ___('common.edit') }}
                  </button>
                </div>
              </div>
              <div class="collapse" id="collapseTIN">
                <div class="form-box">
                  <form>
                    <input
                      name="tin"
                      type="text"
                      class="form-control ot-input"
                      placeholder="{{ ___('common.n_a') }}"
                    />
                    <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.bank_name') }}</h2>
                  <p class="paragraph">N/A</p>
                </div>
                <div class="align-self-center">
                  <button
                    type="button"
                    class="btn-edit"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseBankName"
                    aria-expanded="false"
                    aria-controls="collapseBankName"
                  >
                    {{ ___('common.edit') }}
                  </button>
                </div>
              </div>
              <div class="collapse" id="collapseBankName">
                <div class="form-box">
                  <form>
                    <input
                      name="bank_name"
                      type="text"
                      class="form-control ot-input"
                      placeholder="{{ ___('common.n_a') }}"
                    />
                    <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.bank_account') }}</h2>
                  <p class="paragraph">N/A</p>
                </div>
                <div class="align-self-center">
                  <button
                    type="button"
                    class="btn-edit"
                    data-bs-toggle="collapse"
                    data-bs-target="#collapseBankAccount"
                    aria-expanded="false"
                    aria-controls="collapseBankAccount"
                  >
                    {{ ___('common.edit') }}
                  </button>
                </div>
              </div>
              <div class="collapse" id="collapseBankAccount">
                <div class="form-box">
                  <form>
                    <input
                      name="bank_account"
                      type="text"
                      class="form-control ot-input"
                      placeholder="{{ ___('common.n_a') }}"
                    />
                    <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