final project

This commit is contained in:
ericko-cyber 2025-05-21 00:03:50 +07:00
parent adcf7be0f6
commit a950c924be
12 changed files with 574 additions and 380 deletions

View File

@ -88,6 +88,7 @@ public function process(Request $request)
'id_penyakit' => $terbesar['penyakit']->id,
'nilai' => ($terbesar['nilai'] * 100) . '%',
'tanggal' => now(),
'hasil_diagnosa' => json_encode($hasil), // Store all results in JSON format
]);
if (!$riwayat) {
@ -100,6 +101,16 @@ public function process(Request $request)
public function hasil($id)
{
$riwayat = RiwayatDiagnosa::with(['user', 'penyakit'])->findOrFail($id);
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat'));
// Get alternative diagnoses from the JSON field
$alternativeDiagnoses = [];
if (isset($riwayat->hasil_diagnosa)) {
$hasilDiagnosa = json_decode($riwayat->hasil_diagnosa, true);
// Skip the first item (primary diagnosis) and get up to 3 alternatives
$alternativeDiagnoses = array_slice($hasilDiagnosa, 1, 3);
}
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat', 'alternativeDiagnoses'));
}
}

View File

@ -31,25 +31,34 @@ public function index()
public function detail($id)
{
$role = auth()->user()->role;
// Ambil data RiwayatDiagnosa berdasarkan ID
$riwayat = RiwayatDiagnosa::with('penyakit', 'user')->findOrFail($id);
// Mengecek apakah riwayat ditemukan
if (!$riwayat) {
abort(404, 'Riwayat tidak ditemukan');
// Ambil alternative diagnoses dari JSON hasil diagnosa
$alternativeDiagnoses = [];
if (!empty($riwayat->hasil_diagnosa)) {
$hasilDiagnosa = json_decode($riwayat->hasil_diagnosa, true);
// Ambil selain utama (index 0), misal 3 alternatif
$alternativeDiagnoses = array_slice($hasilDiagnosa, 1, 3);
}
// Kirim data ke tampilan
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat', 'role'));
return view('layouts.diagnosa.hasildiagnosa', compact('riwayat', 'role', 'alternativeDiagnoses'));
}
public function print($id)
{
$riwayat = \App\Models\RiwayatDiagnosa::with('penyakit', 'user')->findOrFail($id);
$role = auth()->user()->role;
// Kirim data riwayat dan role ke tampilan
return view('layouts.diagnosa.print', compact('riwayat', 'role'));
// Decode hasil_diagnosa untuk alternatif diagnosa
$hasilDiagnosa = json_decode($riwayat->hasil_diagnosa, true);
$alternativeDiagnoses = [];
if ($hasilDiagnosa) {
// Ambil alternatif setelah utama, maksimal 3
$alternativeDiagnoses = array_slice($hasilDiagnosa, 1, 3);
}
// Kirim data riwayat, role, dan alternativeDiagnoses ke view
return view('layouts.diagnosa.print', compact('riwayat', 'role', 'alternativeDiagnoses'));
}
}

View File

@ -18,6 +18,7 @@ class RiwayatDiagnosa extends Model
'id_user',
'id_penyakit',
'nilai',
'hasil_diagnosa',
'tanggal',
];

View File

@ -0,0 +1,30 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('riwayat', function (Blueprint $table) {
//
$table->longText('hasil_diagnosa')->nullable()->after('nilai');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('riwayat', function (Blueprint $table) {
//
$table->dropColumn('hasil_diagnosa');
});
}
};

View File

@ -67,10 +67,10 @@
<td>{{ $user->role }}</td>
<td>{{ $user->registered }}</td>
<td>
@if($user->role !== 'admin')
<a href="#" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editUserModal{{ $user->id }}">
Edit
</a>
@if($user->role !== 'admin')
<form action="{{ route('user.destroy', $user->id) }}" method="POST" style="display:inline-block;" onsubmit="return confirm('Yakin ingin menghapus user ini?');">
@csrf
@method('DELETE')

