Files
admin-erahn/resources/views/layouts/app.blade.php
T
2025-09-25 11:59:19 +08:00

305 lines
15 KiB
PHP

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title', 'Ar-Rahn | Admin Page')</title>
<link rel="icon" type="image/x-icon" href="{{ asset('img/icon_pkb.png') }}" />
<!-- Routes -->
@routes
{{-- Check Authentication --}}
@if (Auth::check())
<meta name="user_name" content="{{ Auth::user()->name }}" />
<meta name="user_roles" content="{{ Auth::user()->roles }}" />
@endif
<link href="{{ asset('css/all.min.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset(mix('js/app.js')), true }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{{-- Pusher --}}
<script src="{{ asset('js/pusher.min.js') }}"></script>
<style>
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
/* padding-top: 60px; */
}
.sidebara a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebara a:hover {
color: #f1f1f1;
}
.sidebara .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
#app {
transition: margin-left .5s;
/* padding: 16px; */
}
</style>
@stack('additional_styles')
</head>
<body @auth class="bg-gray-200" @endauth @guest class="bg-white" @endguest>
<script>
openNav = () => {
let toggle = document.getElementById("mySidebar");
let maintoggle = document.getElementById("app");
if (toggle.style.width == "" || toggle.style.width == '0px') {
toggle.style.width = "250px";
maintoggle.style.marginLeft = "250px";
} else {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("app").style.marginLeft = "0";
}
}
closeNav = () => {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("app").style.marginLeft = "0";
}
</script>
<div id="app"
@guest style="background: url(/img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;background-size: cover;" @endguest>
@auth
@include('layouts.sidebar')
<nav class="bg-white border-b border-gray-200 z-30 w-full sticky">
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start">
<button id="toggleSidebarMobile" onclick="openNav()" aria-expanded="true"
aria-controls="sidebar"
class=" mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 rounded">
<svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
<svg id="toggleSidebarMobileClose" class="w-6 h-6 hidden" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
@auth
<clock-component></clock-component>
<cawangan-component @clickEvent_="getText()" roles={{ Auth::user()->roles }}
route={{ Route::is('home') || Route::is('akaun.home') || Route::is('audit.index') ? 'ada' : 'tiada' }}
akaun={{ Route::is('akaun.home') || Route::is('audit.index') ? 'yes' : 'no' }}
>
</cawangan-component>
<div class="mx-auto">
<a
class="text-yellow-200 rounded bg-gray-400 px-6 py-3 font-bold mr-4 uppercase sm:invisible lg:visible xl:visible">
{{ Auth::user()->roles }} : {{ Auth::user()->name }}
</a>
</div>
@endauth
<div class="flex items-center">
@guest
@if (Route::has('login'))
<div class="hidden lg:flex items-center">
<a href="{{ route('login') }}"
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
Log In
</a>
</div>
@endif
@if (Route::has('register'))
<div class="hidden lg:flex items-center ml-2">
<a href="{{ route('register') }}"
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
Register
</a>
</div>
@endif
@else
@if (Auth::user()->roles == 'operasi')
{{-- <div class="mr-4">
<notify-component></notify-component>
</div> --}}
@endif
<logout-component csrftoken="{{ csrf_token() }}" :route={{ json_encode(route('logout')) }}>
</logout-component>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
{{-- <input type="hidden" name="_token" :value="this.$props.csrftoken" /> --}}
@csrf
</form>
@endguest
</div>
</div>
</div>
</nav>
@endauth
<main class="py-4 px-4">
@yield('content')
</main>
</div>
<div id="success-toast-message" class="hidden fixed right-10 bottom-10">
<div class="max-w-xs bg-green-500 text-sm text-white rounded-md shadow-lg mb-3 ml-3" role="alert">
<div id="toast-message-text" class="flex p-4">
SUCCESS TOAST MESSAGE PLACEHOLDER
<div class="ml-auto">
<button type="button"
class="inline-flex flex-shrink-0 justify-center items-center h-4 w-4 rounded-md text-white/[.5] hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-800 focus:ring-green-500 transition-all text-sm dark:focus:ring-offset-green-500 dark:focus:ring-green-700">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div id="fail-toast-message" class="hidden fixed right-10 bottom-10">
<div class="max-w-xs bg-pink-500 text-sm text-white rounded-md shadow-lg mb-3 ml-3" role="alert">
<div id="toast-message-text" class="flex p-4">
FAIL TOAST MESSAGE PLACEHOLDER
<div class="ml-auto">
<button type="button"
class="inline-flex flex-shrink-0 justify-center items-center h-4 w-4 rounded-md text-white/[.5] hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-pink-800 focus:ring-pink-500 transition-all text-sm dark:focus:ring-offset-pink-500 dark:focus:ring-pink-700">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
</div>
@stack('additional_scripts')
<script>
let response_status = {!! json_encode(\Session::get('response_status')) !!};
let response_message = {!! json_encode(\Session::get('response_message')) !!};
let successToastMessage = document.querySelector('#success-toast-message')
let failToastMessage = document.querySelector('#fail-toast-message')
if (response_status === true) {
let success_message = (message) => {
if (typeof(message) === 'string') {
return message;
}
let constructed_success_message_from_obj = Object.keys(response_message)
.reduce((accumulator, currentItem) => {
return accumulator + currentItem + ' dikemaskini kepada ' + response_message[currentItem] +
'</br>';
}, "");
return constructed_success_message_from_obj;
}
successToastMessage.classList.remove('hidden');
successToastMessage.querySelector('#toast-message-text').innerHTML = success_message(response_message);
setTimeout(() => successToastMessage.classList.add('hidden'), 15000)
}
if (response_status === false) {
failToastMessage.classList.remove('hidden');
$error_message = Object.keys(response_message)
.reduce((accumulator, currentItem) => {
return accumulator + response_message[currentItem] + '</br>';
}, "");
failToastMessage.querySelector('#toast-message-text').innerHTML = $error_message;
setTimeout(() => failToastMessage.classList.add('hidden'), 15000)
}
</script>
</body>
</html>