@extends('backend.master')

@section('title')
    {{ ___('common.Profile') }}
@endsection


@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="image-box 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="image-box 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.my_profile') }}</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">{{ ___('common.my_profile') }}</h2>

        <!-- profile body nav start -->
        <nav>
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link active" 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" 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 border-bottom-0 pb-0">
            <div class="image-box">
              <img id="id-profile-image" class="img-fluid rounded-circle"
                src="{{ asset('backend/assets/images/profile/personal-avatar.jpg') }}" alt="profile avatar" />
              <span class="icon" id="open-file-uploader"><i class="fa-solid fa-user-pen"></i></span>
              <input type="file" name="file" id="input-button" />
            </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.name') }}</h2>
                <p class="paragraph">Robert Downey JR.</p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapseName"
                  aria-expanded="false" aria-controls="collapseName">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseName">
              <div class="form-box">
                <form>
                  <input name="name" type="text" class="form-control ot-input" placeholder="{{ ___('common.robert_downey_jr') }}" />
                  <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.email_address') }}</h2>
                <p class="paragraph">Email Address</p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapseEmail"
                  aria-expanded="false" aria-controls="collapseEmail">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseEmail">
              <div class="form-box">
                <form>
                  <input name="email" type="email" class="form-control ot-input" placeholder="{{ ___('common.shakil_sookh_com') }}" />
                  <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.date_of_birth') }}</h2>
                <p class="paragraph">23 - 06 - 1995</p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapseDateOfBirth"
                  aria-expanded="false" aria-controls="collapseDateOfBirth">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseDateOfBirth">
              <div class="form-box">
                <form>
                  <input name="date_of_birth" type="date" class="form-control ot-input" />
                  <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.gender') }}</h2>
                <p class="paragraph">Male</p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapseGender"
                  aria-expanded="false" aria-controls="collapseGender">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseGender">
              <div class="form-box">
                <form>
                  <input name="gender" type="text" class="form-control ot-input" placeholder="{{ ___('common.male') }}" />
                  <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.phone_number') }}</h2>
                <p class="paragraph">{{ ___('common.880_249_897_632') }}</p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapsePhone"
                  aria-expanded="false" aria-controls="collapsePhone">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapsePhone">
              <div class="form-box">
                <form>
                  <input name="phone" type="text" class="form-control ot-input" placeholder="{{ ___('common.880_249_897_632') }}" />
                  <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.address_line') }}</h2>
                <p class="paragraph">
                {{ ___('common.78_2_razia_tower_manhattan_newYork_69006') }}
                </p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapseAddress"
                  aria-expanded="false" aria-controls="collapseAddress">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseAddress">
              <div class="form-box">
                <form>
                  <input name="address" type="text" class="form-control ot-input"
                    placeholder="{{ ___('common.78_2_razia_tower_manhattan_newYork_69006') }}" />
                  <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.nationality') }}</h2>
                <p class="paragraph">Bangladesh</p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapseNationality"
                  aria-expanded="false" aria-controls="collapseNationality">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseNationality">
              <div class="form-box">
                <form>
                  <select class="form-select ot-input" aria-label="Default select example">
                    <option selected>{{ ___('common.select_a_country') }}</option>
                    <option value="1">Bangladesh</option>
                    <option value="2">Iceland</option>
                    <option value="3">Moldova</option>
                  </select>
                  <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.nid_number') }}</h2>
                <p class="paragraph">{{ ___('common.963_687_596') }}</p>
              </div>
              <div class="align-self-center">
                <button type="button" class="btn-edit" data-bs-toggle="collapse" data-bs-target="#collapseNid"
                  aria-expanded="false" aria-controls="collapseNid">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseNid">
              <div class="form-box">
                <form>
                  <input name="nid" type="text" class="form-control ot-input" placeholder="{{ ___('common.963_687_596') }}" />
                  <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.passport') }}</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="#collapsePassport"
                  aria-expanded="false" aria-controls="collapsePassport">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapsePassport">
              <div class="form-box">
                <form>
                  <input name="passport" type="text" class="form-control ot-input" placeholder="{{ ___('common.q963687596') }}" />
                  <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.blood_group') }}</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="#collapseBloodGroup"
                  aria-expanded="false" aria-controls="collapseBloodGroup">
                  {{ ___('common.edit') }}
                </button>
              </div>
            </div>
            <div class="collapse" id="collapseBloodGroup">
              <div class="form-box">
                <form>
                  <input name="blood_group" type="text" class="form-control ot-input" placeholder="{{ ___('common.a_posative') }}" />
                  <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