@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">{{ ___('common.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 active" 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">Johnney Depp</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.johnney_depp') }}" />
                                        <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.mobile_number') }}</h2>
                                    <p class="paragraph">+880 (698) 324 986</p>
                                </div>
                                <div class="align-self-center">
                                    <button type="button" class="btn-edit" data-bs-toggle="collapse"
                                        data-bs-target="#collapseMobile" aria-expanded="false"
                                        aria-controls="collapseMobile">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseMobile">
                                <div class="form-box">
                                    <form>
                                        <input name="mobile" type="text" class="form-control ot-input"
                                            placeholder="{{ ___('common.880_698_324_986') }}" />
                                        <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.relationship_with_employee') }}</h2>
                                    <p class="paragraph">Brother</p>
                                </div>
                                <div class="align-self-center">
                                    <button type="button" class="btn-edit" data-bs-toggle="collapse"
                                        data-bs-target="#collapseMobileRelationshipWithEmployee" aria-expanded="false"
                                        aria-controls="collapseMobileRelationshipWithEmployee">
                                        {{ ___('common.edit') }}
                                    </button>
                                </div>
                            </div>
                            <div class="collapse" id="collapseMobileRelationshipWithEmployee">
                                <div class="form-box">
                                    <form>
                                        <input name="relationship_with_employee" type="text"
                                            class="form-control ot-input" placeholder="{{ ___('common.brother') }}" />
                                        <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