@extends('voyager::master')

@section('content')

    <div class="row"  style="justify-content: center;">

        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
            <nav class="navigation">


                <div class="nav-button-row">


                    <a class="red-item" data-toggle="modal" data-target="#delete_modal1">
                        <img src="{{ voyager_asset('icon/red-trash.svg') }}">
                        <span>
                        </span>
                    </a>

                </div>

            </nav>
            <div class="more-row flex-box">
                <div class=" more-item">
                    <ul>
                        <li>

                        </li>
                        <li>

                        </li>
                        <li>

                        </li>
                    </ul>
                    {{--                    <img src="{{ voyager_asset('icon/more.svg') }}">--}}
                </div>
                <p>
                </p>

            </div>
        </div>


        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
            <div class="row" style="width: 100%;;flex-direction: row;justify-content: space-between;align-items: center">

                <div class="col-md-6 px-2 mb-3">
                    <label class="control-label" for="typeOfShuffle">Type</label>
                    <div class="dropdown custom-selects mySelectionItem">
                        <select class="form-control typeOfShuffle2" id="typeOfShuffle" onchange="handleChangeType()">
                            <option value="-1">Select</option>
                            <option value="all">All</option>
                            <option value="video-slots">Slot</option>
                            <option value="table-games">Table games</option>
                            <option value="live-casino-table">Live casino table</option>
                            <option value="livecasino">Live casino</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <a href="{{ route('shuffle_games') }}" class="flex-box add-new shuffleLink">
                        <img src="{{voyager_asset('icon/par.svg')}}">
                        <p>
                            Shuffle games
                        </p>

                    </a>
                </div>



            </div>
        </div>

    </div>

    <script>
        setInterval(handleChangeType,1000)
        function handleChangeType(){
            let linkButton = document.querySelector('.shuffleLink')
            let url = new URL(linkButton.getAttribute('href'));
            let search_params = url.searchParams;
            if(jQuery('.typeOfShuffle2').val() === -1 || jQuery('.typeOfShuffle2').val() === 'all'){
                search_params.set('type', '');
            }else{
                search_params.set('type', jQuery('.typeOfShuffle2').val());
            }

            url.search = search_params.toString();


            linkButton.setAttribute('href',url.toString())
        }
    </script>

@endsection