<?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>Jenis Layanan</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">Jenis Layanan</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">Jenis Layanan<span></span></h5>
				  <a href="<?php echo base_url().'admin/kategori/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:5%">No.Urut</th>
                        <th style="width:40%">Jenis Layanan</th>
                        <th style="width:30%">Bidang</th>
                        <th style="width:20%;text-align:center" >Aksi</th> 
                      </tr>
                    </thead>
                    <tbody>
					<?php 	  
					$no=0; foreach($kategori->result() as $row){ $no++;
					if($row->idjenis ==0){
						$nama_suara1 = base_url() . 'images/sound/' . $row->file_name;
						$nama_suara2 = base_url() . 'images/sound/' . $row->file_name;
					$id = $row->idkategori;						
					?>		
										  			
                      <tr>

                        <th ><input type="hidden" name="id" value="<?php echo $row->idkategori;?>"><?php echo $no;?></th>
                        <th ><input type="hidden" name="nourut" value="<?php echo $row->nourut;?>"><?php echo $row->nourut;?></th>
                        <td><?php echo $row->namakategori;?></td>
                        <td><?php echo $row->namabidang;?></td>
                        <td style="text-align:center"><a href="<?php echo base_url().'admin/kategori/edit/'.$row->idkategori;?>"><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/kategori/hapus/'.$row->idkategori;?>"><button type="button" class="btn btn-danger" title="Hapus" name="hapus" onclick="return confirm('Yakin Akan Hapus data <?php echo $row->namakategori;?>')"><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 }?>
					<?php 	  
					if($row->idjenis !=0){
						 $nama_suara1 = base_url() . 'images/jenis/' . $row->file_name_jenis;
						 $nama_suara2 = base_url() . 'images/sound/' . $row->file_name;
						 $nama_suara3 = base_url() . 'images/jenis/' . $row->file_name_jenis;
						 $nama_suara4 = base_url() . 'images/sound/' . $row->file_name;
					$id = $row->idkategori;						
					?>		
										  			
                      <tr>

                        <th ><input type="hidden" name="id" value="<?php echo $row->idkategori;?>"><?php echo $no;?></th>
						 <th ><input type="hidden" name="nourut" value="<?php echo $row->nourut;?>"><?php echo $row->nourut;?></th>
                        <td><?php echo $row->namakategori;?></td>
                        <td><?php echo $row->namabidang;?></td>
                        <td style="text-align:center"><a href="<?php echo base_url().'admin/kategori/edit/'.$row->idkategori;?>"><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/kategori/hapus/'.$row->idkategori;?>"><button type="button" class="btn btn-danger" title="Hapus" name="hapus" onclick="return confirm('Yakin Akan Hapus data <?php echo $row->namakategori;?>')"><i class="bi bi-trash"></i></button></a>	
							<a href='#' class='play-button2' data-row='<?php echo $id; ?>' 
								data-src1='<?php echo $nama_suara1; ?>' 
								data-src2='<?php echo $nama_suara2; ?>' 
								data-src3='<?php echo $nama_suara3; ?>' 
								data-src4='<?php echo $nama_suara4; ?>' 
								
								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>
<button id="play-button2" 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>

<script>
    const audio_1 = new Audio();
    const audio_2 = new Audio();
    const audio_3 = new Audio();
    const audio_4 = new Audio();

    function playSoundByRow2(rowId) {
        const soundSrc_1 = $(`[data-row='${rowId}']`).data('src1');
        const soundSrc_2 = $(`[data-row='${rowId}']`).data('src2');
        const soundSrc_3 = $(`[data-row='${rowId}']`).data('src3');
        const soundSrc_4 = $(`[data-row='${rowId}']`).data('src4');

        audio_1.src = soundSrc_1;
        audio_2.src = soundSrc_2;
        audio_3.src = soundSrc_3;
        audio_4.src = soundSrc_4;

        audio_1.play();
        audio_1.addEventListener('ended', () => {
            audio_2.play();
            audio_2.addEventListener('ended', () => {
				audio_3.play();
				audio_3.addEventListener('ended', () => {
					audio_4.play();
					audio_4.addEventListener('ended', () => {
					});
				});
            });
        });
    }

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

 if (!isPlaying) {
        playSoundByRow2(rowId);
        $(this).data('playing', true);
		$(this).find("button2").removeClass("btn-success").addClass("btn-danger");
        //$(this).find("button2").removeClass("btn-success").addClass("btn-danger");
        $(this).find("i").removeClass("bi-megaphone-fill").addClass("bi-stop-circle");
    } else {
        audio_1.pause();
        audio_2.pause(); 
        audio_3.pause(); 
        audio_4.pause(); 
        $(this).data('playing', false);
        $(this).find("button2").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'); ?> 