234 lines
8.8 KiB
PHP
234 lines
8.8 KiB
PHP
@extends('layoutuser.app')
|
|
|
|
@section('title', 'Pengaturan Waktu')
|
|
|
|
@section('content')
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<!-- Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-clock me-2 text-primary"></i>Pengaturan Waktu
|
|
</h4>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
{{ session('error') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row">
|
|
<!-- Current Time Display -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-clock me-2"></i>Waktu Saat Ini
|
|
</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="current-time-display">
|
|
<div class="time-large" id="current-time">--:--:--</div>
|
|
<div class="date-medium" id="current-date">-- --- ----</div>
|
|
<div class="day-small" id="current-day">--</div>
|
|
<div class="timezone-info" id="timezone-info">{{ $currentTimezone }}</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="refreshTime()">
|
|
<i class="fas fa-sync-alt me-1"></i>Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timezone Settings -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-success text-white">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-globe me-2"></i>Pengaturan Timezone
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="{{ route('user.timezone.update') }}" method="POST">
|
|
@csrf
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label"><strong>Pilih Timezone:</strong></label>
|
|
<select name="timezone" class="form-select" onchange="previewTimezone(this.value)">
|
|
@foreach($availableTimezones as $tz => $display)
|
|
<option value="{{ $tz }}" {{ $currentTimezone == $tz ? 'selected' : '' }}>
|
|
{{ $display }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label"><strong>Preview Waktu:</strong></label>
|
|
<div class="alert alert-info" id="timezone-preview">
|
|
<i class="fas fa-eye me-2"></i>
|
|
<span id="preview-text">Pilih timezone untuk preview</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="fas fa-save me-2"></i>Simpan Pengaturan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timezone Information -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-info text-white">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>Informasi Timezone
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Timezone Indonesia:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><strong>WIB (Waktu Indonesia Barat):</strong> UTC+7</li>
|
|
<li><strong>WITA (Waktu Indonesia Tengah):</strong> UTC+8</li>
|
|
<li><strong>WIT (Waktu Indonesia Timur):</strong> UTC+9</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Pengaruh pada Sistem:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-check text-success me-2"></i>Waktu notifikasi</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Waktu makan</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Riwayat simulasi</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Log aktivitas</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.current-time-display {
|
|
padding: 20px;
|
|
}
|
|
|
|
.time-large {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.date-medium {
|
|
font-size: 1.2rem;
|
|
color: #6c757d;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.day-small {
|
|
font-size: 1rem;
|
|
color: #28a745;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.timezone-info {
|
|
font-size: 0.9rem;
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
}
|
|
|
|
#timezone-preview {
|
|
font-family: monospace;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let timeUpdateInterval;
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateCurrentTime();
|
|
startTimeUpdate();
|
|
previewTimezone(document.querySelector('select[name="timezone"]').value);
|
|
});
|
|
|
|
// Update current time
|
|
function updateCurrentTime() {
|
|
const timezone = '{{ $currentTimezone }}';
|
|
|
|
fetch(`/user/timezone/current-time?timezone=${timezone}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('current-time').textContent = data.time_only;
|
|
document.getElementById('current-date').textContent = data.date_only;
|
|
document.getElementById('current-day').textContent = data.day_name;
|
|
document.getElementById('timezone-info').textContent = data.timezone;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error updating time:', error);
|
|
});
|
|
}
|
|
|
|
// Start time update interval
|
|
function startTimeUpdate() {
|
|
timeUpdateInterval = setInterval(updateCurrentTime, 1000);
|
|
}
|
|
|
|
// Stop time update interval
|
|
function stopTimeUpdate() {
|
|
if (timeUpdateInterval) {
|
|
clearInterval(timeUpdateInterval);
|
|
}
|
|
}
|
|
|
|
// Refresh time manually
|
|
function refreshTime() {
|
|
updateCurrentTime();
|
|
}
|
|
|
|
// Preview timezone
|
|
function previewTimezone(timezone) {
|
|
fetch(`/user/timezone/current-time?timezone=${timezone}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('preview-text').textContent =
|
|
`${data.formatted_time} (${data.timezone})`;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error previewing timezone:', error);
|
|
document.getElementById('preview-text').textContent = 'Error loading preview';
|
|
});
|
|
}
|
|
|
|
// Cleanup on page unload
|
|
window.addEventListener('beforeunload', function() {
|
|
stopTimeUpdate();
|
|
});
|
|
</script>
|
|
@endsection
|