{{--<div class="row">--}}
    {{--<div class="col-md-12">
        <div class="btn-group dashBoardSwitcher">
            <a class="btn btn-circle btn-default btn-sm" href="javascript:" data-toggle="dropdown"
               aria-expanded="false">
                {{ ucfirst(loggedUser()->default_dashboard) }}
                <img src="{{ asset("{$imgPath}/themes/" . (loggedUser()->default_dashboard === 'modern' ? "{$theme}.png" : loggedUser()->default_dashboard . '.png')) }}" class="themeImage" alt="Dashboard Preview">
                <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li>
                    @php
                        $dashboard = loggedUser()->default_dashboard;
                        $imageFile = $dashboard === 'classic' ? "$theme.png" : 'classic.png';
                        $imageSrc = asset("{$imgPath}/themes/{$imageFile}");
                        $labelText = ($dashboard === 'modern')
                            ? _mt($moduleId, 'MultiDashboard.classic')
                            : _mt($moduleId, 'MultiDashboard.modern');
                    @endphp
                    <a rel="alternate" class="dashboardUpdate" href="javascript:void(0)">
                        @if($imageSrc)
                            <img src="{{ $imageSrc }}" class="themeImage" alt="Dashboard Preview">
                        @endif
                        <label>{{ $labelText }}</label>
                    </a>
                </li>
            </ul>
        </div>
    </div>--}}
{{--</div>--}}

@php
    $dashboard = loggedUser()->default_dashboard;
    $imageFile = $dashboard === 'classic' ? "$theme.png" : 'classic.png';
    $imageSrc = asset("{$imgPath}/themes/{$imageFile}");
$labelText = ($dashboard === 'modern')  ? _mt($moduleId, 'MultiDashboard.classic'): _mt($moduleId, 'MultiDashboard.modern');
@endphp


<div class="dashboard-switcher">
    <div class="bubble pulse-button animated">
        {{--<i class="fa fa-dashboard"></i>--}}
        <img src="https://cdn-icons-png.flaticon.com/128/8323/8323511.png"/>
    </div>

    <div class="chooseDashboard">
        <h3>Choose Dashboard</h3>
        <div class="currentDashboard">
            <a rel="alternate" class="dashboardUpdate" href="javascript:void(0)">
                <img src="{{ asset("{$imgPath}/themes/" . (loggedUser()->default_dashboard === 'modern' ? "{$theme}.png" :
                       loggedUser()->default_dashboard . '.png')) }}" class="themeImage" alt="Current Dashboard">
            </a>
            <label>{{ucfirst( loggedUser()->default_dashboard)}}</label>
        </div>

        <div class="selectDashboard">
            <a rel="alternate" class="dashboardUpdate" href="javascript:void(0)">
                <img src="{{ $imageSrc }}" class="themeImage" alt="Select Dashboard">
                <label>{{ $labelText }}</label>
            </a>
        </div>
    </div>
</div>

<style>
    .dashboard-switcher {
        position: fixed;
        z-index: 9999;
        top: 20vh;
        left: 100%;
        transition: all 0.5s ease;
    }

    .dashboard-switcher.open {
        left: auto !important;
        right: 0 !important;
    }

    .dashboard-switcher .bubble {
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 0 !important;
        font-size: 22px !important;
        padding: 6px 0 !important;
        color: white;
        /* border-radius: 50% !important; */
        position: absolute;
        top: 0%;
        left: -32px;
        background: #5b5c5e;
        cursor: pointer;
        border-top-left-radius: 10px !important;
        border-bottom-left-radius: 10px !important;
    }
    .dashboard-switcher .pulse-button {
        box-shadow: 0 0 0 0 rgb(87 87 87 / 73%);
        background-color: #4c4b4b;
        cursor: pointer;
        -webkit-animation: theme-pulses 1.2s infinite cubic-bezier(0.6, 0.1, 0.2, 0.2);
        -moz-animation: theme-pulses 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        -ms-animation: theme-pulses 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        animation: theme-pulses 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    }

    .dashboard-switcher .bubble img {
        width: 20px;
    }
    .chooseDashboard {
        background: #5b5c5e;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 170px;
        border-bottom-left-radius: 10px !important;
    }

    .chooseDashboard h3 {
        margin: 6px 0px;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        border-bottom: solid 1px #c2c2c2;
        padding-bottom: 5px;
    }

    .chooseDashboard img.themeImage {
        width: 100%;
        height: auto;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .chooseDashboard label {
        display: block;
        text-align: center;
        text-transform: capitalize;
        color: #eee;
        font-weight: 500;
        font-size: 10px;
    }

    .currentDashboard {
        border: solid 1px #898989;
        /* background-color: #3a3a3a; */
        color: #fff;
        padding: 5px;
        border-radius: 5px !important;
    }
    .currentDashboard label {
        color: #eee;
        font-weight: 500;
        font-size: 10px;
    }
    .selectDashboard {
        margin-top: 20px;
    }
    @-webkit-keyframes theme-pulses {
        to {
            box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
        }
    }

    @-moz-keyframes theme-pulses {
        to {
            box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
        }
    }

    @-ms-keyframes theme-pulses {
        to {
            box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
        }
    }

    @keyframes theme-pulses {
        to {
            box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);
        }
    }
</style>

<script>
    $(document).ready(function () {
        $('body').on('click', '.dashboard-switcher .bubble', function () {
            $('.dashboard-switcher').toggleClass('open');
        });
    });

    $('.dashboardUpdate').click(function () {
        $.post("{{ scopeRoute('multiDashboard.update') }}", function (response) {
            window.location.reload();
        });
    });

</script>


<style>

    .themeImage {
        width: 100px;
        display: block;
    }

    .btn-group.dashBoardSwitcher {
        position: fixed;
        right: 0px;
        z-index: 99;
    }

    .dashBoardSwitcher .dropdown-menu {
        min-width: 200px;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 38%);
        animation: fadeInDown 0.3s ease;
    }

    .dashBoardSwitcher .dropdown-menu {
        right: 0;
        left: auto; /* Remove default left alignment */
        transform: translateX(-10%); /* Move it left relative to the toggle */
        margin-top: 5px;
        animation: fadeInLeft 0.3s ease;
    }

    .btn-group.dashBoardSwitcher a.btn.btn-circle.btn-default.btn-sm {
        background-color: #15c189;
        border: solid 1px #118f66;
        color: #fff;
    }

    .dashBoardSwitcher .dropdown-menu a.dashboardUpdate label {
        font-weight: 600;
    }

    /*.dashBoardSwitcher .dashboardUpdate {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .dashBoardSwitcher .dashboardUpdate:hover {
        background-color: #f0f0f0;
    }

    .dashBoardSwitcher .dashboardUpdate.active {
        background-color: #e0f7fa;
        font-weight: bold;
    }

    .dashBoardSwitcher .theme-option img {
        width: 50px;
        height: 35px;
        border-radius: 6px;
        object-fit: cover;
    }*/

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /*@keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(-100%);
        }
    }*/
</style>