<div class="row">
    <div class="col-sm-12">
        <p><a href="<?= base_url('admin/promotion'); ?>"><i class="fa fa-arrow-left" aria-hidden="true"></i> Kembali ke Promosi</a></p><br>
        <h2>Dashboard Affiliasi</h2>
        <?php if ($this->session->flashdata('success')): ?>
            <div class="alert alert-success">
                <?= $this->session->flashdata('success'); ?>
            </div>
        <?php endif; ?>

        <?php if ($this->session->flashdata('result')): ?>
            <div class="alert alert-info">
                <?= $this->session->flashdata('result'); ?>
            </div>
        <?php endif; ?>


    </div><!-- end class="col-sm-12" -->
</div> <!-- end row -->
<div>
    <div class="row">
        <div class="col-sm-12">
            <!-- Button with different colors -->
            <a href="<?= base_url('admin/affiliator'); ?>"><button class="btn btn-success">Dashboard</button></a>
            <a href="<?= base_url('admin/affiliator/list'); ?>"><button class="btn btn-info">Ranking Affiliator</button></a>
            <a href="<?= base_url('admin/affiliator/mission'); ?>"><button class="btn btn-warning">Misi</button></a>
            <a href="<?= base_url('admin/affiliator/commision'); ?>"><button class="btn btn-danger">Komisi</button></a>
            <a href="<?= base_url('admin/affiliator/product'); ?>"><button class="btn btn-primary">Produk Affiliator</button></a>
        </div>
    </div>
</div>
<div>
    <div class="row">
        <div class="col-sm-12">
            <div style="padding: 15px;" class="tab-pane active" id="orders1" role="tabpanel" aria-labelledby="tab1">
                <h5 style="text-align: center;">Dashboard</h5>
                <div style="text-align: right; margin-top: 15px;">
                    <button class="btn btn-primary d-flex align-items-center justify-content-center" style="display: inline-flex; align-items: center; padding: 8px 15px;" data-toggle="modal" data-target="#affiliateModal">
                        <img src="https://img.icons8.com/ios-filled/50/ffffff/plus-math.png" alt="Icon" style="width: 20px; height: 20px; margin-right: 8px;">
                        <span>Tambah AsmaraSana</span>
                    </button>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>ID Daftar</th>
                                        <th>Customer Account Detail</th>
                                        <th>Nama</th>
                                        <th>No HP</th>
                                        <th>Email</th>
                                        <th>Status</th>
                                        <th>Edit</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php if (count($affiliator_register)) : ?>
                                        <?php foreach ($affiliator_register as $ar) : ?>
                                            <tr>
                                                <td><?php echo $ar->id_daftar; ?></td>
                                                <td>
                                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#customerModal<?php echo $ar->id_customer; ?>">
                                                        Customer Detail
                                                    </button>
                                                </td>
                                                <td><?php echo $ar->nama; ?></td>
                                                <td><?php echo $ar->no_telpon; ?></td>
                                                <td><?php echo $ar->email; ?></td>
                                                <td><?php echo $ar->status; ?></td>
                                                <td><a style="text-decoration: underline;" href="affiliator/view/<?= $ar->id_daftar; ?>">Lihat</a></td>



                                            </tr>
                                        <?php endforeach; ?>

                                    <?php else : ?>
                                        <tr>
                                            <td colspan="3">Tidak Ada Pendaftaran Affiliator</td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div> <!-- end class col-sm-12 -->
                </div> <!-- end class="row" -->
            </div>

        </div>
    </div>
</div>

