@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">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 -->
                        </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 active" 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">
                            <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.department') }}</h2>
                                    <p class="paragraph">Design</p>
                                </div>
                                <div class="align-self-center">
                                    <button type="button" class="btn-edit" data-bs-toggle="collapse"
                                        data-bs-target="#collapseDepartment" aria-expanded="false"
                                        aria-controls="collapseDepartment">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseDepartment">
                                <div class="form-box">
                                    <form>
                                        <input name="department" type="text" class="form-control ot-input"
                                            placeholder="{{ ___('common.design') }}" />
                                        <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.designation') }}</h2>
                                    <p class="paragraph">Sr. UI/UX Designer</p>
                                </div>
                                <div class="align-self-center">
                                    <button type="button" class="btn-edit" data-bs-toggle="collapse"
                                        data-bs-target="#collapseDesignation" aria-expanded="false"
                                        aria-controls="collapseDesignation">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseDesignation">
                                <div class="form-box">
                                    <form>
                                        <input name="designation" type="text" class="form-control ot-input"
                                            placeholder="{{ ___('common.sr_ui_ux_designer') }}" />
                                        <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.joing_date') }}</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="#collapseJoingDate" aria-expanded="false"
                                        aria-controls="collapseJoingDate">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseJoingDate">
                                <div class="form-box">
                                    <form>
                                        <input name="joing_date" 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">Employee Type</h2>
                                    <p class="paragraph">On Probation</p>
                                </div>
                                <div class="align-self-center">
                                    <button type="button" class="btn-edit" data-bs-toggle="collapse"
                                        data-bs-target="#collapseEmployeeType" aria-expanded="false"
                                        aria-controls="collapseEmployeeType">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseEmployeeType">
                                <div class="form-box">
                                    <form>
                                        <input name="employee_type" type="text" class="form-control ot-input"
                                            placeholder="{{ ___('common.on_probation') }}" />
                                        <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">Employee ID</h2>
                                    <p class="paragraph">6099</p>
                                </div>
                                <div class="align-self-center">
                                    <button type="button" class="btn-edit" data-bs-toggle="collapse"
                                        data-bs-target="#collapseEmployeeID" aria-expanded="false"
                                        aria-controls="collapseEmployeeID">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseEmployeeID">
                                <div class="form-box">
                                    <form>
                                        <input name="employee_id" type="text" class="form-control ot-input"
                                            placeholder="{{ ___('common.6099') }}" />
                                        <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">Manager</h2>
                                    <p class="paragraph">Rasheduzzaman</p>
                                </div>
                                <div class="align-self-center">
                                    <button type="button" class="btn-edit" data-bs-toggle="collapse"
                                        data-bs-target="#collapseManager" aria-expanded="false"
                                        aria-controls="collapseManager">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseManager">
                                <div class="form-box">
                                    <form>
                                        <input name="manager" type="text" class="form-control ot-input"
                                            placeholder="{{ ___('common.rasheduzzaman') }}" />
                                        <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">Grade</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="#collapseGrade" aria-expanded="false"
                                        aria-controls="collapseGrade">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseGrade">
                                <div class="form-box">
                                    <form>
                                        <input name="grade" type="text" class="form-control ot-input" placeholder="{{ ___('common.a_plus') }}" />
                                        <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