<?php
defined('APK') or exit('Anda tidak dizinkan mengakses langsung script ini!');
?>

<div class='row'>
<div class='col-md-7'>
            <div class="card">
             <div class="card-header">									
                  <h5 class="card-title"><i class="fas fa-bell"></i> Bell Sekolah</h5></div>    
			  
           
						<div class="card-body">
						<h2 style="font-weight:bold;text-align:center;color:red">
						<div id="waktu"><?= $waktu ?></div>
						
						</h2>
						<h6 style="text-align:center;color:blue;">BELL OTOMATIS MENGUNAKAN MESIN BELL SANDIK</h6>
                         <br>
                   <div class='table-responsive'>
                        <table style="font-size: 13px" id='example1' class='table  table-hover'>
                            <thead>
                            <tr>                             
                             <th width='5%'>No</th>								                                 
							   <th>Hari</th>	
                              <th>Jam Bell</th>	
                              <th>No Nada</th>								  
						       <th>Action</th>
                            </tr>							
                        </thead>
                        <tbody>
                            <?php
                            $query = mysqli_query($koneksi, "select * from bel 
							JOIN nadabel ON nadabel.idnada=bel.lagu ORDER BY bel.id ASC");
                            $no = 0;
                            while ($bel = mysqli_fetch_array($query)) {							
                                $no++;                             
                                ?>
                                <tr>
                                    <td><?= $no; ?></td>
									  <td><?= $bel['hari'] ?></td>									 
									 <td><b><?= $bel['jam'] ?> : <?= $bel['menit'] ?></b></td>
                                     <td><?= $bel['lagu'] ?> <?= $bel['nama'] ?></td>										 
								   <td>	
                                   <a href="?pg=bell&ac=tes&id=<?= $bel['lagu'] ?>" class="btn btn-sm btn-outline-primary" data-placement="top" data-toggle="tooltip" data-original-title="Tes Bell"><i class="fas fa-bell"></i></a>								   
									<a href="?pg=bell&ac=edit&id=<?= $bel['id'] ?>" class="btn btn-sm btn-outline-success" data-placement="top" data-toggle="tooltip" data-original-title="Edit"><i class="fas fa-edit"></i></a>
									 <button data-id="<?= $bel['id'] ?>" class="hapus btn-sm btn btn-outline-danger"><i class="fas fa-trash"></i></button>
									</td>
									</tr>
									<?php } ?>
                        </tbody>
                    </table>
				
            </div>
        </div>
    </div>
</div>
<script>
	 $('#example1').on('click', '.hapus', function() {
        var id = $(this).data('id');
        console.log(id);
        swal({
            title: 'Are you sure?',
            text: 'Akan menghapus data ini!',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'iya, hapus'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                   url: 'bell/crud_bel.php?pg=hapus',
                    method: "POST",
                    data: 'id=' + id,
                    success: function(data) {
                 iziToast.info(
            {
                 title: 'Sukses!',
                message: 'Data berhasil dihapus',
				titleColor: '#FFFF00',
				messageColor: '#fff',
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				 progressBarColor: '#FFFF00',
                  position: 'topRight'							  
                });
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    }
                });
            }
            return false;
        })

    });
	</script>	
	<?php if ($ac == ''): ?>
  <div class='col-md-5'>
           <div class="card">
             <div class="card-header">
			   <h5 class='card-title'><i class="fas fa-tools fa-fw"></i> Jadwal Bell</h5>
			   </div>
			   <div class='card-body'>  
				  <form id="formbell" action="" method="POST">
                                         						
						    <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Pilih Hari</label>
							<div class="col-sm-9">
							 <select name='hari'  class='form-select' required='true'>
                                        <option value=''>Pilih Hari</option>
										 <option value='Senin'> Senin</option>
										  <option value='Selasa'> Selasa</option>
										   <option value='Rabu'> Rabu</option>
										    <option value='Kamis'> Kamis</option>
											 <option value='Jumat'> Jumat</option>
											  <option value='Sabtu'> Sabtu</option>
											   <option value='Minggu'> Minggu</option>
													 </select>
                                            </div>
						            </div>
									  <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Jam</label>
							<div class="col-sm-9">
							 <input type="text" name="jam" class="form-control" required="true" autocomplete="off" style="font-size: 40px;height:50px;color:red;font-weight:bold" />
                                            </div>
						            </div>
							  <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Menit</label>
							<div class="col-sm-9">
							   <input type='text' name='menit' class='form-control' autocomplete="off" required='true' style="font-size: 40px;height:50px;color:red;font-weight:bold" />
                                            </div>
						            </div>
								  <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Nada Bell</label>					
									<div class="col-sm-9">
							  <select name='lagu'  class='form-select' required='true'>
                                        <option value=''>Pilih Nada Bell</option>
										 <option value='1'>Jam Pertama</option>
										  <option value='2'>Jam Kedua</option>
										  <option value='3'>Jam Ketiga</option>
										  <option value='4'>Jam Keempat</option>
										  <option value='5'>Jam Kelima</option>
										  <option value='6'>Jam Keenam</option>
										  <option value='7'>Jam Ketujuh</option>
										  <option value='8'>Jam Kedelapan</option>
										  <option value='9'>Jam Kesembilan</option>
										  <option value='10'>Jam Kesepuluh</option>
										  <option value='11'>Jam Kesebelas</option>
										  <option value='12'>Jam Keduabelas</option>
										  <option value='13'>Akhir Pelajaran Hari ini</option>
										  <option value='14'>Akhir Pelajaran Akhir Pekan</option>
										  <option value='15'>Istirahat Pertama</option>
										  <option value='16'>Istirahat Pertama Selesai</option>
										  <option value='17'>Istirahat Kedua</option>
										  <option value='18'>Istirahat Kedua Selesai</option>
										   <option value='19'>Waktu Ibadah Sholat</option>
										    <option value='20'>Upacara Bendera 5 Menit Lagi</option>
											 <option value='21'>Saatnya Upacara Bendera</option>
											  <option value='22'>Waktu Sholat Jumat</option>
											   <option value='23'>Peserta & Pengawas Ujian Memasuki Ruangan</option>
											    <option value='24'>Peserta Ujian dipersilahkan Mengerjakan Soal</option>
												 <option value='25'>Waktu Ujian 5 Menit Lagi</option>
												  <option value='26'>Waktu Ujian Selesai</option>
												   <option value='27'>Senam dimulai 5 Menit Lagi</option>
												    <option value='28'>Waktu Senam Dimulai</option>
													 </select>
                                            </div>
						            </div>
							  <div class='right'>
				   		 <button type='submit' name="submit"  class='btn btn-outline-success'><i class='fa fa-check-circle' ></i><span> Simpan</span></button>		
							</div>
							</form>
							 </div>
						</div>
					</div>
				</div>
			</div>
			<script>
