@php
    $prefix = $prefix ?? 'slot-';
@endphp
@once('head_row_prize')
    @section('style')
        @parent
        <style>
            td.action-col {
                text-align: center;
                vertical-align: middle;
            }

            td.action-col .btn {
                display: block;
                width: 100%;
            }
        </style>
    @endsection

    @section('script')
        @parent
        <script>
            $(() => {
                var getParentRow = elem => $(elem).parents('tr:first');

                $('tr[data-removable=0]').data('{{ $_t = uniqid() }}', 1);
                $(document).on('click', "tr[data-removable=1] td.action-col a.btn-row-remove", function() {
                    let $parent = getParentRow(this);
                    let data = $parent.data() || {};
                    Number(data.removable) && !Number(data['{{ $_t }}']) &&
                        confirm('Are you sure you want to remove?') &&
                        $parent.trigger('beforeRemove').remove();
                }).on('click', "tr[data-removable] td.action-col a.btn-multiplier", function() {
                    let $parent = getParentRow(this);
                    let slug = $parent.data('slug');
                    $('.modal#multiplier_form').modal({
                        backdrop: 'static',
                        keyboard: false,
                        show: true,
                    }).trigger('config_repopulate', {
                        multipliers: $parent.data('multipliers'),
                        chance: $parent.find(`[name="${slug}_chance_of_win"]`).val(),
                        rowNum: $parent.find('.row-num').text(),
                    }).off('form_close').on('form_close', (e, eData) => {
                        $parent.data('multipliers', eData.list);
                        if (!eData.overwriteAll) {
                            return;
                        }
                        $('tr[data-removable]').not($parent).each(function() {
                            $(this).data('multipliers', [...eData.list]);
                        });
                    });
                }).on('doneImageUpload', '[name^="{{ $prefix }}"][name$="_img"].custom-file-input', function(
                    e, data) {
                    getParentRow(this).find('img:first').attr('src', data.original).show();
                });
            });
        </script>
    @endsection
@endonce

<tr data-removable="{{ $removable ?? 0 }}" data-slug="{{ $prefix . $i }}" data-uid="{{ $i }}">
    <td class="row-num">{{ $i }}.</td>
    <td>
        @php $id = 'item_orders_'.$prefix .$i; $hasError = $errors->has($id) @endphp
        <div class="form-group mb-2">
            <select name="{{$id}}" class="{{$id}} slot-images item-order d-none form-control w-100" multiple></select>
            <div id="{{$id}}-preview" class="slot-preview"></div>
        </div>
        @php
            $label = 'is_slot_randomizable';
            $id = $label.'_'.$prefix .$i;
            $hasError = $errors->has($id) ;
        @endphp
        <div class="form-group mb-1">
            <div class="custom-control custom-switch d-flex align-items-center">
                <input type="checkbox" class="custom-control-input {{$label}}" id="{{$id}}" name="{{$id}}">
                <label class="custom-control-label" for="{{$id}}">{{$form[$label]['label']}}</label>
            </div>
        </div>
    </td>
    <td>

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

        @php
            $id = 'status';
            $hasError = $errors->has($i . '_' . $id);
        @endphp
        @component('admin.components.form_field_100', [
            'label' => $form[$id]['label'],
            'required' => $form[$id]['req'],
            'description' => $form[$id]['descr'],
            'hasError' => $hasError,
        ])
            <select name="{{ $prefix . $i . '_' . $id }}" class="{{ $id }} form-control select2 w-100">
                <option value="win" selected>Win Title</option>
                <option value="lose">Lose Title</option>
            </select>
            @component('admin.components.form_error_msg', ['hasError' => $hasError])
                {{ $errors->first($id) }}
            @endcomponent
        @endcomponent
    </td>
    <td>

        @php
            $id = 'chance_of_win';
            $hasError = $errors->has($i . '_' . $id);
        @endphp
        @component('admin.components.form_field_100', [
            'label' => $form[$id]['label'],
            'required' => $form[$id]['req'],
            'description' => $form[$id]['descr'],
            'hasError' => $hasError,
        ])
            <input name="{{ $prefix . $i . '_' . $id }}" id="{{ $prefix . $i . '_' . $id }}"
                placeholder="{{ $form[$id]['placeholder'] }}" type="text" class="form-control {{ $id }}" />
            @component('admin.components.form_error_msg', ['hasError' => $hasError])
                {{ $errors->first($id) }}
            @endcomponent
        @endcomponent
    </td>
    <td class="action-col">
        <a href="javascript:void(0);" class="btn btn-xs btn-primary mt-2 px-1 py-2 btn-multiplier">
            <i class="far fa-times-circle"></i>
            Multiplier
        </a>
        @if ($removable ?? false)
            <a href="javascript:void(0);" class="btn btn-xs btn-danger mt-2 px-1 py-2 btn-row-remove">
                <i class="fas fa-minus"></i>
                Remove
            </a>
        @endif
    </td>
</tr>