@extends('manage.tasks.form')

@section('taskData')
    <div class="form-group depen- wrap-enabled  " >
        <label for="percent" class=" control-label "> New Cashback Percent <span class="asterix"> * </span></label>
        <?php if( !isset($row['data']['newCashbackPercent']) )  $row['data']['newCashbackPercent']  = null; 	  ?>
            <input  type='text' name='data[newCashbackPercent]' id='newCashbackPercent' value='{{ $row['data']['newCashbackPercent'] }}'
                    required class='form-control input-sm ' />
    </div>
    <div class="form-group depen- wrap-stores_type  " >
        <label for="percent" class=" control-label "> Stores Type <span class="asterix"> * </span></label>
        <?php if( !isset($row['data']['storesType']) )  $row['data']['storesType']  = 'all'; 	  ?>
            <select name="data[storesType]" id="storesType">
                <option value="all">All</option>
                <option value="except">Except</option>
                <option value="only">Only</option>
            </select>
    </div>
    <div class="form-group depen- wrap-stores  " style="display: <?= $row['data']['storesType'] != 'all' ? 'block' : 'none' ?>" >
        <label for="percent" class=" control-label "> Stores <span class="asterix"> * </span></label>
        <?php if( !isset($row['data']['stores']) )  $row['data']['stores']  = null; 	  ?>
        <?php $row['data']['stores'] = trim($row['data']['stores'], '[]');      ?>
        <select name='data[stores][]' multiple rows='5' id='storesInput' class='select2 '  data-placeholder='Select Stores'   placeholder='Select Stores'      ></select>
    </div>

    <script>
        $(document).ready(function() {
            $("#storesType").change(function () {
                if ($("#storesType").val() == 'all')
                    $('.wrap-stores').hide();
                else
                    $('.wrap-stores').show();
            });

            $("#storesInput").select2({
                ajax: {
                    url: "{{url('/manage/brands/ajaxselect?filter=stores:id:name')}}",
                    data: function (params) {
                        return {
                            search: params.term,
                            page: params.page || 1
                        };
                    },
                    dataType: 'json',
                    processResults: function (data) {
                        data.page = data.page || 1;
                        return {
                            results: data.items.map(function (item) {
                                return {
                                    id: item.id,
                                    text: selctToJson(item, 'name')
                                };
                            }),
                            pagination: {
                                more: data.pagination
                            }
                        }
                    },
                    cache: true,
                    delay: 250
                },
                // minimumInputLength: 2,
                multiple: 1,
                width: '100%'
            });


            @if( strlen($row['data']['stores']) > 0  )
            // Fetch the preselected item, and add to the control
            var stores = $('#storesInput');
            $.ajax({
                type: 'GET',
                url: "{!! url('/manage/brands/ajaxselect?filter=stores:id:name&values='.urlencode($row['data']['stores'])) !!}",
            }).then(function (data) {
                // create the option and append to Select2
                data.items.map(function (item) {
                    var option = new Option(selctToJson(item, 'name'), item.id, true, true);
                    stores.append(option).trigger('change');

                });


                // manually trigger the `select2:select` event
                stores.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });

            stores.select2_sortable();
            @endif
        });
    </script>
@endsection