<main class="flex-1 py-4 px-4 bg-purple-50">
    <h1 class="text-xl font-bold mb-4 text-[#333]">Konfigurasi 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">
                <!-- 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; ?>
    <!-- <?php echo json_encode($bank_information); ?> -->
    <form action="<?= base_url('admin/settings/update_configuration') ?>" method="POST" class="space-y-2" id="configurationForm">
        <input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" class="csrf_token">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-lg font-semibold mb-4">Informasi Toko</h2>

            <!-- Website Name -->
            <div class="mb-4">
                <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">Nama Toko</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 toko ini bukan mengganti url 'www.laciasmara.com' ya, tapi digunakan untuk browser title.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="website_name"
                            type="text"
                            name="website_name"
                            placeholder="Misalnya Teman Asmara"
                            autocomplete="off"
                            value="<?= $website_configuration->website_name ?>"
                            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>

            <!-- Email Toko -->
            <div class="mb-4">
                <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">Email Toko</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>Email yang digunakan untuk mengirimkan email ke pelanggan.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="website_email"
                            type="text"
                            name="website_email"
                            placeholder="Misalnya kunci@laciasmara.com"
                            autocomplete="off"
                            value="<?= $website_configuration->from_email ?>"
                            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>

            <!-- No Telfon Toko -->
            <div class="mb-4">
                <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">Nomor Telepon Toko</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>Nomor telepon toko yang dapat dihubungi.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="website_phone"
                            type="text"
                            name="website_phone"
                            placeholder="Misalnya 08123456789"
                            autocomplete="off"
                            value="<?= $website_configuration->phone ?>"
                            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>
        </div>

        <!-- SEO -->
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-lg font-semibold mb-4">Pengaturan SEO</h2>

            <!-- Meta Title -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label for="meta_title" class="text-[#333] font-medium">Meta Title</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>Judul yang muncul di tab browser dan hasil pencarian Google.</p>
                        </div>
                    </div>
                    <div class="w-2/3">
                        <input
                            id="meta_title"
                            type="text"
                            name="meta_title"
                            placeholder="Masukkan judul SEO, misalnya: Toko Teman Asmara - Produk Dewasa Aman dan Nyaman"
                            autocomplete="off"
                            value="<?= $website_configuration->browser_title ?>"
                            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>

            <!-- Meta Description -->
            <div class="mb-4">
                <div class="flex items-start gap-4">
                    <div class="w-1/3">
                        <div class="flex items-center gap-2 mb-2">
                            <label for="meta_description" class="text-[#333] font-medium">Meta Description</label>
                            <span class="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">Maks. 150 Karakter</span>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Deskripsi singkat tentang toko untuk hasil pencarian Google.</p>
                        </div>
                    </div>
                    <div class="w-2/3">
                        <textarea
                            id="meta_description"
                            name="meta_description"
                            rows="4"
                            placeholder="Deskripsi singkat seperti: Temukan berbagai produk dewasa berkualitas dan aman hanya di Laci Asmara."
                            oninput="countMetaDescriptionChars()"
                            class="mt-1 w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:outline-none text-[#333] placeholder-gray-500 resize-none"><?= $website_configuration->meta_description ?></textarea>
                        <div class="text-right text-sm mt-1 text-gray-600">
                            <span id="meta_description_counter">0</span>/150 karakter
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bank -->
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-lg font-semibold mb-4">Informasi Rekening Bank</h2>

            <?php if (!empty($bank_information)) : ?>
                <?php foreach ($bank_information as $index => $bank) : ?>
                    <?php $number = $index + 1 ?>
                    <input type="hidden" name="bank_information[<?= $index ?>][id_bank]" value="<?= $bank->id_bank ?>" class="csrf_token">

                    <!-- Nama Bank -->
                    <div class="mb-4">
                        <div class="flex items-start gap-4">
                            <div class="w-1/3">
                                <div class="flex items-center gap-2 mb-2">
                                    <label for="bank_information[<?= $index ?>][bank_name]" class="text-[#333] font-medium">Nama Bank #<?= $number ?></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">
                                <input
                                    type="text"
                                    name="bank_information[<?= $index ?>][bank_name]"
                                    placeholder="Misalnya: Bank Central Asia"
                                    autocomplete="off"
                                    value="<?= $bank->bank_name ?>"
                                    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>

                    <!-- Nomor Rekening -->
                    <div class="mb-4">
                        <div class="flex items-start gap-4">
                            <div class="w-1/3">
                                <div class="flex items-center gap-2 mb-2">
                                    <label for="bank_information[<?= $index ?>][account_number]" class="text-[#333] font-medium">Nomor Rekening #<?= $number ?></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">
                                <input
                                    type="text"
                                    name="bank_information[<?= $index ?>][account_number]"
                                    placeholder="Misalnya: Bank Central Asia"
                                    autocomplete="off"
                                    value="<?= $bank->account_number ?>"
                                    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>
                    <!-- Pemilik Rekening-->
                    <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 for="bank_information[<?= $index ?>][account_holder]" class="text-[#333] font-medium">Nama Pemilik Rekening #<?= $number ?></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">
                                <input
                                    type="text"
                                    name="bank_information[<?= $index ?>][account_holder]"
                                    placeholder="Misalnya: Bank Central Asia"
                                    autocomplete="off"
                                    value="<?= $bank->account_holder ?>"
                                    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>
                <?php endforeach; ?>
            <?php else : ?>
                <p class="text-sm text-gray-500">Belum ada informasi rekening yang tersedia.</p>
            <?php endif; ?>
        </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">
                Reset
            </button>
            <button type="submit" class="px-6 py-2 bg-[#7A4397] text-white rounded-lg hover:bg-[#7A4397] transition-colors">
                Simpan
            </button>
        </div>
    </form>
</main>
<script>
    function countMetaDescriptionChars() {
        const textarea = document.getElementById('meta_description');
        const counter = document.getElementById('meta_description_counter');
        const length = textarea.value.length;
        counter.textContent = length;

        if (length > 150) {
            counter.classList.add('text-red-500');
            textarea.classList.add('border-red-500');
        } else {
            counter.classList.remove('text-red-500');
            textarea.classList.remove('border-red-500');
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const initialValues = {};
        const form = document.getElementById('configurationForm');
        const inputs = form.querySelectorAll('input[type="text"], textarea');

        inputs.forEach(input => {
            initialValues[input.name] = input.value;
        });

        // Tambahkan event listener untuk tombol reset
        document.querySelector('button[type="button"]').addEventListener('click', function() {
            inputs.forEach(input => {
                if (initialValues[input.name] !== undefined) {
                    input.value = initialValues[input.name];
                }
            });

            // Jika ada counter untuk meta description, perbarui juga
            if (typeof countMetaDescriptionChars === 'function') {
                countMetaDescriptionChars();
            }
        });

        countMetaDescriptionChars();
    });
</script>