<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>
<style>
    .table thead th {
        white-space: nowrap;
        vertical-align: middle;
        text-align: center;
        font-size: 13px;
    }

    .table tbody td {
        vertical-align: middle;
        font-size: 13px;
    }

    .badge {
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 12px;
    }

    .btn-group .btn {
        margin-right: 2px;
    }

    .btn-group .btn i {
        width: 14px;
        text-align: center;
    }

    .jamaah-name {
        font-weight: 600;
        color: #0d6efd;
    }

    .jamaah-sub {
        font-size: 11px;
        color: #6c757d;
    }
</style>

<div class="card-header d-flex justify-content-between align-items-center bg-primary text-white">
    <div>
        <i class="fas fa-users me-1"></i>
        <b>Manajemen Data Jamaah</b>
        <div class="small opacity-75">Masjid Al Fattaah</div>
    </div>

    <div class="btn-group">
        <button id="btnBroadcastWA" class="btn btn-success btn-sm fw-bold shadow-sm">
            <i class="fab fa-whatsapp me-1"></i> Broadcast WA
        </button>

        <a href="<?= site_url('jamaah/create') ?>" class="btn btn-warning btn-sm text-dark fw-bold shadow-sm">
            <i class="fas fa-user-plus me-1"></i> Tambah Jamaah
        </a>
    </div>
</div>

<div class="card-body">
    <table id="dt_jamaah" class="table table-bordered table-striped w-100">
        <thead class="table-dark">
            <tr>
                <th>
                    <input type="checkbox" id="checkAll">
                </th>
                <th>No</th>
                <th>No Jamaah</th>
                <th>Nama</th>
                <th>JK</th>
                <th>No HP</th>
                <th>Alamat</th>
                <th>Aksi</th>
            </tr>
        </thead>
    </table>
</div>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    $(function () {

        // ===============================
        // INIT DATATABLE
        // ===============================
        let table = $('#dt_jamaah').DataTable({
            processing: true,
            serverSide: false,
            ajax: {
                url: "<?= site_url('jamaah/data') ?>",
                type: "GET"
            },
            order: [[1, 'asc']],
            columns: [
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function (row) {
                        return `
                        <input type="checkbox"
                               class="row-check"
                               data-hp="${row.no_hp}"
                               data-nama="${row.nama_lengkap}">
                    `;
                    }
                },
                {
                    data: "id",
                    render: (d, t, r, m) => m.row + 1
                },
                { data: "no_jamaah" },
                { data: "nama_lengkap" },
                { data: "jenis_kelamin" },
                { data: "no_hp" },
                { data: "alamat" },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function (row) {

                        let pesan = `Assalamu’alaikum warahmatullahi wabarakatuh.

Yth. Bapak/Ibu ${row.nama_lengkap}

Kami dari DKM Masjid Al Fattaah ingin menyampaikan informasi terkait kegiatan masjid.

Wassalamu’alaikum warahmatullahi wabarakatuh.`;

                        return `
                        <div class="btn-group">
                            <a href="<?= site_url('jamaah/view') ?>/${row.id}"
                               class="btn btn-sm btn-info" title="Detail">
                               <i class="fas fa-eye"></i>
                            </a>

                            <a href="https://wa.me/${row.no_hp}?text=${encodeURIComponent(pesan)}"
                               target="_blank"
                               class="btn btn-sm btn-success"
                               title="WhatsApp">
                               <i class="fab fa-whatsapp"></i>
                            </a>

                            <a href="<?= site_url('jamaah/edit') ?>/${row.id}"
                               class="btn btn-sm btn-warning text-white"
                               title="Edit">
                               <i class="fas fa-edit"></i>
                            </a>

                            <a href="<?= site_url('jamaah/delete') ?>/${row.id}"
                               onclick="return confirm('Hapus data jamaah ini?')"
                               class="btn btn-sm btn-danger"
                               title="Hapus">
                               <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    `;
                    }
                }
            ]
        });

        // ===============================
        // CHECK ALL
        // ===============================
        $('#checkAll').on('click', function () {
            $('.row-check').prop('checked', this.checked);
        });

        // ===============================
        // BROADCAST WHATSAPP
        // ===============================
        $('#btnBroadcastWA').on('click', function () {

            let nama = [];
            let nomor = [];

            $('.row-check:checked').each(function () {
                let hp = $(this).data('hp');
                let nm = $(this).data('nama');

                if (hp) {
                    hp = hp.toString().replace(/[^0-9]/g, '');

                    // auto convert 08xxx -> 628xxx
                    if (hp.startsWith('0')) {
                        hp = '62' + hp.substring(1);
                    }

                    nomor.push(hp);
                    nama.push(nm);
                }
            });

            if (nomor.length === 0) {
                alert('Pilih minimal 1 jamaah untuk broadcast');
                return;
            }

            let pesan = `Assalamu’alaikum warahmatullahi wabarakatuh.

Yth. Jamaah Masjid Al Aqso,

Kami mengundang Bapak/Ibu untuk mengikuti kegiatan masjid.
Mohon kehadiran dan partisipasinya.

Wassalamu’alaikum warahmatullahi wabarakatuh.
DKM Masjid Al Aqso`;

            let waUrl = `https://wa.me/?text=${encodeURIComponent(pesan + "\n\nPenerima:\n- " + nama.join("\n- "))}`;

            window.open(waUrl, '_blank');
        });

    });
</script>

<?= $this->endSection() ?>