{{-- <style>
    /* Scrollable Container */
    .icon-container {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        white-space: nowrap;
        padding: 10px;
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
        position: relative;
    }

    /* Custom Scrollbar */
    .icon-container::-webkit-scrollbar {
        height: 5px;
    }

    .icon-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .icon-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Icons */
    .icon {
        width: 40px;
        height: 40px;
        background-color: #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.3s;
    }

    .icon:hover {
        background: #ccc;
    }

</style> --}}
{{-- <div class="icon-container">
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
    <a type="button" class="p-0 m-0 text-decoration-none text-primary"
       data-bs-toggle="tooltip" data-bs-placement="top"
       data-bs-title="Genel Bilgiler">
        <div class="icon">
            <i class="fa-solid fa-genderless"></i>
        </div>
    </a>
</div> --}}



<ul class="nav nav-tabs flex-column main-tab">
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'bilgi') {{ 'active' }} @endif"
            href="bilgi" datax-bs-toggle="tab"><i class="fe fe-info"></i>Genel Bilgiler<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'odeme-secenekleri') {{ 'active' }} @endif"
            href="odeme-secenekleri" dataaxbs-toggle="tab"><i class="fe fe-credit-card"></i>Ödeme Seçenekleri<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'islemler') {{ 'active' }} @endif"
            href="islemler" dataaxbs-toggle="tab"> <i class="fe fe-shopping-cart"></i>Satış İşlemleri<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'hakedis-odeme-talepleri') {{ 'active' }} @endif"
            href="hakedis-odeme-talepleri" dataaxbs-toggle="tab"><i class="fe fe-check-square"></i>Hakediş Ödeme
            Talepleri<i class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'b2c') {{ 'active' }} @endif"
            href="b2c" dataaxbs-toggle="tab"><i class="fe fe-user"></i>Bireysel İşlemler<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'b2b') {{ 'active' }} @endif"
            href="b2b" dataaxbs-toggle="tab"><i class="fe fe-briefcase"></i>Kurumsal İşlemler<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'para-yatirma-hareketleri') {{ 'active' }} @endif"
            href="para-yatirma-hareketleri" dataaxbs-toggle="tab"><i class="fe fe-trending-up"></i>Para Yatırma
            Hareketleri<i class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'link-ile-odeme') {{ 'active' }} @endif"
            href="link-ile-odeme" dataaxbs-toggle="tab"> <i class="fe fe-link"></i>Link ile Ödeme<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'link-ile-odeme-gecmisi') {{ 'active' }} @endif"
            href="link-ile-odeme-gecmisi" dataaxbs-toggle="tab"><i class="fe fe-clock"></i>Link ile Ödeme Geçmişi<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'ip-tanimlama') {{ 'active' }} @endif"
            href="ip-tanimlama" datax-bs-toggle="tab"> <i class="fe fe-map-pin"></i>IP Tanımlama<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'faturalandirma-bilgileri') {{ 'active' }} @endif"
            href="faturalandirma-bilgileri" datax-bs-toggle="tab"><i class="fe fe-file-text"></i>Faturalama<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'banka-hesap-bilgileri') {{ 'active' }} @endif"
            href="banka-hesaplari" datax-bs-toggle="tab"><i class="fas fa-bank"></i>Banka Hesapları Yönetimi<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'evraklar') {{ 'active' }} @endif"
            href="evraklar" datax-bs-toggle="tab"> <i class="fe fe-file"></i>Evraklar<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'sozlesme') {{ 'active' }} @endif"
            href="sozlesme" datax-bs-toggle="tab"><i class="fe fe-file-text"></i>Sözleşmeler<i
                class="fe fe-chevron-right"></i></a>
    </li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'api') {{ 'active' }} @endif"
            href="api" datax-bs-toggle="tab"><i class="fe fe-code"></i>API Entegrasyonu<i
                class="fe fe-chevron-right"></i></a>
    </li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'komisyon-yonetimi') {{ 'active' }} @endif"
            href="komisyon-yonetimi" datax-bs-toggle="tab"><i class="fe fe-percent"></i>Komisyon Yönetimi<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a class="nav-link @if ($page == 'pos') {{ 'active' }} @endif"
            href="pos" datax-bs-toggle="tab"> <i class="fe fe-credit-card"></i>POS Yönetimi<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'satis-islem-limitleri') {{ 'active' }} @endif"
            href="satis-islem-limitleri" datax-bs-toggle="tab"> <i class="fe fe-bar-chart-2"></i>Satış İşlem
            Limitleri<i class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'tekrarlayan-odemeler') {{ 'active' }} @endif"
            href="tekrarlayan-odemeler" datax-bs-toggle="tab"><i class="fe fe-repeat"></i>Tekrarlı Ödemeler<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'karti-kara-listeye-ekleme') {{ 'active' }} @endif"
            href="karti-kara-listeye-ekleme" datax-bs-toggle="tab"> <i class="fe fe-slash"></i>Kara Liste Kartları<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'uye-isyeri-kullanici-ayarlari') {{ 'active' }} @endif"
            href="uye-isyeri-kullanici-ayarlari" datax-bs-toggle="tab"><i class="fe fe-users"></i>Üye İş Yeri
            Kullanıcı Ayarları<i class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'dijital-cuzdanlar') {{ 'active' }} @endif" href="dijital-cuzdanlar"
            datax-bs-toggle="tab"><i class="fe fe-smartphone"></i>Dijital Cüzdanlar<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'alt-uye-isyeri-pf') {{ 'active' }} @endif" href="alt-uye-isyeri-pf"
            datax-bs-toggle="tab"><i class="fe fe-plus-circle"></i>Alt İşyeri Kayıt<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'alt-bayi-listesi') {{ 'active' }} @endif" href="alt-bayi-listesi"
            datax-bs-toggle="tab"><i class="fe fe-list"></i>Alt Bayi Listesi<i class="fe fe-chevron-right"></i></a>
    </li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'bildirimler') {{ 'active' }} @endif" href="bildirimler"
            datax-bs-toggle="tab"> <i class="fe fe-bell"></i>Bildirimler<i class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'fiziksel-terminaller') {{ 'active' }} @endif"
            href="fiziksel-terminaller" datax-bs-toggle="tab"><i class="fe fe-hard-drive"></i>Fiziksel Terminaller<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'tek-cekim-ucretleri') {{ 'active' }} @endif"
            href="tek-cekim-ucretleri" datax-bs-toggle="tab"><i class="fe fe-tag"></i>Tek Çekim Ücretleri<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'ticari-kart') {{ 'active' }} @endif" href="ticari-kart"
            datax-bs-toggle="tab"><i class="fe fe-credit-card"></i>Ticari Kartlar<i
                class="fe fe-chevron-right"></i></a></li>
    <li class="nav-item list-border"><a
            class="nav-link @if ($page == 'ozel-notlar') {{ 'active' }} @endif" href="ozel-notlar"
            datax-bs-toggle="tab"><i class="fe fe-file-text"></i>Özel Notlar<i class="fe fe-chevron-right"></i></a>
    </li>
</ul>

{{-- <script>
    // Mouse wheel ile yatay kaydırma
    const container = document.querySelector('.icon-container');
    container.addEventListener('wheel', (e) => {
        e.preventDefault();
        container.scrollLeft += e.deltaY;
    });
</script> --}}