WD - Dev
375 lines
13 KiB
PHP
375 lines
13 KiB
PHP
<?php
|
||
|
||
|
||
$stmt = $pdo->prepare("SELECT * FROM v_pelanggan WHERE id = :id");
|
||
$stmt->execute(['id' => $page[1]]);
|
||
$isi = $stmt->fetch(PDO::FETCH_ASSOC);
|
||
|
||
$remoteonu = encrypt_url('user_remote|'.$isi['id'].'|'.$isi['id_setting_mikrotik']);
|
||
|
||
?>
|
||
|
||
|
||
<!-- Main content -->
|
||
<section class="content">
|
||
<div class="container-fluid">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<style>
|
||
/* ===============================
|
||
CUSTOMER DETAIL – PROFESSIONAL
|
||
================================ */
|
||
.customer-wrap{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:18px;
|
||
}
|
||
|
||
/* HEADER */
|
||
.customer-header{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:flex-start;
|
||
gap:16px;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.customer-title{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:4px;
|
||
}
|
||
|
||
.customer-name{
|
||
font-size:20px;
|
||
font-weight:700;
|
||
color:#111827;
|
||
}
|
||
|
||
.customer-sub{
|
||
font-size:15px;
|
||
color:#6b7280;
|
||
}
|
||
|
||
/* STATUS */
|
||
.customer-status{
|
||
padding:6px 14px;
|
||
border-radius:999px;
|
||
font-size:12px;
|
||
font-weight:600;
|
||
}
|
||
.status-aktif{
|
||
background:#dcfce7;
|
||
color:#166534;
|
||
}
|
||
.status-nonaktif{
|
||
background:#fee2e2;
|
||
color:#991b1b;
|
||
}
|
||
|
||
/* ACTION BUTTONS */
|
||
.customer-actions{
|
||
display:flex;
|
||
gap:10px;
|
||
flex-wrap:wrap;
|
||
}
|
||
|
||
.action-btn{
|
||
border:none;
|
||
padding:8px 14px;
|
||
border-radius:10px;
|
||
font-size:12px;
|
||
font-weight:600;
|
||
cursor:pointer;
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
}
|
||
.btn-wa{background:#22c55e;color:#fff}
|
||
.btn-map{background:#2563eb;color:#fff}
|
||
.btn-remote{background:#0ea5a4;color:#fff}
|
||
|
||
/* SECTION */
|
||
.c-section{
|
||
border-top:1px solid #e5e7eb;
|
||
padding-top:14px;
|
||
}
|
||
|
||
.c-section-title{
|
||
font-size:15px;
|
||
font-weight:700;
|
||
color:#374151;
|
||
margin-bottom:10px;
|
||
border-left:4px solid #fb923c;
|
||
padding-left:8px;
|
||
}
|
||
|
||
/* GRID */
|
||
.c-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(2,1fr);
|
||
gap:12px 18px;
|
||
}
|
||
|
||
.c-item{
|
||
font-size:14px;
|
||
}
|
||
.c-label{
|
||
font-weight:600;
|
||
color:#374151;
|
||
}
|
||
.c-value{
|
||
color:#6b7280;
|
||
word-break:break-word;
|
||
}
|
||
|
||
/* NOTE */
|
||
.c-note{
|
||
background:#f8fafc;
|
||
border-left:4px solid #6366f1;
|
||
padding:12px 14px;
|
||
font-size:14px;
|
||
border-radius:8px;
|
||
white-space:pre-line;
|
||
}
|
||
|
||
/* RESPONSIVE */
|
||
|
||
</style>
|
||
|
||
<div class="customer-wrap">
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-7">
|
||
<!-- HEADER -->
|
||
<div class="customer-header">
|
||
<div class="customer-title">
|
||
<div class="customer-name"><?= $isi['nama']; ?></div>
|
||
<div class="customer-sub">
|
||
ID Pelanggan : <?= $isi['akun']; ?><br><?= $isi['nama_paket']; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<span class="customer-status <?= $isi['status']=='aktif'?'status-aktif':'status-nonaktif'; ?>">
|
||
<?= strtoupper($isi['status']); ?>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- ACTION -->
|
||
<div class="customer-actions">
|
||
<button class="action-btn btn-wa" onclick="openWhatsapp('<?= $isi['nomor_whatsapp']; ?>')">
|
||
<i class="fab fa-whatsapp"></i>WhatsApp
|
||
</button>
|
||
<button class="action-btn btn-map" onclick="openMaps(<?= $isi['latitude']; ?>,<?= $isi['longitude']; ?>)">
|
||
<i class="fas fa-map-marker-alt"></i>Maps
|
||
</button>
|
||
<button class="action-btn btn-remote" onclick="openRemote('<?= $remoteonu; ?>')">
|
||
<i class="fas fa-wifi"></i>Remote
|
||
</button>
|
||
</div>
|
||
|
||
<!-- IDENTITAS -->
|
||
<div class="c-section">
|
||
<div class="c-section-title">Identitas Pelanggan</div>
|
||
<div class="c-grid">
|
||
<div class="c-item"><div class="c-label">Email</div><div class="c-value"><?= $isi['email']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">NIK</div><div class="c-value"><?= $isi['nik']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">WhatsApp</div><div class="c-value"><?= $isi['nomor_whatsapp']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">Marketing</div><div class="c-value"><?= $isi['nama_marketing']; ?></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KONEKSI -->
|
||
<div class="c-section">
|
||
<div class="c-section-title">Koneksi & Teknis</div>
|
||
<div class="c-grid">
|
||
<div class="c-item"><div class="c-label">IP Address</div><div class="c-value"><?= $isi['ip_address']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">MAC</div><div class="c-value"><?= $isi['mac_address']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">Serial ONU</div><div class="c-value"><?= $isi['serial_number']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">Status Koneksi</div><div class="c-value"><?= $isi['status_koneksi']; ?></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LOKASI -->
|
||
<div class="c-section">
|
||
<div class="c-section-title">Lokasi</div>
|
||
<div class="c-grid">
|
||
<div class="c-item"><div class="c-label">Alamat</div><div class="c-value"><?= $isi['alamat']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">Koordinat</div><div class="c-value"><?= $isi['latitude']; ?>,<?= $isi['longitude']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">Desa</div><div class="c-value"><?= $isi['desa']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">Topologi</div><div class="c-value"><?= $isi['nama_topologi']; ?></div></div>
|
||
<div class="c-item"><div class="c-label">Port ODP</div><div class="c-value"><?= $isi['port_odp']; ?></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CATATAN -->
|
||
<?php if(!empty($isi['catatan'])): ?>
|
||
<div class="c-section">
|
||
<div class="c-section-title">Catatan</div>
|
||
<div class="c-note"><?= $isi['catatan']; ?></div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
<div class="col-md-5">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<form method="post" enctype="multipart/form-data">
|
||
|
||
<center><label>Form Update</label></center>
|
||
|
||
<div class="form-group m-1">
|
||
<label>Serial Number</label>
|
||
<input type="text" class="form-control" name="serial_number" value="<?php echo $isi['serial_number']; ?>" oninput="this.value = this.value.toUpperCase()" required>
|
||
</div>
|
||
|
||
<div class="form-group m-1">
|
||
<label>Tipe WiFi ONU</label>
|
||
<select id="dropdown1" class="form-control" name="onu_wireless" required>
|
||
<option value=""></option>
|
||
<option value="Single Band" <?php if($isi['onu_wireless'] == 'Single Band') { echo "selected";} ?>>Single Band (2.4 GHz)</option>
|
||
<option value="Dual Band" <?php if($isi['onu_wireless'] == 'Dual Band') { echo "selected";} ?>>Dual Band (2.4 & 5 GHz)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group m-1">
|
||
<label>Tipe ONU</label>
|
||
<select id="dropdown1" class="form-control" name="onu_type" required>
|
||
<option value=""></option>
|
||
<option value="GPON" <?php if($isi['onu_type'] == 'GPON') { echo "selected";} ?>>GPON</option>
|
||
<option value="EPON" <?php if($isi['onu_type'] == 'EPON') { echo "selected";} ?>>EPON</option>
|
||
<option value="XPON" <?php if($isi['onu_type'] == 'XPON') { echo "selected";} ?>>XPON</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group m-1">
|
||
<label>Brand ONU</label>
|
||
<select id="dropdown1" class="form-control" name="onu_brand" required>
|
||
<option value=""></option>
|
||
<option value="SY 939" <?php if($isi['onu_brand'] == 'SY 939') { echo "selected";} ?>>SY 939</option>
|
||
<option value="ZTE F663" <?php if($isi['onu_brand'] == 'ZTE F663') { echo "selected";} ?>>ZTE F663</option>
|
||
<option value="ZTE F660" <?php if($isi['onu_brand'] == 'ZTE F660') { echo "selected";} ?>>ZTE F660</option>
|
||
<option value="ZTE F460" <?php if($isi['onu_brand'] == 'ZTE F460') { echo "selected";} ?>>ZTE F460</option>
|
||
<option value="ZTE F609" <?php if($isi['onu_brand'] == 'ZTE F609') { echo "selected";} ?>>ZTE F609</option>
|
||
<option value="OTHER" <?php if($isi['onu_brand'] == 'OTHER') { echo "selected";} ?>>OTHER</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group m-1">
|
||
<label>TX Power</label>
|
||
<input type="number" class="form-control" max="4" min="-50.00" step="0.01" name="rx_power" value="<?php echo $isi['rx_power']; ?>" required>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group m-1">
|
||
<label>RX Power</label>
|
||
<input type="number" class="form-control" max="-5.00" min="-50.00" step="0.01" name="tx_power" value="<?php echo $isi['tx_power']; ?>" required>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<button type="submit" class="btn btn-primary btn-sm m-1 px-3" name="updateCustom">Simpan</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function openWhatsapp(no){
|
||
if(!no) return alert('Nomor WhatsApp tidak tersedia');
|
||
window.open(`https://wa.me/${no}`, '_blank');
|
||
}
|
||
|
||
function openMaps(lat, lng){
|
||
if(!lat || !lng) return alert('Koordinat tidak tersedia');
|
||
window.open(`https://www.google.com/maps?q=${lat},${lng}`, '_blank');
|
||
}
|
||
|
||
function openRemote(url){
|
||
if (!url) {
|
||
alert('IP Address tidak tersedia');
|
||
return;
|
||
}
|
||
|
||
// kalau sudah mengandung scheme
|
||
if (/^(https?:|winbox:|rdp:)/i.test(url)) {
|
||
window.open(url, '_blank', 'noopener,noreferrer');
|
||
} else {
|
||
window.open(`?${url}`, '_blank', 'noopener,noreferrer');
|
||
}
|
||
}
|
||
|
||
|
||
// function openRemote(url){
|
||
// if(!url) return alert('IP Address tidak tersedia');
|
||
// // contoh RDP / WebFig / Winbox
|
||
// window.location.href = `?${url}`;
|
||
// }
|
||
</script>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<?php
|
||
|
||
if (isset($_POST['updateCustom'])) {
|
||
|
||
//clean serial nnumber
|
||
$serialnumber = $_POST['serial_number'] ?? null;
|
||
$serialnumber = str_replace(' ', '', $serialnumber);
|
||
$serialnumber = preg_replace('/[^A-Za-z0-9]/', '', $serialnumber);
|
||
$serialnumber = strtoupper($serialnumber);
|
||
|
||
// DI kurangi 1 bulan agar cronjob berjalan sesuai harapan
|
||
$Formatted = date('Y-m-d', strtotime($_POST['mulai_pembayaran']));
|
||
$date1 = new DateTime($Formatted);
|
||
$date1->modify('-1 month');
|
||
$mulaiBayarFix = $date1->format('Y-m-d');
|
||
|
||
$SQL = "UPDATE pelanggan SET
|
||
serial_number = :serial_number,
|
||
onu_type = :onu_type,
|
||
onu_brand = :onu_brand,
|
||
onu_wireless = :onu_wireless,
|
||
tx_power = :tx_power,
|
||
rx_power = :rx_power
|
||
WHERE id = :id";
|
||
|
||
try {
|
||
$stmt = $pdo->prepare($SQL);
|
||
$stmt->execute([
|
||
':serial_number' => $serialnumber,
|
||
':onu_type' => $_POST['onu_type'],
|
||
':onu_brand' => $_POST['onu_brand'],
|
||
':onu_wireless' => $_POST['onu_wireless'],
|
||
':tx_power' => $_POST['tx_power'],
|
||
':rx_power' => $_POST['rx_power'],
|
||
':id' => $page[1]
|
||
]);
|
||
|
||
|
||
sweetAlert("Data pelanggan berhasil diubah ", "success");
|
||
} catch (PDOException $e) {
|
||
// Handle error appropriately
|
||
sweetAlert("Error: " . $e->getMessage(), "error");
|
||
// echo "Error: " . $e->getMessage();
|
||
}
|
||
}
|
||
|
||
?>
|