@php
    $requiredConfig = new \App\Lib\RequiredConfig();
    $configs = $requiredConfig->getConfig();
    $progressPercentage = $requiredConfig->completedConfigPercent();
    $completedConfig = $requiredConfig->completedConfig();
    uksort($configs, function ($a, $b) use ($completedConfig) {
        $aIndex = array_search($a, $completedConfig);
        $bIndex = array_search($b, $completedConfig);
        $aIndex = $aIndex === false ? -1 : $aIndex + 100;
        $bIndex = $bIndex === false ? -1 : $bIndex + 100;

        return $aIndex <=> $bIndex;
    });
@endphp
@if ($requiredConfig->completedConfigCount() < $requiredConfig->totalConfigs())

    <div class="configure-card-wrapper">
        <div class="configure-card">
            <div class="configure-card-header">
                <div class="configure-card-top flex-align gap-4">
                    <div class="configure-card-left flex-1">
                        <div class="configure-card-slide">
                            @foreach ($configs as $key => $config)
                                <h6 class="configure-card-title flex-align gap-2 mb-2 flex-nowrap"
                                    data-config_url="{{ $config['route'] }}">
                                    <span class="configure-status @if (in_array($key, $completedConfig)) complete @endif"><i
                                            class="fas fa-check"></i></span>
                                    {{ __($config['title']) }}
                                </h6>
                            @endforeach
                        </div>
                        <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0"
                            aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: {{ $progressPercentage }}%"></div>
                        </div>
                    </div>
                    <a href="" class="configure-card-link flex-shrink-0 d-inline-flex gap-1 align-items-center">
                        <i class="fas fa-cog"></i>
                        <span class="d-none d-sm-block">@lang('Configure')</span>
                    </a>
                </div>
                <div class="configure-card-bottom flex-align mt-2">
                    <a href="javascript:void(0)" class="next-btn">
                        <i class="fa-solid fa-arrow-left"></i>
                        @lang('Previous')
                    </a>
                    <div class="flex-1 flex-center gap-2">
                        <span class="count">
                            <span class="configure-count">{{ $requiredConfig->completedConfigCount() }}</span>
                            @lang('of') <span class="configure-total">{{ $requiredConfig->totalConfigs() }}</span>
                        </span>
                        <div class="show-btn">
                            @lang('Show')
                            <span class="icon text-white">
                                <i class="las la-angle-down"></i>
                            </span>
                        </div>
                    </div>
                    <a href="javascript:void(0)" class="prev-btn">
                        @lang('Next')
                        <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            <div class="configure-card-body">
                <ul class="configure-list">
                    @foreach ($configs as $key => $config)
                        <li class="configure-item flex-between">
                            <div class="configure-item-name d-flex align-items-center gap-2 flex-grow-1">
                                <span class="configure-status @if (in_array($key, $completedConfig)) complete @endif"><i
                                        class="fas fa-check text-white"></i></span>
                                <div class="d-flex justify-content-between align-items-center flex-grow-1">
                                    <span>{{ __($config['title']) }}</span>
                                    <a href="{{ $config['route'] }}" class="configure-item-btn flex-shrink-0 @if (in_array($key, $completedConfig)) disabled @endif">
                                        <i class="fas fa-angle-right"></i>
                                        <span class="d-none d-sm-block">@lang('Configure Now')</span>
                                    </a>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="configure-card-btn configure-card-handle">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-settings-icon lucide-settings">
                <path
                    d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
                <circle cx="12" cy="12" r="3" />
            </svg>
        </div>
    </div>