<!-- Modal Add Affiliator -->
<div class="modal fade" id="affiliateModal" tabindex="-1" role="dialog" aria-labelledby="affiliateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="affiliateModalLabel">Tambah AsmaraSana</h4>
            </div>
            <div class="modal-body">
                <!-- Formulir CodeIgniter -->
                <form action="<?= base_url('admin/affiliator/register_affiliator') ?>" method="post">
                    <!-- ID Customer (Hidden) -->
                    <input type="hidden" name="id_customer" id="id_customer">
                    <input type="hidden" name="<?= $this->security->get_csrf_token_name(); ?>" value="<?= $this->security->get_csrf_hash(); ?>" />

                    <!-- Nama (Searchable field) -->
                    <div class="form-group">
                        <label for="searchCustomer">Nama</label>
                        <input type="text" id="searchCustomer" class="form-control" placeholder="Ketik nama atau email, misalnya: 'susu' atau 'susu@gmail.com'">
                    </div>

                    <!-- Hidden input untuk menyimpan id_customer -->
                    <input type="hidden" id="id_customer" name="id_customer">

                    <!-- Daftar hasil pencarian customer -->
                    <ul id="customerList" class="list-group mt-2"></ul>

                    <!-- No. Telepon -->
                    <div class="form-group">
                        <label for="phone">No HP</label>
                        <input type="tel" class="form-control" name="phone" id="phone" placeholder="Misalnya: '0852xxxxxxxx'">
                    </div>

                    <!-- Email -->
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Masukkan email">
                    </div>

                    <!-- Sosial Media -->
                    <div class="form-group">
                        <label for="sosial_media">Sosial Media</label>
                        <input type="text" class="form-control" name="sosial_media" id="sosial_media" placeholder="Masukkan sosial media">
                    </div>

                    <!-- Status -->
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select class="form-control" name="status" id="status">
                            <option value="waiting">Waiting</option>
                            <option value="rejected">Rejected</option>
                            <option value="approve">Approve</option>
                        </select>
                    </div>

                    <!-- Kategori -->
                    <div class="form-group">
                        <label for="kategori">Kategori</label>
                        <select class="form-control" name="kategori" id="kategori">
                            <option value="asmarasana">AsmaraSana</option>
                            <option value="asmaradoor">Asmaradoor</option>
                        </select>
                    </div>

                    <!-- Bank Name -->
                    <div class="form-group">
                        <label for="bank_name">Bank Name</label>
                        <input type="text" class="form-control" name="bank_name" id="bank_name" placeholder="Masukkan nama bank">
                    </div>

                    <!-- Account Name -->
                    <div class="form-group">
                        <label for="account_name">Account Name</label>
                        <input type="text" class="form-control" name="account_name" id="account_name" placeholder="Masukkan nama pemilik rekening">
                    </div>

                    <!-- Account Number -->
                    <div class="form-group">
                        <label for="account_number">Account Number</label>
                        <input type="text" class="form-control" name="account_number" id="account_number" placeholder="Masukkan nomor rekening">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="submitAffiliator">Simpan Data</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Menggunakan debounce untuk mengurangi pemanggilan AJAX
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this,
                    args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        // Event handler untuk menangani input keyup pada field pencarian
        $('#searchCustomer').on('keyup', debounce(function() {
            let query = $(this).val(); // Ambil nilai input

            if (query !== '') {
                $.ajax({
                    url: '<?= base_url("admin/affiliator/search_customer") ?>',
                    method: 'GET',
                    data: {
                        query: query
                    },
                    dataType: 'json',
                    success: function(data) {
                        $('#customerList').empty();

                        if (data.length > 0) {
                            $.each(data, function(index, customer) {
                                $('#customerList').append(
                                    `<li class="list-group-item" data-id="${customer.id_customers}" data-name="${customer.name}" data-phone="${customer.phone}" data-email="${customer.email}" style="cursor: pointer;">
                                    ${customer.name} - ${customer.email}
                                </li>`
                                );
                            });
                        } else {
                            $('#customerList').append('<li class="list-group-item">No results found</li>');
                        }
                    },
                    error: function() {
                        console.error('Gagal mengambil data dari server.'); // Debugging untuk kesalahan AJAX
                    },
                });
            } else {
                $('#customerList').empty();
            }
        }, 500));

        // Event handler untuk memilih customer dari hasil pencarian
        $('#customerList').on('click', 'li', function() {
            let selectedCustomerId = $(this).data('id');
            let selectedCustomerName = $(this).data('name');
            let selectedCustomerPhone = $(this).data('phone');
            let selectedCustomerEmail = $(this).data('email');

            $('#id_customer').val(selectedCustomerId);
            $('#phone').val(selectedCustomerPhone);
            $('#email').val(selectedCustomerEmail);
            $('#searchCustomer').val(selectedCustomerName);

            $('#customerList').empty();
        });

        $('#submitAffiliator').on('click', function(e) {
            e.preventDefault();
            var formData = {
                id_customer: $('#id_customer').val(),
                nama: $('#searchCustomer').val(),
                no_telpon: $('#phone').val(),
                email: $('#email').val(),
                sosial_media: $('#sosial_media').val(),
                kategori: $('#kategori').val(),
                status: $('#status').val(),
                bank_name: $('#bank_name').val(),
                account_name: $('#account_name').val(),
                account_number: $('#account_number').val(),
                ['<?= $this->security->get_csrf_token_name(); ?>']: '<?= $this->security->get_csrf_hash(); ?>'
            };
            console.log('Data yang akan dikirim:', formData);

            // Kirim data menggunakan AJAX
            $.ajax({
                url: '<?= base_url("admin/affiliator/register_affiliator") ?>',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.status === 'success') {
                        window.location.href = response.redirect;
                    } else {
                        console.error('Error: ' + response.message);

                    }
                },
                error: function(xhr, status, error) {
                    // Menampilkan detail kesalahan di konsol
                    console.error('AJAX Error:');
                    console.error('Status: ' + status);
                    console.error('Error: ' + error);
                    console.error('Response: ' + xhr.responseText);
                    alert('Terjadi kesalahan saat menyimpan data. Cek konsol untuk detail.');
                }
            });
        });
    });
</script>

<!-- Modal -->
<?php foreach ($affiliator_register as $ar) : ?>
    <div class="modal fade" id="customerModal<?php echo $ar->id_customer; ?>" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customerModalLabel<?php echo $ar->id_customer; ?>">Customer Detail</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <?php
                    $customer = $this->db->get_where('customers', array('id_customers' => $ar->id_customer))->row();
                    if ($customer) {
                        echo 'Name: ' . $customer->name . '<br>';
                        echo 'Email: ' . $customer->email . '<br>';
                        echo 'Address: ' . $customer->address . '<br>';
                        echo 'Phone: ' . $customer->phone . '<br>';
                    } else {
                        echo 'Customer not found';
                    }
                    ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<?php endforeach; ?>