228 lines
8.5 KiB
PHP
228 lines
8.5 KiB
PHP
<!-- meta tags and other links -->
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
|
|
<x-head />
|
|
<style>
|
|
.tombol-setuju {
|
|
background-color: #3085d6 !important;
|
|
color: white !important;
|
|
padding: 10px 24px !important;
|
|
margin: 5px !important;
|
|
border-radius: 8px !important;
|
|
border: none !important;
|
|
opacity: 1 !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.tombol-batal {
|
|
background-color: #ef4444 !important;
|
|
color: white !important;
|
|
padding: 10px 24px !important;
|
|
margin: 5px !important;
|
|
border-radius: 8px !important;
|
|
border: none !important;
|
|
opacity: 1 !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.tombol-setuju:hover, .tombol-batal:hover {
|
|
filter: brightness(0.9);
|
|
color: white !important;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<body class="dark:bg-neutral-800 bg-neutral-100 dark:text-white">
|
|
|
|
<!-- ..:: header area start ::.. -->
|
|
<x-sidebar />
|
|
<!-- ..:: header area end ::.. -->
|
|
|
|
<main class="dashboard-main">
|
|
|
|
<!-- ..:: navbar start ::.. -->
|
|
<x-navbar />
|
|
<!-- ..:: navbar end ::.. -->
|
|
<div class="dashboard-main-body">
|
|
|
|
<!-- ..:: breadcrumb start ::.. -->
|
|
<x-breadcrumb title='{{ isset($title) ? $title : "" }}' subTitle='{{ isset($subTitle) ? $subTitle : "" }}' />
|
|
<!-- ..:: header area end ::.. -->
|
|
|
|
@yield('content')
|
|
|
|
</div>
|
|
<!-- ..:: footer start ::.. -->
|
|
<x-footer />
|
|
<!-- ..:: footer area end ::.. -->
|
|
|
|
</main>
|
|
|
|
<!-- ..:: scripts start ::.. -->
|
|
<x-script script='{!! isset($script) ? $script : "" !!}' />
|
|
<!-- ..:: scripts end ::.. -->
|
|
|
|
{{-- ========================================== --}}
|
|
{{-- MODAL SETTING HARGA (HANYA ADMIN) --}}
|
|
{{-- ========================================== --}}
|
|
@auth
|
|
@if(Auth::user()->role === 'admin')
|
|
<div id="modalHarga" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99999; display: none; align-items: center; justify-content: center;">
|
|
<div style="background: white; border-radius: 16px; padding: 24px; width: 100%; max-width: 480px; margin: 0 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); position: relative;">
|
|
|
|
{{-- Close Button --}}
|
|
<button onclick="closeModalHarga()" style="position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #f3f4f6; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px;">
|
|
✕
|
|
</button>
|
|
|
|
{{-- Title --}}
|
|
<h6 style="font-size: 18px; font-weight: bold; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">
|
|
⚙️ Pengaturan Harga Air
|
|
</h6>
|
|
|
|
{{-- Form --}}
|
|
<form action="{{ route('admin.setting-harga.update') }}" method="POST">
|
|
@csrf
|
|
|
|
{{-- Harga per m3 --}}
|
|
<div style="margin-bottom: 14px;">
|
|
<label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px;">
|
|
Harga per m³ (Rp)
|
|
</label>
|
|
<input type="number"
|
|
name="harga_per_m3"
|
|
id="inputHargaM3"
|
|
class="form-control rounded-lg w-full"
|
|
style="padding: 10px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px;"
|
|
required>
|
|
</div>
|
|
|
|
{{-- Biaya Admin --}}
|
|
<div style="margin-bottom: 14px;">
|
|
<label style="display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px;">
|
|
Biaya Admin Bulanan (Rp)
|
|
</label>
|
|
<input type="number"
|
|
name="biaya_admin"
|
|
id="inputBiayaAdmin"
|
|
class="form-control rounded-lg w-full"
|
|
style="padding: 10px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px;"
|
|
required>
|
|
</div>
|
|
|
|
{{-- Simulasi --}}
|
|
<div style="background: #f0f9ff; padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; border: 1px solid #bae6fd;">
|
|
<strong>📊 Simulasi Perhitungan:</strong><br>
|
|
Pemakaian 10 m³ =
|
|
<span id="contohHitung" style="color: #0369a1; font-weight: bold; font-size: 15px;">Rp 42.000</span>
|
|
</div>
|
|
|
|
{{-- Buttons --}}
|
|
<div style="display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid #e5e7eb;">
|
|
<button type="button"
|
|
onclick="closeModalHarga()"
|
|
style="padding: 10px 20px; border: 1px solid #d1d5db; border-radius: 8px; background: white; cursor: pointer; font-size: 14px;">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
style="padding: 10px 20px; background: #2563eb; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">
|
|
💾 Simpan Harga
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Script Modal --}}
|
|
<script>
|
|
function openModalHarga(hargaM3, biayaAdmin) {
|
|
document.getElementById('inputHargaM3').value = hargaM3;
|
|
document.getElementById('inputBiayaAdmin').value = biayaAdmin;
|
|
hitungContoh();
|
|
document.getElementById('modalHarga').style.display = 'flex';
|
|
}
|
|
|
|
function closeModalHarga() {
|
|
document.getElementById('modalHarga').style.display = 'none';
|
|
}
|
|
|
|
function hitungContoh() {
|
|
var m3 = parseInt(document.getElementById('inputHargaM3').value) || 0;
|
|
var admin = parseInt(document.getElementById('inputBiayaAdmin').value) || 0;
|
|
var total = (10 * m3) + admin;
|
|
document.getElementById('contohHitung').textContent = 'Rp ' + total.toLocaleString('id-ID');
|
|
}
|
|
|
|
// Event listener untuk simulasi real-time
|
|
document.getElementById('inputHargaM3').addEventListener('input', hitungContoh);
|
|
document.getElementById('inputBiayaAdmin').addEventListener('input', hitungContoh);
|
|
|
|
// Tutup modal kalau klik di luar
|
|
document.getElementById('modalHarga').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeModalHarga();
|
|
}
|
|
});
|
|
</script>
|
|
@endif
|
|
@endauth
|
|
{{-- ========================================== --}}
|
|
{{-- END MODAL SETTING HARGA --}}
|
|
{{-- ========================================== --}}
|
|
|
|
</body>
|
|
|
|
{{-- SweetAlert & Global Script --}}
|
|
<script>
|
|
|
|
@if(session('success'))
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: "{{ session('success') }}",
|
|
showConfirmButton: false,
|
|
timer: 3000,
|
|
customClass: {
|
|
popup: 'rounded-2xl shadow-lg',
|
|
title: 'text-neutral-800 font-semibold',
|
|
}
|
|
});
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Gagal!',
|
|
text: "{{ session('error') }}",
|
|
showConfirmButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
customClass: {
|
|
popup: 'rounded-2xl',
|
|
}
|
|
});
|
|
@endif
|
|
|
|
function hapusData(id, nama) {
|
|
Swal.fire({
|
|
title: "Apakah anda yakin?",
|
|
text: "Data " + nama + " akan dihapus permanen!",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonText: "Ya, Hapus!",
|
|
cancelButtonText: "Batal",
|
|
customClass: {
|
|
popup: 'rounded-2xl',
|
|
confirmButton: 'tombol-setuju',
|
|
cancelButton: 'tombol-batal'
|
|
},
|
|
buttonsStyling: false
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
document.getElementById('form-hapus-' + id).submit();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</html> |