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

@section('script')
    @parent
    <script src="{{ mix('js/main/slotmachine-renderer.js') }}"></script>
    <script>
        $(function(){
            $('.image-gradient-selector .btn').on('click',function(){
                const type= $(this).attr('data-select');
                $(this).parents('.btn-group').find('.btn').removeClass('btn-dark').addClass('btn-default');
                $(this).addClass('btn-dark').removeClass('btn-default');
                $(this).parents('.form-switch-group').find('.image-gradient-container-type').hide();
                // update preview
                let showel= $(this).parents('.form-switch-group').find('.image-gradient-container-type[data-type='+ type +']');
                showel.show();
                const showInput = showel.find('input, textarea');
                $.each(showInput, function(k,v){
                    $(v).trigger('keypress');
                });
            })

            // preview immediately
            $('.image-gradient-container-type input, .image-gradient-container-type textarea').change(function(){
                const name= $(this).attr('name');
                const $img_preview_alt = $(`[alt^=${name}]`);
                if(!$img_preview_alt) {
                    return;
                }
                switch( $(this).attr('type') ){
                    case 'file':
                        let file = $(this).files ? $(this).files[0] :null;
                        if (file) {
                            var reader = new FileReader();
                            reader.onload = () => $img_preview_alt.attr('src', reader.result).css('background','#fff');
                            reader.readAsDataURL(file);
                        } else {
                            file = $(this).data('value');
                            $img_preview_alt.attr('src',file).css('background','#fff');
                        }
                        break;
                    default:
                        const value = $(this).val();
                        if(value){
                            $img_preview_alt.attr('src', '').css('background', value);
                        }
                        break;
                }

            })


            // --------------------------


            let slotImages;
            const html = {
                preview: `<div class="slot-icon"><div class="edit"><i class="fas fa-pen"></i></div></div>`,
                catalogue: `<div class="slot-icon"><span class="del"><i class="fas fa-times"></i></span></div>`,
                add: `<div class="slot-add"><i class="fas fa-plus"></i></div>`,
            }
            const $catalogue = $('.slot-catalogue');
            const $modalSlotSelect = $('#modal_slot_select');
            const $modalBtnConfirm = $modalSlotSelect.find('.btn-confirm');
            const randomize_warning_msg = 'Randomized rows must have unique item combinations';

            // Function to update the catalogue HTML
            function updateCatalogueHtml() {
                if (slotImages.length === 0) {
                    $catalogue.html(html.add);
                } else {
                    let catalogueItemsHtml = slotImages.map(item => {
                        return `<div class="slot-icon" style="background-image: url('${item.url}');" slot_id="${item.id}">
                        <span class="del"><i class="fas fa-times"></i></span>
                    </div>`;
                    }).join('');
                    catalogueItemsHtml += html.add;
                    $catalogue.html(catalogueItemsHtml);
                }
            }


            const getSlotImages = ()=>{
                return new Promise(resolve=>{
                    window.sKaleHttp.doAJAX('settings/main_game/slotmachine', 'GET').promise.then(res => {
                        if(res.http_status === 200 && res.data){
                            updateSlotImageOpts(res.data)
                            return res.data;
                        } else {
                            throw Error(res);
                        }
                    }).catch(console.log).finally(resolve());
                });
            }

            const uploadSlotImages = (urls)=>{
                window.sKaleHttp.doAJAX('settings/main_game/slotmachine/create',
                    'POST',
                    JSON.stringify({"urls": $.isArray(urls) ? urls :[urls] }),
                    'application/json').promise.then(res => {
                    if(res.http_status === 200 && res.data){
                        makeToast('bg-success', res.message);
                        updateSlotImageOpts(res.data)
                        updateCatalogueHtml();
                        return res.data;
                    } else {
                        throw Error(res);
                    }
                }).catch(e=>{
                    console.log(e)
                    makeToast('bg-danger', res.error ??  res.error);
                });
            }

            const deleteSlotImages = (id) => {
                return new Promise((resolve, reject) => {
                    window.sKaleHttp.doAJAX(`settings/main_game/slotmachine/delete/${id}`, 'POST')
                        .promise.then(res => {
                        if (res.http_status === 200 && res.data) {
                            makeToast('bg-success', res.message);
                            updateSlotImageOpts(res.data);
                            resolve(res.data); // Resolve the promise with the response data
                        } else {
                            throw Error(res);
                        }
                    }).catch(e => {
                        console.error(e);
                        makeToast('bg-danger', e.error ?? e.errors);
                        reject(e); // Reject the promise with the error
                    });
                });
            };

            const updateSlotImageOpts = (data) => {
                // Ensure data is an array even if it's undefined/null
                slotImages = Array.isArray(data) ? data : [];

                $('select.slot-images').each((i, select) => {
                    const $select = $(select);
                    const ori_val = $select.val() || [];
                    const is_catalogue = $select.attr('name') === 'tiles';

                    // Clear the select options if there are no images
                    if (is_catalogue && slotImages.length === 0) {
                        $select.html('').change();
                    } else if (is_catalogue) {
                        // If there are images, proceed with updating the options
                        const options = slotImages.map(item => new Option(item.url, item.id));
                        $select.html(options).val(ori_val).change();
                    }
                });

                // Update the catalogue UI based on whether slotImages is empty
                updateCatalogueHtml();
            }


            window.loadSlotMachineData = (name, val) => {
                if (!val) return;

                const getType = (value)=>{
                    if(!value) return 'unknown';
                    if (value.includes('http://') || value.includes('https://') || value.includes('.jpg') || value.includes('.png') || value.includes('.jpeg') || value.includes('.gif') || value.includes('.webp') || value.includes('.svg')) {
                        return 'image';
                    } else if (value.startsWith('linear-gradient(') || value.startsWith('radial-gradient(')) {
                        return 'gradient';
                    } else if (value.startsWith('#') || value.startsWith('rgb(') || value.startsWith('rgba(') || value.startsWith('hsl(') || value.startsWith('hsla(')) {
                        return 'color';
                    } else {
                        return 'unknown';
                    }
                }

                const setValueByType = (types, value, overwrite_type=null) => {
                    const type = overwrite_type ?? getType(value);
                    const input = types[type];
                    if (!input) return;

                    if(type==='image'){
                        value && window.setBindClearImage( $(input) , value);
                        console.log('binded', $(input).attr('name'));
                        $(input).parents('.form-group').find('.file-viewer img').attr('src',value);
                        $(input).val('').data('value',value).change();
                    } else {
                        $(input).val(value).data('value',value).change();
                    }

                };

                const slotMachineFields = {
                    'background': (value) => {
                        setValueByType({
                            'image': "[name=widget_background_img]",
                            'color': "[name=widget_background_color]",
                            'gradient': "[name=widget_background_gradient]"
                        }, value);
                    },
                    'count': (value) => {
                        $('[name=count]').val(value).change();
                    },
                    'default': (value) => {
                        $('[name=default]').data('value', value).change();
                    },
                    'animation': (value) => {
                        $('[name=animation]').val(value).change();
                    },
                    'tiles': (value) => {
                        setValueByType({
                            'image': "[name=tile_background_img]",
                            'color': "[name=tile_background_color]",
                            'gradient': "[name=tile_background_gradient]"
                        }, value.background, value.background_type);

                        const setTileValues = (name, defaultValue) => {
                            const data = value[name] ? value[name].split(',') : defaultValue;
                            if (data.length === 2) {
                                $(`[name=tile_${name}]`).val(data[0]).change()
                                    .parents('.input-group').find('input:last').val(data[1]).change();
                            }
                        };

                        setTileValues('position', []);
                        setTileValues('size', ['25', '25']);
                        $('[name=tile_spacing]').val(value.spacing || 0).change();
                    }
                };

                const fieldFunction = slotMachineFields[name];
                fieldFunction && fieldFunction(val);
            };

            window.validateSlotMachineData =()=>{
                return $('.is_slot_randomizable:checked').toArray().some(item => {
                    return !validateRandomSlots($(item));
                });
            }

            window.getSlotMachineData = ()=>{

                const backgroundImg = $('[name=widget_background_img]');
                const backgroundColor = $('[name=widget_background_color]');
                const count = $('[name=count]');
                const tileBackgroundImg = $('[name=tile_background_img]');
                const tileBackgroundColor = $('[name=tile_background_color]');
                const tilePosition = $('[name=tile_position]');
                const tileSize = $('[name=tile_size]');
                const tileSizeLastInput = tilePosition.parents('.input-group').find('input:last');
                const tilePositionLastInput = tileSize.parents('.input-group').find('input:last');

                const tiles = {
                    background_type: tileBackgroundImg.data('value') ? 'image' : (tileBackgroundColor.val() ? 'color' : ''),
                    background: tileBackgroundImg.data('value') || tileBackgroundColor.val(),
                    position: (tilePosition.val() && tilePositionLastInput.val())
                        ? [tilePosition.val(), tilePositionLastInput.val()].join(',')
                        : '',
                    size: [tileSize.val() || '25', tileSizeLastInput.val() || '25'].join(','),
                    spacing: $('[name=tile_spacing]').val(),
                };

                return {
                    background: backgroundImg.data('value') || backgroundColor.val(),
                    count: count.val(),
                    animation: $('[name=animation]').val(),
                    default: $('[name=default]').data('value'),
                    tiles
                }
            }


            // to update tile catalogue preview via change event
            $('[name=tiles]').on('change',(e)=>{
                let $items = [];
                const values = $(e.currentTarget).val();

                values.forEach(id => {
                    const numericId = Number(id);
                    const filter = slotImages.find(item => Number(item.id) === numericId);
                    if (filter) {
                        const $item = $(html.catalogue)
                            .attr('slot_id', filter.id)
                            .css('backgroundImage', `url(${filter.url})`)
                            .data('value', numericId);
                        $items.push($item);
                    }
                });

                $items.push(html.add);
                $catalogue.html($items);
                updateCatalogueHtml();

            });

            // to upload tile image
            $(document).on('click', '.slot-add' , ()=>{
                $('[name=tile_uploader]').trigger('click');
            });

            // bind successful upload to be added into array
            $('[name=tile_uploader]').on('keypress', (e)=>{
                const url = $(e.currentTarget).data('value');
                url && uploadSlotImages(url);
            })

            // delete by delegating it from a static parent? for example, the '.slot-catalogue' element.
            $(document).on('click', '.slot-catalogue .del', function(e) {
                const $icon = $(this).closest('.slot-icon');
                const id = $icon.attr('slot_id');

                deleteSlotImages(id).then(() => {
                    // Remove the image element from the DOM after successful deletion
                    $icon.remove();
                    // Optionally, you could refresh the catalogue or perform other UI updates here
                }).catch(error => {
                    // Handle any errors that occur during deletion
                    console.error("Failed to delete image:", error);
                    // Optionally, display an error message to the user
                });
            });


            // change all the slot items to have the same tile count
            $('[name=count]').on('change',(e)=>{
                const count = Number($(e.currentTarget).val());
                if(!count) return;

                $('.item-order').each((i,select)=>{
                    const $select = $(select);
                    const $preview = $select.parents('.form-group').find('.slot-preview');
                    let fragment = [];

                    for (let j = 0; j < count; j++) {
                        const $temp = $(html.preview).data('order', j);
                        fragment.push($temp);
                    }

                    $preview.html(fragment);
                    $select.change();
                });
            });

            $(document).on('change', '.item-order', (e) => {
                const $this = $(e.currentTarget);
                const $icons = $this.parents('.form-group').find('.slot-icon');
                const count = Number($('[name=count]').val());

                let thisVal = $this.data('value') || [];

                // If there are no images, clear the backgrounds
                if (slotImages.length === 0) {
                    $icons.css('backgroundImage', '');
                    return; // Exit the function early
                }

                // Update icon backgrounds
                $icons.each((index, icon) => {
                    const iconVal = Number(thisVal[index]);
                    const matchedImage = slotImages.find(img => img.id === iconVal);
                    const url = matchedImage ? matchedImage.url : '';
                    $(icon).data('value', iconVal).css('backgroundImage', `url(${url})`);
                });

                // Resize thisVal to match the count
                while (thisVal.length < count) {
                    thisVal.push(null);
                }
                thisVal.length = count; // Trim if necessary

                // Handle randomizer for rows select
                if ($this.closest('td').length) {
                    const $randomizer = $this.closest('td').find('.is_slot_randomizable');
                    const allSame = thisVal.every(val => val === thisVal[0]);

                    $randomizer.prop('disabled', allSame)[allSame?'addClass':'removeClass']('disabled').change();
                    allSame && $randomizer.prop('checked', false);
                    // check if it conflicts with existing randomized slot
                    $('.is_slot_randomizable:checked').each(function() {
                        validateRandomSlots($(this));
                    });
                }

                // Update the element's data-value
                $this.data('value', thisVal);
            });

            // check if data is similar to other rows
            $(document).on('change', '.is_slot_randomizable', (e)=>{
                const $randomizer = $(e.currentTarget);
                validateRandomSlots($randomizer);
            })

            const validateRandomSlots = ($randomizer)=>{
                if(!$randomizer.prop('checked')) return;
                const thisVal = $randomizer.parents('td').find('.item-order').data('value');
                if(!thisVal || thisVal.length===0) return;

                // ignore those with null
                if(thisVal.includes(null)) return;

                const sortedThisVal = [...thisVal].sort();

                const isArraysEqual = (arr1, arr2) => JSON.stringify(arr1) === JSON.stringify(arr2);

                const sortedItems = $('td .item-order').get().map(item => {
                    const itemVal = $(item).data('value') || [];
                    return [...itemVal].sort();
                });

                const found = sortedItems.reduce((acc, item) => {
                    return isArraysEqual(item, sortedThisVal) ? acc + 1 : acc;
                }, 0);

                if (found > 1) {
                    makeToast('bg-danger', randomize_warning_msg);
                    setTimeout(()=>{
                        $($randomizer).prop('checked',false)
                    },500);

                    return false;
                }
                return true;
            }

            $(document).on('click', '.slot-icon .edit', (e)=>{
                const $slot = $(e.currentTarget).parents('.slot-icon');
                const value = $slot.data('value');
                const $select = $slot.parents('.form-group').find('.item-order');
                // open modal select thumbnail and update values
                $modalSlotSelect.find('.slot-icon').removeClass('selected');
                $modalSlotSelect.find(`.slot-icon[slot_id=${value}]`).addClass('selected');
                $modalSlotSelect.modal('show');
                $modalBtnConfirm.data('targetSlot', $slot).data('targetSelect', $select);

            });

            // Handler for when any slot-icon is clicked in the catalogue
            $(document).on('click', '.slot-catalogue .slot-icon', function() {
                // Remove 'selected' class from all icons
                $('.slot-catalogue .slot-icon').removeClass('selected');
                // Add 'selected' class to the clicked icon
                $(this).addClass('selected');
                // Set the data-value attribute to the slot_id of the clicked icon
                const iconValue = $(this).attr('slot_id');
                $(this).data('value', iconValue);
            });

            $modalBtnConfirm.on('click', (e)=>{
                const $slot = $modalBtnConfirm.data('targetSlot');
                const $select = $modalBtnConfirm.data('targetSelect');
                const $selectedIcon = $('.slot-icon.selected');
                const iconVal = $selectedIcon.data('value'); // Get the data-value without converting to Number

                // Check if the iconVal is undefined or not a number
                if(typeof iconVal === 'undefined' || isNaN(Number(iconVal))) {
                    console.error('No icon is selected or the selected icon has an invalid value.');
                    // Handle the error case here by showing an alert or a message to the user.
                    alert('Please select a slot icon before confirming.');
                    return;
                }

                let selectValue = $select.data('value') ?? [];
                if (selectValue.length === 0) {
                    const count = Number($('[name=count]').val());
                    selectValue = Array(count).fill(null);
                }
                selectValue[$slot.data('order')] = iconVal;

                $select.data('value',selectValue).change();
                $modalSlotSelect.modal('hide');
            });

            $(document).on('click', '#modal_slot_select .slot-icon',(e)=>{
                $('#modal_slot_select .slot-icon').removeClass('selected');
                $(e.currentTarget).addClass('selected');
            });

            // -------------
            // Preview Functions

            let slotMachineRenderer;
            let slotTemplates;
            let changePreviewTimeout;

            window.renderSlotPreview = (settings = null) => {
                const $container = $('.slotcontainer');
                const $btnPreview = $('#btn-preview');
                if ($container.find('#slotTemplateSpin').length) {
                    slotTemplates = $container.html();
                } else {
                    $container.html(slotTemplates);
                }

                settings = settings || getSlotMachineData();
                slotMachineRenderer = window.SlotMachineRenderer ? new SlotMachineRenderer() : null;

                if (slotImages.length === 0) {
                    // Clear existing content
                    $('.slotcontainer .symbols').empty();

                    // Optionally, add a placeholder or message to the preview area
                    const placeholder = '<div class="placeholder">No images available</div>';
                    $('.slotcontainer').html(placeholder);

                    // Adjust the preview scaling if necessary
                    scalePreview();

                    // Exit the function as there's nothing to render
                    return;
                }

                let data = {
                    ...settings,
                    items: slotImages
                };
                slotMachineRenderer.render(data);
                scalePreview();
                $(window).on('resize',scalePreview);
            }

            $('#btn-preview').off('click').on('click', (e) => {
                if (slotMachineRenderer) {
                    setButtonToLoading(e.currentTarget);
                    slotMachineRenderer.play({ item_orders: $('[name=default]').data('value') || settings.default });
                    setTimeout(() => {
                        slotMachineRenderer.reset();
                        resetLoadingButton();
                    }, 6000);
                }
            });

            $(document).on('change.preview','select, input', ()=>{
                clearTimeout(changePreviewTimeout);
                changePreviewTimeout = setTimeout(renderSlotPreview, 2000);
            })

            const scalePreview = () => {
                const $demoPreviewContainer = $('#demo-preview').find('.slotcontainer');
                const w = $('#demo-preview').parents('.card-body').innerWidth();
                const ori_w = 480;
                const scale = w / ori_w;
                let transform = ($demoPreviewContainer.attr('style') || '').split(';').find(item=>item.includes('transform'));
                if(transform){
                    transform = transform.replace('transform: ','').replace(/scale\([^)]*\)/g, '').trim();
                }
                $demoPreviewContainer.css('transform', `${transform} scale(${scale})`);
            }

            getSlotImages();


        });
    </script>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ mix('css/games/slotmachine.css') }}" rel="preload" />
    <style>
        .image-gradient-container .form-label{
            font-size: .8rem !important;
            color: var(--gray) !important;
        }
        .slot-catalogue{
            width: 100%;
            background: #eee;
            padding: 0.25rem;
            display: flex;
            border-radius: 0.25rem;
            flex-wrap: wrap;
        }

        .slot-preview{
            background: #eee;
            padding: 0.25rem;
            display: inline-flex;
            border-radius: 0.25rem;
            flex-wrap: nowrap;
        }
        td .slot-preview{
            border-radius: 0;
            padding: 0;
            background: transparent;
        }

        .slot-preview .slot-icon .edit{
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            background: #0008;
            color: #fff;
            top:0;
            left:0;
            display:flex;
            justify-content: center;
            align-items: center;
            transition: .3s;
        }

        .slot-preview .slot-icon:hover .edit{
            opacity: 1;
        }

        .slot-icon {
            width: 4rem;
            height: 4rem;
            background-color: #fff;
            border-radius: 0.25rem;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 50% 50%;
            padding: 0.25rem;
            position: relative;
            margin: 5px;
            overflow: hidden;
        }

        .slot-icon .del {
            position: absolute;
            right: 0;
            top: 0;
            height: 20px;
            width: 20px;
            color: #555;
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .slot-icon .del:hover {
            opacity: 0.5;
        }

        .slot-add{
            width: 4rem;
            height: 4rem;
            border: 1px dashed #aaa;
            border-radius: 0.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px;
            color: #aaa;
            cursor: pointer;
        }

        #modal_slot_select .slot-catalogue{
            padding: 0;
            background:transparent;
        }
        .slot-catalogue-bg {
            background: #eee;
        }
        #modal_slot_select .slot-icon.selected{
            box-shadow: 0 0 2px 1px #197bff;
        }
        #modal_slot_select .slot-icon .del {
            display: none;
        }
        #modal_slot_select .slot-add{
            display: none;
        }


    </style>
