<?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>Custom</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">custom</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">Custom<span></span></h5>
				  <a href="<?php echo base_url().'admin/custom/add';?>"><button type="button" class="btn btn-primary"><i class="bi bi-plus me-1"></i> Tambah</button></a>
				  <br /><br />
                  <table class="table table-borderless" id="data-table" class="display" style="width:100%">
                    <thead>
                      <tr>
                        <th style="width:5%">No</th>
                        <th style="width:75%">Custom</th>  
                        <th style="width:20%;text-align:center" >Aksi</th> 
                      </tr>
                    </thead>
                    <tbody>
					<?php 	 
					$no=0; foreach($custom->result() as $row){ $no++;
					$nama_suara1 = base_url() . 'images/custom/' . $row->file_name;
					$nama_suara2 = base_url() . 'images/custom/' . $row->file_name;
					$id = $row->idcustom;					
					?>												  			
                      <tr>
                        <th ><input type="hidden" name="id" value="<?php echo $row->idcustom;?>"><?php echo $no;?></th>
                        <td><?php echo $row->namacustom;?></td>
                        <td style="text-align:center"><a href="<?php echo base_url().'admin/custom/edit/'.$row->idcustom;?>"><button type="button" class="btn btn-success" title="Edit" name="edit"><i class="bi bi-pencil"></i></button></a>
							    <a href="<?php echo base_url().'admin/custom/hapus/'.$row->idcustom;?>"><button type="button" class="btn btn-danger" title="Hapus" name="hapus" onclick="return confirm('Yakin Akan Hapus data <?php echo $row->namacustom;?>')"><i class="bi bi-trash"></i></button></a>
							<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>								
						</td>	
                      </tr>	
					<?php }?>
                    </tbody>
                  </table>

                </div>
				</div>
              </div>
            </div><!-- End Recent Sales -->

          </div>
        </div><!-- End Left side columns -->
      </div>
    </section>
  </main><!-- End #main -->
  <?php $this->load->view('admin/layout/foot-table'); ?> 
<div id="controls">
<button id="play-button" style="display:none;">Putar</button>
</div>
<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");
    }
    });

</script>

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