<main class="flex-1 py-4 px-4 bg-purple-50">
    <h1 class="text-xl font-bold mb-4 text-[#333]">Tambah Affiliate</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/affiliator/create_affiliate') ?>" method="POST" class="space-y-8" id="customerForm">
        <input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" class="csrf_token">

        <!-- Informasi Affiliate Section -->
        <div class="bg-white rounded-lg shadow-sm p-6" id="affiliateSection">
            <h2 class="text-lg font-semibold mb-6">Informasi Affiliate</h2>

            <!-- Affiliate -->
            <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">Affiliate</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>Jangan sampe salah milih orang.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <select name="affiliate" id="affiliate" class="w-full border-gray-300 rounded-lg">
                            <option value="">Pilih atau Ketik Nama Affiliate</option>
                            <?php foreach ($customers as $customer) : ?>
                                <option value="<?= $customer->id_customers ?>"
                                    data-id="<?= htmlspecialchars($customer->id_customers) ?>"
                                    data-name="<?= htmlspecialchars($customer->name) ?>"
                                    data-email="<?= htmlspecialchars($customer->email) ?>"
                                    data-phone="<?= htmlspecialchars($customer->shipping_phone) ?>">
                                    <?= $customer->name ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <input type="hidden" id="id_customers" name="id_customers">
                </div>
            </div>

            <!-- Affiliate Nama-->
            <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</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>Pastiin namanya bener ga typo.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="affiliate_name"
                            type="text"
                            name="affiliate_name"
                            placeholder="Otomatis diisi setelah milih affiliate"
                            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>
            <!-- Affiliate Email-->
            <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">Email</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>Pastiin emailnya bener ga typo.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="affiliate_email"
                            type="text"
                            name="affiliate_email"
                            placeholder="Otomatis diisi setelah milih affiliate"
                            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>

            <!-- Affiliate Phone-->
            <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">Nomor Telepon</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>Dimulai dari 8 ya, kalau dari 0 itu pertamin*</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="affiliate_phone"
                            type="text"
                            name="affiliate_phone"
                            placeholder="Otomatis diisi setelah milih affiliate"
                            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>
            <!-- Sosial Media -->
            <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">Sosial Media</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>Masukin link sosial medianya ya.</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="affiliate_social"
                            type="text"
                            name="affiliate_social"
                            placeholder="Misalnya: https://www.instagram.com/gabriel"
                            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>
            <!-- Kategori Affiliate -->
            <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 for="affiliate_category" class="text-[#333] font-medium">Kategori</label>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Asmaradoor dapet 10% komisi, kalau Asmarasana 20% komisi.</p>
                        </div>
                    </div>

                    <!-- Input & Tips -->
                    <div class="w-2/3">
                        <select
                            id="affiliate_category"
                            name="affiliate_category"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] bg-white">
                            <option value="asmaradoor">Asmaradoor</option>
                            <option value="asmarasana">Asmarasana</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- Status Affiliate -->
            <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 for="affiliate_status" class="text-[#333] font-medium">Status</label>
                        </div>
                        <div class="mt-3 text-sm text-gray-600">
                            <p>Status dari affiliate ini, jika disetujui pilih <strong>Disetujui</strong></p>
                        </div>
                    </div>

                    <!-- Input & Tips -->
                    <div class="w-2/3">
                        <select
                            id="affiliate_status"
                            name="affiliate_status"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-1 focus:ring-[#7A4397] focus:outline-none text-[#333] bg-white">
                            <option value="approve">Disetujui</option>
                            <option value="waiting">Menunggu</option>
                            <option value="rejected">Ditolak</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Referral-->
            <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 Referral</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>Ini opsional ya, kalau ga diisi, nanti dibuatin otomatis sama sistem dari nama affiliate. Misalnya LACIGAB</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="affiliate_ref"
                            type="text"
                            name="affiliate_ref"
                            placeholder="Misalnya: LACISU"
                            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>

        <div class="bg-white rounded-lg shadow-sm p-6" id="customerSection">
            <h2 class="text-lg font-semibold mb-6">Informasi Pembayaran</h2>

            <!-- Nama Bank -->
            <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">Nama Bank</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 bank yang sesuai untuk pencairan komisi</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="affiliate_bank"
                            type="text"
                            name="affiliate_bank"
                            placeholder="Misalnya: BCA, Mandiri, BRI"
                            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>

            <!-- Nama 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 class="text-[#333] font-medium">Nama Pemilik Rekening</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>Pastikan nama pemilik rekening sesuai dengan data yang terdaftar di bank</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="account_name"
                            type="text"
                            name="account_name"
                            placeholder="Misalnya: Budi Santoso"
                            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>

            <!-- Nomor 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 class="text-[#333] font-medium">Nomor Rekening</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>Masukkan nomor rekening tujuan pencairan dana</p>
                        </div>
                    </div>

                    <div class="w-2/3">
                        <input
                            id="account_number"
                            type="text"
                            name="account_number"
                            placeholder="Misalnya: 1234567890"
                            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>
        </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/affiliate/manage') ?>'">
                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() {
        new TomSelect("#affiliate", {
            plugins: ["remove_button"],
            persist: false,
            create: false,
            sortField: {
                field: "text",
                direction: "asc"
            }
        });

        const affiliateSelect = document.getElementById('affiliate');
        const affiliateName = document.getElementById('affiliate_name');
        const afiiliateEmail = document.getElementById('affiliate_email');
        const affiliatePhone = document.getElementById('affiliate_phone');
        const affiliateRef = document.getElementById('affiliate_ref');
        const idCustomer = document.getElementById('id_customers');
        // Event listener untuk mengisi field otomatis
        affiliateSelect.addEventListener('change', function() {
            const selectedOption = affiliateSelect.options[affiliateSelect.selectedIndex];

            if (selectedOption && selectedOption.value !== "") {
                affiliateName.value = selectedOption.getAttribute('data-name') || '';
                afiiliateEmail.value = selectedOption.getAttribute('data-email') || '';
                affiliatePhone.value = selectedOption.getAttribute('data-phone') || '';
                let refCode = "LACI" + selectedOption.getAttribute('data-name').substring(0, 3).toUpperCase();
                affiliateRef.value = refCode;
                idCustomer.value = selectedOption.getAttribute('data-id') || '';
            } else {
                affiliateName.value = '';
                afiiliateEmail.value = '';
                affiliatePhone.value = '';
                affiliateRef.value = '';
                idCustomer.value = '';
            }
        });
    });
</script>