<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required Meta Tags Always Come First -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

    <!-- Title -->
    <title>Dashboard <?php if (! empty(trim($__env->yieldContent('title')))): ?> - <?php echo $__env->yieldContent('title'); ?> <?php endif; ?></title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="<?php echo e(asset($options->favicon ?? 'images/icon.png')); ?>">

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

    <!-- CSS Implementing Plugins -->
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/vendor/icon-set/style.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/vendor/select2/dist/css/select2.min.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/vendor/chart.js/dist/Chart.min.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/vendor/daterangepicker/daterangepicker.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/vendor/quill/dist/quill.snow.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/vendor/@yaireo/tagify/dist/tagify.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/vendor/flatpickr/dist/flatpickr.min.css')); ?>">


    <!-- CSS Front Template -->
    <link rel="stylesheet" href="<?php echo e(asset('backend-assets/css/theme.min.css')); ?>">
</head>

<?php if (! empty(trim($__env->yieldContent('body')))): ?>
    <?php echo $__env->yieldContent('body'); ?>
<?php else: ?>
    <body class="has-navbar-vertical-aside navbar-vertical-aside-show-xl footer-offset">
    <?php endif; ?>



    <!-- ========== HEADER ========== -->

    <header id="header" class="navbar navbar-expand-lg navbar-fixed navbar-height navbar-flush navbar-container navbar-bordered">
        <div class="navbar-nav-wrap">
            <div class="navbar-brand-wrapper">
                <!-- Logo -->
                <a class="navbar-brand" href="<?php echo e(url('/')); ?>" aria-label="Front">
                    <img class="navbar-brand-logo" src="<?php echo e(asset($options->logo ?? 'backend-assets/svg/logos/logo.svg')); ?>" alt="Logo">
                    <img class="navbar-brand-logo-mini" src="<?php echo e(asset($options->favicon ?? 'backend-assets/svg/logos/logo-short.svg')); ?>" alt="Logo">
                </a>
                <!-- End Logo -->
            </div>
            <div class="navbar-nav-wrap-content-left">
                <!-- Navbar Vertical Toggle -->
                <button type="button" class="js-navbar-vertical-aside-toggle-invoker close mr-3">
                    <i class="tio-first-page navbar-vertical-aside-toggle-short-align" data-toggle="tooltip" data-placement="right" title="Contraer"></i>
                    <i class="tio-last-page navbar-vertical-aside-toggle-full-align" data-template='<div class="tooltip d-none d-sm-block" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' data-toggle="tooltip" data-placement="right" title="Expandir"></i>
                </button>
                <!-- End Navbar Vertical Toggle -->

            </div>

            <!-- Secondary Content -->
            <div class="navbar-nav-wrap-content-right">
                <!-- Navbar -->
                <ul class="navbar-nav align-items-center flex-row">
                    <li class="nav-item">
                        <!-- Account -->
                        <div class="hs-unfold">
                            <a class="js-hs-unfold-invoker navbar-dropdown-account-wrapper" href="javascript:;"
                               data-hs-unfold-options='{
                       "target": "#accountNavbarDropdown",
                       "type": "css-animation"
                     }'>
                                <div class="avatar avatar-sm avatar-circle">
                                    <img class="avatar-img" src="<?php echo e(asset($currentUser->image ?? 'backend-assets/img/160x160/img6.jpg')); ?>" alt="Image Description">
                                    <span class="avatar-status avatar-sm-status avatar-status-success"></span>
                                </div>
                            </a>

                            <div id="accountNavbarDropdown" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-right navbar-dropdown-menu navbar-dropdown-account" style="width: 16rem;">
                                <div class="dropdown-item-text">
                                    <div class="media align-items-center">
                                        <div class="avatar avatar-sm avatar-circle mr-2">
                                            <img class="avatar-img" src="<?php echo e(asset($currentUser->image ?? 'backend-assets/img/160x160/img6.jpg')); ?>" alt="Image Description">
                                        </div>
                                        <div class="media-body text-truncate">
                                            <span class="card-title h5 text-truncate"><?php echo e($currentUser->full_name ?? $currentUser->name); ?></span>
                                            <span class="card-text text-truncate"><?php echo e($currentUser->email); ?></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="dropdown-divider"></div>

                                <a class="dropdown-item" href="<?php echo e(route('backend.users.edit', $currentUser->id)); ?>">
                                    <span class="text-truncate pr-2" title="Editar datos">Editar datos</span>
                                </a>

                                <div class="dropdown-divider"></div>

                                <a class="dropdown-item" href="<?php echo e(route('logout')); ?>">
                                    <span class="text-truncate pr-2" title="Cerrar sesión">Cerrar sesión</span>
                                </a>
                            </div>
                        </div>
                        <!-- End Account -->
                    </li>
                </ul>
                <!-- End Navbar -->
            </div>
            <!-- End Secondary Content -->
        </div>
    </header>





    <!-- ========== END HEADER ========== -->

    <!-- ========== MAIN CONTENT ========== -->
    <!-- Navbar Vertical -->

    <aside class="js-navbar-vertical-aside navbar navbar-vertical-aside navbar-vertical navbar-vertical-fixed navbar-expand-xl navbar-bordered  ">
        <div class="navbar-vertical-container">
            <div class="navbar-vertical-footer-offset">
                <div class="navbar-brand-wrapper justify-content-between">
                    <!-- Logo -->


                    <a class="navbar-brand" href="<?php echo e(url('/')); ?>" aria-label="Front">
                        <img class="navbar-brand-logo" src="<?php echo e(asset($options->logo ?? 'backend-assets/svg/logos/logo.svg')); ?>" alt="Logo">
                        <img class="navbar-brand-logo-mini" src="<?php echo e(asset($options->favicon ?? 'backend-assets/svg/logos/logo-short.svg')); ?>" alt="Logo">
                    </a>

                    <!-- End Logo -->

                    <!-- Navbar Vertical Toggle -->
                    <button type="button" class="js-navbar-vertical-aside-toggle-invoker navbar-vertical-aside-toggle btn btn-icon btn-xs btn-ghost-dark">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                    <!-- End Navbar Vertical Toggle -->
                </div>

                <!-- Content -->
                <div class="navbar-vertical-content">
                    <ul class="navbar-nav navbar-nav-lg nav-tabs">
                        <li class="nav-item">
                            <small class="nav-subtitle" title="Contenido">Contenido</small>
                            <small class="tio-more-horizontal nav-subtitle-replacer"></small>
                        </li>

                        <!-- Pages -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/pages*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Páginas">
                                <i class="tio-files-labeled-outlined nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Páginas</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.pages.index')); ?>" title="Lista de páginas">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de páginas</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.pages.create')); ?>" title="Crear nueva página">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nueva página</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- End Pages -->
                        <!-- Sections -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/sections*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Secciones">
                                <i class="tio-book-outlined nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Secciones</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.sections.index')); ?>" title="Lista de secciones">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de secciones</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.sections.create')); ?>" title="Crear nueva sección">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nueva sección</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- End Sections -->
                        <!-- Articles -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/articles*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Artículos">
                                <i class="tio-feed-outlined nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Artículos</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.articles.index')); ?>" title="Lista de artículos">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de artículos</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.articles.create')); ?>" title="Crear nuevo artículo">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nuevo artículo</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- End Articles -->
                        <!-- Categories -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/categories*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Categorías">
                                <i class="tio-pages-outlined nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Categorías</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.categories.index')); ?>" title="Lista de categorías">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de categorías</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.categories.create')); ?>" title="Crear nuevo usuario">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nueva categoría</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- End Categories -->
                        <li class="nav-item">
                            <small class="nav-subtitle" title="eCommerce">eCommerce</small>
                            <small class="tio-more-horizontal nav-subtitle-replacer"></small>
                        </li>

                        <!-- Products -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/products*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Páginas">
                                <i class="tio-shopping-basket-outlined nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Productos</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.products.index')); ?>" title="Lista de productos">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de productos</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.products.create')); ?>" title="Crear nuevo producto">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nuevo producto</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- End Products -->
                        <!-- Payment methods -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/payment_methods*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Métodos de pago">
                                <i class="tio-credit-card-outlined nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Métodos de pago</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.payment_methods.index')); ?>" title="Lista de métodos de pago">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de métodos de pago</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.payment_methods.create')); ?>" title="Crear nuevo método de pago">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nuevo método de pago</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- End Payment methods -->
                        <!-- Shipping methods -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/shipping_methods*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Métodos de envío">
                                <i class="tio-truck nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Métodos de envío</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.shipping_methods.index')); ?>" title="Lista de métodos de envío">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de métodos de envío</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.shipping_methods.create')); ?>" title="Crear método de envío">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nuevo método de envío</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- Orders -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/orders*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link" href="<?php echo e(route('backend.orders.index')); ?>" title="Pedidos">
                                <i class="tio-shopping-cart-add nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Pedidos</span>
                            </a>

                        </li>
                        <!-- End Orders -->

                        <!-- End Shipping methods -->
                        <li class="nav-item">
                            <small class="nav-subtitle" title="Administración">Administración</small>
                            <small class="tio-more-horizontal nav-subtitle-replacer"></small>
                        </li>

                        <!-- Users -->
                        <li class="navbar-vertical-aside-has-menu <?php echo e(request()->is('backend/users*') ? 'show' : null); ?>">
                            <a class="js-navbar-vertical-aside-menu-link nav-link nav-link-toggle " href="javascript:;" title="Usuarios">
                                <i class="tio-users-switch nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Usuarios</span>
                            </a>

                            <ul class="js-navbar-vertical-aside-submenu nav nav-sub">
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.users.index')); ?>" title="Lista de usuarios">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Lista de usuarios</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="<?php echo e(route('backend.users.create')); ?>" title="Crear nuevo usuario">
                                        <span class="tio-circle nav-indicator-icon"></span>
                                        <span class="text-truncate">Crear nuevo usuario</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- End Users -->

                        <li class="nav-item ">
                            <a class="js-nav-tooltip-link nav-link " href="<?php echo e(route('backend.options')); ?>" title="Opciones" data-placement="left">
                                <i class="tio-settings-outlined nav-icon"></i>
                                <span class="navbar-vertical-aside-mini-mode-hidden-elements text-truncate">Opciones</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- End Content -->
            </div>
        </div>
    </aside>



    <!-- End Navbar Vertical -->

    <main id="content" role="main" class="main pointer-event">
        <!-- Content -->
        <div class="content container-fluid">
            <?php if($status): ?>
                <div class="alert alert-success">
                    <?php echo e($status); ?>

                </div>
            <?php endif; ?>
            <?php if($errors->any()): ?>
                <div class="alert alert-danger">
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <span class="d-block"><?php echo e($error); ?></span>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            <?php endif; ?>
            <?php echo $__env->yieldContent('content'); ?>
        </div>
        <!-- End Content -->

        <!-- Footer -->

        <!-- End Footer -->
    </main>
    <!-- ========== END MAIN CONTENT ========== -->

    <!-- ========== SECONDARY CONTENTS ========== -->
    <!-- Keyboard Shortcuts -->
    <div id="keyboardShortcutsSidebar" class="hs-unfold-content sidebar sidebar-bordered sidebar-box-shadow">
        <div class="card card-lg sidebar-card">
            <div class="card-header">
                <h4 class="card-header-title">Keyboard shortcuts</h4>

                <!-- Toggle Button -->
                <a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-ghost-dark ml-2" href="javascript:;"
                   data-hs-unfold-options='{
                "target": "#keyboardShortcutsSidebar",
                "type": "css-animation",
                "animationIn": "fadeInRight",
                "animationOut": "fadeOutRight",
                "hasOverlay": true,
                "smartPositionOff": true
               }'>
                    <i class="tio-clear tio-lg"></i>
                </a>
                <!-- End Toggle Button -->
            </div>

            <!-- Body -->
            <div class="card-body sidebar-body sidebar-scrollbar">
                <div class="list-group list-group-sm list-group-flush list-group-no-gutters mb-5">
                    <div class="list-group-item">
                        <h5 class="mb-1">Formatting</h5>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span class="font-weight-bold">Bold</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">b</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <em>italic</em>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">i</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <u>Underline</u>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">u</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <s>Strikethrough</s>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Alt</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">s</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span class="small">Small text</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">s</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <mark>Highlight</mark>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">e</kbd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="list-group list-group-sm list-group-flush list-group-no-gutters mb-5">
                    <div class="list-group-item">
                        <h5 class="mb-1">Insert</h5>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Mention person <a href="#">(@Brian)</a></span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">@</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Link to doc <a href="#">(+Meeting notes)</a></span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">+</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <a href="#">#hashtag</a>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">#hashtag</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Date</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">/date</kbd>
                                <kbd class="d-inline-block mb-1">Space</kbd>
                                <kbd class="d-inline-block mb-1">/datetime</kbd>
                                <kbd class="d-inline-block mb-1">/datetime</kbd>
                                <kbd class="d-inline-block mb-1">Space</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Time</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">/time</kbd>
                                <kbd class="d-inline-block mb-1">Space</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Note box</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">/note</kbd>
                                <kbd class="d-inline-block mb-1">Enter</kbd>
                                <kbd class="d-inline-block mb-1">/note red</kbd>
                                <kbd class="d-inline-block mb-1">/note red</kbd>
                                <kbd class="d-inline-block mb-1">Enter</kbd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="list-group list-group-sm list-group-flush list-group-no-gutters mb-5">
                    <div class="list-group-item">
                        <h5 class="mb-1">Editing</h5>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Find and replace</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">r</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Find next</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">n</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Find previous</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">p</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Indent</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Tab</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Un-indent</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Shift</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Tab</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Move line up</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Shift</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1"><i class="tio-arrow-large-upward-outlined"></i></kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Move line down</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Shift</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1"><i class="tio-arrow-large-downward-outlined font-size-sm"></i></kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Add a comment</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Alt</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">m</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Undo</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">z</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Redo</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">y</kbd>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="list-group list-group-sm list-group-flush list-group-no-gutters">
                    <div class="list-group-item">
                        <h5 class="mb-1">Application</h5>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Create new doc</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Alt</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">n</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Present</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Shift</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">p</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Share</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Shift</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">s</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Search docs</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Shift</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">o</kbd>
                            </div>
                        </div>
                    </div>
                    <div class="list-group-item">
                        <div class="row align-items-center">
                            <div class="col-5">
                                <span>Keyboard shortcuts</span>
                            </div>
                            <div class="col-7 text-right">
                                <kbd class="d-inline-block mb-1">Ctrl</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">Shift</kbd> <small class="text-muted">+</small> <kbd class="d-inline-block mb-1">/</kbd>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Body -->
        </div>
    </div>
    <!-- End Keyboard Shortcuts -->

    <!-- Activity -->
    <div id="activitySidebar" class="hs-unfold-content sidebar sidebar-bordered sidebar-box-shadow">
        <div class="card card-lg sidebar-card">
            <div class="card-header">
                <h4 class="card-header-title">Activity stream</h4>

                <!-- Toggle Button -->
                <a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-ghost-dark ml-2" href="javascript:;"
                   data-hs-unfold-options='{
              "target": "#activitySidebar",
              "type": "css-animation",
              "animationIn": "fadeInRight",
              "animationOut": "fadeOutRight",
              "hasOverlay": true,
              "smartPositionOff": true
             }'>
                    <i class="tio-clear tio-lg"></i>
                </a>
                <!-- End Toggle Button -->
            </div>

            <!-- Body -->
            <div class="card-body sidebar-body sidebar-scrollbar">
                <!-- Step -->
                <ul class="step step-icon-sm step-avatar-sm">
                    <!-- Step Item -->
                    <li class="step-item">
                        <div class="step-content-wrapper">
                            <div class="step-avatar">
                                <img class="step-avatar-img" src="<?php echo e(asset('backend-assets/img/160x160/img9.jpg')); ?>" alt="Image Description">
                            </div>

                            <div class="step-content">
                                <h5 class="mb-1">Iana Robinson</h5>

                                <p class="font-size-sm mb-1">Added 2 files to task <a class="text-uppercase" href="#"><i class="tio-folder-bookmarked"></i> Fd-7</a></p>

                                <ul class="list-group list-group-sm">
                                    <!-- List Item -->
                                    <li class="list-group-item list-group-item-light">
                                        <div class="row gx-1">
                                            <div class="col-6">
                                                <div class="media">
                              <span class="mt-1 mr-2">
                                <img class="avatar avatar-xs" src="<?php echo e(asset('backend-assets/svg/brands/excel.svg')); ?>" alt="Image Description">
                              </span>
                                                    <div class="media-body text-truncate">
                                                        <span class="d-block font-size-sm text-dark text-truncate" title="weekly-reports.xls">weekly-reports.xls</span>
                                                        <small class="d-block text-muted">12kb</small>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="media">
                              <span class="mt-1 mr-2">
                                <img class="avatar avatar-xs" src="<?php echo e(asset('backend-assets/svg/brands/word.svg')); ?>" alt="Image Description">
                              </span>
                                                    <div class="media-body text-truncate">
                                                        <span class="d-block font-size-sm text-dark text-truncate" title="weekly-reports.xls">weekly-reports.xls</span>
                                                        <small class="d-block text-muted">4kb</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <!-- End List Item -->
                                </ul>

                                <small class="text-muted text-uppercase">Now</small>
                            </div>
                        </div>
                    </li>
                    <!-- End Step Item -->

                    <!-- Step Item -->
                    <li class="step-item">
                        <div class="step-content-wrapper">
                            <span class="step-icon step-icon-soft-dark">B</span>

                            <div class="step-content">
                                <h5 class="mb-1">Bob Dean</h5>

                                <p class="font-size-sm mb-1">Marked <a class="text-uppercase" href="#"><i class="tio-folder-bookmarked"></i> Fr-6</a> as <span class="badge badge-soft-success badge-pill"><span class="legend-indicator bg-success"></span>"Completed"</span></p>

                                <small class="text-muted text-uppercase">Today</small>
                            </div>
                        </div>
                    </li>
                    <!-- End Step Item -->

                    <!-- Step Item -->
                    <li class="step-item">
                        <div class="step-content-wrapper">
                            <div class="step-avatar">
                                <img class="step-avatar-img" src="<?php echo e(asset('backend-assets/img/160x160/img3.jpg')); ?>" alt="Image Description">
                            </div>

                            <div class="step-content">
                                <h5 class="h5 mb-1">Crane</h5>

                                <p class="font-size-sm mb-1">Added 5 card to <a href="#">Payments</a></p>

                                <ul class="list-group list-group-sm">
                                    <li class="list-group-item list-group-item-light">
                                        <div class="row gx-1">
                                            <div class="col">
                                                <img class="img-fluid rounded ie-sidebar-activity-img" src="<?php echo e(asset('backend-assets/svg/illustrations/card-1.svg')); ?>" alt="Image Description">
                                            </div>
                                            <div class="col">
                                                <img class="img-fluid rounded ie-sidebar-activity-img" src="<?php echo e(asset('backend-assets/svg/illustrations/card-2.svg')); ?>" alt="Image Description">
                                            </div>
                                            <div class="col">
                                                <img class="img-fluid rounded ie-sidebar-activity-img" src="<?php echo e(asset('backend-assets/svg/illustrations/card-3.svg')); ?>" alt="Image Description">
                                            </div>
                                            <div class="col-auto align-self-center">
                                                <div class="text-center">
                                                    <a href="#">+2</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>

                                <small class="text-muted text-uppercase">May 12</small>
                            </div>
                        </div>
                    </li>
                    <!-- End Step Item -->

                    <!-- Step Item -->
                    <li class="step-item">
                        <div class="step-content-wrapper">
                            <span class="step-icon step-icon-soft-info">D</span>

                            <div class="step-content">
                                <h5 class="mb-1">David Lidell</h5>

                                <p class="font-size-sm mb-1">Added a new member to Front Dashboard</p>

                                <small class="text-muted text-uppercase">May 15</small>
                            </div>
                        </div>
                    </li>
                    <!-- End Step Item -->

                    <!-- Step Item -->
                    <li class="step-item">
                        <div class="step-content-wrapper">
                            <div class="step-avatar">
                                <img class="step-avatar-img" src="<?php echo e(asset('backend-assets/img/160x160/img7.jpg')); ?>" alt="Image Description">
                            </div>

                            <div class="step-content">
                                <h5 class="mb-1">Rachel King</h5>

                                <p class="font-size-sm mb-1">Marked <a class="text-uppercase" href="#"><i class="tio-folder-bookmarked"></i> Fr-3</a> as <span class="badge badge-soft-success badge-pill"><span class="legend-indicator bg-success"></span>"Completed"</span></p>

                                <small class="text-muted text-uppercase">Apr 29</small>
                            </div>
                        </div>
                    </li>
                    <!-- End Step Item -->

                    <!-- Step Item -->
                    <li class="step-item">
                        <div class="step-content-wrapper">
                            <div class="step-avatar">
                                <img class="step-avatar-img" src="<?php echo e(asset('backend-assets/img/160x160/img5.jpg')); ?>" alt="Image Description">
                            </div>

                            <div class="step-content">
                                <h5 class="mb-1">Finch Hoot</h5>

                                <p class="font-size-sm mb-1">Earned a "Top endorsed" <i class="tio-verified text-primary"></i> badge</p>

                                <small class="text-muted text-uppercase">Apr 06</small>
                            </div>
                        </div>
                    </li>
                    <!-- End Step Item -->

                    <!-- Step Item -->
                    <li class="step-item">
                        <div class="step-content-wrapper">
                  <span class="step-icon step-icon-soft-primary">
                    <i class="tio-user"></i>
                  </span>

                            <div class="step-content">
                                <h5 class="mb-1">Project status updated</h5>

                                <p class="font-size-sm mb-1">Marked <a class="text-uppercase" href="#"><i class="tio-folder-bookmarked"></i> Fr-3</a> as <span class="badge badge-soft-primary badge-pill"><span class="legend-indicator bg-primary"></span>"In progress"</span></p>

                                <small class="text-muted text-uppercase">Feb 10</small>
                            </div>
                        </div>
                    </li>
                    <!-- End Step Item -->
                </ul>
                <!-- End Step -->

                <a class="btn btn-block btn-white" href="javascript:;">View all <i class="tio-chevron-right"></i></a>
            </div>
            <!-- End Body -->
        </div>
    </div>
    <!-- End Activity -->

    <!-- Welcome Message Modal -->
    <div class="modal fade" id="welcomeMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <!-- Header -->
                <div class="modal-close">
                    <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                </div>
                <!-- End Header -->

                <!-- Body -->
                <div class="modal-body p-sm-5">
                    <div class="text-center">
                        <div class="w-75 w-sm-50 mx-auto mb-4">
                            <img class="img-fluid" src="<?php echo e(asset('backend-assets/svg/illustrations/graphs.svg')); ?>" alt="Image Description">
                        </div>

                        <h4 class="h1">Welcome to Front</h4>

                        <p>We're happy to see you in our community.</p>
                    </div>
                </div>
                <!-- End Body -->

                <!-- Footer -->
                <div class="modal-footer d-block text-center py-sm-5">
                    <small class="text-cap mb-4">Trusted by the world's best teams</small>

                    <div class="w-85 mx-auto">
                        <div class="row justify-content-between">
                            <div class="col">
                                <img class="img-fluid ie-welcome-brands" src="<?php echo e(asset('backend-assets/svg/brands/gitlab-gray.svg')); ?>" alt="Image Description">
                            </div>
                            <div class="col">
                                <img class="img-fluid ie-welcome-brands" src="<?php echo e(asset('backend-assets/svg/brands/fitbit-gray.svg')); ?>" alt="Image Description">
                            </div>
                            <div class="col">
                                <img class="img-fluid ie-welcome-brands" src="<?php echo e(asset('backend-assets/svg/brands/flow-xo-gray.svg')); ?>" alt="Image Description">
                            </div>
                            <div class="col">
                                <img class="img-fluid ie-welcome-brands" src="<?php echo e(asset('backend-assets/svg/brands/layar-gray.svg')); ?>" alt="Image Description">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Footer -->
            </div>
        </div>
    </div>
    <!-- End Welcome Message Modal -->

    <!-- Create a new user Modal -->
    <div class="modal fade" id="inviteUserModal" tabindex="-1" role="dialog" aria-labelledby="inviteUserModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form class="modal-content">
                <!-- Header -->
                <div class="modal-header">
                    <h4 id="inviteUserModalTitle" class="modal-title">Invite users</h4>

                    <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                </div>
                <!-- End Header -->

                <!-- Body -->
                <div class="modal-body">
                    <!-- Form Group -->
                    <div class="form-group">
                        <div class="input-group input-group-merge mb-2 mb-sm-0">
                            <div class="input-group-prepend" id="fullName">
                  <span class="input-group-text">
                    <i class="tio-search"></i>
                  </span>
                            </div>

                            <input type="text" class="form-control" name="fullName" placeholder="Search name or emails" aria-label="Search name or emails" aria-describedby="fullName">

                            <div class="input-group-append input-group-append-last-sm-down-none">
                                <!-- Select -->
                                <div id="permissionSelect" class="select2-custom select2-custom-right">
                                    <select class="js-select2-custom custom-select" size="1" style="opacity: 0;"
                                            data-hs-select2-options='{
                              "dropdownParent": "#permissionSelect",
                              "minimumResultsForSearch": "Infinity",
                              "dropdownAutoWidth": true,
                              "dropdownWidth": "11rem"
                            }'>
                                        <option value="guest" selected>Guest</option>
                                        <option value="can edit">Can edit</option>
                                        <option value="can comment">Can comment</option>
                                        <option value="full access">Full access</option>
                                    </select>
                                </div>
                                <!-- End Select -->

                                <a class="btn btn-primary d-none d-sm-block" href="javascript:;">Invite</a>
                            </div>
                        </div>

                        <a class="btn btn-block btn-primary d-sm-none" href="javascript:;">Invite</a>
                    </div>
                    <!-- End Form Group -->

                    <div class="form-row">
                        <h5 class="col modal-title">Invite users</h5>

                        <div class="col-auto">
                            <a class="d-flex align-items-center font-size-sm text-body" href="#">
                                <img class="avatar avatar-xss mr-2" src="<?php echo e(asset('backend-assets/svg/brands/gmail.svg')); ?>" alt="Image Description">
                                Import contacts
                            </a>
                        </div>
                    </div>

                    <hr class="mt-2">

                    <ul class="list-unstyled list-unstyled-py-4">
                        <!-- List Group Item -->
                        <li>
                            <div class="media">
                                <div class="avatar avatar-sm avatar-circle mr-3">
                                    <img class="avatar-img" src="<?php echo e(asset('backend-assets/img/160x160/img10.jpg')); ?>" alt="Image Description">
                                </div>

                                <div class="media-body">
                                    <div class="row align-items-center">
                                        <div class="col-sm">
                                            <h5 class="text-body mb-0">Amanda Harvey <i class="tio-verified text-primary" data-toggle="tooltip" data-placement="top" title="Top endorsed"></i></h5>
                                            <span class="d-block font-size-sm">amanda@example.com</span>
                                        </div>

                                        <div class="col-sm">
                                            <!-- Select -->
                                            <div id="inviteUserSelect1" class="select2-custom select2-custom-sm-right d-sm-flex justify-content-sm-end">
                                                <select class="js-select2-custom custom-select-sm" size="1" style="opacity: 0;"
                                                        data-hs-select2-options='{
                                    "dropdownParent": "#inviteUserSelect1",
                                    "minimumResultsForSearch": "Infinity",
                                    "customClass": "custom-select custom-select-sm custom-select-borderless pl-0",
                                    "dropdownAutoWidth": true,
                                    "width": true
                                  }'>
                                                    <option value="guest" selected>Guest</option>
                                                    <option value="can edit">Can edit</option>
                                                    <option value="can comment">Can comment</option>
                                                    <option value="full access">Full access</option>
                                                    <option value="remove" data-option-template='<span class="text-danger">Remove</span>'>Remove</option>
                                                </select>
                                            </div>
                                            <!-- End Select -->
                                        </div>
                                    </div>
                                    <!-- End Row -->
                                </div>
                            </div>
                        </li>
                        <!-- End List Group Item -->

                        <!-- List Group Item -->
                        <li>
                            <div class="media">
                                <div class="avatar avatar-sm avatar-circle mr-3">
                                    <img class="avatar-img" src="<?php echo e(asset('backend-assets/img/160x160/img3.jpg')); ?>" alt="Image Description">
                                </div>

                                <div class="media-body">
                                    <div class="row align-items-center">
                                        <div class="col-sm">
                                            <h5 class="text-body mb-0">David Harrison</h5>
                                            <span class="d-block font-size-sm">david@example.com</span>
                                        </div>

                                        <div class="col-sm">
                                            <!-- Select -->
                                            <div id="inviteUserSelect2" class="select2-custom select2-custom-sm-right d-sm-flex justify-content-sm-end">
                                                <select class="js-select2-custom custom-select-sm" size="1" style="opacity: 0;"
                                                        data-hs-select2-options='{
                                    "dropdownParent": "#inviteUserSelect2",
                                    "minimumResultsForSearch": "Infinity",
                                    "customClass": "custom-select custom-select-sm custom-select-borderless pl-0",
                                    "dropdownAutoWidth": true,
                                    "width": true
                                  }'>
                                                    <option value="guest" selected>Guest</option>
                                                    <option value="can edit">Can edit</option>
                                                    <option value="can comment">Can comment</option>
                                                    <option value="full access">Full access</option>
                                                    <option value="remove" data-option-template='<span class="text-danger">Remove</span>'>Remove</option>
                                                </select>
                                            </div>
                                            <!-- End Select -->
                                        </div>
                                    </div>
                                    <!-- End Row -->
                                </div>
                            </div>
                        </li>
                        <!-- End List Group Item -->

                        <!-- List Group Item -->
                        <li>
                            <div class="media">
                                <div class="avatar avatar-sm avatar-circle mr-3">
                                    <img class="avatar-img" src="<?php echo e(asset('backend-assets/img/160x160/img9.jpg')); ?>" alt="Image Description">
                                </div>

                                <div class="media-body">
                                    <div class="row align-items-center">
                                        <div class="col-sm">
                                            <h5 class="text-body mb-0">Ella Lauda <i class="tio-verified text-primary" data-toggle="tooltip" data-placement="top" title="Top endorsed"></i></h5>
                                            <span class="d-block font-size-sm">Markvt@example.com</span>
                                        </div>

                                        <div class="col-sm">
                                            <!-- Select -->
                                            <div id="inviteUserSelect4" class="select2-custom select2-custom-sm-right d-sm-flex justify-content-sm-end">
                                                <select class="js-select2-custom custom-select-sm" size="1" style="opacity: 0;"
                                                        data-hs-select2-options='{
                                    "dropdownParent": "#inviteUserSelect4",
                                    "minimumResultsForSearch": "Infinity",
                                    "customClass": "custom-select custom-select-sm custom-select-borderless pl-0",
                                    "dropdownAutoWidth": true,
                                    "width": true
                                  }'>
                                                    <option value="guest" selected>Guest</option>
                                                    <option value="can edit">Can edit</option>
                                                    <option value="can comment">Can comment</option>
                                                    <option value="full access">Full access</option>
                                                    <option value="remove" data-option-template='<span class="text-danger">Remove</span>'>Remove</option>
                                                </select>
                                            </div>
                                            <!-- End Select -->
                                        </div>
                                    </div>
                                    <!-- End Row -->
                                </div>
                            </div>
                        </li>
                        <!-- End List Group Item -->

                        <!-- List Group Item -->
                        <li>
                            <div class="media">
                                <div class="avatar avatar-sm avatar-soft-dark avatar-circle mr-3">
                                    <span class="avatar-initials">B</span>
                                </div>

                                <div class="media-body">
                                    <div class="row align-items-center">
                                        <div class="col-sm">
                                            <h5 class="text-body mb-0">Bob Dean</h5>
                                            <span class="d-block font-size-sm">bob@example.com</span>
                                        </div>

                                        <div class="col-sm">
                                            <!-- Select -->
                                            <div id="inviteUserSelect3" class="select2-custom select2-custom-sm-right d-sm-flex justify-content-sm-end">
                                                <select class="js-select2-custom custom-select-sm" size="1" style="opacity: 0;"
                                                        data-hs-select2-options='{
                                    "dropdownParent": "#inviteUserSelect3",
                                    "minimumResultsForSearch": "Infinity",
                                    "customClass": "custom-select custom-select-sm custom-select-borderless pl-0",
                                    "dropdownAutoWidth": true,
                                    "width": true
                                  }'>
                                                    <option value="guest" selected>Guest</option>
                                                    <option value="can edit">Can edit</option>
                                                    <option value="can comment">Can comment</option>
                                                    <option value="full access">Full access</option>
                                                    <option value="remove" data-option-template='<span class="text-danger">Remove</span>'>Remove</option>
                                                </select>
                                            </div>
                                            <!-- End Select -->
                                        </div>
                                    </div>
                                    <!-- End Row -->
                                </div>
                            </div>
                        </li>
                        <!-- End List Group Item -->
                    </ul>
                </div>
                <!-- End Body -->

                <!-- Footer -->
                <div class="modal-footer justify-content-start">
                    <div class="row align-items-center flex-grow-1 mx-n2">
                        <div class="col-sm-9 mb-2 mb-sm-0">
                            <input type="hidden" id="inviteUserPublicClipboard" value="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">

                            <p class="modal-footer-text">The public share <a href="#">link settings</a>
                                <i class="tio-help-outlined" data-toggle="tooltip" data-placement="top" title="The public share link allows people to view the project without giving access to full collaboration features."></i>
                            </p>
                        </div>

                        <div class="col-sm-3 text-sm-right">
                            <a class="js-clipboard btn btn-sm btn-white text-nowrap" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Copy to clipboard!"
                               data-hs-clipboard-options='{
                    "type": "tooltip",
                    "successText": "Copied!",
                    "contentTarget": "#inviteUserPublicClipboard",
                    "container": "#inviteUserModal"
                   }'>
                                <i class="tio-link mr-1"></i> Copy link</a>
                        </div>
                    </div>
                </div>
                <!-- End Footer -->
            </form>
        </div>
    </div>
    <!-- End Create a new user Modal -->
    <!-- ========== END SECONDARY CONTENTS ========== -->

    <!-- JS Global Compulsory  -->
    <script src="<?php echo e(asset('backend-assets/vendor/jquery/dist/jquery.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/jquery-migrate/dist/jquery-migrate.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js')); ?>"></script>

    <!-- JS Implementing Plugins -->
    <script src="<?php echo e(asset('backend-assets/vendor/chart.js/dist/Chart.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/chart.js.extensions/chartjs-extensions.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/daterangepicker/moment.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/daterangepicker/daterangepicker.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/datatables/media/js/jquery.dataTables.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/datatables.net.extensions/select/select.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/clipboard/dist/clipboard.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-file-attach/dist/hs-file-attach.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/jquery-mask-plugin/dist/jquery.mask.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-scrollspy/dist/hs-scrollspy.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/pwstrength-bootstrap/dist/pwstrength-bootstrap.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-navbar-vertical-aside/hs-navbar-vertical-aside.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-unfold/dist/hs-unfold.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-form-search/dist/hs-form-search.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/select2/dist/js/select2.full.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/quill/dist/quill.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/hs-add-field/dist/hs-add-field.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/@yaireo/tagify/dist/tagify.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/dropzone/dist/min/dropzone.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/flatpickr/dist/flatpickr.min.js')); ?>"></script>

    <!-- JS Front -->
    <script src="<?php echo e(asset('backend-assets/js/theme.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/js/jquery-ui.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/jquery-number/jquery.number.min.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/ckeditor/ckeditor.js')); ?>"></script>
    <script src="<?php echo e(asset('backend-assets/vendor/ckeditor/config.js')); ?>"></script>

    <!-- JS Plugins Init. -->
    <script>
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $(document).on('ready', function () {
        $('.sortable').sortable({
          handle: '.handle',
          update: function (event, ui) {
            var data = $(this).sortable('serialize');
            $.post($(this).attr('data-href'), data);
          }
        });

        // =======================================================


        // BUILDER TOGGLE INVOKER
        // =======================================================
        $('.js-navbar-vertical-aside-toggle-invoker').click(function () {
          $('.js-navbar-vertical-aside-toggle-invoker i').tooltip('hide');
        });




        // INITIALIZATION OF NAVBAR VERTICAL NAVIGATION
        // =======================================================
        var sidebar = $('.js-navbar-vertical-aside').hsSideNav();


        // INITIALIZATION OF TOOLTIP IN NAVBAR VERTICAL MENU
        // =======================================================
        $('.js-nav-tooltip-link').tooltip({ boundary: 'window' })

        $(".js-nav-tooltip-link").on("show.bs.tooltip", function(e) {
          if (!$("body").hasClass("navbar-vertical-aside-mini-mode")) {
            return false;
          }
        });


        // INITIALIZATION OF UNFOLD
        // =======================================================
        $('.js-hs-unfold-invoker').each(function () {
          var unfold = new HSUnfold($(this)).init();
        });


        // INITIALIZATION OF FORM SEARCH
        // =======================================================
        $('.js-form-search').each(function () {
          new HSFormSearch($(this)).init()
        });


        // INITIALIZATION OF SELECT2
        // =======================================================
        $('.js-select2-custom').each(function () {
          var select2 = $.HSCore.components.HSSelect2.init($(this));
        });


        // INITIALIZATION OF CHARTJS
        // =======================================================
        Chart.plugins.unregister(ChartDataLabels);

        $('.js-chart').each(function () {
          $.HSCore.components.HSChartJS.init($(this));
        });

        var updatingChart = $.HSCore.components.HSChartJS.init($('#updatingData'));

        // CALL WHEN TAB IS CLICKED
        // =======================================================
        $('[data-toggle="chart-bar"]').click(function(e) {
          let keyDataset = $(e.currentTarget).attr('data-datasets')

          if (keyDataset === 'lastWeek') {
            updatingChart.data.labels = ["Apr 22", "Apr 23", "Apr 24", "Apr 25", "Apr 26", "Apr 27", "Apr 28", "Apr 29", "Apr 30", "Apr 31"];
            updatingChart.data.datasets = [
              {
                "data": [120, 250, 300, 200, 300, 290, 350, 100, 125, 320],
                "backgroundColor": "#377dff",
                "hoverBackgroundColor": "#377dff",
                "borderColor": "#377dff"
              },
              {
                "data": [250, 130, 322, 144, 129, 300, 260, 120, 260, 245, 110],
                "backgroundColor": "#e7eaf3",
                "borderColor": "#e7eaf3"
              }
            ];
            updatingChart.update();
          } else {
            updatingChart.data.labels = ["May 1", "May 2", "May 3", "May 4", "May 5", "May 6", "May 7", "May 8", "May 9", "May 10"];
            updatingChart.data.datasets = [
              {
                "data": [200, 300, 290, 350, 150, 350, 300, 100, 125, 220],
                "backgroundColor": "#377dff",
                "hoverBackgroundColor": "#377dff",
                "borderColor": "#377dff"
              },
              {
                "data": [150, 230, 382, 204, 169, 290, 300, 100, 300, 225, 120],
                "backgroundColor": "#e7eaf3",
                "borderColor": "#e7eaf3"
              }
            ]
            updatingChart.update();
          }
        })


        // INITIALIZATION OF BUBBLE CHARTJS WITH DATALABELS PLUGIN
        // =======================================================
        $('.js-chart-datalabels').each(function () {
          $.HSCore.components.HSChartJS.init($(this), {
            plugins: [ChartDataLabels],
            options: {
              plugins: {
                datalabels: {
                  anchor: function(context) {
                    var value = context.dataset.data[context.dataIndex];
                    return value.r < 20 ? 'end' : 'center';
                  },
                  align: function(context) {
                    var value = context.dataset.data[context.dataIndex];
                    return value.r < 20 ? 'end' : 'center';
                  },
                  color: function(context) {
                    var value = context.dataset.data[context.dataIndex];
                    return value.r < 20 ? context.dataset.backgroundColor : context.dataset.color;
                  },
                  font: function(context) {
                    var value = context.dataset.data[context.dataIndex],
                      fontSize = 25;

                    if (value.r > 50) {
                      fontSize = 35;
                    }

                    if (value.r > 70) {
                      fontSize = 55;
                    }

                    return {
                      weight: 'lighter',
                      size: fontSize
                    };
                  },
                  offset: 2,
                  padding: 0
                }
              }
            },
          });
        });


        // INITIALIZATION OF DATERANGEPICKER
        // =======================================================
        $('.js-daterangepicker').daterangepicker();

        $('.js-daterangepicker-times').daterangepicker({
          timePicker: true,
          startDate: moment().startOf('hour'),
          endDate: moment().startOf('hour').add(32, 'hour'),
          locale: {
            format: 'M/DD hh:mm A'
          }
        });

        var start = moment();
        var end = moment();

        function cb(start, end) {
          $('#js-daterangepicker-predefined .js-daterangepicker-predefined-preview').html(start.format('MMM D') + ' - ' + end.format('MMM D, YYYY'));
        }

        $('#js-daterangepicker-predefined').daterangepicker({
          startDate: start,
          endDate: end,
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          }
        }, cb);

        cb(start, end);


        // INITIALIZATION OF DATATABLES
        // =======================================================
        var datatable = $.HSCore.components.HSDatatables.init($('#datatable'), {
          select: {
            style: 'multi',
            selector: 'td:first-child input[type="checkbox"]',
            classMap: {
              checkAll: '#datatableCheckAll',
              counter: '#datatableCounter',
              counterInfo: '#datatableCounterInfo'
            }
          },
          language: {
            zeroRecords: '<div class="text-center p-4">' +
              '<img class="mb-3" src="<?php echo e(asset('backend-assets/svg/illustrations/sorry.svg')); ?>" alt="Image Description" style="width: 7rem;">' +
              '<p class="mb-0">No data to show</p>' +
              '</div>'
          }
        });

        $('.js-datatable-filter').on('change', function() {
          var $this = $(this),
            elVal = $this.val(),
            targetColumnIndex = $this.data('target-column-index');

          datatable.column(targetColumnIndex).search(elVal).draw();
        });

        $('#datatableSearch').on('mouseup', function (e) {
          var $input = $(this),
            oldValue = $input.val();

          if (oldValue == "") return;

          setTimeout(function(){
            var newValue = $input.val();

            if (newValue == ""){
              // Gotcha
              datatable.search('').draw();
            }
          }, 1);
        });


        // INITIALIZATION OF CLIPBOARD
        // =======================================================
        $('.js-clipboard').each(function() {
          var clipboard = $.HSCore.components.HSClipboard.init(this);
        });

        // INITIALIZATION OF FILE ATTACH
        // =======================================================
        $('.js-file-attach').each(function () {
          var customFile = new HSFileAttach($(this)).init();
        });
        $('.js-file-attach-reset-img').on('click', function() {
          var href = $(this).attr('data-target');
          $(href).val('');
        });

        // INITIALIZATION OF SHOW PASSWORD
        // =======================================================
        $('.js-toggle-password').each(function () {
          new HSTogglePassword(this).init()
        });

        // INITIALIZATION OF QUILLJS EDITOR
        // =======================================================
        var quill = $.HSCore.components.HSQuill.init('.js-quill');

        // INITIALIZATION OF FLATPICKR
        // =======================================================
        $('.js-flatpickr').each(function () {
          $.HSCore.components.HSFlatpickr.init($(this));
        });

        $('.ckeditor').each(function() {
          CKEDITOR.replace($(this).attr('id'));
        });
        $('.number').number(true, 0, ',', '.');
      });
    </script>

    <!-- IE Support -->
    <script>
      if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script src="<?php echo e(asset('backend-assets/vendor/babel-polyfill/polyfill.min.js')); ?>"><\/script>');
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
    </body>
</html>
<?php /**PATH /home/bgreen/test.bgreen.com.py/resources/views/layouts/backend.blade.php ENDPATH**/ ?>