@section('script')
    <script>
        var tags_data = @json($voucher_series);

        const $new_datalayer = $(`
            <tr>
                <td>
                    <select name="voucher_series[]" class="form-control select2 select2bs4 w-100"  multiple="multiple"></select>
                </td>
                <td>
                    <input type="text" class="form-control" name="voucher_series_point[]">
                </td>
                <td><a class="btn btn-danger data-layer-del"><i class="fas fa-times"></i></a></td>
            </tr>
            `);

        // data layer
        if(!!$('#data-layer-add').get(0)) {

            @if($voucher_series_selected)
            $.each(@json($voucher_series_selected),  (k, v) => addNewDataLayer(v.series_id, '[' + v.series_id +'] '+ v.title, v.point_required, v.id))
            @endif

            $('#data-layer-add').click(()=> addNewDataLayer());

            $(document).on('click', 'a.data-layer-del', function () {
                var row = $(this).parents('tr');
                $('#data-layer-confirm-modal').modal('show');
                $('#data-layer-confirm-delete').off('click').on('click', function () {
                    row.remove();
                    $('#data-layer-confirm-modal').modal('hide');
                })
            })

        }

        function updateRewardLayers(series_selected) {
            var refs = {
                new: []
            };
            $('[name="voucher_series[]"]').each(function() {
                var row = $(this);
                var old = row.data('item_id');
                row = row.parents('tr:first');
                if (old) {
                    refs[old] = row; 
                } else {
                    refs.new.push(row);
                }
            });
            $.each(series_selected, (k, v) => {
                if (refs[v.id]) {
                    delete refs[v.id];
                    return;
                }
                $.each(refs.new, (k, el) => {
                    var series = el.find('[name="voucher_series[]"]');
                    if (series.val() == v.series_id && el.find('[name="voucher_series_point[]"]').val() == v.point_required) {
                        series.data('item_id', v.id);
                        refs.new.splice(k, 1);
                        return false;
                    }
                });
            });
        }

        function addNewDataLayer(key=null,val=null,point=null,item_id=null){

            console.log('addNewDataLayer', key, val)
            // var row = $('#data-layer-table tbody tr:last').clone();
            var row = $new_datalayer.clone();
            const id = $.now();
            row.find('select').attr('id',id).data('item_id', item_id)
            // row.find('.data-layer-del').removeClass('d-none');
            row.find('input').val('');
            $('#data-layer-table tbody').append(row);

            $('#'+id).select2({
                theme: 'bootstrap4',
                tags: true,
                tokenSeparators: [',', ' '],
                maximumSelectionLength: 1,
                insertTag: function (data, tag) {
                    // Insert the tag at the end of the results
                    data.push(tag);
                },
                createTag: function (params) {
                    var term = $.trim(params.term);
                    if (term === '') {
                        return null
                    }
                    return {
                        id: term,
                        text: term,
                        newTag: true // add additional parameters
                    }
                },
            });

            $.each(tags_data, function(k,v){
                var newOption = new Option('[' + v.series_id +'] '+ v.title, v.series_id, false, false);
                $('#'+id).append(newOption).val('').change();
            });

            if (key){
                if($("#"+id+" option[value='"+key+"']").length <= 0){
                    var newOption = new Option(key, key, false, false);
                    $('#'+id).append(newOption)
                }
                $('#'+id).val(key).change();
            }
            if(point){
                row.find('[name="voucher_series_point[]"]').val(point)
            }

        }
    </script>
@endsection
<form class="form-horizontal" method="POST"
{{--      action="{{ route('admin.settings.edit.business_account') }}"--}}
      autocomplete="off" enctype="multipart/form-data">
    @csrf

    @php $form = config('admin.settings.tracking')@endphp

    @component('admin.components.card', ['header'=> 'Rewards Marketplace',] )

{{--        @php $id = 'voucher_series'; $hasError = $errors->has($id) @endphp--}}
{{--        @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])--}}
{{--            <select name="{{$id}}" class="form-control select2">--}}
{{--                @foreach ($voucher_series as $series)--}}
{{--                    <option value="{{ $series['series_id'] }}" {{ ($series['series_id'] === (old('series_id') ?? $series['series_id']))  ? 'selected' : '' }}>--}}
{{--                        {{ '['.$series['series_id'].'] '. $series['title'] }}--}}
{{--                    </option>--}}
{{--                @endforeach--}}
{{--            </select>--}}
{{--            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}
{{--        @endcomponent--}}

{{--        @php $id = 'point_required'; $hasError = $errors->has($id) @endphp--}}
{{--        @component('admin.components.form_field_50', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])--}}
{{--            <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control" />--}}
{{--            @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent--}}
{{--        @endcomponent--}}


        @php $id = 'data_layer_details' @endphp
        @component('admin.components.form_field_100', ['label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'hasError'=>$hasError ])
            <table id="data-layer-table" class="table border table-striped table-valign-middle">
                <thead>
                <tr>
                    <th style="width:45%">Voucher Series</th>
                    <th style="width:45%">Point</th>
                    <th style="width:10%"><a class="btn btn-success" id="data-layer-add"><i class="fas fa-plus"></i></a></th>
                </tr>
                </thead>
                <tbody class="table-hover">

                </tbody>
            </table>

            <div id="data-layer-confirm-modal" class="modal fade" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Warning</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to delete this row?</p>
                        </div>
                        <div class="modal-footer">
                            <a class="btn btn-secondary" data-dismiss="modal">Close</a>
                            <a id="data-layer-confirm-delete" class="btn btn-danger">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
        @endcomponent
    @endcomponent

</form>