<!DOCTYPE html>
<html>

<head>
    <!-- Basic Page Info -->
    <meta charset="utf-8" />
    <title>@yield('pageTitle')</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Site favicon -->
    <link rel="icon" type="image/png" sizes="16x16"
        whref="/images/site/{{ isset(settings()->site_favicon) ? settings()->site_favicon : '' }}" />

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet" />
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('/back/vendors/styles/core.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/back/vendors/styles/icon-font.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/back/vendors/styles/style.css') }}" />
    <link rel="stylesheet" href="{{ asset('/extra-assets/jquery-ui/jquery-ui.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('/extra-assets/jquery-ui/jquery-ui.structure.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('/extra-assets/jquery-ui/jquery-ui.theme.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    @stack('stylesheets')
    @kropifyStyles
</head>

<body>
    <div class="header">
        <div class="header-left">
            <div class="menu-icon bi bi-list"></div>
            <div class="search-toggle-icon bi bi-search" data-toggle="header_search"></div>

        </div>
        <div class="header-right">
            <div class="dashboard-setting user-notification">
                <div class="dropdown">
                    <a class="dropdown-toggle no-arrow" href="javascript:;" data-toggle="right-sidebar">
                        <i class="dw dw-settings2"></i>
                    </a>
                </div>
            </div>
            @livewire('admin.top-user-info')
        </div>
    </div>

    <div class="right-sidebar">
        <div class="sidebar-title">
            <h3 class="weight-600 font-16 text-blue">
                Layout Einstellungen
                <span class="btn-block font-weight-400 font-12">User Interface Einstellungen</span>
            </h3>
            <div class="close-sidebar" data-toggle="right-sidebar-close">
                <i class="icon-copy ion-close-round"></i>
            </div>
        </div>
        <div class="right-sidebar-body customscroll">
            <div class="right-sidebar-body-content">
                <h4 class="weight-600 font-18 pb-10">Header Hintergrund</h4>
                <div class="sidebar-btn-group pb-30 mb-10">
                    <a href="javascript:void(0);" class="btn btn-outline-primary header-white active">White</a>
                    <a href="javascript:void(0);" class="btn btn-outline-primary header-dark">Dark</a>
                </div>

                <h4 class="weight-600 font-18 pb-10">Sidebar Hintergrund</h4>
                <div class="sidebar-btn-group pb-30 mb-10">
                    <a href="javascript:void(0);" class="btn btn-outline-primary sidebar-light active">White</a>
                    <a href="javascript:void(0);" class="btn btn-outline-primary sidebar-dark">Dark</a>
                </div>

                <h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
                <div class="sidebar-radio-group pb-10 mb-10">
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebaricon-1" name="menu-dropdown-icon" class="custom-control-input"
                            value="icon-style-1" checked="" />
                        <label class="custom-control-label" for="sidebaricon-1"><i class="fa fa-angle-down"></i></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebaricon-2" name="menu-dropdown-icon" class="custom-control-input"
                            value="icon-style-2" />
                        <label class="custom-control-label" for="sidebaricon-2"><i class="ion-plus-round"></i></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebaricon-3" name="menu-dropdown-icon" class="custom-control-input"
                            value="icon-style-3" />
                        <label class="custom-control-label" for="sidebaricon-3"><i
                                class="fa fa-angle-double-right"></i></label>
                    </div>
                </div>

                <h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
                <div class="sidebar-radio-group pb-30 mb-10">
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebariconlist-1" name="menu-list-icon" class="custom-control-input"
                            value="icon-list-style-1" checked="" />
                        <label class="custom-control-label" for="sidebariconlist-1"><i
                                class="ion-minus-round"></i></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebariconlist-2" name="menu-list-icon"
                            class="custom-control-input" value="icon-list-style-2" />
                        <label class="custom-control-label" for="sidebariconlist-2"><i class="fa fa-circle-o"
                                aria-hidden="true"></i></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebariconlist-3" name="menu-list-icon"
                            class="custom-control-input" value="icon-list-style-3" />
                        <label class="custom-control-label" for="sidebariconlist-3"><i
                                class="dw dw-check"></i></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebariconlist-4" name="menu-list-icon"
                            class="custom-control-input" value="icon-list-style-4" checked="" />
                        <label class="custom-control-label" for="sidebariconlist-4"><i
                                class="icon-copy dw dw-next-2"></i></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebariconlist-5" name="menu-list-icon"
                            class="custom-control-input" value="icon-list-style-5" />
                        <label class="custom-control-label" for="sidebariconlist-5"><i
                                class="dw dw-fast-forward-1"></i></label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="sidebariconlist-6" name="menu-list-icon"
                            class="custom-control-input" value="icon-list-style-6" />
                        <label class="custom-control-label" for="sidebariconlist-6"><i
                                class="dw dw-next"></i></label>
                    </div>
                </div>

                <div class="reset-options pt-30 text-center">
                    <button class="btn btn-danger" id="reset-settings">
                        Einstellungen zurücksetzen
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="left-side-bar">
        <div class="brand-logo">
            <a href="/">
                <img src="/images/site/{{ isset(settings()->site_logo) ? settings()->site_logo : '' }}"
                    alt="brand-logo" class="dark-logo" />
                <img src="/images/site/{{ isset(settings()->site_logo) ? settings()->site_logo : '' }}"
                    alt="brand-logo" class="light-logo" />
            </a>
            <div class="close-sidebar" data-toggle="left-sidebar-close">
                <i class="ion-close-round"></i>
            </div>
        </div>
        <div class="menu-block customscroll">
            <div class="sidebar-menu">
                <ul id="accordion-menu">
                    <li>
                        <a href="{{ route('admin.dashboard') }}"
                            class="dropdown-toggle no-arrow {{ Route::is('admin.dashboard') ? 'active' : '' }}">
                            <span class="micon bi bi-house"></span><span class="mtext">Home</span>
                        </a>
                    </li>
                    @if (auth()->user()->type == 'superAdmin')
                        <li>
                            <a href="{{ route('admin.categories') }}"
                                class="dropdown-toggle no-arrow {{ Route::is('admin.categories') ? 'active' : '' }}">
                                <span class="micon fa fa-th-list"></span><span class="mtext">Kategorien</span>
                            </a>
                        </li>
                    @endif
                    <li class="dropdown">
                        <a href="javascript:;"
                            class="dropdown-toggle {{ Route::is('admin.add_posts') || Route::is('admin.posts') || Route::is('admin.edit_post') ? 'active' : '' }}">
                            <span class="micon fa fa-newspaper-o"></span><span class="mtext"> Posts </span>
                        </a>
                        <ul class="submenu">
                            <li><a href="{{ route('admin.add_post') }}"
                                    class="{{ Route::is('admin.add_post') ? 'active' : '' }}">Neuen
                                    Post</a></li>
                            <li><a href="{{ route('admin.posts') }}"
                                    class="{{ Route::is('admin.posts') ? 'active' : '' }}">Posts</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="dropdown-divider"></div>
                    </li>
                    <li>
                        <div class="sidebar-small-cap">Einstellungen</div>
                    </li>
                    <li>
                        <a href="{{ route('admin.profile') }}"
                            class="dropdown-toggle no-arrow {{ Route::is('admin.profile') ? 'active' : '' }}">
                            <span class="micon fa fa-user-circle"></span>
                            <span class="mtext">Profile</span>
                        </a>
                    </li>
                    @if (auth()->user()->type == 'superAdmin')
                        <li>
                            <a href="{{ route('admin.settings') }}"
                                class="dropdown-toggle no-arrow {{ Route::is('admin.settings') ? 'active' : '' }}">
                                <span class="micon fa fa-cogs"></span>
                                <span class="mtext">Allgemein</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('admin.slider') }}"
                                class="dropdown-toggle no-arrow {{ Route::is('admin.slider') ? 'active' : '' }}">
                                <span class="micon dw dw-image"></span>
                                <span class="mtext">Manage Slider</span>
                            </a>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </div>
    <div class="mobile-menu-overlay"></div>

    <div class="main-container">
        <div class="pd-ltr-20 xs-pd-20-10">
            <div class="min-height-200px">
                <div class="">
                    @yield('content')
                </div>
            </div>
            <div class="footer-wrap pd-20 mb-20 card-box">
                DeskApp - Bootstrap 4 Admin Template By
                <a href="https://github.com/dropways" target="_blank">Ankit Hingarajiya</a>
            </div>
        </div>
    </div>
    <!-- js -->
    <script src="{{ asset('/back/vendors/scripts/core.js') }}"></script>
    <script src="{{ asset('/back/vendors/scripts/script.min.js') }}"></script>
    <script src="{{ asset('/back/vendors/scripts/process.js') }}"></script>
    <script src="{{ asset('/back/vendors/scripts/layout-settings.js') }}"></script>
    <script src="{{ asset('/extra-assets/jquery-ui/jquery-ui.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        toastr.options = {
            "closeButton": true,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-bottom-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        window.addEventListener("showToastr", function(event) {
            const type = event.detail[0].type; // z.B. 'success', 'error', 'info', 'warning'
            const message = event.detail[0].message; // Text der Meldung

            const Toast = Swal.mixin({
                toast: true,
                position: "bottom-end",
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Toast.fire({
                icon: type,
                title: message
            });


            // Dynamischer Aufruf: toastr.success(message), toastr.error(message) etc.
            /* if (typeof toastr[type] === 'function') {
                toastr[type](message);
            } else {
                // Fallback, falls ein unbekannter Typ kommt
                toastr.info(message);
            } */
        });
    </script>
    @kropifyScripts
    @stack('scripts')
</body>

</html>
