@php
    use App\Http\Controllers\ModCronos;
    use Illuminate\Support\Facades\Crypt;


@endphp
<style>


    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");


    /*===============================================
    1. General
    ===============================================*/
    .switcher-box a {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 10px;
        padding: 3px;
        cursor: pointer;
        background: #FFF;

        -webkit-border-radius: 50%;
        border-radius: 50%;

        -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    }

    .switcher-box a span {
        display: block;
        width: 100%;
        height: 100%;

        -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    .switcher-box a.active {
        background: #000;
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
    }

    .switcher-box a.active span {
        border-color: #BBB;
    }

    .switcher-box a.skin-turquoise span {
        background: #1ABC9C;
    }


    /*===============================================
    2. Tabbed Styles
    ===============================================*/

    .tabbed {
        width: 100%;
        min-width: 220px;
        margin: 0 auto;
        /*border-bottom: 4px solid #000;*/
        /* overflow: hidden;*/
        overflow: hidden;
        transition: border 250ms ease;
    }

    .tabbed ul {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        float: left;
         padding-left: 10px;
        list-style-type: none;
        display: flex;
    }

    .tabbed ul * {
        margin: 0px;
        padding: 0px;
    }

    .tabbed ul li {
        display: block;
        float: right;
        padding: 10px 24px 8px;
        background-color: #FFF;
        /*margin-right: 46px;*/
        margin-right: 28px;
        z-index: 2;
        position: relative;
        cursor: pointer;
        color: #777;

        text-transform: uppercase;
        font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;
        transition: all 250ms ease;
    }

    .tabbed ul li:before,
    .tabbed ul li:after {
        display: block;
        content: " ";
        position: absolute;
        top: 0;
        height: 100%;
        /*width: 44px;*/
        width: 24px;
        background-color: #FFF;
        transition: all 250ms ease;
    }

    .tabbed ul li:before {
        /*  right: -24px;*/
        right: -12px;
        transform: skew(30deg, 0deg);
        /*box-shadow: rgba(0, 0, 0, .1) 3px 2px 5px, inset rgba(255, 255, 255, .09) -1px 0;*/

        box-shadow: rgba(0, 0, 0, 0.04) 5px 2px 5px, inset rgba(255, 255, 255, .09) -1px 0;
    }

    .tabbed ul li:after {
        /*   left: -24px;*/
        left: -8px;
        /*   transform: skew(-30deg, 0deg);*/
        /*box-shadow: rgba(0, 0, 0, .1) -3px 2px 5px, inset rgba(255, 255, 255, .09) 1px 0;*/
        box-shadow: rgba(0, 0, 0, .04) -5px 2px 5px, inset rgba(255, 255, 255, .09) 1px 0;
    }

    .tabbed ul li:hover,
    .tabbed ul li:hover:before,
    .tabbed ul li:hover:after {
        background-color: #F4F7F9;
        color: #444;
    }

    .tabbed ul li.active {
        z-index: 3;
    }

    .tabbed ul li.active,
    .tabbed ul li.active:before,
    .tabbed ul li.active:after {
        background-color: #000;
        color: #fff;
    }


    /*----- Round Tabs -----*/
    .tabbed.tab-round ul li {
        border-radius: 12px 8px 0 0;
    }

    .tabbed.tab-round ul li.title {
        border-radius: 12px 8px 0 0;
    }

    .tabbed.tab-round ul li:before {
        border-radius: 0 8px 0 0;
    }

    .tabbed.tab-round ul li.title:before {
        border-radius: 12px 8px 0 0;
    }

    .tabbed.tab-round ul li:after {
        border-radius: 12px 0 0 0;
    }

    .tabbed.tab-round ul li.title:after {
        border-radius: 12px 0 0 0;
        width: 0px;
    }

    /*----- Skins -----*/
    .tabbed[class*="skin-"] ul li {
        color: #FFF;
        text-shadow: rgba(0, 0, 0, .1) 0 1px;
    }

    .tabbed.skin {
        /*  border-bottom-color: #1ABC9C;
          border-bottom: 2px solid #1E88E5;*/
    }

    .tabbed.skin ul li,
    .tabbed.skin ul li:before,
    .tabbed.skin ul li:after {
        /*background-color: #34D6B6;*/
        background-color: var(--cor-themestyle);
        color: #1E88E5;

    }

    .tabbed.skin ul li.title,
    .tabbed.skin ul li.title:before,
    .tabbed.skin ul li.title:after {
        background: #0000;
        box-shadow: none;
        margin: 0px;
    }

    .tabbed.skin ul li:hover,
    .tabbed.skin ul li:hover:before,
    .tabbed.skin ul li:hover:after {
        background-color: #A7D1F7;
        color: #fff;
    }


    .tabbed.skin ul li.active,
    .tabbed.skin ul li.active:before,
    .tabbed.skin ul li.active:after {
        /*background-color: #1ABC9C;*/
        background-color: #1E88E5;
        color: #fff;

    }

    .tabbed-container {
        border-top: 1px solid #1E88E5;
        border-radius: 0 15px 15px 15px;
    }




    .tabbed-container {
        background-color: var(--cor-themestyle);
        margin-bottom: 50px;
        padding: 20px 25px;

    }


</style>
<style>
    .ozifolder {
        display: flex;
    }

    .ozifolder .button-left {
        background-color: #fff;
        display: inline-flex;
        width: 40px;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    .ozifolder .button-left .btn{
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .ozifolder .button-right {
        background-color: #fff;
        position: relative;
        z-index: 5;
        display: inline-flex;
        width: 40px;
    }

    .ozifolder .button-right .btn{
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
     .ozifolder .title {
        display: inline-flex;
        width: 130px;
        padding: 10px 10px 0px 10px;

    }

    .ozifolder .folders {
        background-color: #4c1130;

        display: inline-flex;
        width: calc(100% - 215px);
    }



</style>
<div style="width: 100%; background-color: #0b97c4">fff</div>
<div class="ozifolder" id="negotiacion">
    <div class="button-left">
        <button type="button" title="Atualiza propostas"
                class="btn waves-effect waves-light btn-outline-themecolor btn-negociacao  text-themecolor-inverse"
        >
            &nbsp;<i class="fa fa-angle-double-left  text-themecolor-inverse text-themecolor-inverse"></i>&nbsp;

        </button>
    </div>
    <div class="title text-themecolor">
        NEGOCIAÇÃO:
    </div>
    <div class="folders">
        <div class='tabbed skin tab-round' id='skinable'>
            <ul>
                <li>16</li>
                <li>15</li>
                <li class='active'>14</li>
                <li>13</li>
                <li>10</li>
                <li>8</li>
                <li>7</li>
                <li>6</li>

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


    <div class="button-right text-right">
        <button type="button" title="Atualiza propostas"
                class="btn waves-effect waves-light btn-outline-themecolor btn-negociacao  text-themecolor-inverse"
        >
            &nbsp;<i class="fa fa-angle-double-right  text-themecolor-inverse " style="color: coral;"></i>&nbsp;

        </button>
    </div>
</div>

<br><br><br>
<div class='tabbed skin tab-round' id='skinable'>
    <ul>
        <li class="title">Negociação:</li>
        <li>16</li>
        <li>15</li>
        <li class='active'>14</li>
        <li>13</li>
        <li>10</li>
        <li>8</li>
        <li>7</li>
        <li>6</li>

    </ul>
</div>
<button id="slideLeft" type="button">Slide left</button>
<button id="slideRight" type="button">Slide right</button>
<div class="tabbed-container skin">

    CARDSSS
    conteudo
</div>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        var tabs = document.querySelectorAll('.tabbed li');
        var switchers = document.querySelectorAll('.switcher-box a');
        var skinable = document.getElementById('skinable');
        console.log(tabs, switchers, skinable)

        for (var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].addEventListener("click", function () {
                if (this.classList.contains('active'))
                    return;

                var parent = this.parentNode,
                    innerTabs = parent.querySelectorAll('li');

                for (var index = 0, iLen = innerTabs.length; index < iLen; index++) {
                    innerTabs[index].classList.remove('active');
                }

                this.classList.add('active');
            });
        }

        for (var i = 0, len = switchers.length; i < len; i++) {
            switchers[i].addEventListener("click", function () {
                if (this.classList.contains('active'))
                    return;

                var parent = this.parentNode,
                    innerSwitchers = parent.querySelectorAll('a'),
                    skinName = this.getAttribute('skin');

                for (var index = 0, iLen = innerSwitchers.length; index < iLen; index++) {
                    innerSwitchers[index].classList.remove('active');
                }

                this.classList.add('active');
                skinable.className = 'tabbed tab-round ' + skinName;
            });
        }
    });

    //BOTAO DA BARRA DE ROLAGEM
    const buttonRight = document.getElementById('slideRight');
    const buttonLeft = document.getElementById('slideLeft');

    buttonRight.onclick = function () {
        document.getElementById('skinable').scrollLeft += 40;
    };
    buttonLeft.onclick = function () {
        document.getElementById('skinable').scrollLeft -= 40;
    };

    // window.addEventListener('scroll',(event) => {
    //     console.log('1 Scrolling...',event);
    // });
    // window.getElementById('skinable').onscroll = function(event) {
    //     console.log('2 Scrolling...',event);
    // };
    // let div = document.getElementById('skinable');
    // div.onscroll = function(event) {
    //     console.log('3 Scrolling...',event);
    // };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    var scroll = $('#skinable').scroll()
    console.log(scroll, scroll[0].scrollWidth, scroll[0].scrollLeftMax);

    $('#negotiationFolder .button-left').on('click',function (){
        document.getElementById('skinable').scrollLeft += 40;
    });
    $('#negotiationFolder .button-right').on('click',function (){
        document.getElementById('skinable').scrollLeft -= 40;

    });
</script>