@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <form class="filterForm">
        <div class="filters row">
            <div class="eachFilter operation col-sm-2">
                <label>{{ _mt($moduleId, 'DownLineList.user') }}</label>
            </div>
            <div class="eachFilter operation col-md-3 col-sm-3">
                <input type="text" class="userFiller form-control"
                       placeholder="{{ _mt($moduleId, 'DownLineList.enter_username') }}"/>
                <input type="hidden" name="filters[user_id]" id="user_id">
            </div>
        </div>
        <div class="filters row "style="margin-top:15px;">
            <div class="eachFilter operation col-sm-2">
                <label>{{ _mt($moduleId,'DownLineList.level') }}</label>
            </div>
            <div class="eachFilter operation col-md-3 col-sm-3">
                <input type="hidden" name="user"
                       value="{{  getScope() == 'employee' ? getAdminUser()->id : loggedId() }}">
                <select name="filters[level]">
                    <option value="">{{ _mt($moduleId, 'DownLineList.all') }}</option>
                    @for($i = 1; $i <= $maximumDownLine; $i++)
                        <option value="{{$i}}">{{ _mt($moduleId,'DownLineList.level')}} {{$i}} </option>
                    @endfor
                </select>
            </div>
            <div class="eachFilter operation col-sm-2">
                <label>{{ _mt($moduleId,'DownLineList.type') }}</label>
            </div>
            <div class="eachFilter operation col-md-3 col-sm-3">
                <select name="filters[type]">
                    <option value="placement">{{ _mt($moduleId, 'DownLineList.placement') }}</option>
                    <option value="sponsor">{{ _mt($moduleId, 'DownLineList.sponsor') }}</option>
                </select>
            </div>
        </div>
        <div class="filters row" style="margin-top:15px;">
            <div class="eachFilter operation col-md-2 col-sm-2">
                <button type="button" class="btn dark filterRequest ladda-button" data-style="contract">
                    <i class="fa fa-filter"></i>{{ _mt($moduleId, 'DownLineList.filter') }}
                </button>
            </div>
        </div>
    </form>

    <div class="downLineListWrapper"></div>

    <script>
        $(function () {
            var selectedCallback = function (target, id, name) {

                $('.userFiller').val(name);
                $('#user_id').val(id);

            };
            var options = {
                target: '.userFiller',
                route: '{{ route("user.api") }}',
                action: 'getUsers',
                name: 'username',
                selectedCallback: selectedCallback,
                clearCallback: function (element) {
                    element.siblings('input[name="filters[user_id]"]').val('')
                }
            };
            $('.userFiller').ajaxFetch(options);

            $('select').select2({
                width: '100%'
            });
            Ladda.bind('.ladda-button');

            $('.filterRequest').click(function () {
                loadDownlineList();
            });
            $('.filterRequest').trigger('click');
        });

        function loadDownlineList(route) {
            simulateLoading('.downLineListWrapper');
            route = route ? route : '{{ scopeRoute('downline.table') }}';
            $.post(route, $('.filterForm').serialize(), function (response) {
                $('.downLineListWrapper').html(response);
                Ladda.stopAll();
            }).fail(function () {
                toastr.error("{{ _mt($moduleId,'DownLineList.no_downlines') }}");
                Ladda.stopAll();
            });
        }
    </script>
    <style>
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #444;
            line-height: 24px !important;
        }
    </style>
@endsection