source: resources/views/employee.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: 14.2 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 /* styles.css */
58 body {
59 font-family: Arial, sans-serif;
60 background-color: #f4f4f4;
61 margin: 0;
62 padding: 0;
63 display: flex;
64 justify-content: center;
65 align-items: center;
66 height: 100vh;
67 }
68
69 .employee-details {
70 background: white;
71 padding: 20px;
72 border-radius: 8px;
73 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
74 max-width: 800px;
75 width: 100%;
76 text-align: left;
77 }
78
79 .employee-card {
80 display: flex;
81 align-items: center;
82 gap: 20px;
83 }
84
85 .employee-photo img {
86 border-radius: 50%;
87 width: 150px;
88 height: 150px;
89 object-fit: cover;
90 }
91
92 .employee-info p {
93 margin: 8px 0;
94 }
95
96 .employee-info p strong {
97 display: inline-block;
98 width: 150px;
99 }
100
101 .back-button {
102 display: inline-block;
103 margin-top: 20px;
104 padding: 10px 15px;
105 background-color: #007bff;
106 color: white;
107 text-decoration: none;
108 border-radius: 5px;
109 }
110
111 .back-button:hover {
112 background-color: #0056b3;
113 }
114 .cases-card {
115 margin-top: 20px;
116 }
117
118 .case-card {
119 background-color: #f9f9f9;
120 border: 1px solid #ddd;
121 border-radius: 5px;
122 margin-bottom: 10px;
123 padding: 10px;
124 cursor: pointer;
125 transition: all 0.3s;
126 }
127
128 .case-card:hover {
129 background-color: #f1f1f1;
130 }
131
132 .case-details {
133 display: none;
134 padding: 10px;
135 }
136
137 .case-card.active .case-details {
138 display: block;
139 }
140
141 .case-card .case-title {
142 font-weight: bold;
143 }
144
145 </style>
146 <script src="https://cdn.tailwindcss.com"></script>
147
148</head>
149<body class="bg-gray-100 font-family-karla flex">
150<aside class="relative bg-sidebar h-screen w-64 hidden sm:block shadow-xl">
151 <div class="p-6">
152 @if (Session::get('is_policeman'))
153 <a href="#" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Полицаец</a>
154 <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">
155 <i class="fas fa-plus mr-3"></i> <a href="/register-statement">Додади изјава</a>
156 </button>
157 @else
158 <a href="#" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Началник</a>
159 <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">
160 <i class="fas fa-plus mr-3"></i> <a href="/register-policeman">Додади полицаец</a>
161 </button>
162 @endif
163 </div>
164 <nav class="text-white text-base font-semibold pt-3">
165 <a href="/" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
166 <i class="fas fa-tachometer-alt mr-3"></i>
167 Контролна табла
168 </a>
169 <a href="/employees" class="flex items-center active-nav-link text-white py-4 pl-6 nav-item">
170 <i class="fas fa-sticky-note mr-3"></i>
171 Вработени
172 </a>
173 <a href="/filter" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
174 <i class="fas fa-table mr-3"></i>
175 Филтрирај граѓани
176 </a>
177 <a href="/cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
178 <i class="fas fa-align-left mr-3"></i>
179 Случаи
180 </a>
181 <a href="/finished_cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
182 <i class="fas fa-calendar mr-3"></i>
183 Архива
184 </a>
185 </nav>
186 <a href="#"
187 class="absolute w-full upgrade-btn bottom-0 active-nav-link text-white flex items-center justify-center py-4">
188 <i class="fas fa-arrow-circle-up mr-3"></i>
189
190
191 </a>
192</aside>
193
194<div class="w-full flex flex-col h-screen overflow-y-hidden">
195 <!-- Desktop Header -->
196 <header class="w-full items-center bg-white py-2 px-6 hidden sm:flex">
197 <div class="w-1/2"></div>
198 <div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end">
199 <button @click="isOpen = !isOpen"
200 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">
201 @php
202 $person = DB::select('select * from people where pe_id=:pe_id;', ['pe_id' => Session::get('pe_id')]);
203
204 if (!empty($person)) {
205 $image = $person[0]->picture;
206 } else {
207 $image = null;
208 }
209 @endphp
210
211 <img src="{{ $image }}">
212
213 </button>
214 <button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button>
215 <div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16">
216 <a href="#" class="block px-4 py-2 account-link hover:text-white">Профил</a>
217 <a href="#" class="block px-4 py-2 account-link hover:text-white">Помош</a>
218 <a href="/logout" class="block px-4 py-2 account-link hover:text-white">Одјави се</a>
219 </div>
220 </div>
221 </header>
222
223 <!-- Mobile Header & Nav -->
224 <header x-data="{ isOpen: false }" class="w-full bg-sidebar py-5 px-6 sm:hidden">
225 <div class="flex items-center justify-between">
226 <a href="/" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Началник</a>
227 <button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none">
228 <i x-show="!isOpen" class="fas fa-bars"></i>
229 <i x-show="isOpen" class="fas fa-times"></i>
230 </button>
231 </div>
232
233 <!-- Dropdown Nav -->
234 <nav :class="isOpen ? 'flex': 'hidden'" class="flex flex-col pt-4">
235 <a href="/" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
236 <i class="fas fa-tachometer-alt mr-3"></i>
237 Контролна табла
238 </a>
239 <a href="/employees" class="flex items-center active-nav-link text-white py-2 pl-4 nav-item">
240 <i class="fas fa-sticky-note mr-3"></i>
241 Вработени
242 </a>
243 <a href="/filter" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
244 <i class="fas fa-table mr-3"></i>
245 Филтрирај граѓани
246 </a>
247 <a href="/cases" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
248 <i class="fas fa-align-left mr-3"></i>
249 Случаи
250 </a>
251
252 <a href="/finished_cases"
253 class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
254 <i class="fas fa-calendar mr-3"></i>
255 Архива
256 </a>
257 <a href="/help" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
258 <i class="fas fa-cogs mr-3"></i>
259 Помош
260 </a>
261 <a href="/myprofile" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
262 <i class="fas fa-user mr-3"></i>
263 Мој профил
264 </a>
265 <a href="/logout" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
266 <i class="fas fa-sign-out-alt mr-3"></i>
267 Одјави се
268 </a>
269
270 </nav>
271 <button
272 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">
273 <i class="fas fa-plus mr-3"></i> Нов извештај
274 </button>
275 </header>
276
277 <div class="w-full overflow-x-hidden border-t flex flex-col">
278 <main class="w-full flex-grow p-6">
279 <h1 class="text-3xl text-black pb-6">Вработен: {{$employee->first_name}}</h1>
280
281
282
283
284
285 <div class="w-full flex flex-col sm:flex-row h-screen overflow-y-hidden">
286 <main class="w-full sm:w-2/4 flex-grow p-6">
287 <div class="employee-details">
288 <h1>Детали за вработениот</h1>
289 <div class="employee-card">
290 <div class="employee-photo">
291 <img src="{{ $employee->picture }}" alt="Фотографија на вработениот">
292 </div>
293 <div class="employee-info">
294 <p><strong>Име:</strong> {{ $employee->first_name }}</p>
295 <p><strong>Презиме:</strong> {{ $employee->last_name }}</p>
296 <p><strong>Пол:</strong> {{ $employee->gender }}</p>
297 <p><strong>Адреса:</strong> {{ $employee->address }}</p>
298 <p><strong>Контакт:</strong> {{ $employee->contact }}</p>
299 <p><strong>ЕМБГ:</strong> {{ $employee->embg }}</p>
300 <p><strong>Дата на раѓање:</strong> {{ $employee->date_of_birth }}</p>
301 <p><strong>Држава:</strong> {{ $employee->country }}</p>
302 <p><strong>Националност:</strong> {{ $employee->nationality }}</p>
303 <p><strong>Број на значка:</strong> {{ $employee->badge_no }}</p>
304 <p><strong>Дата на вработување:</strong> {{ $employee->p_date_of_employment }}</p>
305 <p><strong>Ранг:</strong> {{ $employee->rank }}</p>
306 <p><strong>Адреса на полициска станица:</strong> {{ $p_address }}</p>
307 </div>
308 </div>
309 <a href="{{ url()->previous() }}" class="back-button">Назад</a>
310
311 </div>
312 </main>
313
314 <aside class="sm:w-2/4">
315 <h2>Случаи на вработениот</h2>
316 <div class="cases-card p-6">
317 @foreach($cases as $case)
318 <div class="case-card" onclick="toggleDetails(this)">
319 <div class="case-title">{{ $case->description }}</div>
320 <div class="case-details">
321 <p><strong>Идентификација на изјава:</strong> {{ $case->s_id }}</p>
322 <p><strong>Дата на изјава:</strong> {{ $case->statement_date }}</p>
323 <p><strong>Време на инцидент:</strong> {{ $case->incident_timestamp }}</p>
324 <p><strong>Место на инцидент:</strong> {{ $case->incident_place }}</p>
325 <p><strong>Идентификација на случај:</strong> {{ $case->c_id }}</p>
326 <p><strong>Жртва ИД:</strong> {{ $case->victim_pe_id }}</p>
327 <p><strong>Сведок ИД:</strong> {{ $case->witness_pe_id }}</p>
328 </div>
329 </div>
330 @endforeach
331 </div>
332 </aside>
333 </div>
334
335 </main>
336
337
338 </div>
339
340</div>
341
342<!-- AlpineJS -->
343<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
344<!-- Font Awesome -->
345<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"
346 integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
347<!-- ChartJS -->
348<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
349 integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
350<script>
351 function toggleDetails(element) {
352 element.classList.toggle('active');
353 }
354</script>
355</body>
356</html>
Note: See TracBrowser for help on using the repository browser.