<?php
session_start();
/*
try {
    if (isset($_COOKIE["session"])) { 
        //echo 'Cookie is active!';
        $lifetime=60*60;
        setcookie("session", "1", time() + $lifetime, "/");
    } else{ 
        //echo 'Cookie is NOT active!';
        header("Location: /login.php"); 
    }
    $auth = $_SESSION["auth"];
    if (!$auth){
        header("Location: /login.php"); 
    }
} catch(Exception $e){
    header("Location: /login.php"); 
}
*/

//receiving parameter
$id = $_GET['id'];
//echo $id;
?>

<div class="container-fluid">

	<div class="row">
		<div class="col-lg-12 col-md-12">
			<div class="card card-plain">

				<div class="content">
					<form id="formid">

						<?php
						echo "<input id='id' name='id' type='hidden' value='" .$id. "'/>";
						?>

						<div class="row">
							<div class="header">
								<h5 class="title">Entri Maklumat Produk</h5><br/>
							</div>   

							<div class="row" style="padding-left:20px;padding-right:20px;">
								<div class="col-md-4" style="padding:10px;">
									<label>No. SKU *</label>
									<input id="sku" name="sku" type="text" class="form-control border-input" placeholder="No. SKU" value="" readonly>
								</div>
								<div class="col-md-4" style="padding:10px;">
									<label>ID Produk *</label>
									<input id="produk" name="produk" type="text" class="form-control border-input" placeholder="ID Produk" value="" readonly>
								</div>
								<div class="col-md-4" style="padding:10px;">
									<label>Tahun Keluaran *</label>
									<input id="tahun" name="tahun" type="number" class="form-control border-input" placeholder="Tahun Keluaran" value="" maxlength="4">
								</div>                                                                                
							</div>    						
							
							<div class="row" style="padding-left:20px;padding-right:20px;">
								<div class="col-md-4" style="padding:10px;">
									<label>Nama Jenama *</label>
									<input id="jenama" name="jenama" type="text" class="form-control border-input" placeholder="Nama Jenama" value="" >
								</div>
								<div class="col-md-4" style="padding:10px;">
									<label>Model Produk *</label>
									<input id="model" name="model" type="text" class="form-control border-input" placeholder="Model Produk" value="" >
								</div>
								<div class="col-md-4" style="padding:10px;">
									<label>URL Produk</label>
									<input id="url" name="url" type="text" class="form-control border-input" placeholder="URL Produk" value="" >
								</div>                                                                                
							</div>    
							
							<div class="row" style="padding-left:20px;padding-right:20px;">
								<div class="col-md-4" style="padding:10px;">
									<label>Kategori Produk *</label>
									<select id="kategori" name="kategori" class="form-control border-input">
										<option value="LED">LED</option>
										<option value="TOYS" selected>TOYS</option>
									</select>
								</div>   
								<div class="col-md-4" style="padding:10px;">
									<label>Tempoh Waranti</label>
									<input id="waranti" name="waranti" type="text" class="form-control border-input" placeholder="Tempoh Waranti" value="" >
								</div>  
								<div class="col-md-4" style="padding:10px;">
									<label>Insuran</label>
									<input id="insuran" name="insuran" type="text" class="form-control border-input" placeholder="Insuran" value="" >
								</div> 																
							</div> 

							<hr/>							                                                                         
						</div>

						<div class="row">
							<div class="header">
								<h5 class="title">Entri Spesifikasi Produk</h5><br/>
							</div>

							<div class="row" style="padding-left:20px;padding-right:20px;">							
								<div class="col-md-4" style="padding:10px;">
									<div class="col-md-8"  style="padding:1px;">
										<label>Berat Produk</label>
										<input id="berat" name="berat" type="text" class="form-control border-input" placeholder="Berat Produk" value="" disabled>
									</div>                                            
									<div class="col-md-4"  style="padding:1px;">
										<label>Unit</label>
										<select id="berat_unit" name="berat_unit" class="form-control border-input">
											<option value="-" selected>-tiada-</option>
											<option value="gram" >gram</option>
											<option value="kilogram" >kilogram</option>
											<option value="liter" >liter</option>
											<option value="tan" >tan</option>
										</select>                                             
									</div>								
								</div>
								<div class="col-md-4" style="padding:10px;">
									<label>Had Lingkungan Umur</label>
									<select id="umur" name="umur" class="form-control border-input">
										<option value="-" selected>-tiada-</option>
										<option value="01" >5 - 7 tahun</option>
									</select>                                         
								</div>                                                                             
							</div>

							<div class="row" style="padding-left:20px;padding-right:20px;">
								<div class="col-md-4" style="padding:10px;">
									<div class="col-md-8" style="padding:1px;">
										<label>Saiz Produk (L x W x H)</label>
										<input id="saiz" name="saiz" type="text" class="form-control border-input" placeholder="Saiz Produk" value="" disabled>
									</div>                                            
									<div class="col-md-4" style="padding:1px;">
										<label>Unit</label>
										<select id="saiz_unit" name="saiz_unit" class="form-control border-input">
											<option value="-" selected>-tiada-</option>
											<option value="cm" >cm</option>
											<option value="meter" >meter</option>
										</select>                                             
									</div>
								</div>
								<div class="col-md-4" style="padding:10px;">
									<label>Bahan Buatan</label>
									<select id="bahan" name="bahan" class="form-control border-input">
										<option value="-" selected>-tiada-</option>
										<option value="01" >Plastik</option>
										<option value="02" >Kaca</option>
										<option value="03" >Kayu</option>
										<option value="04" >Besi</option>
										<option value="99" >Lain-lain</option>
									</select> 
								</div>   								
							</div>      

							<div class="row" style="padding-left:20px;padding-right:20px;">
								<div class="col-md-4" style="padding:10px;">
									<div class="col-md-8" style="padding:1px;">
										<label>Input Kuasa / Tenaga</label>
										<input id="input" name="input" type="text" class="form-control border-input" placeholder="Input Kuasa Tenaga" value="" disabled>
									</div>                                            
									<div class="col-md-4" style="padding:1px;">
										<label>Jenis</label>
										<select id="input_jenis" name="input_jenis" class="form-control border-input">
											<option value="-" selected>-tiada-</option>
											<option value="Bateri" >Bateri</option>
											<option value="Solar" >Solar</option>
											<option value="Punca Elektrik">Punca Elektrik</option>
											<option value="Lain-lain">Lain-lain</option>
										</select>                                            
									</div>
								</div>
							</div>     

							<hr/>
						</div>

						<div class="text-center" style="padding:20px;">							
							<button id="simpan" type="button" class="btn btn-info btn-fill btn-wd">Simpan Kemaskini</button>
						</div>						


						<div class="row">
							<div class="header">
								<h5 class="title">Entri Gambar Produk</h5><br/>
							</div>
							<div class="row" style="padding-left:20px;padding-right:20px;">
								<div class="col-md-12">
									<div class="col-md-3">
										<img id="photo1" src="/assets/img/blank-image.png" alt="img1" height="200px" style="border:1px dashed #C0C0C0;">
										<p>
											<form id="uploadform1">
												<i id="imgdelete1" class='ti-trash hidden' title='Buang Gambar' style='cursor:pointer;' ></i>
												<input id="fileinput1" name="namefile" type="file" class="hidden" accept="*.gif,*.jpeg,*.png" />
												<button id="fileinput1sub" type="button" class="hidden">Upload!</button>
											</form>
										</p>
									</div>
									<div class="col-md-3">
										<img id="photo2" src="/assets/img/blank-image.png" alt="img2" height="200px" style="border:1px dashed #C0C0C0;">
										<p>
											<form id="uploadform2">
												<i id="imgdelete2" class='ti-trash hidden' title='Buang Gambar' style='cursor:pointer;' ></i>
												<input id="fileinput2" name="namefile" type="file" class="hidden" accept="*.gif,*.jpeg,*.png" />
												<button id="fileinput2sub" type="button" class="hidden">Upload!</button>
											</form>
										</p>
									</div>   							
									<div class="col-md-3">
										<img id="photo3" src="/assets/img/blank-image.png" alt="img3" height="200px" style="border:1px dashed #C0C0C0;">
										<p>
											<form id="uploadform3">
												<i id="imgdelete3" class='ti-trash hidden' title='Buang Gambar' style='cursor:pointer;' ></i>
												<input id="fileinput3" name="namefile" type="file" class="hidden" accept="*.gif,*.jpeg,*.png" />
												<button id="fileinput3sub" type="button" class="hidden">Upload!</button>
											</form>
										</p>
									</div>
									<div class="col-md-3">
										<img id="photo4" src="/assets/img/blank-image.png" alt="img4" height="200px" style="border:1px dashed #C0C0C0;">
										<p>
											<form id="uploadform4">
												<i id="imgdelete4" class='ti-trash hidden' title='Buang Gambar' style='cursor:pointer;' ></i>
												<input id="fileinput4" name="namefile" type="file" class="hidden" accept="*.gif,*.jpeg,*.png" />
												<button id="fileinput4sub" type="button" class="hidden">Upload!</button>
											</form>
										</p>
									</div>                                                
								</div>
							</div>	
							<hr/>							
						</div>				
						
						
						<div class="row ">
							<div class="header">
								<h5 class="title">Entri Dokumentasi COC</h5><br/>
								<br/>
							</div>
							<div class="row " style="padding-left:20px;">
								<div class="col-md-12">
									<div class="col-md-6">
										<div id="coc_list">
										</div>
									</div>
									<div class="col-md-6"></div>
								</div>
							</div>
							<div class="row " style="padding-left:20px;">
								<div class="col-md-12">
									<div class="col-md-6">
										<p>
										<!-- Trigger the modal with a button -->
										<button type="button" data-toggle="modal" data-target="#myModalCOC">Tambah Dokumen COC</button>
									</p>
									</div>
									<div class="col-md-6"></div>									
								</div>
							</div>							
							<hr/>  							
						</div>							
						

						<div class="row hidden">
							<div class="header">
								<h5 class="title">Entri Pensijilan Produk</h5><br/>
							</div>
							<div class="row " >
								<div class="col-md-12">
									<div class="col-md-8">
										<div class="col-md-4"  style="padding:1px;">
											<label>No. Sijil</label>
											<input id="nosijil" name="nosjil" type="text" class="form-control border-input" placeholder="Berat Produk" value="" >
										</div>                                            
										<div class="col-md-4"  style="padding:1px;">
											<label>Pensijilan</label>
											<select id="jenis_sijil" name="jenis_sijil" class="form-control border-input">
												<option value="000" >-tiada-</option>
												<option value="001" selected>gram</option>
												<option value="002" >kilogram</option>
												<option value="003" >liter</option>
												<option value="004" >tan</option>
											</select>                                             
										</div>									
										<div class="col-md-4"  style="padding:1px;">
											<label>Logo Sijil</label>
											<input id="logo" name="logo" type="text" class="form-control border-input" placeholder="Berat Produk" value="" >
										</div> 
									</div>
									<div class="col-md-4">
									</div>								
								</div>
							</div>					

							<hr/>							
						</div>	
						
						

						
  
						
						
						<div class="clearfix"></div>
					</form>
				</div> 
				
			</div>
		</div>
	</div>







