|
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/links/ |
Upload File : |
<main class="flex-1 py-4 px-4 bg-purple-50">
<h1 class="text-xl font-bold mb-4 text-[#333]">Tambah Link</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/link/create_link') ?>" method="POST" class="space-y-8" id="linkForm">
<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 Link</h2>
<!-- Jenis Link -->
<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 Link</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 link yang akan dibuat</p>
</div>
</div>
<div class="w-2/3">
<select
id="link_type"
name="link_type"
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]"
onchange="showRelatedSelect(this.value)">
<option value="">Pilih Jenis Link</option>
<option value="product">Produk</option>
<option value="brand">Merk</option>
<option value="category">Kategori</option>
</select>
</div>
</div>
</div>
<!-- Produk Select (initially hidden) -->
<div class="mb-6 hidden" id="product_select_container">
<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">Pilih Produk</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
</div>
<div class="w-2/3">
<select
id="product_id"
name="product_id"
class="tom-select">
<option value="">Pilih Produk</option>
<?php foreach ($products as $product): ?>
<option value="<?= $product->id_products ?>"><?= $product->title ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<!-- Brand Select (initially hidden) -->
<div class="mb-6 hidden" id="brand_select_container">
<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">Pilih Merk</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
</div>
<div class="w-2/3">
<select
id="brand_id"
name="brand_id"
class="tom-select">
<option value="">Pilih Merk</option>
<?php foreach ($brands as $brand): ?>
<option value="<?= $brand->id_brands ?>"><?= $brand->brand ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<!-- Category Select (initially hidden) -->
<div class="mb-6 hidden" id="category_select_container">
<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">Pilih Kategori</label>
<span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Wajib</span>
</div>
</div>
<div class="w-2/3">
<select
id="category_id"
name="category_id"
class="tom-select">
<option value="">Pilih Kategori</option>
<?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>
</div>
</div>
<!-- UTM Source -->
<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">Sumber Trafik (Source)</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>Dari mana pengunjung datang?</p>
</div>
</div>
<div class="w-2/3">
<div class="grid grid-cols-4 gap-3 source-container">
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="facebook">
<img src="https://cdn-icons-png.flaticon.com/128/174/174848.png" alt="Facebook" class="h-8 w-8 mb-2">
<span class="text-sm">Facebook</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="instagram">
<img src="https://cdn-icons-png.flaticon.com/128/15713/15713420.png" alt="Instagram" class="h-8 w-8 mb-2">
<span class="text-sm">Instagram</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="youtube">
<img src="https://cdn-icons-png.flaticon.com/128/5968/5968852.png" alt="Youtube" class="h-8 w-8 mb-2">
<span class="text-sm">Youtube</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="linkedin">
<img src="https://cdn-icons-png.flaticon.com/128/3536/3536505.png" alt="Linkedin" class="h-8 w-8 mb-2">
<span class="text-sm">Linkedin</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="googleads">
<img src="https://cdn-icons-png.flaticon.com/128/2875/2875421.png" alt="Google Ads" class="h-8 w-8 mb-2">
<span class="text-sm">Google Ads</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="metaads">
<img src="https://cdn-icons-png.flaticon.com/128/6033/6033716.png" alt="Meta" class="h-8 w-8 mb-2">
<span class="text-sm">Meta Ads</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="tiktok">
<img src="https://cdn-icons-png.flaticon.com/128/15713/15713399.png" alt="TikTok" class="h-8 w-8 mb-2">
<span class="text-sm">TikTok</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="dunia-asmara">
<img src="https://cdn-icons-png.flaticon.com/128/2965/2965879.png" alt="Dunia Asmara" class="h-8 w-8 mb-2">
<span class="text-sm">Dunia Asmara</span>
</button>
<button type="button" class="source-btn border border-gray-300 rounded-lg p-3 text-center cursor-pointer hover:border-[#7A4397] hover:bg-purple-50 transition-colors flex flex-col items-center" data-value="sb">
<img src="https://cdn-icons-png.flaticon.com/128/4140/4140919.png" alt="Sliding Banner" class="h-8 w-8 mb-2">
<span class="text-sm">Sliding Banner</span>
</button>
</div>
<input type="hidden" id="utm_source" name="utm_source" required>
</div>
</div>
</div>
<!-- UTM Medium-->
<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 Trafik (Medium)</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>Bagaimana mereka menemukan link ini?</p>
</div>
</div>
<div class="w-2/3">
<input
id="utm_medium"
type="text"
name="utm_medium"
placeholder="Misalnya: banner, instastory"
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>
<!-- UTM Campaign-->
<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 Promosi (Campaign)</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 promosi atau kampanye yang sedang berjalan</p>
</div>
</div>
<div class="w-2/3">
<input
id="utm_campaign"
type="text"
name="utm_campaign"
placeholder="Misalnya: launchingfemme"
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>
<!-- UTM Content-->
<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">Konten Iklan (Content)</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>Gunakan untuk membedakan variasi iklan dalam kampanye yang sama.</p>
</div>
</div>
<div class="w-2/3">
<input
id="utm_content"
type="text"
name="utm_content"
placeholder="Misalnya: instastory-1, instastory-2"
autocomplete="off"
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>
<!-- UTM Terms-->
<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">Kata Kunci (Term)</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>Kata kunci yang digunakan dalam iklan berbayar.</p>
</div>
</div>
<div class="w-2/3">
<input
id="utm_term"
type="text"
name="utm_term"
placeholder="Misalnya: vibrator"
autocomplete="off"
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>
</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/marketing/link') ?>'">
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() {
// Initialize feather icons (untuk alert message)
feather.replace();
// Initialize Tom Select for all select inputs with tom-select class
document.querySelectorAll('.tom-select').forEach(function(select) {
new TomSelect(select, {
plugins: ['dropdown_input'],
maxItems: 1,
placeholder: 'Cari...',
searchField: 'text'
});
});
// UTM Source button selection
document.querySelectorAll('.source-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
// Remove active class from all buttons
document.querySelectorAll('.source-btn').forEach(function(b) {
b.classList.remove('border-[#7A4397]', 'bg-purple-50');
});
// Add active class to selected button
this.classList.add('border-[#7A4397]', 'bg-purple-50');
// Set hidden input value
document.getElementById('utm_source').value = this.getAttribute('data-value');
});
});
});
// Function to show/hide the related select based on link type
function showRelatedSelect(linkType) {
// Hide all select containers first
document.getElementById('product_select_container').classList.add('hidden');
document.getElementById('brand_select_container').classList.add('hidden');
document.getElementById('category_select_container').classList.add('hidden');
// Show the appropriate container based on selection
if (linkType === 'product') {
document.getElementById('product_select_container').classList.remove('hidden');
} else if (linkType === 'brand') {
document.getElementById('brand_select_container').classList.remove('hidden');
} else if (linkType === 'category') {
document.getElementById('category_select_container').classList.remove('hidden');
}
}
</script>