$('#formbell').submit(function(e){
    e.preventDefault();
    var data = new FormData(this);
    
    $.ajax(
    {
        type: 'POST',
        url: 'bell/crud_bel.php?pg=tambah',
        enctype: 'multipart/form-data',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data)
        {
            
            iziToast.info(
            {
                title: 'Sukses!',
                message: 'Data berhasil disimpan',
				titleColor: '#FFFF00',
				messageColor: '#fff',
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				 progressBarColor: '#FFFF00',
                  position: 'topRight'
            });
            setTimeout(function()
            {
                window.location.reload();
            }, 2000);
            
        }
    });
    return false;
});
</script>
		<?php elseif ($ac == 'edit'): ?>
		<?php $bel=fetch($koneksi,'bel',['id'=>$_GET['id']]); ?>
  <div class='col-md-5'>
           <div class="card">
             <div class="card-header">
			  <h5 class='card-title'><i class="fas fa-tools"></i> Edit Bell</h5>
			  </div>
			   <div class='card-body'>  
				  <form id="formbell" action="" method="POST">
                   
						  <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Hari</label>
							<div class="col-sm-9">
							 <select name='hari'  class='form-select' required='true'>
							           <option value="<?= $bel['hari'] ?>"><?= $bel['hari'] ?></option>
                                        <option value=''>Pilih Hari</option>
										 <option value='Senin'> Senin</option>
										  <option value='Selasa'> Selasa</option>
										   <option value='Rabu'> Rabu</option>
										    <option value='Kamis'> Kamis</option>
											 <option value='Jumat'> Jumat</option>
											  <option value='Sabtu'> Sabtu</option>
											   <option value='Minggu'> Minggu</option>
													 </select>
                                <input type="hidden" name="id" value="<?= $bel['id'] ?>" >          
										   </div>
						            </div>
									  <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Jam</label>
							<div class="col-sm-9">
							 <input type="text" name="jam" class="form-control" required="true" value="<?= $bel['jam'] ?>" style="font-size: 40px;height:50px;color:red;font-weight:bold" />
                                            </div>
						            </div>
							  <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Menit</label>
							<div class="col-sm-9">
							   <input type='text' name='menit'  class='form-control' value="<?= $bel['menit'] ?>" required='true' style="font-size: 40px;height:50px;color:red;font-weight:bold" />
                                            </div>
						            </div>
									  <div class="row mb-1">
							<label  class="col-md-3 col-form-label bold">Nada Bell</label>					
									<div class="col-sm-9">
							  <select name='lagu'  class='form-select' required='true'>
							   <option value="<?= $bel['lagu'] ?>"><?= $bel['lagu'] ?></option>
                                        <option value=''>Pilih Nada Bell</option>
										 <option value='1'>Jam Pertama</option>
										  <option value='2'>Jam Kedua</option>
										  <option value='3'>Jam Ketiga</option>
										  <option value='4'>Jam Keempat</option>
										  <option value='5'>Jam Kelima</option>
										  <option value='6'>Jam Keenam</option>
										  <option value='7'>Jam Ketujuh</option>
										  <option value='8'>Jam Kedelapan</option>
										  <option value='9'>Jam Kesembilan</option>
										  <option value='10'>Jam Kesepuluh</option>
										  <option value='11'>Jam Kesebelas</option>
										  <option value='12'>Jam Keduabelas</option>
										  <option value='13'>Akhir Pelajaran Hari ini</option>
										  <option value='14'>Akhir Pelajaran Akhir Pekan</option>
										  <option value='15'>Istirahat Pertama</option>
										  <option value='16'>Istirahat Pertama Selesai</option>
										  <option value='17'>Istirahat Kedua</option>
										  <option value='18'>Istirahat Kedua Selesai</option>
										   <option value='19'>Waktu Ibadah Sholat</option>
										    <option value='20'>Upacara Bendera 5 Menit Lagi</option>
											 <option value='21'>Saatnya Upacara Bendera</option>
											  <option value='22'>Waktu Sholat Jumat</option>
											   <option value='23'>Peserta & Pengawas Ujian Memasuki Ruangan</option>
											    <option value='24'>Peserta Ujian dipersilahkan Mengerjakan Soal</option>
												 <option value='25'>Waktu Ujian 5 Menit Lagi</option>
												  <option value='26'>Waktu Ujian Selesai</option>
												   <option value='27'>Senam dimulai 5 Menit Lagi</option>
												    <option value='28'>Waktu Senam Dimulai</option>
													 </select>
                                            </div>
						            </div><p>
							 <div class='right'>
				   		 <button type='submit' name="submit"  class='btn btn-outline-primary'><i class='fa fa-check-circle'></i>Simpan</button>		
							</div>
							</form>
							 </div>
						</div>
					</div>
				</div>
			</div>
			<script>
