<?php $this->load->view('admin/layout/meta'); ?>
<?php $this->load->view('admin/layout/header'); ?>
<?php $this->load->view('admin/layout/aside'); ?>
<main id="main" class="main">
    <div class="pagetitle">
        <h1>Semua Tamu</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Tamu</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->
    <section class="section dashboard">
        <div class="row">
            <!-- Left side columns -->
            <div class="col-lg-12">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Semua Tamu<span></span></h5>
                            <table class="table table-borderless" id="data-table" class="display" style="width:100%">
                                <thead>
                                    <tr>
										<th style="width:5%">No</th>
                                        <th>Nama</th>
                                        <th>Asal Instansi</th>
                                        <th>Bidang</th>
                                        <th>Kategori</th>
                                        <th>Waktu</th>
                                        <th style="text-align:center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $no = 0;
                                    foreach ($tampil->result() as $row) {
                                        $no++;
                                        $nama_suara1 = base_url() . 'images/sound/' . $row->file_name;
                                        $nama_suara2 = base_url() . 'images/sound/' . $row->file_name;
                                        $id = $row->idtamu;
                                    ?>
                                        <tr>
                                            <th><?php echo $no; ?></th>
                                              <td><?php if (strlen($row->nama) > 40) {
                                                        echo $teks = substr($row->nama, 0, 40) . '...';
                                                    } else {
                                                        echo $row->nama;
                                                    } ?></td>
                                            <td><?php if (strlen($row->asalinstansi) > 40) {
                                                        echo $teks = substr($row->asalinstansi, 0, 40) . '...';
                                                    } else {
                                                        echo $row->asalinstansi;
                                                    } ?></td>
                                            <td><?php if (strlen($row->namabidang) > 40) {
                                                        echo $teks = substr($row->namabidang, 0, 40) . '...';
                                                    } else {
                                                        echo $row->namabidang;
                                                    } ?></td>													
                                            <td><?php if (strlen($row->namakategori) > 40) {
                                                        echo $teks = substr($row->namakategori, 0, 40) . '...';
                                                    } else {
                                                        echo $row->namakategori;
                                                    } ?></td>
                                            <td><?php  echo date('d/m/Y', strtotime($row->tanggal)); ?></td>
                                            <td style='text-align:center'>
                                                <a href='#' class='play-button' data-row='<?php echo $id; ?>' data-src1='<?php echo $nama_suara1; ?>' data-src2='<?php echo $nama_suara2; ?>' data-playing='false'>
                                                    <button type='button' class='btn btn-success' name='panggil' title='panggil'><i class='bi bi-megaphone-fill' title='Panggil'></i></button>
                                                </a>
												<a href="<?php echo base_url().'admin/tamu/hapus/'.$row->idtamu;?>"><button type="button" class="btn btn-danger" title="Hapus" name="hapus" onclick="return confirm('Yakin Akan Hapus data <?php echo $row->nama;?>')"><i class="bi bi-trash"></i></button></a>												
                                                <a href='<?php echo base_url(); ?>admin/tamu/edit/<?php echo $id; ?>'>
                                                    <button type='button' class='btn btn-primary' name='detail' title='detail'><i class='bi bi-pencil' title='Panggil'></i></button>
                                                </a>
                                            </td>
                                        </tr>
                                    <?php } ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- End Recent Sales -->
            <div id="controls">
                <button id="play-button" style="display:none;">Putar</button>
            </div>
        </div>
    </div><!-- End Left side columns -->
    </div>
    </section>
</main><!-- End #main -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    const audio1 = new Audio();
    const audio2 = new Audio();

    function playSoundByRow(rowId) {
        const soundSrc1 = $(`[data-row='${rowId}']`).data('src1');
        const soundSrc2 = $(`[data-row='${rowId}']`).data('src2');

        audio1.src = soundSrc1;
        audio2.src = soundSrc2;

        audio1.play();
        audio1.addEventListener('ended', () => {
            audio2.play();
            audio2.addEventListener('ended', () => {

            });
        });
    }

    $(document).on('click', '.play-button', function(e) {
        e.preventDefault();
        const rowId = $(this).data('row');
        const isPlaying = $(this).data('playing') === true;

 if (!isPlaying) {
        playSoundByRow(rowId);
        $(this).data('playing', true);
        $(this).find("button").removeClass("btn-success").addClass("btn-danger");
        $(this).find("i").removeClass("bi-megaphone-fill").addClass("bi-stop-circle");
    } else {
        audio1.pause();
        audio2.pause(); 
        $(this).data('playing', false);
        $(this).find("button").removeClass("btn-danger").addClass("btn-success");
        $(this).find("i").removeClass("bi-stop-circle").addClass("bi-megaphone-fill");
    }
    });

    setInterval(fetchData, 15000);
</script>

<script type="text/javascript" language="javascript" src="<?php echo base_url().'assets_v2/assets/datatable/';?>jquery-3.5.1.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function () {
    $('#data-table').DataTable({
        stateSave: true,
    });
});
</script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets_v2/assets/datatable/';?>jquery.dataTables.min.css">
<script  src="<?php echo base_url().'assets_v2/assets/datatable/';?>jquery.dataTables2.min.js"></script>

<?php $this->load->view('admin/layout/foot'); ?>
