@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%;
            }

            .select2-container--default .select2-selection--multiple .select2-selection__choice {
                white-space: normal !important;
                word-break: break-all !important;
                display: block !important;
                text-align: center !important;
                height: auto !important;
            }

            .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
                display: inline-block;
                transform: rotate(90deg);
                transform-origin: left bottom;
                white-space: nowrap;
                height: auto;
                text-align: left;
            }
        </style>
    @endsection

    @section('script')
        @parent
        <script>
            $(() => {

                var getParentRow = elem => $(elem).parents('tr:first');

                $(document).on('change', 'input[type="checkbox"][id^="points_checkbox_"]', function() {
                    let $parent = getParentRow(this);
                    let isChecked = $(this).prop('checked');
                    let hiddenInput = $parent.find('input[type="hidden"][id^="points_checkbox_hidden_"]');
                    hiddenInput.val(isChecked ? 'true' : 'false');
                });

                $('input[type="hidden"][id^="points_checkbox_hidden_"]').each(function() {
                    let $parent = getParentRow(this);
                    let isChecked = $(this).val() === 'true';
                    let checkbox = $parent.find('input[type="checkbox"][id^="points_checkbox_"]');
                    checkbox.prop('checked', isChecked);
                });

                $(document).on('change', 'input[type="checkbox"][id^="vouchers_checkbox_"]', function() {
                    let $parent = getParentRow(this);
                    let isChecked = $(this).prop('checked');
                    let hiddenInput = $parent.find('input[type="hidden"][id^="vouchers_checkbox_hidden_"]');
                    hiddenInput.val(isChecked ? 'true' : 'false');
                });

                // initialize checkbox based on hidden field values
                $('input[type="hidden"][id^="vouchers_checkbox_hidden_"]').each(function() {
                    let $parent = getParentRow(this);
                    let isChecked = $(this).val() === 'true';
                    let checkbox = $parent.find('input[type="checkbox"][id^="vouchers_checkbox_"]');
                    checkbox.prop('checked', isChecked);
                });

                $('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>
        <div class="position-relative" style="width:100px; height: 100px;">
            <svg width="100px" height="100px" class="pie position-absolute" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 191.4 203.1"
                xml:space="preserve">
                <path d="M0.7,24.6C60-7.9,131.8-7.5,190.8,25.6L98.5,202L0.7,24.6z" />
            </svg>
            <img src="about:blank" class="position-absolute w-50 h-50"
                style="object-fit: contain; transform: translate(-50%,-50%);left: 50%;top: 35%;" />
        </div>
        <a href="javascript:void(0)" slot="{{ $i }}" class="btn-refresh-preview btn btn-xs btn-info mt-2"><i
                class="fas fa-sync mr-1"></i> Refresh Preview</a>
    </td>
    <td>
        @php
            $id = 'color';
            $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,
        ])
            <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{ $id }}">
                <input name="{{ $prefix . $i . '_' . $id }}" id="{{ $prefix . $i . '_' . $id }}" type="text"
                    class="form-control" data-original-title="" title="">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="fas fa-square"></i></span>
                </div>
            </div>
            @component('admin.components.form_error_msg', ['hasError' => $hasError])
                {{ $errors->first($id) }}
            @endcomponent
        @endcomponent
        <hr class="my-2">
        @php
            $id = 'type';
            $hasError = $errors->has($id);
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-md-12 ' . $prefix . $i . '_' . $id,
            'label' => $form[$id]['label'],
            'required' => $form[$id]['req'],
            'description' => $form[$id]['descr'],
            'hasError' => $hasError,
        ])
            <div class="form-group d-flex">
                @foreach ($form[$id]['input'] as $gid => $name)
                    <div class="slot-content-type custom-control custom-radio mx-2">
                        <input class="custom-control-input" type="radio" id="{{ $prefix . $i . '_' . $id . '_' . $gid }}"
                            name="{{ $prefix . $i . '_' . $id }}" value="{{ $gid }}"
                            {{ $loop->first ? 'checked' : '' }}>
                        <label for="{{ $prefix . $i . '_' . $id . '_' . $gid }}"
                            class="custom-control-label">{{ $name }}</label>
                    </div>
                @endforeach
            </div>
        @endcomponent

        @php
            $id = 'img';
            $hasError = $errors->has($i . ' ' . $id);
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-md-12 slot-content-image',
            'label' => $form[$id]['label'],
            'required' => $form[$id]['req'],
            'description' => $form[$id]['descr'],
            'hasError' => $hasError,
        ])
            <div class="input-group">
                <input name="{{ $prefix . $i . '_' . $id }}" id="{{ $prefix . $i . '_' . $id }}" type="file"
                    class="custom-file-input" accept="image/*">
                <label class="custom-file-label mx-0" for="icon">Choose File</label>
            </div>
            @component('admin.components.form_error_msg', ['hasError' => $hasError])
                {{ $errors->first($id) }}
            @endcomponent
        @endcomponent

        @php
            $id = 'msg';
            $hasError = $errors->has($i . ' ' . $id);
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-md-12 slot-content-text',
            'label' => $form[$id]['label'],
            'required' => $form[$id]['req'],
            'description' => $form[$id]['descr'],
            'hasError' => $hasError,
        ])
            <textarea name="{{ $prefix . $i . '_' . $id }}" id="{{ $prefix . $i . '_' . $id }}"
                placeholder="{{ $form[$id]['placeholder'] }}" maxlength="20" class="form-control"></textarea>
            @component('admin.components.form_error_msg', ['hasError' => $hasError])
                {{ $errors->first($id) }}
            @endcomponent
        @endcomponent

        @php
            $id = 'msg_color';
            $hasError = $errors->has($i . ' ' . $id);
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-md-12 slot-content-text',
            'label' => $form[$id]['label'],
            'required' => $form[$id]['req'],
            'description' => $form[$id]['descr'],
            'hasError' => $hasError,
        ])
            <div class="input-group my-colorpicker2 colorpicker-element"
                data-colorpicker-id="{{ $prefix . $i . '_' . $id }}">
                <input name="{{ $prefix . $i . '_' . $id }}" id="{{ $prefix . $i . '_' . $id }}" type="text"
                    class="form-control" data-original-title="" title="">
                <div class="input-group-append">
                    <span class="input-group-text"><i class="fas fa-square"></i></span>
                </div>
            </div>
            @component('admin.components.form_error_msg', ['hasError' => $hasError])
                {{ $errors->first($id) }}
            @endcomponent
        @endcomponent
    </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

        <hr class="my-2">

        @php
            $id = 'reward_awarded';
            $voucherSeries = $voucherSeries ?? [];
            $voucherSeriesChecked = $voucherSeriesChecked ?? false;
            $pointsChecked = $pointsChecked ?? false;
        @endphp
        @component('admin.components.form_field', [
            'class' => 'col-md-12',
            'label' => 'Reward Awarded',
            'required' => $form[$id]['req'],
        ])
            <div class="reward-settings-container">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="points_checkbox_{{ $prefix . $i }}" name="{{ $prefix . $i }}_reward_type_points" {{ $pointsChecked ? 'checked' : '' }}>
                    <label class="custom-control-label" for="points_checkbox_{{ $prefix . $i }}">Points</label>
                    <input type="hidden" id="points_checkbox_hidden_{{ $prefix . $i }}" name="{{ $prefix . $i }}_points_checked" value="{{ $pointsChecked ? 'true' : 'false' }}">
                    <input type="text" class="form-control mt-2" id="points_{{ $prefix . $i }}" name="{{ $prefix . $i }}_points" placeholder="Enter points">
                </div>

                    <div class="custom-control custom-checkbox mt-3">
                        <input type="checkbox" class="custom-control-input" id="vouchers_checkbox_{{ $prefix . $i }}" name="{{ $prefix . $i }}_reward_type_vouchers" {{ $voucherSeriesChecked ? 'checked' : '' }}>
                        <label class="custom-control-label" for="vouchers_checkbox_{{ $prefix . $i }}">Voucher Series</label>
                        <input type="hidden" id="vouchers_checkbox_hidden_{{ $prefix . $i }}" name="{{ $prefix . $i }}_voucher_series_checked" value="{{ $voucherSeriesChecked ? 'true' : 'false' }}">
                        <select class="form-control select2 mt-2" id="voucher_series_{{ $prefix . $i }}" name="{{ $prefix . $i }}_voucher_series[]"
                                data-normalsearch="true"
                                data-type="{{$gid}}"
                                data-ajax-url="{{ route('admin.select2.ajax.get_data', 'voucher_series') }}"
                                placeholder="{{ $form[$id]['placeholder'] }}" style="width: 100%;" multiple>
                        </select>
                        <small class="text-muted d-block">Only provisioned while stocks last</small>
                    </div>
            </div>
        @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>