@endsection

@component('admin.setting.components.game_probability_type_slots_section', [
'form_config'=>'admin.settings.slotmachine',
'help'=>'main_game_spinandwin',
])

    {{--    <ul class="nav nav-pills mb-3">--}}
    {{--        <li class="nav-item">--}}
    {{--            <a class="nav-link btn-secondary active" href="#">Display</a>--}}
    {{--        </li>--}}
    {{--        <li class="nav-item">--}}
    {{--            <a class="nav-link" href="#">Rewards</a>--}}
    {{--        </li>--}}
    {{--        </li>--}}
    {{--    </ul>--}}


    @component('admin.components.card', ['header'=> 'Display', 'collapse' => false])
        {{-- reset data--}}
        {{--    <div class="col-12 d-block w-100 text-right p-0" style="margin-top:-15px !important; margin-bottom:-10px !important; z-index: 2 !important;">--}}
        {{--        <a href="javascript:void(0)" id="reset_ctw" class="btn-link text-danger small">Reset</a>--}}
        {{--    </div>--}}


        {{-- display form --}}
        <div class="col-md-9 col-12 order-md-0 order-1">


            @php $id = 'tiles'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} slot-images d-none form-control w-100" placeholder="{{$form[$id]['placeholder']}}" multiple>
                </select>

                <div id="slot-catalogue" class="slot-catalogue"></div>

                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'tile_uploader'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_100', ['class'=>'d-none', 'label'=>$form[$id]['label'].' - Image', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <div class="input-group">
                    <div class="custom-file">
                        <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                        <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                    </div>
                </div>
                <div class="file-viewer"><img src=""  alt=" "></div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'widget_background'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <div class="form-switch-group">

                    <div class="align-items-center d-flex flex-wrap image-gradient-selector justify-content-between mb-2 mt-1 mt-sm-0 mx-auto px-2">
                        <label class="mb-0"></label>
                        <div class="btn-group flex-shrink-0" role="group" aria-label="Background Type">
                            <a class="btn button btn-sm btn-dark" href="javascript:void(0)" data-toggle="tooltip" title="Image" data-select="image"><i class="fas fa-image" style="width: 0.8rem; height: 0.8rem;"></i></a>
                            <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Gradient" data-select="gradient"><i class="fas fa-square" style="background: linear-gradient(45deg, black, white);color: transparent; border:.5px solid white; border-radius: 2px;  width: 0.8rem; height: 0.8rem; "></i></a>
                        </div>
                    </div>
                    <div class="image-gradient-container bg-light px-2 px-1 mx-1 rounded overflow-hidden">

                        <div class="image-gradient-container-type" data-type="image">
                            {{--                        <label class="font-weight-normal mb-0 text-muted text-sm">Background Image</label>--}}
                            @php $id = 'widget_background_img'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Image', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                                        <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                                    </div>
                                </div>
                                <div class="file-viewer"><img src=""  alt=" "></div>
                                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                            @endcomponent


                            @php $id = 'widget_background_color'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Solid', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                                <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                                    <input name="{{$id}}" id="{{$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
                        </div>
                        <div class="image-gradient-container-type" data-type="gradient" style="display: none">
                            {{--                    <label class="font-weight-normal mb-0 text-muted text-sm">Background Gradient</label><br>--}}

                            @php $id = 'widget_background_gradient'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Gradient', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])

                                <textarea name="{{$id}}" id="{{$id}}" class="input-gradient-css form-control" placeholder="linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,105,255,1) 100%)" style="font-size: .6rem; font-family: monospace;" ></textarea>

                                <small class="text-muted float-right">
                                    <a href="https://cssgradient.io/" target="_blank">Paste CSS Gradient from here</a></small>
                                <div class="file-viewer rounded overflow-hidden" style="height: 50px; width: 100%; background:#eee; "></div>
                                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                            @endcomponent
                        </div>
                    </div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent


            @php $id = 'tile_background'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <div class="form-switch-group">

                    <div class="align-items-center d-flex flex-wrap image-gradient-selector justify-content-between mb-2 mt-1 mt-sm-0 mx-auto px-2">
                        <label class="mb-0"></label>
                        <div class="btn-group flex-shrink-0" role="group" aria-label="Background Type">
                            <a class="btn button btn-sm btn-dark" href="javascript:void(0)" data-toggle="tooltip" title="Image" data-select="image"><i class="fas fa-image" style="width: 0.8rem; height: 0.8rem;"></i></a>
                            <a class="btn button btn-sm btn-default" href="javascript:void(0)" data-toggle="tooltip" title="Gradient" data-select="gradient"><i class="fas fa-square" style="background: linear-gradient(45deg, black, white);color: transparent; border:.5px solid white; border-radius: 2px;  width: 0.8rem; height: 0.8rem; "></i></a>
                        </div>
                    </div>
                    <div class="image-gradient-container bg-light px-2 px-1 mx-1 rounded overflow-hidden">

                        <div class="image-gradient-container-type" data-type="image">
                            {{--                        <label class="font-weight-normal mb-0 text-muted text-sm">Background Image</label>--}}
                            @php $id = 'tile_background_img'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Image', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input name="{{$id}}" id="{{$id}}"  type="file" class="custom-file-input" accept="image/*">
                                        <label class="custom-file-label mx-0" for="{{$id}}">Choose File</label>
                                    </div>
                                </div>
                                <div class="file-viewer"><img src=""  alt=" "></div>
                                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                            @endcomponent


                            @php $id = 'tile_background_color'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Solid', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                                <div class="input-group my-colorpicker2 colorpicker-element" data-colorpicker-id="{{$id}}">
                                    <input name="{{$id}}" id="{{$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
                        </div>
                        <div class="image-gradient-container-type" data-type="gradient" style="display: none">
                            {{--                    <label class="font-weight-normal mb-0 text-muted text-sm">Background Gradient</label><br>--}}

                            @php $id = 'tile_background_gradient'; $hasError = $errors->has($id) @endphp
                            @component('admin.components.form_field_100', ['class'=>'px-0', 'label'=>$form[$id]['label'].' - Gradient', 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])

                                <textarea name="{{$id}}" id="{{$id}}" class="input-gradient-css form-control" placeholder="linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,105,255,1) 100%)" style="font-size: .6rem; font-family: monospace;" ></textarea>

                                <small class="text-muted float-right">
                                    <a href="https://cssgradient.io/" target="_blank">Paste CSS Gradient from here</a></small>
                                <div class="file-viewer rounded overflow-hidden" style="height: 50px; width: 100%; background:#eee; "></div>
                                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
                            @endcomponent
                        </div>
                    </div>
                </div>

                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'count'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} form-control select2 w-100" placeholder="{{$form[$id]['placeholder']}}">
                    @if($form[$id]['input'] )
                        @foreach( $form[$id]['input'] as $gid => $name)
                            <option value="{{$gid}}">{{$name}}</option>
                        @endforeach
                    @endif
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'animation'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} form-control select2 w-100" placeholder="{{$form[$id]['placeholder']}}">
                    @if($form[$id]['input'] )
                        @foreach( $form[$id]['input'] as $gid => $name)
                            <option value="{{$gid}}">{{$name}}</option>
                        @endforeach
                    @endif
                </select>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent


            @php $id = 'default'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <select name="{{$id}}" class="{{$id}} {{$form[$id]['req']?'required':''}} slot-images item-order d-none form-control w-100" placeholder="{{$form[$id]['placeholder']}}"
                        multiple>
                </select>

                <div id="{{$id}}-preview" class="slot-preview"></div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent


            @php $id = 'tile_position'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <div class="input-group">
                    <div class="input-group-prepend"><span class="input-group-text">X</span></div>
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
                    <div class="input-group-prepend"><span class="input-group-text">Y</span></div>
                    <input type="text" class="form-control"/>
                    <div class="input-group-append"><span class="input-group-text">%</span></div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'tile_size'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <div class="input-group">
                    <div class="input-group-prepend"><span class="input-group-text">Width</span></div>
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
                    <div class="input-group-prepend"><span class="input-group-text">Height</span></div>
                    <input type="text" class="form-control"/>
                    <div class="input-group-append"><span class="input-group-text">vw</span></div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent

            @php $id = 'tile_spacing'; $hasError = $errors->has($id) @endphp
            @component('admin.components.form_field_alt', [ 'class'=> '', 'label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])
                <div class="input-group">
                    <input name="{{$id}}" id="{{$id}}" placeholder="{{$form[$id]['placeholder']}}" type="text" class="form-control"/>
                    <div class="input-group-append"><span class="input-group-text">px</span></div>
                </div>
                @component('admin.components.form_error_msg', ['hasError'=>$hasError]){{ $errors->first($id) }}@endcomponent
            @endcomponent
        </div>


        {{--  preview  --}}
        <div class="col-md-3 col-12 order-md-1 order-0">
            <div class="card card-outline shadow-sm">

                <div class="card-header">
                    <div class="card-title text-sm">Preview</div>
                </div>

                <div class="card-body px-0 bg-light">
                    {{--                @php $id = 'preview'; $hasError = $errors->has($id) @endphp--}}
                    {{--                @component('admin.components.form_field', [ 'class'=>'mb-0','label'=>$form[$id]['label'], 'required'=>$form[$id]['req'], 'description'=>$form[$id]['descr'], 'description_alt'=>$form[$id]['descr_alt'], 'hasError'=>$hasError ])--}}
                    <div id="demo-preview" show="0" class="d-block mx-auto text-center overflow-hidden">
                        <div class="game-container slotmachine">
                            <div class="row no-gutters slotmachine-wrap">

                                <div class="slotmachine-bg w-100 h-100">
                                </div>


                                <div class="slotcontainer position-absolute">
                                    <div class="slot" id="slotTemplateSpin">
                                        <div class="symbols"></div>
                                    </div>

                                    <div class="slot" id="slotTemplateFlip">
                                        <div class="flipper">
                                            <div class="front"><img src="" alt="Image"></div>
                                            <div class="back"><img src="" alt="Back Image"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="result-target">
                                    <canvas id="confetti"></canvas>
                                </div>
                            </div>

                        </div>
                    </div>

                    {{--                @endcomponent</div>--}}
                </div>

                <div class="card-footer text-center" style="background :#fff !important">
                    <a href="javascript:void(0)" id="btn-preview" class="btn btn-sm btn-info">Play Demo</a>
                </div>
            </div>

        </div>



        @component('components.utility.template_popup', [
        'id' => 'modal_slot_select',
        'custom_dialog_class' => 'modal-md',
        'body_class' => 'slot-catalogue-bg'
        ])
            @slot('slot_header')
                <label class="modal-title">Select Slot Icon</label>
            @endslot

            @slot('slot')
                <div class="slot-catalogue w-100 h-100"></div>

            @endslot

            @slot('slot_footer')
                <div class="w-100">
                    <button type="button" class="btn btn-default float-left" data-dismiss="modal">{{ __('heading.btn_close') }}</button>
                    <button type="button" class="btn btn-primary btn-confirm float-right">{{ __('heading.btn_confirm') }}</button>
                </div>
            @endslot
        @endcomponent

    @endcomponent

@endcomponent