source: resources/views/employees.blade.php@ 249bf91

main
Last change on this file since 249bf91 was 249bf91, checked in by bube-ristovska <ristovska725@…>, 5 months ago

New feature - details for employee
  • Property mode set to 100644
File size: 10.9 KB
Line 
1<!DOCTYPE html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6
7 <title>Laravel</title>
8
9 <!-- Fonts -->
10 <link rel="preconnect" href="https://fonts.bunny.net">
11 <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet"/>
12
13 <!-- Styles -->
14 <style>
15 @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
16
17 .font-family-karla {
18 font-family: karla;
19 }
20
21 .bg-sidebar {
22 background: #3d68ff;
23 }
24
25 .cta-btn {
26 color: #3d68ff;
27 }
28
29 .upgrade-btn {
30 background: #1947ee;
31 }
32
33 .upgrade-btn:hover {
34 background: #0038fd;
35 }
36
37 .active-nav-link {
38 background: #1947ee;
39 }
40
41 .nav-item:hover {
42 background: #1947ee;
43 }
44
45 .account-link:hover {
46 background: #3d68ff;
47 }
48 /* styles.css */
49 #clickableTable tr {
50 cursor: pointer;
51 transition: background-color 0.2s ease;
52 }
53
54 #clickableTable tr:hover {
55 background-color: #d7d4d4;
56 }
57
58 </style>
59 <script src="https://cdn.tailwindcss.com"></script>
60
61</head>
62<body class="bg-gray-100 font-family-karla flex">
63<aside class="relative bg-sidebar h-screen w-64 hidden sm:block shadow-xl">
64 <div class="p-6">
65 @if (Session::get('is_policeman'))
66 <a href="#" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Полицаец</a>
67 <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
68 <i class="fas fa-plus mr-3"></i> <a href="/register-statement">Додади изјава</a>
69 </button>
70 @else
71 <a href="#" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Началник</a>
72 <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
73 <i class="fas fa-plus mr-3"></i> <a href="/register-policeman">Додади полицаец</a>
74 </button>
75 @endif
76 </div>
77 <nav class="text-white text-base font-semibold pt-3">
78 <a href="/" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
79 <i class="fas fa-tachometer-alt mr-3"></i>
80 Контролна табла
81 </a>
82 <a href="/employees" class="flex items-center active-nav-link text-white py-4 pl-6 nav-item">
83 <i class="fas fa-sticky-note mr-3"></i>
84 Вработени
85 </a>
86 <a href="/filter" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
87 <i class="fas fa-table mr-3"></i>
88 Филтрирај граѓани
89 </a>
90 <a href="/cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
91 <i class="fas fa-align-left mr-3"></i>
92 Случаи
93 </a>
94 <a href="/finished_cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
95 <i class="fas fa-calendar mr-3"></i>
96 Архива
97 </a>
98 </nav>
99 <a href="#"
100 class="absolute w-full upgrade-btn bottom-0 active-nav-link text-white flex items-center justify-center py-4">
101 <i class="fas fa-arrow-circle-up mr-3"></i>
102
103 </a>
104</aside>
105
106<div class="w-full flex flex-col h-screen overflow-y-hidden">
107 <!-- Desktop Header -->
108 <header class="w-full items-center bg-white py-2 px-6 hidden sm:flex">
109 <div class="w-1/2"></div>
110 <div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end">
111 <button @click="isOpen = !isOpen"
112 class="realtive z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-gray-300 focus:border-gray-300 focus:outline-none">
113 @php
114 $person = DB::select('select * from people where pe_id=:pe_id;', ['pe_id' => Session::get('pe_id')]);
115
116 if (!empty($person)) {
117 $image = $person[0]->picture;
118 } else {
119 $image = null;
120 }
121 @endphp
122
123 <img src="{{ $image }}">
124
125 </button>
126 <button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button>
127 <div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16">
128 <a href="#" class="block px-4 py-2 account-link hover:text-white">Профил</a>
129 <a href="#" class="block px-4 py-2 account-link hover:text-white">Помош</a>
130 <a href="/logout" class="block px-4 py-2 account-link hover:text-white">Одјави се</a>
131 </div>
132 </div>
133 </header>
134
135 <!-- Mobile Header & Nav -->
136 <header x-data="{ isOpen: false }" class="w-full bg-sidebar py-5 px-6 sm:hidden">
137 <div class="flex items-center justify-between">
138 <a href="/" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Началник</a>
139 <button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none">
140 <i x-show="!isOpen" class="fas fa-bars"></i>
141 <i x-show="isOpen" class="fas fa-times"></i>
142 </button>
143 </div>
144
145 <!-- Dropdown Nav -->
146 <nav :class="isOpen ? 'flex': 'hidden'" class="flex flex-col pt-4">
147 <a href="/" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
148 <i class="fas fa-tachometer-alt mr-3"></i>
149 Контролна табла
150 </a>
151 <a href="/employees" class="flex items-center active-nav-link text-white py-2 pl-4 nav-item">
152 <i class="fas fa-sticky-note mr-3"></i>
153 Вработени
154 </a>
155 <a href="/filter" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
156 <i class="fas fa-table mr-3"></i>
157 Филтрирај граѓани
158 </a>
159 <a href="/cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
160 <i class="fas fa-align-left mr-3"></i>
161 Случаи
162 </a>
163
164 <a href="/finished_cases"
165 class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
166 <i class="fas fa-calendar mr-3"></i>
167 Архива
168 </a>
169 <a href="/help" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
170 <i class="fas fa-cogs mr-3"></i>
171 Помош
172 </a>
173 <a href="/myprofile" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
174 <i class="fas fa-user mr-3"></i>
175 Мој профил
176 </a>
177 <a href="/logout" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
178 <i class="fas fa-sign-out-alt mr-3"></i>
179 Одјави се
180 </a>
181
182 </nav>
183 <button
184 class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
185 <i class="fas fa-plus mr-3"></i> Нов извештај
186 </button>
187 </header>
188
189 <div class="w-full overflow-x-hidden border-t flex flex-col">
190 <main class="w-full flex-grow p-6">
191 <h1 class="text-3xl text-black pb-6">Вработени во {{$p_address}}</h1>
192
193
194 <div class="w-full mt-12">
195 <p class="text-xl pb-3 flex items-center">
196 <i class="fas fa-list mr-3"></i>
197 </p>
198 <div class="bg-white overflow-auto">
199 <table class="min-w-full bg-white" id="clickableTable">
200 <thead class="bg-gray-800 text-white">
201 <tr>
202 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Име</th>
203 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Презиме</th>
204 <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Телефон</th>
205 <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Емаил</th>
206 </tr>
207 </thead>
208 <tbody class="text-gray-700">
209
210 @foreach($employees as $employee)
211 <tr data-id="{{$employee->pe_id}}">
212 <td class="w-1/3 text-left py-3 px-4">{{$employee->first_name}}</td>
213 <td class="w-1/3 text-left py-3 px-4">{{$employee->last_name}}</td>
214 <td class="text-left py-3 px-4"><a class="hover:text-blue-500"
215 href="tel:622322662">{{$employee->contact}}</a></td>
216 <td class="text-left py-3 px-4"><a
217 class="hover:text-blue-500">{{$employee->nationality}}</a></td>
218 </tr>
219 @endforeach
220
221
222 </tbody>
223 </table>
224
225
226 </div>
227 </div>
228 </main>
229
230
231 </div>
232
233</div>
234
235<!-- AlpineJS -->
236<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
237<!-- Font Awesome -->
238<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"
239 integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
240<!-- ChartJS -->
241<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
242 integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
243<script>
244
245 document.addEventListener('DOMContentLoaded', function() {
246 const rows = document.querySelectorAll('#clickableTable tr');
247
248 rows.forEach(row => {
249 row.addEventListener('click', function() {
250 const id = this.getAttribute('data-id');
251 if (id) {
252 window.location.href = `http://127.0.0.1:8000/employees/${id}`;
253 }
254 });
255 });
256 });
257
258</script>
259
260</body>
261</html>
Note: See TracBrowser for help on using the repository browser.