|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/laciasmara.com/public_html/shop/application/views/admin_new/voucher/ |
Upload File : |
<main class="flex-1 py-4 px-4 bg-purple-50">
<h1 class="text-xl font-bold mb-4 text-[#333]">Tambah Voucher</h1>
<?php if ($this->session->flashdata('message')): ?>
<div class="alert flex items-center justify-between bg-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-100 border-l-4 border-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-800 px-6 py-4 rounded-lg shadow-lg transition transform duration-300">
<div class="flex items-center">
<!-- Ikon Feather sesuai jenis pesan -->
<i data-feather="<?php echo $this->session->flashdata('message_type') === 'success' ? 'check-circle' : 'x-circle'; ?>" class="h-6 w-6 mr-3"></i>
<span class="font-semibold"><?php echo $this->session->flashdata('message'); ?></span>
</div>
<button class="ml-4 text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-500 hover:text-<?php echo $this->session->flashdata('message_type') === 'success' ? 'green' : 'red'; ?>-700 focus:outline-none" onclick="this.parentElement.style.display='none'">
<i data-feather="x" class="h-5 w-5"></i>
</button>
</div>
<script>
feather.replace();
</script>
<?php endif; ?>
<form action="<?= base_url('admin/vouchers/create_voucher') ?>" method="POST" class="space-y-8" id="voucherForm">
<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" class="csrf_token">
<!-- Informasi Voucher Section -->
<div class="bg-white rounded-lg shadow-sm p-6" id="voucherSection">
<h2 class="text-lg font-semibold mb-6">Informasi Voucher</h2>
<!-- Voucher Name-->
<div class="mb-6">
<div class="flex items-start gap-4">
<!-- Label & Info -->
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Nama Voucher</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Nama voucher ini memudahkan kita nanti buat nyari vouchernya</p>
</div>
</div>
<div class="w-2/3">
<input
id="voucher_name"
type="text"
name="voucher_name"
placeholder="Misalnya: Promo Kemerdekaan"
autocomplete="off"
required
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
</div>
</div>
</div>
<!-- Voucher Kode-->
<div class="mb-6">
<div class="flex items-start gap-4">
<!-- Label & Info -->
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Kode Voucher</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Kode ini yang bakal digunain sama Pelanggan, jadi jangan sampai salah atau typo ya.</p>
</div>
</div>
<div class="w-2/3">
<input
id="voucher_code"
type="text"
name="voucher_code"
placeholder="Misalnya: MERDEKA70"
autocomplete="off"
required
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
</div>
</div>
</div>
<!-- Replace the existing voucher type select with this improved version -->
<!-- Jenis Voucher-->
<div class="mb-6">
<div class="flex items-start gap-4">
<!-- Label & Info -->
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Jenis Voucher</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Pilih jenis vouchernya sesuai promosi yang berlaku ya.</p>
</div>
</div>
<div class="w-2/3">
<select
id="voucher_type"
name="voucher_type"
required
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333]">
<option value="" disabled selected>Pilih jenis vouchernya</option>
<option value="normal_promo">Normal Promo</option>
<option value="birthday_promo">Birthday Promo</option>
<option value="gender_promo">Gender Promo</option>
<option value="time_promo">Time Promo</option>
<option value="quantity_promo">Quantity Promo</option>
<option value="province_promo">Province Promo</option>
<option value="category_promo">Category Promo</option>
<option value="brand_promo">Brand Promo</option>
<option value="product_promo">Product Promo</option>
<option value="customer_promo">Customer Promo</option>
</select>
<div class="mt-2 text-sm text-[#333]" id="voucher_type_description">
<p><span class="font-medium">Normal Promo</span> adalah diskon reguler yang berlaku saat pelanggan memasukkan kode voucher. Diskon bisa berupa persentase atau nominal tertentu.</p>
</div>
</div>
</div>
</div>
<!-- Normal Promo Section (Always visible) -->
<div class="mb-6 voucher-section" id="normal_promo_section">
<!-- Diskon akan diatur pada section berikutnya -->
</div>
<!-- Birthday Promo Section -->
<div class="mb-6 voucher-section hidden" id="birthday_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Bulan Ulang Tahun</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Pilih bulan ulang tahun yang berlaku untuk promo ini</p>
</div>
</div>
<div class="w-2/3">
<select
id="birth_month_select"
name="birth_months[]"
multiple
placeholder="Pilih bulan ulang tahun..."
class="mt-1 w-full">
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
</div>
</div>
</div>
<input type="hidden" id="selected_birthday_months" name="selected_birthday_months[]" value="">
<!-- Gender Promo Section -->
<div class="mb-6 voucher-section hidden" id="gender_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Gender</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Voucher akan berlaku untuk pelanggan dengan gender yang dipilih</p>
</div>
</div>
<div class="w-2/3">
<select
id="voucher_gender"
name="voucher_gender[]"
multiple
placeholder="Pilih gender..."
class="mt-1 w-full">
<option value="male">Laki-laki</option>
<option value="female">Perempuan</option>
<option value="others">Lainnya</option>
</select>
</div>
</div>
</div>
<input type="hidden" id="selected_genders" name="selected_genders[]" value="">
<!-- Time Promo Section -->
<div class="mb-6 voucher-section hidden" id="time_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Waktu Berlaku</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Tentukan jam berlaku promo</p>
</div>
</div>
<div class="w-2/3">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Mulai Jam</label>
<input
type="time"
name="time_start"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Sampai Jam</label>
<input
type="time"
name="time_end"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none" />
</div>
</div>
</div>
</div>
</div>
<!-- Quantity Promo Section -->
<div class="mb-6 voucher-section hidden" id="quantity_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Jumlah Minimum</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Jumlah minimum produk yang harus dibeli untuk mendapatkan promo</p>
</div>
</div>
<div class="w-2/3">
<input
type="number"
name="min_quantity"
min="1"
placeholder="Misalnya: 3"
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
</div>
</div>
</div>
<!-- Province Promo Section -->
<div class="mb-6 voucher-section hidden" id="province_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Provinsi</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Hanya pelanggan dengan provinsi yang dipilih yang bisa pakai vouchernya.</p>
</div>
</div>
<div class="w-2/3">
<select
id="province_select"
name="province_ids[]"
multiple
placeholder="Pilih provinsi..."
class="mt-1 w-full">
<?php foreach ($provinces as $province): ?>
<option value="<?= $province->id ?>"><?= $province->name ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<input type="hidden" id="selected_province_ids" name="selected_province_ids[]" value="">
<!-- Category Promo Section -->
<div class="mb-6 voucher-section hidden" id="category_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Kategori</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Pilih kategori produk yang akan mendapat promo</p>
</div>
</div>
<div class="w-2/3">
<select
id="category_select"
name="category_ids[]"
multiple
placeholder="Pilih kategori..."
class="mt-1 w-full">
<?php
foreach ($categories as $category) {
$indent = $category->parent ? ' ↳ ' : ''; // Tambahkan indentasi jika child
echo '<option value="' . $category->id_categories . '">' . $indent . htmlspecialchars($category->category) . '</option>';
}
?>
</select>
<div class="mt-2 flex justify-between text-sm">
<p class="text-gray-600">Tanda ↳ berarti sub kategori.</p>
</div>
</div>
</div>
</div>
<input type="hidden" id="selected_category_ids" name="selected_category_ids[]" value="">
<!-- Brand Promo Section -->
<div class="mb-6 voucher-section hidden" id="brand_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Merek</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Pilih merek produk yang akan mendapat promo</p>
</div>
</div>
<div class="w-2/3">
<select
id="brand_select"
name="brand_ids[]"
multiple
placeholder="Pilih merek..."
class="mt-1 w-full">
<?php foreach ($brands as $brand): ?>
<option value="<?= $brand->id_brands ?>"><?= $brand->brand ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<input type="hidden" id="selected_brand_ids" name="selected_brand_ids[]" value="">
<!-- Product Promo Section -->
<div class="mb-6 voucher-section hidden" id="product_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Produk</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Pilih produk spesifik yang akan mendapat promo</p>
</div>
</div>
<div class="w-2/3">
<select
id="product_select"
name="product_ids[]"
multiple
placeholder="Pilih produk..."
class="mt-1 w-full">
<?php foreach ($products as $product): ?>
<option value="<?= $product->id_products ?>"><?= $product->title ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<input type="hidden" id="selected_product_ids" name="selected_product_ids[]" value="">
<!-- Customer Promo Section -->
<div class="mb-6 voucher-section hidden" id="customer_promo_section">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Pelanggan</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Pilih pelanggan yang dapat menggunakan voucher ini</p>
</div>
</div>
<div class="w-2/3">
<select
id="customer_select"
name="customer_ids[]"
multiple
placeholder="Pilih pelanggan..."
class="mt-1 w-full">
<?php foreach ($customers as $customer): ?>
<option value="<?= $customer->id_customers ?>"><?= $customer->name ?> (<?= $customer->email ?>)</option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<input type="hidden" id="selected_customer_ids" name="selected_customer_ids[]" value="">
<!-- Discount Section (Common for all voucher types) -->
<div class="mb-6">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Tipe Diskon</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Pilih jenis diskon yang ingin diberikan</p>
</div>
</div>
<div class="w-2/3">
<select
id="discount_type"
name="discount_type"
required
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333]">
<option value="" disabled selected>Pilih tipe diskon</option>
<option value="percentage">Persentase (%)</option>
<option value="amount">Nominal (Rp)</option>
</select>
<div class="mt-4">
<div id="percentage_discount" class="hidden">
<label class="block text-sm font-medium text-gray-700 mb-1">Persentase Diskon (%)</label>
<input
type="number"
name="discount_percentage"
min="0"
max="100"
placeholder="Contoh: 10"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
</div>
<div id="amount_discount" class="hidden">
<label class="block text-sm font-medium text-gray-700 mb-1">Jumlah Diskon (Rp)</label>
<input
type="number"
name="discount_amount"
min="0"
placeholder="Contoh: 50000"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
</div>
</div>
</div>
</div>
</div>
<!-- Validity Period Section (Common for all voucher types) -->
<div class="mb-6">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Periode Berlaku</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Tentukan masa berlaku voucher</p>
</div>
</div>
<div class="w-2/3">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Mulai Tanggal</label>
<input
type="date"
name="valid_from"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Sampai Tanggal</label>
<input
type="date"
name="valid_until"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none" />
</div>
</div>
<div class="mt-2 flex justify-between text-sm">
<p class="text-gray-600">Kosongkan jika tidak ada batas masa berlaku.</p>
</div>
</div>
</div>
</div>
<!-- Usage Limit Section (Common for all voucher types) -->
<div class="mb-6">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Batas Penggunaan</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Opsional</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Tentukan berapa kali voucher ini dapat digunakan</p>
</div>
</div>
<div class="w-2/3">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Per Pengguna</label>
<input
type="number"
name="usage_limit_per_user"
min="1"
placeholder="Kosongkan jika tidak ada batas"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
</div>
</div>
</div>
</div>
</div>
<!-- Minimum Purchase Section (Common for all voucher types) -->
<div class="mb-6">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Minimum Pembelian</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Opsional</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Tentukan minimum pembelian untuk menggunakan voucher ini (Rp)</p>
</div>
</div>
<div class="w-2/3">
<input
type="number"
name="min_purchase"
min="0"
placeholder="Contoh: 100000"
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
</div>
</div>
</div>
<!-- Voucher Ready Section (Common for all voucher types) -->
<div class="mb-6">
<div class="flex items-start gap-4">
<div class="w-1/3">
<div class="flex items-center gap-2 mb-2">
<label class="text-[#333] font-medium">Jumlah Voucher</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Opsional</span>
</div>
<div class="mt-3 text-sm text-gray-600">
<p>Jumlah voucher yang siap digunakan</p>
</div>
</div>
<div class="w-2/3">
<input
type="number"
name="qty_voucher"
min="0"
placeholder="Contoh: 5"
class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] placeholder-gray-500" />
<div class="mt-2 flex justify-between text-sm">
<p class="text-gray-600">Biarkan kosong jika tidak ada batasnya.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="flex justify-end gap-4 p-6">
<button type="button" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
onclick="window.location.href='<?= base_url('admin/orders/manage-order') ?>'">
Batal
</button>
<button type="submit" class="px-6 py-2 bg-[#7A4397] text-white rounded-lg hover:bg-[#7A4397] transition-colors">
Simpan & Tambah Baru
</button>
</div>
</form>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
// document.getElementById("voucherForm").addEventListener("submit", function(event) {
// event.preventDefault(); // Mencegah submit langsung
// const formData = new FormData(this);
// const formObject = {};
// formData.forEach((value, key) => {
// formObject[key] = value;
// });
// console.log("Data yang akan dikirim:", formObject);
// // Setelah console.log, bisa submit secara manual
// // this.submit();
// });
// Ambil elemen yang diperlukan
const voucherTypeSelect = document.getElementById('voucher_type');
const voucherTypeDescription = document.getElementById('voucher_type_description');
const discountTypeSelect = document.getElementById('discount_type');
const percentageDiscountDiv = document.getElementById('percentage_discount');
const amountDiscountDiv = document.getElementById('amount_discount');
const selectedCustomerIdsInput = document.getElementById('selected_customer_ids');
const selectedBirthmonthsInput = document.getElementById('selected_birthday_months');
const selectedGendersInput = document.getElementById('selected_genders');
const selectedProvinceIdsInput = document.getElementById('selected_province_ids');
const selectedCategoryIdsInput = document.getElementById('selected_category_ids');
const selectedBrandIdsInput = document.getElementById('selected_brand_ids');
const selectedProductIdsInput = document.getElementById('selected_product_ids');
// Descriptions for each voucher type
const descriptions = {
'normal_promo': '<p><span class="font-medium">Normal Promo</span> adalah diskon reguler yang berlaku saat pelanggan memasukkan kode voucher. Diskon bisa berupa persentase atau nominal tertentu.</p>',
'birthday_promo': '<p><span class="font-medium">Birthday Promo</span> khusus untuk pelanggan yang berulang tahun di bulan tertentu. Contoh: Promo Agustus hanya berlaku bagi pelanggan yang lahir di bulan Agustus.</p>',
'gender_promo': '<p><span class="font-medium">Gender Promo</span> adalah promo yang hanya berlaku untuk pelanggan dengan gender tertentu. Contoh: Promo Hari Kartini hanya berlaku untuk pelanggan perempuan, atau Promo Hari Ayah untuk pelanggan laki-laki.</p>',
'time_promo': '<p><span class="font-medium">Time Promo</span> adalah promo yang hanya aktif pada jam tertentu. Contoh: Promo Penjualan Tengah Malam berlaku hanya pukul 00.00 – 02.00.</p>',
'quantity_promo': '<p><span class="font-medium">Quantity Promo</span> adalah diskon otomatis jika pelanggan membeli jumlah tertentu. Contoh: Beli 4 Dapat 10% – jika membeli 4 produk, pelanggan mendapat diskon 10%.</p>',
'province_promo': '<p><span class="font-medium">Province Promo</span> adalah Promo yang berlaku untuk pelanggan dari provinsi tertentu. Contoh: Promo Jawa Timur memberikan gratis ongkir atau diskon 10% bagi pelanggan di Jawa Timur.</p>',
'category_promo': '<p><span class="font-medium">Category Promo</span> berlaku hanya untuk produk dalam kategori tertentu, misalnya "Vibrators" atau "Male Toys".</p>',
'brand_promo': '<p><span class="font-medium">Brand Promo</span> adalah diskon khusus untuk produk dari merek tertentu, misalnya "Ticklers" atau "Njoy"</p>',
'product_promo': '<p><span class="font-medium">Product Promo</span> adalah diskon untuk produk tertentu saja.</p>',
'customer_promo': '<p><span class="font-medium">Customer Promo</span> adalah promo yang hanya berlaku untuk pelanggan tertentu.</p>'
};
// Initialize all TomSelect dropdowns
const tomSelectConfig = {
plugins: ['remove_button'],
allowEmptyOption: true,
closeAfterSelect: true
};
// Initialize TomSelect for all the select elements
let birthMonthSelect = new TomSelect('#birth_month_select', {
...tomSelectConfig,
onChange: function() {
updateSelectedBirthmonths();
}
});
let voucherGenderSelect = new TomSelect('#voucher_gender', {
...tomSelectConfig,
onChange: function() {
updateSelectedGenders();
}
});
let provinceSelect = new TomSelect('#province_select', {
...tomSelectConfig,
onChange: function() {
updateSelectedProvinceIds();
}
});
let categorySelect = new TomSelect('#category_select', {
...tomSelectConfig,
onChange: function() {
updateSelectedCategoryIds();
}
});
let brandSelect = new TomSelect('#brand_select', {
...tomSelectConfig,
onChange: function() {
updateSelectedBrandIds();
}
});
let productSelect = new TomSelect('#product_select', {
...tomSelectConfig,
render: {
option: function(data, escape) {
return '<div class="py-2 px-3">' + escape(data.text) + '</div>';
}
},
onChange: function() {
updateSelectedProductIds();
}
});
let customerSelect = new TomSelect('#customer_select', {
...tomSelectConfig,
render: {
option: function(data, escape) {
return '<div class="py-2 px-3">' + escape(data.text) + '</div>';
}
},
onChange: function() {
updateSelectedCustomerIds();
}
});
// Fungsi untuk memperbarui nilai input hidden berdasarkan pilihan select
function updateSelectedBirthmonths() {
let selectedValues = birthMonthSelect.getValue(); // Mengambil semua nilai yang dipilih
selectedBirthmonthsInput.value = Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues;
}
function updateSelectedCustomerIds() {
let selectedValues = customerSelect.getValue(); // Mengambil semua nilai yang dipilih
selectedCustomerIdsInput.value = Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues;
}
function updateSelectedGenders() {
let selectedValues = voucherGenderSelect.getValue();
selectedGendersInput.value = Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues;
}
function updateSelectedProvinceIds() {
let selectedValues = provinceSelect.getValue();
selectedProvinceIdsInput.value = Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues;
}
function updateSelectedCategoryIds() {
let selectedValues = categorySelect.getValue();
selectedCategoryIdsInput.value = Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues;
}
function updateSelectedBrandIds() {
let selectedValues = brandSelect.getValue();
selectedBrandIdsInput.value = Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues;
}
function updateSelectedProductIds() {
let selectedValues = productSelect.getValue();
selectedProductIdsInput.value = Array.isArray(selectedValues) ? selectedValues.join(",") : selectedValues;
}
// Inisialisasi nilai awal untuk semua input hidden
updateSelectedCustomerIds();
updateSelectedBirthmonths();
updateSelectedGenders();
updateSelectedProvinceIds();
updateSelectedCategoryIds();
updateSelectedBrandIds();
updateSelectedProductIds();
// Function to show relevant form sections based on voucher type
function updateFormSections(voucherType) {
// Hide all voucher-specific sections first
document.querySelectorAll('.voucher-section').forEach(section => {
section.classList.add('hidden');
});
// Show description for the selected type
if (descriptions[voucherType]) {
voucherTypeDescription.innerHTML = descriptions[voucherType];
} else {
voucherTypeDescription.innerHTML = '';
}
// Show the section for the selected voucher type
const sectionId = voucherType + '_section';
const section = document.getElementById(sectionId);
if (section) {
section.classList.remove('hidden');
}
// Always show normal_promo_section (common fields)
document.getElementById('normal_promo_section').classList.remove('hidden');
resetSelectsForUnusedTypes(voucherType);
}
// Function to handle discount type change
function updateDiscountFields(discountType) {
percentageDiscountDiv.classList.add('hidden');
amountDiscountDiv.classList.add('hidden');
if (discountType === 'percentage') {
percentageDiscountDiv.classList.remove('hidden');
} else if (discountType === 'amount') {
amountDiscountDiv.classList.remove('hidden');
}
}
// Event listener for voucher type change
voucherTypeSelect.addEventListener('change', function() {
updateFormSections(this.value);
});
// Event listener for discount type change
discountTypeSelect.addEventListener('change', function() {
updateDiscountFields(this.value);
});
function resetSelectsForUnusedTypes(currentVoucherType) {
// Reset select values that are not relevant for the current voucher type
if (currentVoucherType !== 'birthday_promo') {
birthMonthSelect.clear();
selectedBirthmonthsInput.value = '';
}
if (currentVoucherType !== 'gender_promo') {
voucherGenderSelect.clear();
selectedGendersInput.value = '';
}
if (currentVoucherType !== 'province_promo') {
provinceSelect.clear();
selectedProvinceIdsInput.value = '';
}
if (currentVoucherType !== 'category_promo') {
categorySelect.clear();
selectedCategoryIdsInput.value = '';
}
if (currentVoucherType !== 'brand_promo') {
brandSelect.clear();
selectedBrandIdsInput.value = '';
}
if (currentVoucherType !== 'product_promo') {
productSelect.clear();
selectedProductIdsInput.value = '';
}
if (currentVoucherType !== 'customer_promo') {
customerSelect.clear();
selectedCustomerIdsInput.value = '';
}
}
// Get the CSRF token elements
const CSRF_TOKEN = "<?= $this->security->get_csrf_token_name(); ?>";
const CSRF_HASH = "<?= $this->security->get_csrf_hash(); ?>";
// Track current CSRF token
let csrfData = {
name: CSRF_TOKEN,
value: CSRF_HASH
};
// Setup function to update CSRF token
function updateCsrfToken(newToken) {
if (newToken) {
csrfData.value = newToken;
// Update all CSRF token inputs on the page
document.querySelectorAll('.csrf_token').forEach(input => {
input.value = newToken;
});
}
}
// Make sure we show the relevant section when the page loads
// If the voucher type is pre-selected (e.g., during form validation)
if (voucherTypeSelect.value) {
updateFormSections(voucherTypeSelect.value);
}
// If discount type is pre-selected
if (discountTypeSelect.value) {
updateDiscountFields(discountTypeSelect.value);
}
});
</script>