|
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/contents/footer/ |
Upload File : |
<!-- Admin Footer Management Page -->
<main class="flex-1 py-4 px-4 bg-purple-50">
<h1 class="text-xl font-bold mb-4 text-[#333]">Konten Footer Website</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">
<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; ?>
<!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white rounded-lg shadow-md p-4 flex items-center border-l-4 border-purple-500">
<div class="rounded-full bg-purple-100 p-3 mr-4">
<i data-feather="layout" class="h-6 w-6 text-purple-600"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-[#333]">Kategori Footer</h3>
<p class="text-sm text-gray-600">Total: <?= count($categories) ?> kategori aktif</p>
</div>
<button class="ml-auto bg-purple-100 hover:bg-purple-200 text-purple-700 font-bold py-2 px-4 rounded-lg transition" onclick="toggleTab('tab-categories')">
Kelola
</button>
</div>
<div class="bg-white rounded-lg shadow-md p-4 flex items-center border-l-4 border-blue-500">
<div class="rounded-full bg-blue-100 p-3 mr-4">
<i data-feather="share-2" class="h-6 w-6 text-blue-600"></i>
</div>
<div>
<h3 class="text-lg font-semibold text-[#333]">Social Media</h3>
<p class="text-sm text-gray-600">Total: <?= count($social_media) ?> platform aktif</p>
</div>
<button class="ml-auto bg-blue-100 hover:bg-blue-200 text-blue-700 font-bold py-2 px-4 rounded-lg transition" onclick="toggleTab('tab-social')">
Kelola
</button>
</div>
</div> -->
<!-- Tab Navigation -->
<div class="flex flex-wrap bg-white rounded-t-lg shadow-md border-b mb-0 mt-4">
<button id="btn-tab-categories" class="tab-button py-3 px-6 font-medium text-sm focus:outline-none border-b-2 border-[#7A4397] text-[#7A4397] bg-white" onclick="toggleTab('tab-categories')">
<i data-feather="layout" class="h-4 w-4 inline mr-1"></i> Kategori & Link
</button>
<button id="btn-tab-social" class="tab-button py-3 px-6 font-medium text-sm focus:outline-none border-b-2 border-transparent text-gray-500 hover:text-[#333]" onclick="toggleTab('tab-social')">
<i data-feather="share-2" class="h-4 w-4 inline mr-1"></i> Sosial Media
</button>
<button id="btn-tab-payment" class="tab-button py-3 px-6 font-medium text-sm focus:outline-none border-b-2 border-transparent text-gray-500 hover:text-[#333]" onclick="toggleTab('tab-payment')">
<i data-feather="credit-card" class="h-4 w-4 inline mr-1"></i> Metode Pembayaran
</button>
<button id="btn-tab-asmaradoor" class="tab-button py-3 px-6 font-medium text-sm focus:outline-none border-b-2 border-transparent text-gray-500 hover:text-[#333]" onclick="toggleTab('tab-asmaradoor')">
<i data-feather="star" class="h-4 w-4 inline mr-1"></i> Asmaradoor
</button>
<button id="btn-tab-bottom" class="tab-button py-3 px-6 font-medium text-sm focus:outline-none border-b-2 border-transparent text-gray-500 hover:text-[#333]" onclick="toggleTab('tab-bottom')">
<i data-feather="align-justify" class="h-4 w-4 inline mr-1"></i> Footer Bottom
</button>
</div>
<!-- Tab Contents -->
<div class="bg-white rounded-b-lg shadow-md p-6">
<!-- Categories Tab -->
<div id="tab-categories" class="tab-content">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-[#333]">Kelola Kategori & Link Footer</h2>
<button class="bg-[#7A4397] hover:bg-[#653879] text-white py-2 px-4 rounded-lg flex items-center" onclick="showModal('modal-add-category')">
<i data-feather="plus" class="h-4 w-4 mr-1"></i>
Tambah Kategori
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<?php foreach ($categories as $category): ?>
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200 shadow-sm">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-bold text-[#333]"><?= $category['name_id'] ?></h3>
<p class="text-xs text-gray-500"><?= $category['name_en'] ?></p>
</div>
<div class="flex">
<button class="p-1 text-blue-400 hover:text-blue-600" onclick="editCategory(<?= $category['id'] ?>)">
<i data-feather="edit-2" class="h-4 w-4"></i>
</button>
<button class="p-1 text-red-400 hover:text-red-600" onclick="confirmDelete('category', <?= $category['id'] ?>)">
<i data-feather="trash-2" class="h-4 w-4"></i>
</button>
</div>
</div>
<div class="flex items-center text-xs text-gray-600 mb-3">
<span class="bg-purple-100 text-[#7A4397] px-2 py-1 rounded mr-2">Kolom <?= $category['column_position'] ?></span>
<span class="bg-blue-100 text-blue-600 px-2 py-1 rounded mr-2">Urutan <?= $category['display_order'] ?></span>
<?php if ($category['is_special']): ?>
<span class="bg-amber-100 text-amber-700 px-2 py-1 rounded">Ikon/Gambar</span>
<?php endif; ?>
</div>
<div class="bg-white rounded-lg p-3 border border-gray-200">
<div class="flex justify-between items-center mb-2">
<h4 class="text-sm font-medium">Link Terkait (<?= count($category['links']) ?>)</h4>
<button class="text-xs bg-green-100 hover:bg-green-200 text-green-600 py-1 px-2 rounded flex items-center" onclick="showAddLinkModal(<?= $category['id'] ?>)">
<i data-feather="plus" class="h-3 w-3 mr-1"></i>
Tambah
</button>
</div>
<?php if (empty($category['links'])): ?>
<p class="text-xs text-gray-500 italic">Belum ada link</p>
<?php else: ?>
<div class="max-h-40 overflow-y-auto">
<ul class="text-sm space-y-2">
<?php foreach ($category['links'] as $link): ?>
<li class="flex justify-between items-center border-b border-gray-100 pb-1">
<div>
<p class="text-[#333]"><?= $link['name_id'] ?></p>
<p class="text-xs text-gray-500 truncate w-32" title="<?= $link['url'] ?>"><?= $link['url'] ?></p>
</div>
<div class="flex">
<button class="p-1 text-blue-500 hover:text-blue-700" onclick="editLink(<?= $link['id'] ?>)">
<i data-feather="edit-2" class="h-3 w-3"></i>
</button>
<button class="p-1 text-red-500 hover:text-red-700" onclick="confirmDelete('link', <?= $link['id'] ?>)">
<i data-feather="trash-2" class="h-3 w-3"></i>
</button>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Social Media Tab -->
<div id="tab-social" class="tab-content hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-[#333]">Kelola Sosial Media</h2>
<button class="bg-[#7A4397] hover:bg-[#653879] text-white py-2 px-4 rounded-lg flex items-center" onclick="showModal('modal-add-social')">
<i data-feather="plus" class="h-4 w-4 mr-1"></i>
Tambah Sosial Media
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-gray-100 text-gray-700">
<tr>
<th class="py-3 px-4 text-left">Platform</th>
<th class="py-3 px-4 text-left">Icon</th>
<th class="py-3 px-4 text-left">URL</th>
<th class="py-3 px-4 text-center">Urutan</th>
<th class="py-3 px-4 text-center">Status</th>
<th class="py-3 px-4 text-center">Aksi</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<?php foreach ($social_media as $social): ?>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4 font-medium"><?= $social['name'] ?></td>
<td class="py-3 px-4">
<span class="bg-blue-50 p-2 rounded inline-block">
<i class="<?= $social['icon_class'] ?> text-[#333]"></i>
</span>
</td>
<td class="py-3 px-4">
<a href="<?= $social['url'] ?>" target="_blank" class="text-[#7A4397] hover:underline truncate block max-w-xs"><?= $social['url'] ?></a>
</td>
<td class="py-3 px-4 text-center"><?= $social['display_order'] ?></td>
<td class="py-3 px-4 text-center">
<?php if ($social['is_active']): ?>
<span class="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs">Aktif</span>
<?php else: ?>
<span class="bg-red-100 text-red-700 px-2 py-1 rounded-full text-xs">Nonaktif</span>
<?php endif; ?>
</td>
<td class="py-3 px-4 text-center">
<div class="flex justify-center space-x-2">
<button class="p-1 bg-blue-100 text-blue-500 rounded hover:bg-blue-200" onclick="editSocialMedia(<?= $social['id'] ?>)">
<i data-feather="edit-2" class="h-4 w-4"></i>
</button>
<button class="p-1 bg-red-100 text-red-500 rounded hover:bg-red-200" onclick="confirmDelete('social', <?= $social['id'] ?>)">
<i data-feather="trash-2" class="h-4 w-4"></i>
</button>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<!-- Payment Methods Tab -->
<div id="tab-payment" class="tab-content hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-[#333]">Kelola Metode Pembayaran</h2>
<button class="bg-[#7A4397] hover:bg-[#653879] text-white py-2 px-4 rounded-lg flex items-center" onclick="showModal('modal-add-payment')">
<i data-feather="plus" class="h-4 w-4 mr-1"></i>
Tambah Metode Pembayaran
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<?php foreach ($payment_methods as $payment): ?>
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="p-4 flex justify-center bg-gray-300">
<img src="<?= $payment['image_url'] ?>" alt="<?= $payment['name'] ?>" class="h-12 object-contain">
</div>
<div class="p-4">
<h3 class="font-medium text-[#333] text-center"><?= $payment['name'] ?></h3>
<div class="flex items-center justify-center mt-2 space-x-2 text-xs">
<span class="bg-gray-100 text-gray-700 px-2 py-1 rounded">Urutan: <?= $payment['display_order'] ?></span>
<?php if ($payment['is_active']): ?>
<span class="bg-green-100 text-green-700 px-2 py-1 rounded">Aktif</span>
<?php else: ?>
<span class="bg-red-100 text-red-700 px-2 py-1 rounded">Nonaktif</span>
<?php endif; ?>
</div>
<div class="flex justify-center mt-4 space-x-2">
<button class="p-2 bg-blue-100 text-blue-600 rounded hover:bg-blue-200" onclick="editPaymentMethod(<?= $payment['id'] ?>)">
<i data-feather="edit-2" class="h-4 w-4"></i>
</button>
<button class="p-2 bg-red-100 text-red-600 rounded hover:bg-red-200" onclick="confirmDelete('payment', <?= $payment['id'] ?>)">
<i data-feather="trash-2" class="h-4 w-4"></i>
</button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<!-- Asmaradoor Tab -->
<div id="tab-asmaradoor" class="tab-content hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-[#333]">Kelola Footer Asmaradoor</h2>
</div>
<?php if ($asmaradoor): ?>
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="md:flex">
<div class="md:w-1/3 p-6 flex items-center justify-center bg-gray-300">
<img src="<?= $asmaradoor['image_url'] ?>" alt="<?= $asmaradoor['alt_text_id'] ?>" class="max-h-40 object-contain">
</div>
<div class="md:w-2/3 p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-semibold text-[#333]"><?= $asmaradoor['title_id'] ?></h3>
<p class="text-sm text-gray-600 mt-1"><?= $asmaradoor['title_en'] ?></p>
</div>
<div class="flex space-x-2">
<button class="p-2 bg-blue-100 text-blue-600 rounded hover:bg-blue-200" onclick="editAsmaradoor(<?= $asmaradoor['id'] ?>)">
<i data-feather="edit-2" class="h-4 w-4"></i>
</button>
</div>
</div>
<div class="mt-4">
<h4 class="text-sm font-medium text-gray-700">URL:</h4>
<a href="<?= $asmaradoor['link_url'] ?>" target="_blank" class="text-blue-600 hover:underline"><?= $asmaradoor['link_url'] ?></a>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h4 class="text-sm font-medium text-gray-700">Alt Text (ID):</h4>
<p class="text-gray-600"><?= $asmaradoor['alt_text_id'] ?></p>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700">Alt Text (EN):</h4>
<p class="text-gray-600"><?= $asmaradoor['alt_text_en'] ?></p>
</div>
</div>
<div class="mt-4">
<span class="<?= $asmaradoor['is_active'] ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' ?> px-3 py-1 rounded-full text-sm">
<?= $asmaradoor['is_active'] ? 'Aktif' : 'Nonaktif' ?>
</span>
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 flex items-center">
<i data-feather="alert-triangle" class="h-5 w-5 text-yellow-500 mr-3"></i>
<div>
<h3 class="text-sm font-medium text-yellow-800">Data Asmaradoor belum tersedia</h3>
<div class="mt-2">
<button class="bg-yellow-500 hover:bg-yellow-600 text-white text-sm py-1 px-3 rounded-lg flex items-center" onclick="showModal('modal-add-asmaradoor')">
<i data-feather="plus" class="h-4 w-4 mr-1"></i>
Tambah Data Asmaradoor
</button>
</div>
</div>
</div>
<?php endif; ?>
</div>
<!-- Footer Bottom Tab -->
<div id="tab-bottom" class="tab-content hidden">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-[#333]">Kelola Footer Bottom</h2>
</div>
<?php if ($footer_bottom): ?>
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden p-6">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-medium text-[#333]">Konten Footer Bottom</h3>
<div class="flex space-x-2">
<button class="p-2 bg-blue-100 text-blue-600 rounded hover:bg-blue-200" onclick="editFooterBottom(<?= $footer_bottom['id'] ?>)">
<i data-feather="edit-2" class="h-4 w-4"></i>
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700 mb-2">Konten Bahasa Indonesia:</h4>
<div class="bg-white p-3 rounded border border-gray-200">
<p class="text-gray-700"><?= $footer_bottom['content_id'] ?></p>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700 mb-2">Konten Bahasa Inggris:</h4>
<div class="bg-white p-3 rounded border border-gray-200">
<p class="text-gray-700"><?= $footer_bottom['content_en'] ?></p>
</div>
</div>
</div>
<div class="mt-4">
<span class="<?= $footer_bottom['is_active'] ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' ?> px-3 py-1 rounded-full text-sm">
<?= $footer_bottom['is_active'] ? 'Aktif' : 'Nonaktif' ?>
</span>
</div>
</div>
<?php else: ?>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 flex items-center">
<i data-feather="alert-triangle" class="h-5 w-5 text-yellow-500 mr-3"></i>
<div>
<h3 class="text-sm font-medium text-yellow-800">Data Footer Bottom belum tersedia</h3>
<div class="mt-2">
<button class="bg-yellow-500 hover:bg-yellow-600 text-white text-sm py-1 px-3 rounded-lg flex items-center" onclick="showModal('modal-add-footer-bottom')">
<i data-feather="plus" class="h-4 w-4 mr-1"></i>
Tambah Data Footer Bottom
</button>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</main>
<!-- MODAL KOMPONEN -->
<!-- Modal Add Category -->
<div id="modal-add-category" class="fixed inset-0 z-[99] hidden overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900">Tambah Kategori Footer</h3>
<button class="text-gray-400 hover:text-gray-500" onclick="hideModal('modal-add-category')">
<i data-feather="x" class="h-5 w-5"></i>
</button>
</div>
<form action="<?= site_url('admin/contents/add_footer_category') ?>" method="post" class="p-6">
<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" />
<div class="grid grid-cols-1 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nama (ID)</label>
<input type="text" name="name_id" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nama (EN)</label>
<input type="text" name="name_en" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Posisi Kolom</label>
<select name="column_position" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
<option value="1">Kolom 1</option>
<option value="2">Kolom 2</option>
<option value="3">Kolom 3</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Urutan Tampilan</label>
<input type="number" name="display_order" min="1" value="1" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
</div>
<div class="flex items-center">
<input type="checkbox" name="is_special" id="is_special" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="is_special" class="ml-2 block text-sm text-gray-700">Kategori Spesial</label>
</div>
<div class="flex items-center">
<input type="checkbox" name="is_active" id="is_active" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
<label for="is_active" class="ml-2 block text-sm text-gray-700">Aktif</label>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-50" onclick="hideModal('modal-add-category')">Batal</button>
<button type="submit" class="px-4 py-2 bg-[#7A4397] text-white rounded-md text-sm font-medium hover:bg-[#653879]">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Add Link -->
<div id="modal-add-link" class="fixed inset-0 z-[99] hidden overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900">Tambah Link Footer</h3>
<!-- Modal Add Link (continued) -->
<button class="text-gray-400 hover:text-gray-500" onclick="hideModal('modal-add-link')">
<i data-feather="x" class="h-5 w-5"></i>
</button>
</div>
<form action="<?= site_url('admin/contents/add_footer_category_link') ?>" method="post" class="p-6">
<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" />
<input type="hidden" name="category_id" id="link_category_id">
<div class="grid grid-cols-1 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nama (ID)</label>
<input type="text" name="name_id" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nama (EN)</label>
<input type="text" name="name_en" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">URL</label>
<input type="url" name="url" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Urutan Tampilan</label>
<input type="number" name="display_order" min="1" value="1" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div class="flex items-center">
<input type="checkbox" name="is_active" id="link_is_active" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded" checked>
<label for="link_is_active" class="ml-2 block text-sm text-gray-700">Aktif</label>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50" onclick="hideModal('modal-add-link')">Batal</button>
<button type="submit" class="px-4 py-2 bg-[#7A4397] text-white rounded-md text-sm font-medium hover:bg-[#653879]">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Add Social Media -->
<div id="modal-add-social" class="fixed inset-0 z-[99] hidden overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900">Tambah Sosial Media</h3>
<button class="text-gray-400 hover:text-gray-500" onclick="hideModal('modal-add-social')">
<i data-feather="x" class="h-5 w-5"></i>
</button>
</div>
<form action="<?= site_url('admin/contents/add_footer_social_media') ?>" method="post" class="p-6">
<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" />
<div class="grid grid-cols-1 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nama Platform</label>
<input type="text" name="name" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Icon Class (Font Awesome)</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
<i data-feather="layers" class="h-4 w-4"></i>
</span>
<input type="text" name="icon_class" placeholder="fab fa-facebook-f" class="flex-1 border border-gray-300 rounded-r-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<p class="mt-1 text-xs text-gray-500">Contoh: fab fa-facebook-f, fab fa-instagram</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">URL</label>
<input type="url" name="url" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Urutan Tampilan</label>
<input type="number" name="display_order" min="1" value="1" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
</div>
<div class="flex items-center">
<input type="checkbox" name="is_active" id="social_is_active" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="social_is_active" class="ml-2 block text-sm text-gray-700">Aktif</label>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-50" onclick="hideModal('modal-add-social')">Batal</button>
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm font-medium hover:bg-blue-600">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Add Payment Method -->
<div id="modal-add-payment" class="fixed inset-0 z-[99] hidden overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900">Tambah Metode Pembayaran</h3>
<button class="text-gray-400 hover:text-gray-500" onclick="hideModal('modal-add-payment')">
<i data-feather="x" class="h-5 w-5"></i>
</button>
</div>
<form action="<?= site_url('admin/contents/add_footer_payment_method') ?>" method="post" enctype="multipart/form-data" class="p-6">
<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" />
<div class="grid grid-cols-1 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Nama Metode Pembayaran</label>
<input type="text" name="name" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Gambar Icon</label>
<div class="flex items-center space-x-2">
<input type="text" name="image_url" id="payment_image_url" placeholder="Misalnya, https://storage.googleapis.com/laciasmara-photos/" class="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<p class="mt-1 text-xs text-gray-500">Masukkan URL gambar dari google cloud storage</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Urutan Tampilan</label>
<input type="number" name="display_order" min="1" value="1" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500" required>
</div>
<div class="flex items-center">
<input type="checkbox" name="is_active" id="payment_is_active" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" checked>
<label for="payment_is_active" class="ml-2 block text-sm text-gray-700">Aktif</label>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50" onclick="hideModal('modal-add-payment')">Batal</button>
<button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md text-sm font-medium hover:bg-green-700">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Add Asmaradoor -->
<div id="modal-add-asmaradoor" class="fixed inset-0 z-[99] hidden overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-lg w-full">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900">Tambah Data Asmaradoor</h3>
<button class="text-gray-400 hover:text-gray-500" onclick="hideModal('modal-add-asmaradoor')">
<i data-feather="x" class="h-5 w-5"></i>
</button>
</div>
<form action="<?= site_url('admin/contents/add_asmaradoor') ?>" method="post" enctype="multipart/form-data" class="p-6">
<div class="grid grid-cols-1 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Judul (ID)</label>
<input type="text" name="title_id" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Judul (EN)</label>
<input type="text" name="title_en" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Gambar</label>
<div class="flex items-center space-x-2">
<input type="file" name="image" id="asmaradoor_image" class="hidden" accept="image/*">
<input type="text" name="image_url" id="asmaradoor_image_url" placeholder="URL Gambar" class="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-500">
<button type="button" onclick="document.getElementById('asmaradoor_image').click()" class="bg-yellow-100 text-yellow-700 hover:bg-yellow-200 py-2 px-3 rounded-md text-sm">Pilih File</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">URL Link</label>
<input type="url" name="link_url" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Alt Text (ID)</label>
<input type="text" name="alt_text_id" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Alt Text (EN)</label>
<input type="text" name="alt_text_en" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-yellow-500" required>
</div>
</div>
<div class="flex items-center">
<input type="checkbox" name="is_active" id="asmaradoor_is_active" class="h-4 w-4 text-yellow-600 focus:ring-yellow-500 border-gray-300 rounded" checked>
<label for="asmaradoor_is_active" class="ml-2 block text-sm text-gray-700">Aktif</label>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50" onclick="hideModal('modal-add-asmaradoor')">Batal</button>
<button type="submit" class="px-4 py-2 bg-yellow-600 text-white rounded-md text-sm font-medium hover:bg-yellow-700">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Add Footer Bottom -->
<div id="modal-add-footer-bottom" class="fixed inset-0 z-[99] hidden overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-lg w-full">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900">Tambah Data Footer Bottom</h3>
<button class="text-gray-400 hover:text-gray-500" onclick="hideModal('modal-add-footer-bottom')">
<i data-feather="x" class="h-5 w-5"></i>
</button>
</div>
<form action="<?= site_url('admin/contents/add_footer_bottom') ?>" method="post" class="p-6">
<div class="grid grid-cols-1 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Konten (ID)</label>
<textarea name="content_id" rows="4" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" required></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Konten (EN)</label>
<textarea name="content_en" rows="4" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" required></textarea>
</div>
<div class="flex items-center">
<input type="checkbox" name="is_active" id="footer_bottom_is_active" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
<label for="footer_bottom_is_active" class="ml-2 block text-sm text-gray-700">Aktif</label>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50" onclick="hideModal('modal-add-footer-bottom')">Batal</button>
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700">Simpan</button>
</div>
</form>
</div>
</div>
<!-- Modal Delete Confirmation -->
<div id="modal-delete-confirm" class="fixed inset-0 z-[99] hidden overflow-auto bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
<div class="bg-red-50 px-6 py-4 rounded-t-lg">
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="alert-triangle" class="h-6 w-6 text-red-600"></i>
</div>
<div class="ml-3">
<h3 class="text-lg font-medium text-red-800" id="delete-title">Konfirmasi Hapus</h3>
</div>
</div>
</div>
<div class="px-6 py-4">
<p class="text-gray-700" id="delete-message">Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.</p>
</div>
<div class="bg-gray-50 px-6 py-4 rounded-b-lg flex justify-end space-x-3">
<button type="button" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50" onclick="hideModal('modal-delete-confirm')">Batal</button>
<a href="#" id="delete-confirm-btn" class="px-4 py-2 bg-red-600 text-white rounded-md text-sm font-medium hover:bg-red-700">Hapus</a>
</div>
</div>
</div>
<script>
// Fungsi untuk mengatur tab aktif
function toggleTab(tabId) {
// Sembunyikan semua konten tab
const tabContents = document.querySelectorAll('.tab-content');
tabContents.forEach(content => {
content.classList.add('hidden');
});
// Tampilkan konten tab yang dipilih
document.getElementById(tabId).classList.remove('hidden');
// Atur styling tombol tab
const tabButtons = document.querySelectorAll('.tab-button');
tabButtons.forEach(button => {
button.classList.remove('border-[#7A4397]', 'text-[#7A4397]');
button.classList.add('border-transparent', 'text-gray-500');
});
// Atur tombol tab aktif
document.getElementById('btn-' + tabId).classList.remove('border-transparent', 'text-gray-500');
document.getElementById('btn-' + tabId).classList.add('border-[#7A4397]', 'text-[#7A4397]');
}
// Fungsi untuk menampilkan modal
function showModal(modalId) {
document.getElementById(modalId).classList.remove('hidden');
}
// Fungsi untuk menyembunyikan modal
function hideModal(modalId) {
document.getElementById(modalId).classList.add('hidden');
}
// Fungsi untuk menampilkan modal tambah link
function showAddLinkModal(categoryId) {
document.getElementById('link_category_id').value = categoryId;
showModal('modal-add-link');
}
// Fungsi untuk konfirmasi hapus
function confirmDelete(type, id) {
let title = 'Konfirmasi Hapus';
let message = 'Woi, bener mau hapus data ini? Tindakan ini tidak dapat dibatalkan.';
let url = '';
switch (type) {
case 'category':
title = 'Hapus Kategori';
message = 'Woi, bener mau hapus kategori ini? Semua link di bawah kategori ini juga akan terhapus.';
url = '<?= base_url('admin/contents/delete_footer_category/') ?>' + id;
break;
case 'link':
title = 'Hapus Link';
message = 'Woi, bener mau hapus link ini?';
url = '<?= base_url('admin/contents/delete_footer_category_link/') ?>' + id;
break;
case 'social':
title = 'Hapus Sosial Media';
message = 'Woi, bener mau hapus data sosial media ini?';
url = '<?= base_url('admin/contents/delete_footer_social_media/') ?>' + id;
break;
case 'payment':
title = 'Hapus Metode Pembayaran';
message = 'Woi, bener mau hapus data metode pembayaran ini?';
url = '<?= base_url('admin/contents/delete_footer_payment_method/') ?>' + id;
break;
}
document.getElementById('delete-title').innerText = title;
document.getElementById('delete-message').innerText = message;
document.getElementById('delete-confirm-btn').setAttribute('href', url);
showModal('modal-delete-confirm');
}
// Fungsi untuk mengedit kategori
function editCategory(id) {
window.location.href = '<?= site_url('admin/contents/footer/edit/') ?>' + id;
}
// Fungsi untuk mengedit link
function editLink(id) {
window.location.href = '<?= site_url('admin/contents/footer/edit_link/') ?>' + id;
}
// Fungsi untuk mengedit social media
function editSocialMedia(id) {
window.location.href = '<?= site_url('admin/contents/footer/edit_social/') ?>' + id;
}
// Fungsi untuk mengedit metode pembayaran
function editPaymentMethod(id) {
window.location.href = '<?= site_url('admin/contents/footer/edit_payment/') ?>' + id;
}
// Fungsi untuk mengedit asmaradoor
function editAsmaradoor(id) {
window.location.href = '<?= site_url('admin/contents/footer/edit_asmaradoor/') ?>' + id;
}
// Fungsi untuk mengedit footer bottom
function editFooterBottom(id) {
window.location.href = '<?= site_url('admin/contents/footer/edit_footer/') ?>' + id;
}
// Event listener untuk file input payment
document.getElementById('payment_image').addEventListener('change', function(e) {
if (e.target.files.length > 0) {
document.getElementById('payment_image_url').value = '';
}
});
// Event listener untuk file input asmaradoor
document.getElementById('asmaradoor_image').addEventListener('change', function(e) {
if (e.target.files.length > 0) {
document.getElementById('asmaradoor_image_url').value = '';
}
});
// Inisialisasi Feather Icons
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
});
</script>