@push('script-lib')
    <script src="{{ asset('assets/admin/js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/jquery.ui.touch-punch.min.js') }}"></script>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";

            const configureCardWrapperStyle = localStorage.getItem('configure-card-wrapper-style');
            
            if (configureCardWrapperStyle) {
                $('.configure-card-wrapper').attr('style',configureCardWrapperStyle);
            }



            let isDragging = false;
            let listShowed = false;
            const windowWidth = $(window).width();
            let elementHeight = $('.configure-card-body').outerHeight(true) + $('.configure-card-header').outerHeight(true) + 2;
            if (windowWidth <= 575) {
                elementHeight += 6;
            }
            let spaceFromRight = 20;
            let spaceFromTop = 20;
            let spaceFromBottom = 20;
            let configBtnHeight = 64;
            $('.configure-card-wrapper').draggable({
                handle: '.configure-card-handle',
                cancel: '.configure-card-body',
                start: function(event, ui) {
                    isDragging = true;
                    ui.helper.css({
                        "bottom": "auto",
                        'transition': 'unset'
                    });
                },
                drag: function(event, ui) {
                    if (listShowed) {
                        return false;
                    }
                    const $el = ui.helper;
                    const elHeight = $el.outerHeight();
                    const windowHeight = $(window).height();
                    const draggedBottom = windowHeight - (ui.position.top + elHeight);
                    if (draggedBottom < spaceFromBottom) {
                        ui.position.top = windowHeight - elHeight - spaceFromBottom;
                    }
                    const topLimit = 10;
                    if (ui.position.top < topLimit) {
                        ui.position.top = topLimit;
                    }
                    return true;
                },
                stop: function(event, ui) {
                    setTimeout(() => isDragging = false, 100);
                    if (listShowed) {
                        return;
                    }
                    const $el = ui.helper;
                    const elWidth = $el.outerWidth();
                    const targetLeft = windowWidth - elWidth - spaceFromRight;
                    const settingBtn = $('.configure-card-btn').offset();
                    const bottomValue = ($(window).height() - (settingBtn.top - $(window).scrollTop())) - configBtnHeight;
                    let bottomValueCss = `${bottomValue < spaceFromBottom ? spaceFromBottom : bottomValue}px`;
                    let topCss = 'auto';
                    $('.configure-card-body').css({
                        "height": 'auto',
                    });
                    if (bottomValue > ($(window).height() - spaceFromTop - spaceFromBottom) * 0.4) { // if 40% of window height cross
                        bottomValueCss = 'auto';
                        topCss = settingBtn.top - $(window).scrollTop();
                        $el.css({
                            'align-items': 'flex-start',
                        })
                        if (windowWidth <= 991) {
                            topCss = settingBtn.top - $(window).scrollTop();
                        }
                        if (windowWidth <= 575) {
                            topCss = ((settingBtn.top - $(window).scrollTop()) + configBtnHeight) - $('.configure-card-wrapper').height();
                            $el.css({
                                'flex-direction': 'column-reverse',
                                'align-items': 'flex-end',
                            })
                        }
                        if (topCss < 10) {
                            topCss = 10;
                        }
                        topCss = `${topCss}px`;
                        if (bottomValue < 400 + 20 + 20) {
                            $('.configure-card-body').css({
                                "height": bottomValue - 20,
                            });
                        }
                        $('.configure-card').css({
                            'transform-origin': 'top right',
                        })
                    } else {
                        setConfigListHeight(bottomValue, settingBtn);
                        $el.css({
                            'align-items': 'flex-end',
                        })
                        $('.configure-card').css({
                            'transform-origin': 'bottom right',
                        })
                        if (windowWidth <= 575) {
                            $el.css({
                                'flex-direction': 'column',
                            })
                        }
                    }
                    $el.css({
                        "bottom": bottomValueCss,
                        "top": topCss,
                        "transition": "all linear .3s",
                        "left": "auto"
                    });

                    const style = $('.configure-card-wrapper').attr('style');
                    localStorage.setItem('configure-card-wrapper-style', style);
                    
                },
            });
            const setConfigListHeight = (bottomValue, settingBtn) => {
                let topSpace = 20;
                if ((elementHeight + configBtnHeight + bottomValue + topSpace) > $(window)
                    .height()) {
                    let fromTop = settingBtn.top + configBtnHeight;
                    if (windowWidth <= 575) {
                        fromTop -= configBtnHeight;
                    }
                    const topValue = (fromTop - topSpace - $('.configure-card-header').outerHeight(true));
                    $('.configure-card-body').css({
                        "height": topValue,
                    });
                }
            }
            const configSettingBtn = $('.configure-card-btn').offset();
            const fromBottomSpace = ($(window).height() - (configSettingBtn.top - $(window).scrollTop())) - configBtnHeight;
            setConfigListHeight(fromBottomSpace, configSettingBtn);
            $('.configure-card-btn').on('click', function(e) {
                if (isDragging) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    return false;
                }
                const toggleConfigureCard = () => {
                    $('.configure-card').toggleClass('show')
                    if ($('.configure-card').hasClass('show')) {
                        $('.configure-card').removeClass('hide')
                    } else {
                        $('.configure-card').addClass('hide')
                    }
                }
                if (listShowed) {
                    $('.show-btn').trigger('click');
                    setTimeout(() => {
                        toggleConfigureCard();
                    }, 500)
                } else {
                    toggleConfigureCard();
                }
            })
            $('.show-btn').on('click', function() {
                listShowed = listShowed ? false : true;
                $('.configure-card-body').slideToggle('')
                $(this).toggleClass('active');
            })
        })(jQuery);
    </script>
@endpush

@endif