View File

@ -151,10 +151,11 @@
<div class="cf-info">
<p><strong>Keterangan tingkat keyakinan:</strong></p>
<ul>
<li><strong>Pasti (100%)</strong>: Anda yakin 100% gejala ini terjadi</li>
<!-- <li><strong>Pasti (100%)</strong>: Anda yakin 100% gejala ini terjadi</li> -->
<li><strong>Hampir Pasti (80%)</strong>: Anda cukup yakin gejala ini terjadi</li>
<li><strong>Kemungkinan Besar (60%)</strong>: Anda melihat gejala ini ada tapi tidak terlalu jelas</li>
<li><strong>Mungkin (40%)</strong>: Anda tidak yakin tapi ada kemungkinan gejala ini terjadi</li>
<li><strong>Tidak Yakin (20%)</strong>: Anda sama sekali tidak yakin/tidak tahu</li>
</ul>
</div>
@ -241,7 +242,7 @@ function updateDropdownOptions() {
}].concat(
gejalaList.map(g => ({
value: g.id,
label: g.nama_gejala,
label: `${g.kode_gejala} - ${g.nama_gejala}`, // <- update label jadi kode - nama
disabled: selectedValues.includes(String(g.id)) && String(g.id) !== currentValue,
selected: String(g.id) === currentValue
}))
@ -260,10 +261,6 @@ function updateDropdownOptions() {
value: '',
label: 'Kondisi',
selected: currentValue === ''
}, {
value: '1.0',
label: 'Pasti (100%)',
selected: currentValue === '1.0'
}, {
value: '0.8',
label: 'Hampir Pasti (80%)',
@ -276,6 +273,10 @@ function updateDropdownOptions() {
value: '0.4',
label: 'Mungkin (40%)',
selected: currentValue === '0.4'
}, {
value: '0.2',
label: 'Tidak Yakin (20%)',
selected: currentValue === '0.2'
}],
'value',
'label',
@ -308,23 +309,20 @@ function updateDropdownOptions() {
<div class="select-wrapper">
<select name="gejala[]" class="form-control input-lg mt-2 gejala-select">
<option value="">Pilih Gejala</option>
@foreach($gejala_list as $gejala)
<option value="{{ $gejala->id }}">{{ $gejala->nama_gejala }}</option>
@endforeach
</select>
</div>
<div class="select-wrapper">
<select name="cf_user[]" class="form-control input-lg mt-2 cf-select">
<option value="">Kondisi</option>
<option value="1.0">Pasti (100%)</option>
<option value="0.8">Hampir Pasti (80%)</option>
<option value="0.6">Kemungkinan Besar (60%)</option>
<option value="0.4">Mungkin (40%)</option>
<option value="0">Tidak Tahu (0%)</option>
<option value="0.2">Tidak Yakin (20%)</option>
</select>
</div>
</div>
`;
`;
$("#gejala-container").append(newDropdown);

View File

@ -3,6 +3,7 @@
@section('title', 'Hasil Diagnosa')
@section('content')
<div class="main-banner wow fadeIn" id="diagnosa" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="banner-top"></div>
<div class="banner-bottom"></div>
@ -12,7 +13,6 @@
// Bersihkan nilai agar hanya angka
$nilai_angka = isset($riwayat->nilai) ? preg_replace('/[^0-9.]/', '', $riwayat->nilai) : null;
@endphp
<table class="table table-bordered">
<tbody>
<!-- Informasi Petani -->
@ -44,7 +44,9 @@
</tr>
<tr>
<th>Gambar Penyakit</th>
<td><img src="{{ asset('assets/images/' . $riwayat->penyakit->gambar) }}" alt="Gambar Penyakit" style="width: 200px; height: auto;" /></td>
<td>
<img src="{{ asset('assets/images/' . $riwayat->penyakit->gambar) }}" alt="Gambar Penyakit" style="width: 200px; height: auto;" />
</td>
</tr>
<!-- Presentase Diagnosa -->
@ -56,7 +58,21 @@
<!-- Penanganan -->
<tr>
<th>Penanganan</th>
<td>{{ $riwayat->penyakit->penanganan ?? '-' }}</td>
<td>
@if(!empty($riwayat->penyakit->penanganan))
@php
// Pisah penanganan berdasarkan baris baru (newline)
$list_penanganan = preg_split('/\r\n|\r|\n/', $riwayat->penyakit->penanganan);
@endphp
<ul>
@foreach($list_penanganan as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
@else
-
@endif
</td>
</tr>
</tbody>
</table>
@ -64,9 +80,29 @@
<div class="text-center mt-3">
<a href="{{ route('history') }}" class="btn btn-secondary">Kembali ke Riwayat</a>
<a href="{{ route('history.print', $riwayat->id_riwayat) }}" target="_blank" class="btn btn-primary">Cetak</a>
<!-- <button class="btn btn-primary" onclick="window.print()">Cetak</button> -->
</div>
{{-- Kemungkinan Penyakit Lainnya --}}
@if(!empty($alternativeDiagnoses))
<div class="container mt-5" style="max-width: 900px;">
<div class="card">
<div class="card-header bg-info text-white">
Kemungkinan Penyakit Lainnya
</div>
<div class="card-body">
@foreach($alternativeDiagnoses as $diagnosa)
<div class="border-bottom py-2 d-flex justify-content-between align-items-center">
<div>
<strong>{{ $diagnosa['penyakit']['nama_penyakit'] }}</strong>
<div class="text-muted">Kemungkinan: {{ number_format($diagnosa['nilai'] * 100, 2) }}%</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
@endif
</div>
</div>
</div>
@endsection
@endsection

View File

@ -198,6 +198,18 @@
animation: slideIn 0.3s ease-out forwards;
}
.popup-overlay .popup-box {
width: 500px;
max-width: 90%;
transition: width 0.3s ease, min-height 0.3s ease;
/* style lain seperti sebelumnya */
}
.popup-overlay .popup-box.password-tab {
width: 400px;
}
@keyframes slideIn {
from {
opacity: 0;
@ -374,6 +386,29 @@ function togglePopup() {
}
// Tab switching functionality
function openTab(tabId, btn) {
// Hide semua tab-content
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
// Hapus active dari semua tombol tab
document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
// Show tab yang diklik
document.getElementById(tabId).classList.add('active');
// Tambahkan active pada tombol yang diklik
btn.classList.add('active');
// Ambil popup-box
const popupBox = document.querySelector('.popup-overlay .popup-box');
if (tabId === 'passwordTab') {
popupBox.classList.add('password-tab');
} else {
popupBox.classList.remove('password-tab');
}
}
function openTab(tabName, buttonElement) {
// Hide all tab contents
const tabContents = document.getElementsByClassName("tab-content");

View File

@ -85,10 +85,46 @@
</tr>
<tr>
<th>Penanganan</th>
<td>{{ $riwayat->penyakit->penanganan ?? '-' }}</td>
<td>
@if(!empty($riwayat->penyakit->penanganan))
@php
$list_penanganan = preg_split('/\r\n|\r|\n/', $riwayat->penyakit->penanganan);
@endphp
<ul>
@foreach($list_penanganan as $item)
<li>{{ $item }}</li>
@endforeach
</ul>
@else
-
@endif
</td>
</tr>
</tbody>
</table>
<br>
{{-- Tambahkan section kemungkinan penyakit lainnya --}}
@if(!empty($alternativeDiagnoses) && count($alternativeDiagnoses) > 0)
<h5>Alternatif Kemungkinan Penyakit Lainnya</h5>
<table>
<thead>
<tr>
<th>Nama Penyakit</th>
<th>Persentase</th>
</tr>
</thead>
<tbody>
@foreach($alternativeDiagnoses as $alt)
<tr>
<td>{{ $alt['penyakit']['nama_penyakit'] ?? '-' }}</td>
<td>{{ number_format($alt['nilai'] * 100, 2) }}%</td>
</tr>
@endforeach
</tbody>
</table>
@endif
<div class="text-center mt-4 no-print">
@if ($role === 'admin')

View File

@ -56,7 +56,7 @@
<section class="section-container">
<h2 class="section-title">Penanganan</h2>
<h2 class="section-title">Pengendalian</h2>
<ol class="section-text" style="font-weight: 600; font-size: 15px;">
@foreach(explode("\n", $penyakit->penanganan) as $item)
<li>{{ $item }}</li>

View File

@ -2,404 +2,442 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>@yield('title', 'Login System')</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>@yield('title', 'Login System')</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<link rel="icon" href="{{ asset('bawang.ico') }}" type="image/x-icon">
<!-- Bootstrap core CSS -->
<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<link rel="icon" href="{{ asset('bawang.ico') }}" type="image/x-icon">
<!-- Additional CSS Files -->
<link rel="stylesheet" href="{{ asset('assets/css/fontawesome.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/templatemo-space-dynamic.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/animated.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/owl.css') }}">
<!-- Additional CSS Files -->
<link rel="stylesheet" href="{{ asset('assets/css/fontawesome.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/templatemo-space-dynamic.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/animated.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/owl.css') }}">
<style>
/* Overlay untuk popup */
.overlay-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
z-index: 9999;
}
<style>
/* Overlay untuk popup */
.overlay-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
z-index: 9999;
}
/* Popup aktif */
.overlay-container.show {
display: flex;
}
/* Popup aktif */
.overlay-container.show {
display: flex;
}
/* Kotak popup */
.popup-box {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
max-width: 90%;
position: relative;
animation: fadeInUp 0.3s ease-out forwards;
}
/* Kotak popup */
.popup-box {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
max-width: 90%;
position: relative;
animation: fadeInUp 0.3s ease-out forwards;
}
/* Animasi untuk fade-in popup */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animasi untuk fade-in popup */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
.popup-box h2 {
margin-bottom: 15px;
font-weight: 600;
color: #fe3f40;
text-align: center;
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Tab navigation styles */
.tab-navigation {
display: flex;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.popup-box h2 {
margin-bottom: 15px;
font-weight: 600;
color: #fe3f40;
text-align: center;
}
.tab-button {
flex: 1;
padding: 8px 12px;
background: #f8f8f8;
border: none;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
color: #555;
}
/* Tab navigation styles */
.tab-navigation {
display: flex;
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
}
.tab-button:hover {
background: #f0f0f0;
}
.tab-button {
flex: 1;
padding: 8px 12px;
background: #f8f8f8;
border: none;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
color: #555;
}
.tab-button.active {
background: #fe3f40;
color: white;
}
.tab-button:hover {
background: #f0f0f0;
}
/* Tab content styles */
.tab-content {
display: none;
}
.tab-button.active {
background: #fe3f40;
color: white;
}
.tab-content.active {
display: block;
}
/* Tab content styles */
.tab-content {
display: none;
}
/* Form container */
.form-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.tab-content.active {
display: block;
}
/* Form layout improvements */
.form-row {
display: flex;
gap: 10px;
}
/* Form container */
.form-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
/* Form layout improvements */
.form-row {
display: flex;
gap: 10px;
}
/* Label and input styling */
.form-label {
font-size: 14px;
color: #444;
font-weight: 500;
}
.form-group {
flex: 1;
display: flex;
flex-direction: column;
gap: 5px;
}
.form-input {
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s;
}
/* Label and input styling */
.form-label {
font-size: 14px;
color: #444;
font-weight: 500;
}
.form-input:focus {
border-color: #fe3f40;
outline: none;
box-shadow: 0 0 0 2px rgba(254, 63, 64, 0.1);
}
.form-input {
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s;
}
textarea.form-input {
resize: vertical;
min-height: 60px;
}
.form-input:focus {
border-color: #fe3f40;
outline: none;
box-shadow: 0 0 0 2px rgba(254, 63, 64, 0.1);
}
/* Button styling */
.btn-submit, .btn-close-popup {
padding: 10px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
margin-top: 5px;
}
textarea.form-input {
resize: vertical;
min-height: 60px;
}
.btn-submit {
background-color: #fe3f40;
color: white;
}
/* Button styling */
.btn-submit,
.btn-close-popup {
padding: 10px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
margin-top: 5px;
}
.btn-submit:hover {
background-color: #e53638;
}
.btn-submit {
background-color: #fe3f40;
color: white;
}
.btn-close-popup {
background-color: #f2f2f2;
color: #333;
margin-top: 10px;
}
.btn-submit:hover {
background-color: #e53638;
}
.btn-close-popup:hover {
background-color: #e8e8e8;
}
.btn-close-popup {
background-color: #f2f2f2;
color: #333;
margin-top: 10px;
}
/* Success notification */
.notification {
position: fixed;
top: 80px;
right: 20px;
background: #4CAF50;
color: white;
padding: 12px 20px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
z-index: 10001;
animation: slideIn 0.3s ease-out forwards;
}
.btn-close-popup:hover {
background-color: #e8e8e8;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Success notification */
.notification {
position: fixed;
top: 80px;
right: 20px;
background: #4CAF50;
color: white;
padding: 12px 20px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
z-index: 10001;
animation: slideIn 0.3s ease-out forwards;
}
/* Responsive adjustments */
@media (max-width: 480px) {
.form-row {
flex-direction: column;
gap: 12px;
}
.popup-box {
width: 500px;
max-width: 90%;
transition: width 0.3s ease, min-height 0.3s ease;
/* style lain seperti sebelumnya */
}
.popup-box {
width: 85%;
padding: 15px;
}
}
</style>
.popup-box.password-tab {
width: 400px;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive adjustments */
@media (max-width: 480px) {
.form-row {
flex-direction: column;
gap: 12px;
}
.popup-box {
width: 85%;
padding: 15px;
}
}
</style>
</head>
<body>
<header class="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="" class="logo">
<h4>Shallot<span>Detect</span></h4>
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<li class="scroll-to-section"><a href="#top" class="active">Home</a></li>
<li class="scroll-to-section"><a href="#about">Basic Pengetahuan</a></li>
<li class="scroll-to-section"><a href="#PP">Panduan Penggunaan</a></li>
<li class="scroll-to-section"><a href="#tentang">Tentang Pakar</a></li>
<li><a href="{{ route('diagnosa') }}">Diagnosa</a></li>
<li class="d-flex align-items-center">
@if(Auth::check())
<a href="#" class="main-red-button" onclick="togglePopup()">Profil</a>
<a href="#" class="main-red-button"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
@else
<a href="{{ route('login') }}" class="main-red-button">Login</a>
@endif
</li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
</nav>
</div>
</div>
</div>
</header>
<header class="header-area header-sticky wow slideInDown" data-wow-duration="0.75s" data-wow-delay="0s">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="" class="logo">
<h4>Shallot<span>Detect</span></h4>
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
<ul class="nav">
<li class="scroll-to-section"><a href="#top" class="active">Home</a></li>
<li class="scroll-to-section"><a href="#about">Basic Pengetahuan</a></li>
<li class="scroll-to-section"><a href="#PP">Panduan Penggunaan</a></li>
<li class="scroll-to-section"><a href="#tentang">Tentang Pakar</a></li>
<li><a href="{{ route('diagnosa') }}">Diagnosa</a></li>
<li class="d-flex align-items-center">
@if(Auth::check())
<a href="#" class="main-red-button" onclick="togglePopup()">Profil</a>
<a href="#" class="main-red-button"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
@else
<a href="{{ route('login') }}" class="main-red-button">Login</a>
@endif
</li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
</nav>
</div>
</div>
</div>
</header>
@if(session('success'))
<div id="flash-success" class="notification">
{{ session('success') }}
</div>
<script>
setTimeout(() => {
const flash = document.getElementById('flash-success');
if (flash) {
flash.style.opacity = '0';
flash.style.transform = 'translateX(50px)';
flash.style.transition = 'all 0.3s ease';
setTimeout(() => flash.remove(), 300);
}
}, 3000);
</script>
@endif
@if(session('success'))
<div id="flash-success" class="notification">
{{ session('success') }}
</div>
<script>
setTimeout(() => {
const flash = document.getElementById('flash-success');
if (flash) {
flash.style.opacity = '0';
flash.style.transform = 'translateX(50px)';
flash.style.transition = 'all 0.3s ease';
setTimeout(() => flash.remove(), 300);
}
}, 3000);
</script>
@endif
<!-- Popup Profil -->
<div id="popupOverlay" class="overlay-container">
<div class="popup-box">
<h2>PROFIL</h2>
<!-- Popup Profil -->
<div id="popupOverlay" class="overlay-container">
<div class="popup-box">
<h2>PROFIL</h2>
<!-- Tab Navigation -->
<div class="tab-navigation">
<button class="tab-button active" onclick="openTab('profileTab', this)">Profile</button>
<button class="tab-button" onclick="openTab('passwordTab', this)">Password</button>
</div>
<!-- Tab Navigation -->
<div class="tab-navigation">
<button class="tab-button active" onclick="openTab('profileTab', this)">Profile</button>
<button class="tab-button" onclick="openTab('passwordTab', this)">Password</button>
</div>
<!-- Profile Tab Content -->
<div id="profileTab" class="tab-content active">
<form id="updateProfileForm" class="form-container" method="POST" action="{{ route('user.updateProfile') }}">
@csrf
<div class="form-row">
<div class="form-group">
<label class="form-label" for="username">Username</label>
<input class="form-input" type="text" id="username" name="username" value="{{ Auth::user()->username ?? 'Guest' }}" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Email</label>
<input class="form-input" type="email" id="email" name="email" value="{{ Auth::user()->email ?? 'Guest' }}" required>
</div>
</div>
<!-- Profile Tab Content -->
<div id="profileTab" class="tab-content active">
<form id="updateProfileForm" class="form-container" method="POST" action="{{ route('user.updateProfile') }}">
@csrf
<div class="form-row">
<div class="form-group">
<label class="form-label" for="username">Username</label>
<input class="form-input" type="text" id="username" name="username" value="{{ Auth::user()->username ?? 'Guest' }}" required>
</div>
<div class="form-group">
<label class="form-label" for="email">Email</label>
<input class="form-input" type="email" id="email" name="email" value="{{ Auth::user()->email ?? 'Guest' }}" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="umur">Umur</label>
<input class="form-input" type="number" id="umur" name="umur" value="{{ Auth::user()->umur ?? '' }}">
</div>
<div class="form-group">
<label class="form-label" for="telp">Telp</label>
<input class="form-input" type="text" id="telp" name="telp" value="{{ Auth::user()->telp ?? '' }}">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="umur">Umur</label>
<input class="form-input" type="number" id="umur" name="umur" value="{{ Auth::user()->umur ?? '' }}">
</div>
<div class="form-group">
<label class="form-label" for="telp">Telp</label>
<input class="form-input" type="text" id="telp" name="telp" value="{{ Auth::user()->telp ?? '' }}">
</div>
</div>
<div class="form-group">
<label class="form-label" for="alamat">Alamat</label>
<textarea class="form-input" id="alamat" name="alamat" rows="2">{{ Auth::user()->alamat ?? '' }}</textarea>
</div>
<div class="form-group">
<label class="form-label" for="alamat">Alamat</label>
<textarea class="form-input" id="alamat" name="alamat" rows="2">{{ Auth::user()->alamat ?? '' }}</textarea>
</div>
<button class="btn-submit" type="submit">
Update Profile
</button>
</form>
</div>
<button class="btn-submit" type="submit">
Update Profile
</button>
</form>
</div>
<!-- Password Tab Content -->
<div id="passwordTab" class="tab-content">
<form id="updatePasswordForm" class="form-container" method="POST" action="{{ route('user.updatePassword') }}">
@csrf
<div class="form-group">
<label class="form-label" for="passupdate">Password Baru</label>
<input class="form-input" type="password" id="passupdate" name="passupdate" placeholder="Masukkan Password Baru" required>
</div>
<!-- Password Tab Content -->
<div id="passwordTab" class="tab-content">
<form id="updatePasswordForm" class="form-container" method="POST" action="{{ route('user.updatePassword') }}">
@csrf
<div class="form-group">
<label class="form-label" for="passupdate">Password Baru</label>
<input class="form-input" type="password" id="passupdate" name="passupdate" placeholder="Masukkan Password Baru" required>
</div>
<button class="btn-submit" type="submit">
Update Password
</button>
</form>
</div>
<button class="btn-submit" type="submit">
Update Password
</button>
</form>
</div>
<button class="btn-close-popup" onclick="togglePopup()">
Close
</button>
</div>
</div>
<button class="btn-close-popup" onclick="togglePopup()">
Close
</button>
</div>
</div>
<div class="content">
@yield('content')
</div>
<div class="content">
@yield('content')
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.25s">
<p>© Copyright 2024 by Ihya Ulumuddin</p>
</div>
</div>
</div>
</footer>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.25s">
<p>© Copyright 2024 by Ihya Ulumuddin</p>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/owl-carousel.js') }}"></script>
<script src="{{ asset('assets/js/animation.js') }}"></script>
<script src="{{ asset('assets/js/imagesloaded.js') }}"></script>
<script src="{{ asset('assets/js/templatemo-custom.js') }}"></script>
<!-- Scripts -->
<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/owl-carousel.js') }}"></script>
<script src="{{ asset('assets/js/animation.js') }}"></script>
<script src="{{ asset('assets/js/imagesloaded.js') }}"></script>
<script src="{{ asset('assets/js/templatemo-custom.js') }}"></script>
<script>
// Toggle popup visibility
function togglePopup() {
const popup = document.getElementById('popupOverlay');
popup.classList.toggle('show');
}
<script>
// Toggle popup visibility
function togglePopup() {
const popup = document.getElementById('popupOverlay');
popup.classList.toggle('show');
}
// Tab switching functionality
function openTab(tabName, buttonElement) {
// Hide all tab contents
const tabContents = document.getElementsByClassName("tab-content");
for (let i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove("active");
}
function openTab(tabId, btn) {
// Hide semua tab-content
document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
// Remove active class from all tab buttons
const tabButtons = document.getElementsByClassName("tab-button");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
}
// Hapus active dari semua tombol tab
document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
// Show the selected tab content
document.getElementById(tabName).classList.add("active");
// Add active class to the clicked button
buttonElement.classList.add("active");
}
</script>
// Show tab yang diklik
document.getElementById(tabId).classList.add('active');
// Tambahkan active pada tombol yang diklik
btn.classList.add('active');
// Ambil popup-box
const popupBox = document.querySelector('.popup-overlay .popup-box');
if (tabId === 'passwordTab') {
popupBox.classList.add('password-tab');
} else {
popupBox.classList.remove('password-tab');
}
}
// Tab switching functionality
function openTab(tabName, buttonElement) {
// Hide all tab contents
const tabContents = document.getElementsByClassName("tab-content");
for (let i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove("active");
}
// Remove active class from all tab buttons
const tabButtons = document.getElementsByClassName("tab-button");
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
}
// Show the selected tab content
document.getElementById(tabName).classList.add("active");
// Add active class to the clicked button
buttonElement.classList.add("active");
}
</script>
</body>
</html>

View File

@ -5,7 +5,7 @@
@section('content')
<div class="register">
<h1>Register dulu gan</h1>
<h1>Register dulu </h1>
<form action="{{ route('register') }}" method="post" class="form register-form">