first change
This commit is contained in:
57
resources/views/components/approve-modal.blade.php
Normal file
57
resources/views/components/approve-modal.blade.php
Normal file
@@ -0,0 +1,57 @@
|
||||
@props(['data','route','name', 'statusList'])
|
||||
<div class="modal fade" id="{{$name}}ApproveModal" tabindex="-1" aria-labelledby="{{$name}}ApproveModalLabel" aria-modal="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="{{$name}}ApproveModalLabel">Schedule Form</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="{{$route}}" class="needs-validation" method="POST"
|
||||
novalidate>
|
||||
@csrf
|
||||
<div class="row g-3">
|
||||
{{ html()->hidden('id', $data->id) }}
|
||||
|
||||
<div class="col-12">
|
||||
<div>
|
||||
{{ html()->label('Status')->for('status')->class('form-label') }}
|
||||
{{ html()->select('status', $statusList, 12)->id('status')->class('form-control select2')->required() }}
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
<div class="col-6">
|
||||
<div>
|
||||
{{ html()->label('For date')->for('release_date')->class('form-label') }}
|
||||
{{ html()->date('release_date')->id('release_date')->class('form-control')->required() }}
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
<div class="col-6">
|
||||
<div>
|
||||
{{ html()->label('For time')->for('release_time')->class('form-label') }}
|
||||
{{ html()->time('release_time')->id('release_time')->class('form-control')->required() }}
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
<div class="col-12">
|
||||
<div>
|
||||
{{ html()->label('Remarks')->for('approval_remarks')->class('form-label') }}
|
||||
{{ html()->textarea('remarks')->id('remarks')->class('form-control')->attributes(['rows' => 3]) }}
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
<div class="col-lg-12">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-sm btn-light"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Schedule</button>
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
</div><!--end row-->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
7
resources/views/components/auth-session-status.blade.php
Normal file
7
resources/views/components/auth-session-status.blade.php
Normal file
@@ -0,0 +1,7 @@
|
||||
@props(['status'])
|
||||
|
||||
@if ($status)
|
||||
<div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
|
||||
{{ $status }}
|
||||
</div>
|
||||
@endif
|
||||
65
resources/views/components/clock-in-clock-out-form.blade.php
Normal file
65
resources/views/components/clock-in-clock-out-form.blade.php
Normal file
@@ -0,0 +1,65 @@
|
||||
@props(['isClockIn'])
|
||||
|
||||
<div class="modal fade" id="clockInOutForm" tabindex="-1" aria-labelledby="clockInOutFormLabel" aria-modal="true">
|
||||
<div class="modal-dialog">
|
||||
<form action="{{ route('attendance.clockInOut') }}" method="POST">
|
||||
@csrf
|
||||
<div class="modal-content">
|
||||
<div class="modal-header mb-3">
|
||||
<h5 class="modal-title" id="clockInOutFormLabel">{{ $isClockIn ? 'Clock Out' : 'Clock In' }} </h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="border border-dashed"></div>
|
||||
|
||||
<div class="modal-body mb-3">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-2">
|
||||
<i class="feather" data-feather="clock"></i>
|
||||
</div>
|
||||
<div class="fs-5">
|
||||
{{ now()->setTimezone('Asia/Kathmandu')->format('d-m-Y h:i A') }}
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="float-end">
|
||||
<span class="badge badge-pill bg-info p-1">General Shift</span>
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div>
|
||||
<label for="location" class="form-label">Location</label>
|
||||
<input type="text" class="form-control" id="location" value="Kathmandu/Nepal" disabled>
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
|
||||
@if (!$isClockIn)
|
||||
<div class="col-lg-6">
|
||||
{{ html()->label('Working From')->class('form-label') }}
|
||||
{{ html()->select('work_from_type', ['home' => 'Home', 'office' => 'Office', 'other' => 'Other'])->class('form-control')->placeholder('Working from?')->attribute('required') }}
|
||||
</div><!--end col-->
|
||||
<input type="hidden" name="type" value="clockout">
|
||||
@else
|
||||
<input type="hidden" name="type" value="clockin">
|
||||
@endif
|
||||
|
||||
</div><!--end row-->
|
||||
</div>
|
||||
<div class="border border-dashed"></div>
|
||||
<div class="modal-footer mt-3">
|
||||
<div class="hstack justify-content-end gap-2">
|
||||
<button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit"
|
||||
class="btn {{ $isClockIn ? 'btn-primary' : 'btn-danger' }} btn-sm">{{ $isClockIn ? 'Clock In' : 'Clock Out' }}</button>
|
||||
</div>
|
||||
</div><!--end col-->
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
<div class="navbar-brand-box horizontal-logo">
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-dark">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img src="{{ asset(setting('logo')) }}" alt="" height="17">
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-light">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img src="{{ asset(setting('logo_white')) }}" alt="" height="17">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
14
resources/views/components/dashboard/breadcumb.blade.php
Normal file
14
resources/views/components/dashboard/breadcumb.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
@props(['title' => 'Dashboard'])
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-sm-0">{{ $title }}</h4>
|
||||
<div class="page-title-right">
|
||||
<ol class="breadcrumb m-0">
|
||||
<li class="breadcrumb-item"><a href="javascript: void(0);">CCMS</a></li>
|
||||
<li class="breadcrumb-item active">{{ $title }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
resources/views/components/dashboard/footer.blade.php
Normal file
14
resources/views/components/dashboard/footer.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
{{ date('Y') }} © Consultancy All in one solutions.
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="text-sm-end d-none d-sm-block">
|
||||
Design & Develop by Bibhuti Solutions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
183
resources/views/components/dashboard/navbar.blade.php
Normal file
183
resources/views/components/dashboard/navbar.blade.php
Normal file
@@ -0,0 +1,183 @@
|
||||
<header id="page-topbar">
|
||||
<div class="layout-width">
|
||||
<div class="navbar-header">
|
||||
<div class="d-flex">
|
||||
<!-- LOGO -->
|
||||
<x-dashboard.application-logo />
|
||||
|
||||
<button type="button" class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger"
|
||||
id="topnav-hamburger-icon">
|
||||
<span class="hamburger-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
<div class="dropdown d-none topbar-head-dropdown header-item">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
|
||||
id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i class="bx bx-search fs-22"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
|
||||
aria-labelledby="page-header-search-dropdown">
|
||||
<form class="p-3">
|
||||
<div class="form-group m-0">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search ..."
|
||||
aria-label="Recipient's username">
|
||||
<button class="btn btn-primary" type="submit"><i
|
||||
class="mdi mdi-magnify"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@can('dashboard.toggleDashboard')
|
||||
<livewire:toggle-switch />
|
||||
@endcan
|
||||
<div class="ms-1 header-item d-none d-sm-flex">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
|
||||
data-toggle="fullscreen">
|
||||
<i class='bx bx-fullscreen fs-22'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ms-1 header-item d-none d-sm-flex">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle light-dark-mode">
|
||||
<i class='bx bx-moon fs-22'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown topbar-head-dropdown ms-1 header-item" id="notificationDropdown">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
|
||||
id="page-header-notifications-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<i class='bx bx-bell fs-22'></i>
|
||||
<span
|
||||
class="position-absolute topbar-badge fs-10 translate-middle badge rounded-pill bg-danger">3<span
|
||||
class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
|
||||
aria-labelledby="page-header-notifications-dropdown">
|
||||
|
||||
<div class="dropdown-head bg-primary bg-pattern rounded-top">
|
||||
<div class="p-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h6 class="m-0 fs-16 fw-semibold text-white"> Notifications </h6>
|
||||
</div>
|
||||
<div class="col-auto dropdown-tabs">
|
||||
<span class="badge bg-light-subtle text-body fs-13"> 4 New</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 pt-2">
|
||||
<ul class="nav nav-tabs dropdown-tabs nav-tabs-custom" data-dropdown-tabs="true"
|
||||
id="notificationItemsTab" role="tablist">
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#all-noti-tab"
|
||||
role="tab" aria-selected="true">
|
||||
All (4)
|
||||
</a>
|
||||
</li>
|
||||
{{-- <li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#messages-tab" role="tab"
|
||||
aria-selected="false">
|
||||
Messages
|
||||
</a>
|
||||
</li> --}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-content position-relative" id="notificationItemsTabContent">
|
||||
<div class="tab-pane fade show active py-2 ps-2" id="all-noti-tab" role="tabpanel">
|
||||
<div data-simplebar style="max-height: 300px;" class="pe-2">
|
||||
<div class="text-reset notification-item d-block dropdown-item position-relative">
|
||||
<div class="d-flex">
|
||||
<img src="{{ asset('assets/images/users/avatar-8.jpg') }}"
|
||||
class="me-3 rounded-circle avatar-xs flex-shrink-0" alt="user-pic">
|
||||
<div class="flex-grow-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">We talked about a project on linkedin.</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 4 hrs ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="all-notification-check04">
|
||||
<label class="form-check-label"
|
||||
for="all-notification-check04"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-3 text-center view-all">
|
||||
<button type="button"
|
||||
class="btn btn-soft-success waves-effect waves-light">View
|
||||
All Notifications <i class="ri-arrow-right-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-actions" id="notification-actions">
|
||||
<div class="d-flex text-muted justify-content-center">
|
||||
Select <div id="select-content" class="text-body fw-semibold px-1">0</div>
|
||||
Result
|
||||
<button type="button" class="btn btn-link link-danger p-0 ms-3"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#removeNotificationModal">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown ms-sm-3 header-item topbar-user">
|
||||
<button type="button" class="btn" id="page-header-user-dropdown" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="d-flex align-items-center">
|
||||
<img class="rounded-circle header-profile-user"
|
||||
src="{{ asset('assets/images/avatar.png') }}" alt="Header Avatar">
|
||||
<span class="text-start ms-xl-2">
|
||||
<span
|
||||
class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">{{ auth()->user()->name }}</span>
|
||||
<span
|
||||
class="d-none d-xl-block ms-1 fs-12 user-name-sub-text">{{ auth()->user()->roles->map(function ($role) {
|
||||
return $role->name;
|
||||
})->implode(' ') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<h6 class="dropdown-header">Welcome {{ auth()->user()->name }}!</h6>
|
||||
<a class="dropdown-item" href="javascript:void(0)"
|
||||
onclick="event.preventDefault(); $('#logout-form').submit();"><i
|
||||
class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span
|
||||
class="align-middle" data-key="t-logout">Logout</span></a>
|
||||
<form id="logout-form" method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
7
resources/views/components/dashboard/preloader.blade.php
Normal file
7
resources/views/components/dashboard/preloader.blade.php
Normal file
@@ -0,0 +1,7 @@
|
||||
<div id="preloader">
|
||||
<div id="status">
|
||||
<div class="spinner-border text-primary avatar-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!-- removeNotificationModal -->
|
||||
<div id="removeNotificationModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="NotificationModalbtn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this Notification ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="delete-notification">Yes, Delete It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
89
resources/views/components/dashboard/sidebar-menu.blade.php
Normal file
89
resources/views/components/dashboard/sidebar-menu.blade.php
Normal file
@@ -0,0 +1,89 @@
|
||||
@php
|
||||
function isMenuVisible($menu)
|
||||
{
|
||||
if (array_key_exists('module', $menu) && !empty($menu['module'])) {
|
||||
if (!Module::isModuleEnabled($menu['module'])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (array_key_exists('can', $menu) && !empty($menu['can'])) {
|
||||
if (
|
||||
!auth()
|
||||
->user()
|
||||
->can($menu['can'])
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (array_key_exists('submenu', $menu) && is_array($menu['submenu'])) {
|
||||
foreach ($menu['submenu'] as $submenu) {
|
||||
if (isSubmenuVisible($submenu)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function isSubmenuVisible($submenu)
|
||||
{
|
||||
return !array_key_exists('can', $submenu) ||
|
||||
empty($submenu['can']) ||
|
||||
auth()
|
||||
->user()
|
||||
->can($submenu['can']);
|
||||
}
|
||||
@endphp
|
||||
|
||||
@foreach ($menus as $menu)
|
||||
@if (isMenuVisible($menu))
|
||||
@if (array_key_exists('menu-title', $menu))
|
||||
<li class="menu-title">
|
||||
<i class="ri-more-fill"></i>
|
||||
<span>{{ $menu['menu-title'] }}</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="nav-item">
|
||||
@if (array_key_exists('submenu', $menu))
|
||||
@php
|
||||
$menuList = array_column($menu['submenu'], 'url');
|
||||
$isActive = in_array(\Request::path(), $menuList);
|
||||
@endphp
|
||||
|
||||
<a class="nav-link menu-link @if ($isActive) collapsed active @endif"
|
||||
data-bs-toggle="collapse" role="button" aria-expanded="false"
|
||||
aria-controls="{{ str()->slug($menu['text']) }}" href="#{{ str()->slug($menu['text']) }}">
|
||||
<i class="{{ $menu['icon'] }}"></i><span
|
||||
data-key="t-{{ str()->slug($menu['text']) }}">{{ $menu['text'] }}</span>
|
||||
</a>
|
||||
|
||||
<div class="menu-dropdown @if ($isActive) show @endif collapse"
|
||||
id="{{ str()->slug($menu['text']) }}">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
@foreach ($menu['submenu'] as $subMenu)
|
||||
@if (isSubmenuVisible($subMenu))
|
||||
<li class="nav-item">
|
||||
<a href="{{ url($subMenu['url']) }}"
|
||||
class="nav-link @if (\Request::is($subMenu['url']) || \Request::is($subMenu['url'] . '/*')) active @endif">
|
||||
{{ $subMenu['text'] }}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@else
|
||||
<a href="{{ url($menu['url']) ?? '#' }}"
|
||||
class="nav-link @if (\Request::is($menu['url']) || \Request::is($menu['url'] . '/*')) active @endif">
|
||||
<i class="{{ $menu['icon'] }}"></i><span
|
||||
data-key="t-{{ str()->slug($menu['text']) }}">{{ $menu['text'] }}</span>
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
40
resources/views/components/dashboard/sidebar.blade.php
Normal file
40
resources/views/components/dashboard/sidebar.blade.php
Normal file
@@ -0,0 +1,40 @@
|
||||
<div class="app-menu navbar-menu">
|
||||
<!-- LOGO -->
|
||||
<div class="navbar-brand-box">
|
||||
<!-- Dark Logo-->
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-dark">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img class="dark-login" src="{{ asset(setting('logo')) }}" alt="">
|
||||
</span>
|
||||
</a>
|
||||
<!-- Light Logo-->
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-light">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img class="light-login" src="{{ asset(setting('logo_white')) }}" alt="">
|
||||
</span>
|
||||
</a>
|
||||
<button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover"
|
||||
id="vertical-hover">
|
||||
<i class="ri-record-circle-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="scrollbar">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="two-column-menu">
|
||||
</div>
|
||||
<ul class="navbar-nav" id="navbar-nav">
|
||||
{!! Module::sidebarMenu(auth()->user()->active_sidebar) !!}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-background"></div>
|
||||
</div>
|
||||
740
resources/views/components/dashboard/theme-changer.blade.php
Normal file
740
resources/views/components/dashboard/theme-changer.blade.php
Normal file
@@ -0,0 +1,740 @@
|
||||
<div class="customizer-setting d-none d-md-block">
|
||||
<div class="btn-info rounded-pill shadow-lg btn btn-icon btn-lg p-2" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
|
||||
<i class='mdi mdi-spin mdi-cog-outline fs-22'></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme Settings -->
|
||||
<div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
|
||||
<div class="d-flex align-items-center bg-primary bg-gradient p-3 offcanvas-header">
|
||||
<h5 class="m-0 me-2 text-white">Theme Customizer</h5>
|
||||
|
||||
<button type="button" class="btn-close btn-close-white ms-auto" id="customizerclose-btn" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body p-0">
|
||||
<div data-simplebar class="h-100">
|
||||
<div class="p-4">
|
||||
<h6 class="mb-0 fw-semibold text-uppercase">Layout</h6>
|
||||
<p class="text-muted">Choose your layout</p>
|
||||
|
||||
<div class="row gy-3">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout01" name="data-layout" type="radio" value="vertical" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout01">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Vertical</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout02" name="data-layout" type="radio" value="horizontal" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout02">
|
||||
<span class="d-flex h-100 flex-column gap-1">
|
||||
<span class="bg-light d-flex p-1 gap-1 align-items-center">
|
||||
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
|
||||
</span>
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Horizontal</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout03" name="data-layout" type="radio" value="twocolumn" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout03">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Two Column</h5>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout04" name="data-layout" type="radio" value="semibox" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout04">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0 p-1">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Semi Box</h5>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Color Scheme</h6>
|
||||
<p class="text-muted">Choose Light or Dark Scheme.</p>
|
||||
|
||||
<div class="colorscheme-cardradio">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="layout-mode-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio dark">
|
||||
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100 bg-dark" for="layout-mode-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-white bg-opacity-10 d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-white bg-opacity-10 d-block p-1"></span>
|
||||
<span class="bg-white bg-opacity-10 d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-visibility">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Visibility</h6>
|
||||
<p class="text-muted">Choose show or Hidden sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-visibility" id="sidebar-visibility-show" value="show">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-visibility-show">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0 p-1">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Show</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-visibility" id="sidebar-visibility-hidden" value="hidden">
|
||||
<label class="form-check-label p-0 avatar-md w-100 px-2" for="sidebar-visibility-hidden">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 px-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Hidden</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-width">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Width</h6>
|
||||
<p class="text-muted">Choose Fluid or Boxed layout.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-fluid" value="fluid">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="layout-width-fluid">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Fluid</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-boxed" value="boxed">
|
||||
<label class="form-check-label p-0 avatar-md w-100 px-2" for="layout-width-boxed">
|
||||
<span class="d-flex gap-1 h-100 border-start border-end">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Boxed</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-position">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Position</h6>
|
||||
<p class="text-muted">Choose Fixed or Scrollable Layout Position.</p>
|
||||
|
||||
<div class="btn-group radio" role="group">
|
||||
<input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed" value="fixed">
|
||||
<label class="btn btn-light w-sm" for="layout-position-fixed">Fixed</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="data-layout-position" id="layout-position-scrollable" value="scrollable">
|
||||
<label class="btn btn-light w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Topbar Color</h6>
|
||||
<p class="text-muted">Choose Light or Dark Topbar Color.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-primary d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-size">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Size</h6>
|
||||
<p class="text-muted">Choose a size of Sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-default" value="lg">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-default">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Default</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-compact" value="md">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-compact">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Compact</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small" value="sm">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Small (Icon View)</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small-hover" value="sm-hover">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small-hover">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Small Hover View</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-view">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar View</h6>
|
||||
<p class="text-muted">Choose Default or Detached Sidebar view.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-default" value="default">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-default">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Default</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-detached" value="detached">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-detached">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-flex p-1 gap-1 align-items-center px-2">
|
||||
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
|
||||
</span>
|
||||
<span class="d-flex gap-1 h-100 p-1 px-2">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="bg-light d-block p-1 mt-auto px-2"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Detached</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar-color">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Color</h6>
|
||||
<p class="text-muted">Choose a color of Sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-white border-end d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button class="btn btn-link avatar-md w-100 p-0 overflow-hidden border collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient" aria-expanded="false" aria-controls="collapseBgGradient">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-vertical-gradient d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<h5 class="fs-13 text-center mt-2">Gradient</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="collapse" id="collapseBgGradient">
|
||||
<div class="d-flex gap-2 flex-wrap img-switch p-2 px-3 bg-light rounded">
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient" value="gradient">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-2" value="gradient-2">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-2">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-2"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-3" value="gradient-3">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-3">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-3"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-4" value="gradient-4">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-4">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-4"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-img">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Images</h6>
|
||||
<p class="text-muted">Choose a image of Sidebar.</p>
|
||||
|
||||
<div class="d-flex gap-2 flex-wrap img-switch">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-none" value="none">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-none">
|
||||
<span class="avatar-md w-auto bg-light d-flex align-items-center justify-content-center">
|
||||
<i class="ri-close-fill fs-20"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-01" value="img-1">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-01">
|
||||
<img src="assets/images/sidebar/img-1.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-02" value="img-2">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-02">
|
||||
<img src="assets/images/sidebar/img-2.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-03" value="img-3">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-03">
|
||||
<img src="assets/images/sidebar/img-3.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-04" value="img-4">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-04">
|
||||
<img src="assets/images/sidebar/img-4.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preloader-menu">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Preloader</h6>
|
||||
<p class="text-muted">Choose a preloader.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-custom" value="enable">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-custom">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<!-- <div id="preloader"> -->
|
||||
<div id="status" class="d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary avatar-xxs m-auto" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Enable</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-none" value="disable">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-none">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Disable</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end preloader-menu -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="offcanvas-footer border-top p-3 text-center">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a href="https://1.envato.market/velzon-admin" target="_blank" class="btn btn-primary w-100">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
207
resources/views/components/data-table-script.blade.php
Normal file
207
resources/views/components/data-table-script.blade.php
Normal file
@@ -0,0 +1,207 @@
|
||||
@props(['route', 'columns', 'reorder' => null])
|
||||
|
||||
<table class="display table table-bordered dt-responsive ajax-datatable table-sm" style="width:100%">
|
||||
<thead class="text-white" style="background-color: var(--vz-primary)">
|
||||
<tr>
|
||||
@foreach ($columns as $index => $column)
|
||||
<th>{{ $column['title'] }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
@push('css')
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
|
||||
@endpush
|
||||
|
||||
@push('js')
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
|
||||
|
||||
@if (!is_null($reorder))
|
||||
<script>
|
||||
$("#table-body").sortable({
|
||||
items: "tr",
|
||||
cursor: 'move',
|
||||
opacity: 0.6,
|
||||
update: function() {
|
||||
sendOrderToServer();
|
||||
}
|
||||
});
|
||||
|
||||
function sendOrderToServer() {
|
||||
|
||||
var order = [];
|
||||
var token = $('meta[name="csrf-token"]').attr('content');
|
||||
|
||||
$('tr.tableRow').each(function(index, element) {
|
||||
order.push({
|
||||
id: $(this).attr('data-id'),
|
||||
position: index + 1
|
||||
});
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "{{ $reorder }}",
|
||||
dataType: "json",
|
||||
data: {
|
||||
order: order,
|
||||
_token: token
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.status == true) {
|
||||
console.log(response.message);
|
||||
$('.ajax-datatable').DataTable().ajax.reload();
|
||||
} else {
|
||||
console.log(response);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
let table = $('.ajax-datatable').DataTable({
|
||||
processing: true,
|
||||
reordering: true,
|
||||
serverSide: true,
|
||||
dom: "Blfrtip",
|
||||
buttons: ["copy", "csv", "excel", "print"],
|
||||
ajax: {
|
||||
url: "{{ $route }}",
|
||||
data: function (d) {
|
||||
let formData = $('#filter-form').serializeArray();
|
||||
formData.forEach((field) => {
|
||||
d[field.name] = field.value === "null" ? null : field.value;
|
||||
});
|
||||
}
|
||||
},
|
||||
columns: @json($columns),
|
||||
rowCallback: function(row, data) {
|
||||
$(row).attr('data-id', data.id);
|
||||
},
|
||||
initComplete: function() {
|
||||
$('[data-bs-toggle="tooltip"]').tooltip('dispose').tooltip();
|
||||
}
|
||||
});
|
||||
|
||||
$('body').on('click', '.remove-item', function(e) {
|
||||
e.preventDefault();
|
||||
let url = $(this).data('link');
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, delete it!'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'DELETE',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.status == 200) {
|
||||
flasher.success(response.message);
|
||||
$('.ajax-datatable').DataTable().ajax.reload();
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error(xhr.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('body').on('click', '.toggle-item', function(e) {
|
||||
e.preventDefault();
|
||||
let url = $(this).data('link');
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "Item will be marked as " + $(this).attr('data-status') + "!",
|
||||
icon: 'info',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, toggle it!'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'get',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.status == 200) {
|
||||
flasher.success(response.message);
|
||||
$('.ajax-datatable').DataTable().ajax.reload();
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error(xhr.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('body').on('click', '.mark-item', function(e) {
|
||||
e.preventDefault();
|
||||
let url = $(this).data('link');
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "Item will be marked as " + $(this).attr('data-status') + "!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: 'yellow',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, mark it!'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'get',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.status == 200) {
|
||||
flasher.success(response.message);
|
||||
$('.ajax-datatable').DataTable().ajax.reload();
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error(xhr.responseText);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
30
resources/views/components/flash-message.blade.php
Normal file
30
resources/views/components/flash-message.blade.php
Normal file
@@ -0,0 +1,30 @@
|
||||
@props(['type' => 'success', 'message' => null, 'messages' => []])
|
||||
|
||||
@if ($message || $messages)
|
||||
<div class="alert alert-{{ $type }} alert-dismissible fade show">
|
||||
<svg class="alert-icon me-2" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
|
||||
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
@if ($type == 'success')
|
||||
<polyline points="9 11 12 14 22 4"></polyline>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||||
@elseif ($type == 'danger')
|
||||
<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
|
||||
<line x1="15" y1="9" x2="9" y2="15"></line>
|
||||
<line x1="9" y1="9" x2="15" y2="15"></line>
|
||||
@endif
|
||||
</svg>
|
||||
<strong>{{ ucfirst($type) }}!</strong>
|
||||
|
||||
@if ($message)
|
||||
{{ $message }}.
|
||||
@elseif ($messages)
|
||||
<ul class="ps-4">
|
||||
@foreach ($messages as $message)
|
||||
<li class="mb-1">{{ $message }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
@endif
|
||||
7
resources/views/components/flatpickr-input.blade.php
Normal file
7
resources/views/components/flatpickr-input.blade.php
Normal file
@@ -0,0 +1,7 @@
|
||||
<div class="input-group">
|
||||
<input type="text" {!! $attributes->merge(['class' => 'form-control flatpickr']) !!}>
|
||||
|
||||
<span class="input-group-text">
|
||||
<i class="ri-calendar-2-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
6
resources/views/components/form-buttons.blade.php
Normal file
6
resources/views/components/form-buttons.blade.php
Normal file
@@ -0,0 +1,6 @@
|
||||
@props(['label' => 'Add', 'href' => '#'])
|
||||
|
||||
<div class="card-footer border-0 text-end">
|
||||
{{ html()->a($href = $href, $text = 'Cancel')->class('btn btn-sm btn-light') }}
|
||||
{{ html()->button($label, 'submit')->class('btn btn-sm btn-primary waves-effect waves-light text-white') }}
|
||||
</div>
|
||||
82
resources/views/components/image-input.blade.php
Normal file
82
resources/views/components/image-input.blade.php
Normal file
@@ -0,0 +1,82 @@
|
||||
@props([
|
||||
'id' => 'lfm-image',
|
||||
'name' => 'logo',
|
||||
'label' => 'Select Image',
|
||||
'multiple' => 'true',
|
||||
'data' => null,
|
||||
'editable' => false,
|
||||
])
|
||||
|
||||
<div class="upload__box">
|
||||
<div class="{{ $id }}-upload__img-wrap row">
|
||||
</div>
|
||||
|
||||
<input id="{{ $id }}" type="text" name="{{ $name }}" value="{{ $data }}"
|
||||
class="form-control" readonly />
|
||||
|
||||
<div class="input-group mt-1">
|
||||
<span class="input-group-btn">
|
||||
<a href="javascript:void(0)" id="{{ $id }}-input" data-input="{{ $id }}"
|
||||
class="link-primary link-opacity-75-hover link-offset-2">
|
||||
<i class="ri-image-add-line me-1"></i> {{ $label }}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@push('js')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
let imgArray = [];
|
||||
let eventListener = "{{ $id }}";
|
||||
let isMultiple = "{{ $multiple }}";
|
||||
let isEditable = "{{ $editable }}";
|
||||
let data = "{{ $data }}";
|
||||
|
||||
const prefix = `${app_url}/laravel-filemanager`;
|
||||
$(`#${eventListener}-input`).filemanager('file', {
|
||||
prefix: prefix
|
||||
});
|
||||
|
||||
$(document).on('change', `#${eventListener}`, function() {
|
||||
const value = $(this).val();
|
||||
|
||||
imgArray = (isMultiple == true) ? value.split(',') : [value.split(',').pop()];
|
||||
let imageUrl = imgArray.join(',');
|
||||
$(`#${eventListener}`).val(imageUrl);
|
||||
$(`.${eventListener}-upload__img-wrap`).empty();
|
||||
|
||||
$.each(imgArray, function(index, item) {
|
||||
let html = `<div class='upload__img-box col-sm-auto'>
|
||||
<div style='background-image: url("${app_url}/${item}")' class='img-bg'>
|
||||
<div id="${eventListener}-img-close" data-file="${item}" class='upload__img-close'></div>
|
||||
</div>
|
||||
</div>`;
|
||||
$(`.${eventListener}-upload__img-wrap`).append(html);
|
||||
})
|
||||
});
|
||||
|
||||
$(document).on('click', `#${eventListener}-img-close`, function(e) {
|
||||
const file = $(this).data("file");
|
||||
|
||||
for (let i = 0; i < imgArray.length; i++) {
|
||||
if (imgArray[i] == file) {
|
||||
imgArray.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
let imageUrl = imgArray.join(',');
|
||||
$(`#${eventListener}`).val(imageUrl);
|
||||
$(this).parent().parent().remove();
|
||||
});
|
||||
|
||||
if (isEditable && data) {
|
||||
$(`#${eventListener}`).trigger('change');
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user