<!
DOCTYPE html>
<html>
<head>
<base target="_top">
<link
href="[Link]
" rel="stylesheet">
<link href="[Link]
[Link]" rel="stylesheet">
<style>
body { background-color: #000000; color: #adb5bd; font-family: 'Open
Sans', sans-serif; margin: 0; }
/* Sidebar Style */
.sidebar { width: 250px; height: 100vh; background: #191c24; position:
fixed; padding: 20px 0; }
.brand-logo { color: #eb1616; font-weight: bold; font-size: 1.5rem;
padding: 0 25px 20px; display: block; text-decoration: none; }
.user-profile { padding: 0 25px 30px; display: flex; align-items: center;
}
.user-avatar { width: 40px; height: 40px; background: #eb1616; border-
radius: 50%; display: flex; align-items: center; justify-content: center;
color: white; font-weight: bold; margin-right: 12px; }
.nav-link { color: #ffffff; padding: 12px 25px; display: block; text-
decoration: none; font-size: 0.9rem; transition: 0.3s; }
.nav-link:hover, .[Link] { background: #000; color: #eb1616;
border-left: 3px solid #eb1616; }
.nav-link i { margin-right: 10px; width: 20px; text-align: center; }
.active i { color: #eb1616; }
/* Content Area */
.content { margin-left: 250px; padding: 30px; }
/* Card & Form Style */
.card-custom { background: #191c24; border-radius: 8px; padding: 25px;
border: none; }
.card-title { color: #fff; font-size: 1.1rem; margin-bottom: 25px;
display: flex; align-items: center; }
.card-title i { margin-right: 10px; }
label { font-size: 0.75rem; color: #adb5bd; margin-bottom: 8px; font-
weight: 600; text-transform: uppercase; }
.form-control {
background-color: #191c24 !important;
border: 1px solid #333 !important;
color: #fff !important;
border-radius: 4px;
padding: 8px 12px;
}
.form-control:focus { box-shadow: none; border-color: #eb1616 !important;
}
.btn-simpan {
background-color: #eb1616;
border: none;
color: white;
padding: 10px 25px;
border-radius: 4px;
font-weight: bold;
float: right;
}
.btn-simpan:hover { background-color: #c41212; }
.btn-simpan:disabled { background-color: #555; }
/* Fix for date picker icon color */
input[type="date"]::-webkit-calendar-picker-indicator { filter:
invert(1); }
</style>
</head>
<body>
<div class="sidebar">
<a href="#" class="brand-logo"><i class="fa fa-user-edit me-
2"></i>DarkPan</a>
<div class="user-profile">
<div class="user-avatar">JD</div>
<div>
<div style="color: #fff; font-weight: bold; font-size: 0.9rem;">Jhon
Doe</div>
<div style="font-size: 0.7rem; color: #6c7293;">Admin</div>
</div>
</div>
<nav>
<a href="#" class="nav-link active"><i class="fa fa-tachometer-
alt"></i>Input Avr Harga</a>
<a href="#" class="nav-link"><i class="fa fa-laptop"></i>Input Harga
KPB</a>
<a href="#" class="nav-link"><i class="fa fa-chart-bar"></i>Input
MTP</a>
<a href="#" class="nav-link"><i class="fa fa-table"></i>Input
Outstanding Kontrak</a>
</nav>
</div>
<div class="content">
<div class="card-custom">
<div class="card-title">
<i class="fa fa-edit"></i> Input Data AVR Harga
</div>
<form id="avrForm">
<div class="row mb-4">
<div class="col-md-4">
<label>TANGGAL</label>
<input type="date" class="form-control" id="tanggal" required>
</div>
<div class="col-md-4">
<label>HARGA AVR CPO</label>
<input type="number" class="form-control" id="cpo" placeholder=""
required>
</div>
<div class="col-md-4">
<label>HARGA AVR PK</label>
<input type="number" class="form-control" id="pk" placeholder=""
required>
</div>
</div>
<div class="row mb-4">
<div class="col-md-4">
<label>HARGA AVR CANGKANG</label>
<input type="number" class="form-control" id="cangkang"
placeholder="" required>
</div>
<div class="col-md-4">
<label>HARGA AVR FIBER</label>
<input type="number" class="form-control" id="fiber"
placeholder="" required>
</div>
<div class="col-md-4">
<label>HARGA AVR CFT</label>
<input type="number" class="form-control" id="cft" placeholder=""
required>
</div>
</div>
<div class="row">
<div class="col-12 text-end">
<button type="submit" id="btnSubmit" class="btn-simpan">
<i class="fa fa-save me-2"></i> Simpan Data
</button>
</div>
</div>
</form>
</div>
</div>
<script>
[Link]('avrForm').addEventListener('submit', function(e)
{
[Link]();
const btn = [Link]('btnSubmit');
[Link] = true;
[Link] = '<i class="fa fa-spinner fa-spin"></i> Memproses...';
const formData = {
tanggal: [Link]('tanggal').value,
cpo: [Link]('cpo').value,
pk: [Link]('pk').value,
cangkang: [Link]('cangkang').value,
fiber: [Link]('fiber').value,
cft: [Link]('cft').value
};
[Link]
.withSuccessHandler(function(response) {
alert(response);
[Link]('avrForm').reset();
[Link] = false;
[Link] = '<i class="fa fa-save me-2"></i> Simpan Data';
})
.withFailureHandler(function(err) {
alert("Gagal menyimpan: " + err);
[Link] = false;
[Link] = '<i class="fa fa-save me-2"></i> Simpan Data';
})
.saveAvrData(formData);
});
</script>
</body>
</html>
function doGet() {
return [Link]('Index')
.evaluate()
.setTitle('DarkPan - Input Data')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode([Link]);
}
/**
* Menyimpan data dari Form ke sheet DATABASE AVR HARGA
*/
function saveAvrData(formData) {
try {
const ssId = "1Nd-rdp4N_nnDdp-_ZQAjH-sHt0-pm2k2wmfRzAKP4hQ";
const ss = [Link](ssId);
let sheet = [Link]("DATABASE AVR HARGA");
// Jika sheet belum ada, buat otomatis
if (!sheet) {
sheet = [Link]("DATABASE AVR HARGA");
[Link](["TANGGAL", "HARGA AVR CPO", "HARGA AVR PK", "HARGA AVR
CANGKANG", "HARGA AVR FIBER", "HARGA AVR CFT"]);
}
// Append data ke kolom A sampai F
[Link]([
[Link],
[Link],
[Link],
[Link],
[Link],
[Link]
]);
return "Sukses! Data berhasil disimpan.";
} catch (e) {
return "Error: " + [Link]();
}
}