$('#formbell').submit(function(e){
    e.preventDefault();
    var data = new FormData(this);
    
    $.ajax(
    {
        type: 'POST',
        url: 'bell/crud_bel.php?pg=edit',
        enctype: 'multipart/form-data',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data)
        {
            
            iziToast.info(
            {
                title: 'Sukses!',
                message: 'Data berhasil disimpan',
				titleColor: '#FFFF00',
				messageColor: '#fff',
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				 progressBarColor: '#FFFF00',
                  position: 'topRight'
            });
            setTimeout(function()
            {
                window.location.replace('?pg=bell');
            }, 2000);
            
        }
    });
    return false;
});
</script>	
		<?php elseif ($ac == 'tes'): ?>
		<?php 
		$bel = $_GET['id'];
        if($bel <='9'){
{$lagu="000".$bel;}
}elseif($bel>='10'){
{$lagu="00".$bel;}

}
		?>
		<div class='col-md-5'>
           <div class="card">
             <div class="card-header">
			  <h5 class='card-title'><i class="fas fa-bell"></i> Tes Bell</h5>
			  </div>
			   <div class='card-body'> 
		<audio controls autoplay>
    <source src="<?= $homeurl ?>/bell/<?= $lagu ?>.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
  </audio>
  </div>
					</div>
				</div>
			</div>
	<?php endif; ?>		