    <div class="page-header">
      <div class="header-wrapper row m-0">
        <div class="header-logo-wrapper col-auto p-0">
          <div class="logo-wrapper"><a href="index.html"><img class="img-fluid for-light"
                src="{{ asset('assets/images/logo/logo.png') }}" alt=""><img class="img-fluid for-dark"
                src="{{ asset('assets/images/logo/logo.png') }}" alt=""></a></div>
          <div class="toggle-sidebar">
            <svg class="sidebar-toggle">
              <use href="{{ asset('assets/svg/icon-sprite.svg') }}#stroke-animation"></use>
            </svg>
          </div>
        </div>
        <form class="col-sm-4 form-inline search-full d-none d-xl-block" action="#" method="get">
          <div class="form-group">
            <div class="Typeahead Typeahead--twitterUsers">
              <div class="u-posRelative">
                <input class="demo-input Typeahead-input form-control-plaintext w-100" type="text"
                  placeholder="اكتب للبحث ..." name="q" title="" autofocus>
                <svg class="search-bg svg-color">
                  <use href="{{ asset('assets/svg/icon-sprite.svg') }}#search"></use>
                </svg>
              </div>
              <div class="Typeahead-menu"> </div>
            </div>
          </div>
        </form>
        <div class="nav-right col-xl-8 col-lg-12 col-auto pull-right right-header p-0">
          <ul class="nav-menus">
            <li class="serchinput">
              <div class="serchbox">
                <svg>
                  <use href="{{ asset('assets/svg/icon-sprite.svg') }}#search"></use>
                </svg>
              </div>
              <div class="form-group search-form">
                <input type="text" placeholder="Search here...">
              </div>
            </li>
            <li class="onhover-dropdown">
              <div class="notification-box">
                <svg>
                  <use href=" {{ asset('assets/svg/icon-sprite.svg') }}#Bell"></use>
                </svg>
                <span class="rounded-pill badge-danger"></span>
              </div>
              <div class="onhover-show-div notification-dropdown">
                <h6 class="f-18 mb-0 dropdown-title">الإشعارات</h6>
                <div class="notification-card">
                  <ul>
                    <li>
                      <div class="user-notification">
                        <div><img src="{{ asset('assets/images/avtar/2.jpg') }}" alt="avatar"></div>
                        <div class="user-description"><a href="template/letter-box.html">
                            <h4>موعد سداد عقد</h4>
                          </a><span>اليوم 11:45م</span></div>
                      </div>
                      <div class="notification-btn">

                      </div>
                      <div class="show-btn"><a href="template/index.html"> <span>عرض</span></a></div>
                    </li>
                    <li>
                      <div class="user-notification">
                        <div><img src="{{ asset('assets/images/avtar/17.jpg') }}" alt="avatar"></div>
                        <div class="user-description"><a href="template/letter-box.html">
                            <h4>تم انشاء نسخة جديدة من العقد</h4>
                          </a><span>اليوم 01:05م</span></div>
                      </div>
                      <div class="notification-btn">

                      </div>
                      <div class="show-btn"><a href="template/index.html"> <span>عرض</span></a></div>
                    </li>
                    <li>
                      <div class="user-notification">
                        <div> <img src="{{ asset('assets/images/avtar/18.jpg') }}" alt="avatar"></div>
                        <div class="user-description"><a href="template/letter-box.html">
                            <h4>تم انشاء نسخة جديدة من العقد</h4>
                          </a><span>اليوم 06:55م</span></div>
                      </div>
                      <div class="notification-btn">

                      </div>
                      <div class="show-btn"><a href="template/index.html"> <span>عرض</span></a></div>
                    </li>
                    <li>
                      <div class="user-notification">
                        <div><img src="{{ asset('assets/images/avtar/19.jpg') }}" alt="avatar"></div>
                        <div class="user-description"><a href="template/letter-box.html">
                            <h4>تم انشاء نسخة جديدة من العقد</h4>
                          </a><span>اليوم 06:55م</span></div>
                      </div>
                      <div class="notification-btn">

                      </div>
                      <div class="show-btn"> <a href="template/index.html"><span>عرض</span></a></div>
                    </li>
                    <li><a class="f-w-700" href="template/letter-box.html">عرض الكل</a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="onhover-dropdown">
              <svg>
                <use href=" {{ asset('assets/svg/icon-sprite.svg') }}#Bookmark"></use>
              </svg>
              <div class="onhover-show-div bookmark-flip">
                <div class="flip-card">
                  <div class="flip-card-inner">
                    <div class="front">
                      <h6 class="f-18 mb-0 dropdown-title">اختصارات</h6>
                      <ul class="bookmark-dropdown">
                        <li>
                          <div class="row">
                            <div class="col-4 text-center"><a href="template/form-validation.html">
                                <div class="bookmark-content">
                                  <div class="bookmark-icon bg-light-primary"><i data-feather="file-text"></i></div>
                                  <span>النماذج</span>
                                </div>
                              </a></div>
                            <div class="col-4 text-center"><a href="template/user-profile.html">
                                <div class="bookmark-content">
                                  <div class="bookmark-icon bg-light-secondary"><i data-feather="user"></i></div>
                                  <span>الملف الشخصي</span>
                                </div>
                              </a></div>
                            <div class="col-4 text-center"><a href="template/bootstrap-basic-table.html">
                                <div class="bookmark-content">
                                  <div class="bookmark-icon bg-light-warning"> <i data-feather="server"> </i></div>
                                  <span>الجداول</span>
                                </div>
                              </a></div>
                          </div>
                        </li>
                        <li class="text-centermedia-body"> <a class="flip-btn f-w-700" id="flip-btn"
                            href="javascript:void(0)">إضافة اختصار جديد</a></li>
                      </ul>
                    </div>
                    <div class="back">
                      <ul>
                        <li>
                          <div class="bookmark-dropdown flip-back-content">
                            <input type="text" placeholder=" ابحث ...">
                          </div>
                        </li>
                        <li><a class="f-w-700 d-block flip-back" id="flip-back" href="javascript:void(0)">رجوع</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li class="onhover-dropdown">
              <div class="message position-relative">
                <svg>
                  <use href="assets/svg/icon-sprite.svg#Message"></use>
                </svg>
                <span class="rounded-pill badge-danger"></span>
              </div>
              <div class="onhover-show-div message-dropdown">
                <h6 class="f-18 mb-0 dropdown-title">الرسائل</h6>
                <ul>
                  <li>
                    <div class="d-flex align-items-start">
                      <div class="message-img bg-light-primary"><img src="assets/images/user/3.jpg" alt=""></div>
                      <div class="flex-grow-1">
                        <h5><a href="template/letter-box.html">Emay Walter</a></h5>
                        <p>هل تريد الذهاب لمشاهدة الفيلم؟</p>
                      </div>
                      <div class="notification-right"><i data-feather="x"></i></div>
                    </div>
                  </li>
                  <li>
                    <div class="d-flex align-items-start">
                      <div class="message-img bg-light-primary"><img src="assets/images/user/6.jpg" alt=""></div>
                      <div class="flex-grow-1">
                        <h5> <a href="template/letter-box.html">Jason Borne</a></h5>
                        <p>شكرا لتقييمك لنا.</p>
                      </div>
                      <div class="notification-right"><i data-feather="x"></i></div>
                    </div>
                  </li>
                  <li>
                    <div class="d-flex align-items-start">
                      <div class="message-img bg-light-primary"><img src="assets/images/user/10.jpg" alt=""></div>
                      <div class="flex-grow-1">
                        <h5> <a href="template/letter-box.html">Sarah Loren</a></h5>
                        <p>ما هو تحديث تقرير المشروع؟</p>
                      </div>
                      <div class="notification-right"><i data-feather="x"></i></div>
                    </div>
                  </li>
                  <li> <a class="f-w-700" href="template/private-chat.html">عرض الكل</a></li>
                </ul>
              </div>
            </li>
            <!-- <li class="cart-nav onhover-dropdown">
              <div class="cart-box">
                <svg>
                  <use href="assets/svg/icon-sprite.svg#Buy"></use>
                </svg>
              </div>
              <div class="cart-dropdown onhover-show-div">
                <h6 class="f-18 mb-0 dropdown-title">Cart</h6>
                <ul>
                  <li>
                    <div class="d-flex"><img class="img-fluid b-r-5 img-60" src="assets/images/ecommerce/05.jpg"
                        alt="">
                      <div class="flex-grow-1"><span>Women's Track Suit</span>
                        <div class="qty-box">
                          <div class="input-group"><span class="input-group-prepend">
                              <button class="btn quantity-left-minus" type="button" data-type="minus"
                                data-field="">-</button></span>
                            <input class="form-control input-number" type="text" name="quantity" value="1"><span
                              class="input-group-prepend">
                              <button class="btn quantity-right-plus" type="button" data-type="plus"
                                data-field="">+</button></span>
                          </div>
                        </div>
                        <h6 class="font-primary">$500</h6>
                      </div>
                      <div class="close-circle"><a class="bg-danger" href="#"><i data-feather="x"></i></a></div>
                    </div>
                  </li>
                  <li>
                    <div class="d-flex"><img class="img-fluid b-r-5 img-60" src="assets/images/ecommerce/02.jpg"
                        alt="">
                      <div class="flex-grow-1"><span>Men's Jacket</span>
                        <div class="qty-box">
                          <div class="input-group"><span class="input-group-prepend">
                              <button class="btn quantity-left-minus" type="button" data-type="minus"
                                data-field="">-</button></span>
                            <input class="form-control input-number" type="text" name="quantity" value="1"><span
                              class="input-group-prepend">
                              <button class="btn quantity-right-plus" type="button" data-type="plus"
                                data-field="">+</button></span>
                          </div>
                        </div>
                        <h6 class="font-primary">$500.00</h6>
                      </div>
                      <div class="close-circle"><a class="bg-danger" href="#"><i data-feather="x"></i></a></div>
                    </div>
                  </li>
                  <li>
                    <div class="d-flex"><img class="img-fluid b-r-5 img-60" src="assets/images/ecommerce/02.jpg"
                        alt="">
                      <div class="flex-grow-1"><span>Boys T-shirt Track Pants</span>
                        <div class="qty-box">
                          <div class="input-group"><span class="input-group-prepend">
                              <button class="btn quantity-left-minus" type="button" data-type="minus"
                                data-field="">-</button></span>
                            <input class="form-control input-number" type="text" name="quantity" value="1"><span
                              class="input-group-prepend">
                              <button class="btn quantity-right-plus" type="button" data-type="plus"
                                data-field="">+</button></span>
                          </div>
                        </div>
                        <h6 class="font-primary">$500.00</h6>
                      </div>
                      <div class="close-circle"><a class="bg-danger" href="#"><i data-feather="x"></i></a></div>
                    </div>
                  </li>
                  <li class="total">
                    <h6 class="mb-0">Order Total :<span class="f-right">$1000.00</span></h6>
                  </li>
                  <li class="text-center"><a class="d-block mb-3 view-cart f-w-700" href="template/cart.html">Go to
                      your cart</a><a class="btn btn-primary view-checkout" href="template/checkout.html">Checkout
                    </a></li>
                </ul>
              </div>
            </li> -->
            <!-- Dark and light mode -->
            <!-- <li>
              <div class="mode">
                <svg>
                  <use href="assets/svg/icon-sprite.svg#moon"></use>
                </svg>
              </div>
            </li> -->
            <!-- <li class="language-nav">
              <div class="translate_wrapper">
                <div class="current_lang">
                  <div class="lang"><i class="flag-icon flag-icon-gb"></i><span class="lang-txt">EN</span></div>
                </div>
                <div class="more_lang">
                  <div class="lang selected" data-value="en"><i class="flag-icon flag-icon-us"></i><span
                      class="lang-txt">English<span> (US)</span></span></div>
                  <div class="lang" data-value="de"><i class="flag-icon flag-icon-de"></i><span
                      class="lang-txt">Deutsch</span></div>
                  <div class="lang" data-value="es"><i class="flag-icon flag-icon-es"></i><span
                      class="lang-txt">Español</span></div>
                  <div class="lang" data-value="fr"><i class="flag-icon flag-icon-fr"></i><span
                      class="lang-txt">Français</span></div>
                  <div class="lang" data-value="pt"><i class="flag-icon flag-icon-pt"></i><span
                      class="lang-txt">Português<span> (BR)</span></span></div>
                  <div class="lang" data-value="cn"><i class="flag-icon flag-icon-cn"></i><span
                      class="lang-txt">简体中文</span></div>
                  <div class="lang" data-value="ae"><i class="flag-icon flag-icon-ae"></i><span class="lang-txt">لعربية
                      <span> (ae)</span></span></div>
                </div>
              </div>
            </li> -->
            <li class="profile-nav onhover-dropdown pe-0 py-0">
              <div class="d-flex align-items-center profile-media">
                <img class="b-r-25 img-fluid" src="{{ asset('assets/images/logo/profile.png') }}" alt="profile picture" width="48">
                <div class="flex-grow-1   ">
                  <p class=" mb-0 font-nunito">

                    <svg>
                      <use href="{{ asset('assets/svg/icon-sprite.svg') }}#header-arrow-down"></use>
                    </svg>
                  </p>
                </div>
              </div>
              <ul class="profile-dropdown onhover-show-div">
                <li><a href="profile"><i data-feather="user"></i><span>الحساب</span></a></li>
                <li><a href="#"><i data-feather="mail"></i><span>صندوق الوارد</span></a></li>
                <li><a href="#"><i data-feather="file-text"></i><span>لوحة المهام</span></a></li>
                <li><a href="#"><i data-feather="settings"></i><span>الإعدادات</span></a>
                </li>

                <!-- عنصر تسجيل الخروج -->
                <li>
                  <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                    @csrf
                  </form>

                  <a href="javascript:void(0);" onclick="confirmLogout()" class="d-flex align-items-center gap-2">
                    <i data-feather="log-out"></i>
                    <span>تسجيل الخروج</span>
                  </a>
                </li>


                <!-- سكربت التأكيد -->
                <script>
                  function confirmLogout() {
                    Swal.fire({
                      title: 'هل أنت متأكد؟',
                      text: 'سيتم تسجيل خروجك من النظام.',
                      icon: 'warning',
                      showCancelButton: true,
                      confirmButtonText: 'نعم، خروج',
                      cancelButtonText: 'إلغاء',
                      reverseButtons: true
                    }).then((result) => {
                      if (result.isConfirmed) {
                        document.getElementById('logout-form').submit();
                      }
                    });
                  }
                </script>

              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>