<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" style="z-index:9999 !important;">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<!-- Modal -->
<div id="myModalCOC" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Tambah Dokumen</h4>
      </div>
      <div class="modal-body">
		<form>
			<!--
			<p>Some text in the modal.</p>
			-->
			<label>Perihal Dokumen</label>
			<input id="coc1_remark" name="coc1_remark" type="text" class="form-control border-input" placeholder="Perihal Dokumen" value="" >
			<br/>
			<label>Muat naik Dokumen</label>
			<input id="coc1_file" name="coc1_file" type="file" accept="*.pdf" />
			<br/>
			<button id="coc1sub" type="button">Tambah</button>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-modal-close" data-dismiss="modal">Batal</button>
      </div>
    </div>

  </div>
</div>













</div>


    <!--   Core JS Files   -->
    <script src="/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="/assets/js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Checkbox, Radio & Switch Plugins -->
	<script src="/assets/js/bootstrap-checkbox-radio.js"></script>

    <!--  Notifications Plugin    -->
    <script src="/assets/js/bootstrap-notify.js"></script>

    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
	<script src="/assets/js/paper-dashboard.js"></script>

	<script src="/assets/js/app.js"></script>


<script type="text/javascript">
    $(document).ready(function(){

		$.ajaxSetup({
			cache: false
		});			

		var url = "";
		url = getBase();

		var id = $('#id').val();
		//console.log('edit_produk:id...', id);		

		getData();

		function getData(){
			$.ajax({
				type: "get",
				url: url + "/m/ws/get_product.php?id=" + id
				}).done(function(json) { 
				//console.log(json);
				var data = $.parseJSON(json);
				//console.log('info_produk:getdata...', data);
				
				if (data && data[0]){
					
					var item = data[0];
					$('#sku').val(item.sku);
					$('#model').val(item.model);
					$('#jenama').val(item.jenama);
					$('#tahun').val(item.prod_year);
					$('#produk').val(item.produk);
					$('#kategori').val(item.type);
					$('#url').val(item.remark);

					$('#waranti').val(item.waranti);
					$('#insuran').val(item.insuran);
					
					if (item.photo){
						$('#photo1').attr('src',item.photo);
						$('#imgdelete1').removeClass('hidden');
					}
					else {
						$('#fileinput1').removeClass('hidden');
						$('#fileinput1sub').removeClass('hidden');
					}
					if (item.photo2){
						$('#photo2').attr('src',item.photo2);
						$('#imgdelete2').removeClass('hidden');
					}
					else {
						$('#fileinput2').removeClass('hidden');
						$('#fileinput2sub').removeClass('hidden');
					}					
					if (item.photo3){
						$('#photo3').attr('src',item.photo3);
						$('#imgdelete3').removeClass('hidden');
					}
					else {
						$('#fileinput3').removeClass('hidden');
						$('#fileinput3sub').removeClass('hidden');
					}					
					if (item.photo4){
						$('#photo4').attr('src',item.photo4);
						$('#imgdelete4').removeClass('hidden');
					}	
					else {
						$('#fileinput4').removeClass('hidden');
						$('#fileinput4sub').removeClass('hidden');
					}														

					//console.log("details...", item.details);

					if (item.details) {
						var details = item.details;
						var json = JSON.parse(details);
						//console.log("json...", json);

						$('#berat_unit').val(json.berat_unit).change();
						$('#berat').val(json.berat);

						$('#saiz_unit').val(json.saiz_unit).change();
						$('#saiz').val(json.saiz);

						$('#input_jenis').val(json.input_jenis).change();	
						$('#input').val(json.input);	

						$('#umur').val(json.umur).change();
						$('#bahan').val(json.bahan).change();
					}
					
					getData_COC();
				}
			});	
		}
		
		function getData_COC(){
			$.ajax({
				type: "get",
				url: url + "/m/ws/get_product_coc.php?id=" + id
				}).done(function(json) { 
				//console.log(json);
				var data = $.parseJSON(json);
				if (data && data.length > 0){

					$("#coc_list").empty();
					
					var loop = 0;
					$.each(data, function(k, v) {
						//console.log("v: ", v.remark);
						//console.log("v: ", v.filename);
						var html = "";
						html = html + "<p>";
						html = html + "<i class='fa fa-file-text-o'></i>&nbsp;" + v.remark;
						html = html + "&nbsp;&nbsp;&nbsp;<span class='show-coc' style='cursor:pointer;' data1='" + v.filename + "'>[Papar Dokumen]</span>";
						html = html + "<hr/>";
						html = html + "</p>";
						$("#coc_list").append(html);
						//console.log(html);
					});
					
				}
			});	
		}
		
		$(document).on('click', '.show-coc' , function() {
            event.preventDefault();
			//$(document).off('click', '.show-coc');
            var data1 = $(this).attr('data1');
			//console.log('data1: ', data1);
			window.open(data1, '_blank');
        }); 		

		
		$('#berat_unit').on('change', function (e) {
			//var optionSelected = $("option:selected", this);
			//console.log('selected:', this.value);
			if (this.value && this.value !== '-'){
				$("#berat").removeAttr('disabled');
				$("#berat").focus();
			}
			else {
				$("#berat").val('').change();
				$("#berat").attr('disabled','disabled');
			}
		});
		$('#saiz_unit').on('change', function (e) {
			if (this.value && this.value !== '-'){
				$("#saiz").removeAttr('disabled');
				$("#saiz").focus();
			}
			else {
				$("#saiz").val('').change();
				$("#saiz").attr('disabled','disabled');
			}
		});		
		$('#input_jenis').on('change', function (e) {
			if (this.value && this.value !== '-'){
				$("#input").removeAttr('disabled');
				$("#input").focus();
			}
			else {
				$("#input").val('').change();
				$("#input").attr('disabled','disabled');
			}
		});		



		$('#reset').on('click', function (e) {
			$('#sku').val('').change();
			$('#produk').val('').change();
			$('#tahun').val('').change();

			$('#jenama').val('').change();
			$('#model').val('').change();
			$('#url').val('').change();

			$('#berat').val('').change();
			$('#berat_unit').val('-').change();
			$('#saiz').val('').change();
			$('#saiz_unit').val('-').change();
			$('#input').val('').change();
			$('#input_jenis').val('-').change();
			$('#umur').val('-').change();

			$('#waranti').val('').change();
			$('#insuran').val('').change();

			$('#sku').focus();
		});			

		$('#simpan').on('click', function (e) {

			if (!formValidations()) return false;
			var formArray = $('#formid').serializeArray();
			var obj = objectifyForm(formArray);

			post_Simpan(obj);
		});	

		function objectifyForm(formArray) {//serialize formdata function
			var returnArray = {};
			for (var i = 0; i < formArray.length; i++){
				returnArray[formArray[i]['name']] = formArray[i]['value'];
			}
			return returnArray;
		} 	


		function formValidations(){

			var value = "";
		
			value = $('#sku').val();
			if (value === ''){
				$('#sku').focus();
				return false;
			}
			value = $('#produk').val();
			if (value === ''){
				$('#produk').focus();
				return false;
			}	
			value = $('#tahun').val();
			if (value === ''){
				$('#tahun').focus();
				return false;
			}	

			value = $('#jenama').val();
			if (value === ''){
				$('#jenama').focus();
				return false;
			}
			value = $('#model').val();
			if (value === ''){
				$('#model').focus();
				return false;
			}

			value = $('#berat_unit').val();
			if (value !== '-'){
				value = $('#berat').val();
				if (value === ''){
					$('#berat').focus();
					return false;
				}
			}							

			return true;
		}			



		function jsonSpecs(){

			var details = {};
			var value = '';

			value = $('#berat').val();
			if (value !== ''){
				details['berat'] = value;
				details['berat_unit'] = $('#berat_unit').val();
			}

			value = $('#saiz').val();
			if (value !== ''){
				details['saiz'] = value;
				details['saiz_unit'] = $('#saiz_unit').val();
			}	
			
			value = $('#input').val();
			if (value !== ''){
				details['input'] = value;
				details['input_jenis'] = $('#input_jenis').val();
			}	

			value = $('#umur').val();
			details['umur'] = value;

			value = $('#bahan').val();
			details['bahan'] = value;
			
			return details;
		}		

		function post_Simpan(obj) {
			//alert("Simpan!");

			var details = jsonSpecs();
			obj['details'] = JSON.stringify(details);
			var json = JSON.stringify(obj);			
			//console.log('json...', json);

			//return false;

			$.ajax({
				type: 'POST',
				url: url + "/m/ws/post_item_update.php",
				data: json, 
				async: false,
				contentType: 'application/json',
				accepts : 'application/json',
				success: function(data) { 
					//console.log('result:...', data);
					var msg = data;
					if (msg && msg.indexOf('Error:') > -1){
						alert('Simpan maklumat gagal!');
						console.log('ERR:...', msg);
					}
					else {
						alert('Simpan maklumat berjaya.'); 
					}
				},
				error: function(data){
					alert('Simpan maklumat gagal!');
					console.log('ERR:...', data);
				}
			});

		} 	



		$('#fileinput1sub').on('click', function (e) {
			fup1();
		});	
		function fup1() {
			var formData = new FormData();
			formData.append("namefile", $("#fileinput1")[0].files[0]);
			formData.append("id", id);
			formData.append("photo", "1");

			$.ajax({
				url: '/m/ws/upload_photo.php',
				type: 'POST',
				data: formData,
				async: false,
				success: function (data) {
					//console.log(data);
					if (data){
						$('#photo1').attr('src',data);
						$('#imgdelete1').removeClass('hidden');
						$('#fileinput1').addClass('hidden');
						$('#fileinput1sub').addClass('hidden');
					}
				},
				error:function(data){
					alert(data);
				},
				cache: false,
				contentType: false,
				processData: false
			});

			return false;
		}


		$('#fileinput2sub').on('click', function (e) {
			fup2();
		});	
		function fup2() {
			var formData = new FormData();
			formData.append("namefile", $("#fileinput2")[0].files[0]);
			formData.append("id", id);
			formData.append("photo", "2");

			$.ajax({
				url: '/m/ws/upload_photo.php',
				type: 'POST',
				data: formData,
				async: false,
				success: function (data) {
					//console.log(data);
					if (data){
						$('#photo2').attr('src',data);
						$('#imgdelete2').removeClass('hidden');
						$('#fileinput2').addClass('hidden');
						$('#fileinput2sub').addClass('hidden');
					}
				},
				error:function(data){
					alert(data);
				},
				cache: false,
				contentType: false,
				processData: false
			});

			return false;
		}


		$('#fileinput3sub').on('click', function (e) {
			fup3();
		});	
		function fup3() {
			var formData = new FormData();
			formData.append("namefile", $("#fileinput3")[0].files[0]);
			formData.append("id", id);
			formData.append("photo", "3");

			$.ajax({
				url: '/m/ws/upload_photo.php',
				type: 'POST',
				data: formData,
				async: false,
				success: function (data) {
					//console.log(data);
					if (data){
						$('#photo3').attr('src',data);
						$('#imgdelete3').removeClass('hidden');
						$('#fileinput3').addClass('hidden');
						$('#fileinput3sub').addClass('hidden');
					}
				},
				error:function(data){
					alert(data);
				},
				cache: false,
				contentType: false,
				processData: false
			});

			return false;
		}


		$('#fileinput4sub').on('click', function (e) {
			fup4();
		});	
		function fup4() {
			var formData = new FormData();
			formData.append("namefile", $("#fileinput4")[0].files[0]);
			formData.append("id", id);
			formData.append("photo", "4");
			//console.log("formData: ", formData);

			$.ajax({
				url: '/m/ws/upload_photo.php',
				type: 'POST',
				data: formData,
				async: false,
				success: function (data) {
					//console.log("fup: ", data);
					if (data){
						$('#photo4').attr('src',data);
						$('#imgdelete4').removeClass('hidden');
						$('#fileinput4').addClass('hidden');
						$('#fileinput4sub').addClass('hidden');
					}
				},
				error:function(data){
					alert(data);
				},
				cache: false,
				contentType: false,
				processData: false
			});

			return false;
		}


		
		$('#imgdelete1').on('click',  function() {
            event.preventDefault();
			$(document).off('click', '#imgdelete1');
			delete_image1();
		});

		$('#imgdelete2').on('click',  function() {
            event.preventDefault();
			$(document).off('click', '#imgdelete2');
			delete_image2();
		});

		$('#imgdelete3').on('click',  function() {
            event.preventDefault();
			$(document).off('click', '#imgdelete3');
			delete_image3();
		});

		$('#imgdelete4').on('click',  function() {
            event.preventDefault();
			$(document).off('click', '#imgdelete4');
			delete_image4();
		});						

		
		function delete_image1(){
			var r = confirm("Confirm to delete this image ?");
			if (r == true) {
				$('#photo1').attr('src',"/assets/img/blank-image.png");
				$('#imgdelete1').addClass('hidden');
				$('#fileinput1').removeClass('hidden');
				$('#fileinput1sub').removeClass('hidden');
				delete_photo('1');
			} 
		}		

		function delete_image2(){
			var r = confirm("Confirm to delete this image ?");
			if (r == true) {
				$('#photo2').attr('src',"/assets/img/blank-image.png");
				$('#imgdelete2').addClass('hidden');
				$('#fileinput2').removeClass('hidden');
				$('#fileinput2sub').removeClass('hidden');
				delete_photo('2');
			} 
		}	

		function delete_image3(){
			var r = confirm("Confirm to delete this image ?");
			if (r == true) {
				$('#photo3').attr('src',"/assets/img/blank-image.png");
				$('#imgdelete3').addClass('hidden');
				$('#fileinput3').removeClass('hidden');
				$('#fileinput3sub').removeClass('hidden');
				delete_photo('3');
			} 
		}	

		function delete_image4(){
			var r = confirm("Confirm to delete this image ?");
			if (r == true) {
				$('#photo4').attr('src',"/assets/img/blank-image.png");
				$('#imgdelete4').addClass('hidden');
				$('#fileinput4').removeClass('hidden');
				$('#fileinput4sub').removeClass('hidden');
				delete_photo('4');
			} 
		}	

		function delete_photo(photo) {
			var json = {
				"id": id,
				"photo": photo
			};

			$.ajax({
				url: '/m/ws/delete_photo.php',
				type: 'POST',
				data: JSON.stringify(json),
				async: false,
				success: function (data) {
					//console.log("delete: ", data);
				},
				error:function(data){
					alert(data);
				},
				cache: false,
				contentType: false,
				processData: false
			});

			return false;
		}		




		$('#coc1sub').on('click', function(e) {
		    event.preventDefault();
			$(document).off('click', '#coc1sub');

			var remark = $('#coc1_remark').val();
			if (!remark || remark === '') {
				alert("Sila isi perihal dokumen.");
				return;
			}

			if($("#coc1_file").val() == ''){
				alert("Sila pilih dokumen untuk dimuatnaik.");
				return;
			}

			addCOC(remark);
		});		


		function addCOC(remark){

			var formData = new FormData();
			formData.append("namefile", $("#coc1_file")[0].files[0]);
			formData.append("id", id);
			formData.append("remark", remark);

			$.ajax({
				url: '/m/ws/upload_coc.php',
				type: 'POST',
				data: formData,
				async: false,
				success: function (data) {
					//console.log("fup: ", data);
					if (data){
						var html = "";
						html = html + "<p>";
						html = html + remark;
						html = html + "<hr/>";
						html = html + "</p>";
			
						$("#coc_list").append(html);
						$("#coc1_remark").val('');
						$("#coc1_file").val('');
						//$(".btn-modal-close").click();
						
						//console.log("fup: ", data);
					}
				},
				error:function(data){
					alert(data);
				},
				cache: false,
				contentType: false,
				processData: false
			});

			return false;			
		}											
		
	});
</script>
