@extends('layouts.principal')
@section('header')
<link rel="stylesheet" href="/libs/groupable-searchable-dual-listbox-transfer/icon_font/css/icon_font.css">
<link rel="stylesheet" href="/libs/groupable-searchable-dual-listbox-transfer/css/jquery.transfer.css">

@endsection
@section('titulo')
    Protótipo Dual List Box
@endsection


@section('content')
    <div class="dual-listbox1">
        Teste Dual Listbox com grupo
        <ul>
            <li>Groupable & Searchable Dual Listbox Plugin - jQuery Transfer</li>
            <li>https://www.jqueryscript.net/form/Groupable-Searchable-Dual-Listbox-Transfer.html</li>
            <li>49.5 KB</li>
            <li>Ultima atualização: 2020-08-28</li>
        </ul>
        <div class="prototipo">
            <div class="transfer"></div>
        </div>
    </div>
@endsection

@section('script')
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="/libs/groupable-searchable-dual-listbox-transfer/js/jquery.transfer.js"></script>
    <script>
        let aa = 'a';

        var items = [
    {
        "item": "jQuery",
        "value": 122
    },
    {
        "item": "AngularJS",
        "value": 132,
        "disabled": true
    },
    {
        "item": "ReactJS",
        "value": 422
    },
    {
        "item": "VueJS",
        "value": 232
    },
    {
        "item": "JavaScript",
        "value": 765
    },
    {
        "item": "Java",
        "value": 876
    },
    {
        "item": "Python",
        "value": 453
    },
    {
        "item": "TypeScript",
        "value": 125,
        "selected": true
    },
    {
        "item": "PHP",
        "value": 633
    },
    {
        "item": "Ruby on Rails",
        "value": 832
    }
];

var groupData = [
    {
        "groupName": "JavaScript",
        "groupData": [
            {
                "item": "jQuery",
                "value": 122
            },
            {
                "item": "AngularJS",
                "value": 643
            },
            {
                "item": "ReactJS",
                "value": 422
            },
            {
                "item": "VueJS",
                "value": 622
            }
        ]
    },
    {
        "groupName": "Popular",
        "groupData": [
            {
                "item": "JavaScript",
                "value": 132
            },
            {
                "item": "Java",
                "value": 112
            },
            {
                "item": "Python",
                "value": 124,
        "disabled": true
            },
            {
                "item": "TypeScript",
                "value": 121
            },
            {
                "item": "PHP",
                "value": 432
            },
            {
                "item": "Ruby on Rails",
                "value": 421,
                "disabled":true,
                "selected":true,
            }
        ]
    }
];

var settings = {
    dataArray: items
};

var settings = {
    // data item name
    itemName: "item",
    // group data item name
    groupItemName: "groupName",
    // group data array name
    groupArrayName: "groupData",
    // data value name
    valueName: "value",
    // tab text
    tabNameText: "Valores Disponíveis",
    // right tab text
    rightTabNameText: "Selecionados",
    // search placeholder text
    searchPlaceholderText: "Pesquisar",
    // items data array
    // dataArray: items,
    // group data array
    groupDataArray: groupData,
    callable: function (items) {
      // your code
    //   console.log(items);
    //   console.log(this);
    }
};
// console.log(groupData);
$(document).ready(function() {
    // console.log($(".transfer"));
    var myTransfer = $(".transfer").transfer(settings);
});
// function sleep(ms) {
//     return new Promise(resolve => setTimeout(resolve, ms));
// }
// async function demo() {
//     for (let i = 0; i < 5; i++) {
//         console.log(`Waiting ${i} seconds...`);
//         await sleep(i * 1000);
//     }
//     console.log('Done');

// }

// demo();
    </script>
@endsection