<div class="box box-success b-t-non" id='mainKunjungan'>
	<h4 class="labelGreen">
		<i class="fa fa-heartbeat m-r-15"></i> Periode Kehamilan <?php echo e($periode->kehamilan); ?>

	</h4>
	<hr class="m-t-0">
	<div class="box-body p-0">
		<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
			<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6" align="center">
				<img id="preview-photo" src="<?php echo url('dist/img/istri/'.$bumil->foto); ?>" class="img-polaroid" width="80%">

				<a href="javascript:void(0)" onclick="detailPeriode(<?php echo e($periode->id_periode); ?>)" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 TblBumil TblBumilBlue m-t-20">
					Detail Periode
					<span class="btn-circleBlue btn-circle"><i class="fa fa-external-link"></i></span>
				</a>

				<a href="javascript:void(0)" onclick="updatePeriode(<?php echo e($periode->id_periode); ?>)" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 TblBumil TblBumilYellow m-t-20">
					Edit Periode
					<span class="btn-circleYellow btn-circle"><i class="fa fa-pencil"></i></span>
				</a>

			</div>
			<div class="col-lg-8 col-md-8 col-sm-6 col-xs-6">
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">NIK</label>: <?php echo e($bumil->nik); ?>

					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Nama</label>: <?php echo e($bumil->nama_bumil); ?>

					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Usia Ibu</label>: <span id="usIb"><?php echo e($periode->usia_ibu); ?></span>
					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Jarak kehamilan dari anak terakhir</label>: <span id='jrkThn'><?php echo e($periode->jarak_tahun); ?></span> Tahun, <span id='jrkBln'><?php echo e($periode->jarak_bulan); ?></span> Bulan
					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Gol Darah</label>: <span id='golDar'><?php echo e($periode->gol_darah); ?></span>
					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Alamat Domisili</label>: <span class="alaDom"><?php echo e($periode->alamat_domisili); ?></span>
					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Desa Domisili</label>: <span class="desDom"><?php echo e(ucwords(strtolower($periode->desa->nama_desa))); ?></span>
					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Kecamatan Domisili</label>: <span class="kecDom"><?php echo e(ucwords(strtolower($periode->kecamatan->nama_kecamatan))); ?></span>
					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Kabupaten Domisili</label>: <span class="kabDom"><?php echo e(ucwords(strtolower($periode->kabupaten->nama_kabupaten))); ?></span>
					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">No Telepon</label>: <?php echo e($bumil->no_tlp); ?>

					</div>
				</div>
				<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
					<div class="form-group m-t-0 m-b-10">
						<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Status</label>: <span id='statKeham'><?php echo e($periode->status_kehamilan); ?></span>
					</div>
				</div>
				<?php if($periode->status_kehamilan != 'Hamil'): ?>
					<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
						<div class="form-group m-t-0 m-b-10">
							<label class="control-label col-md-6 col-sm-6 col-xs-6" id='modal-label' for="first-name">Keterangan Kehamilan </label>: <?php echo e($periode->keterangan_kehamilan); ?>

						</div>
					</div>
				<?php endif; ?>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 pull-left">
				
			</div>
			<input type="hidden" name="statusKehamilan" id="sttKehamilan" value="<?php echo e($periode->status_kehamilan); ?>">
			<div class="clearfix m-b-10"></div>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 boxKunjungan">
			<div class="loadingKunjungan" align="center" style="display: none;">
				<img src="<?php echo url('dist/img/loading.gif'); ?>" width="60%">
			</div>
			<span class="resultKunjungan">
								<!-- // Jika ada Periode
								<div class="panelPeriod" style="border: solid 2px #0090ff;">
									<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
										<div class="img-pregnancy pull-left" style="background: #0090ff;">
											<img src="<?php echo url('dist/img/icon/come-in.svg'); ?>">
										</div>
										<div class="pregnancy-content pull-left p-t-0">
											<div style="font-size: 18px;font-weight: 600;color: #000;">Kunjungan ke - 0</div>
											<div style="font-size: 16px;font-style: italic;color: #000;">31-01-2018</div>
										</div>
											<div class="img-pregnancy-right pull-right" style="background: transparent;">
												<img src="<?php echo url('dist/img/icon/ic_done_black_24px.svg'); ?>">
												<img src="<?php echo url('dist/img/icon/ic_done_all_black_24px.svg'); ?>">
											</div>
										<div class="clearfix"></div>
									</a>
									<ul class="dropdown-menu pull-right">
										<li onclick="DetailBulananAnak('+v.id_pemeriksaan_hpk+')"><a href="javascript:void(0);"><i class="fa fa-eye"></i> Detail</a></li>
										<li onclick="UpdateBulananAnak('+v.id_pemeriksaan_hpk+')"><a href="javascript:void(0);"><i class="fa fa-pencil"></i> Edit</a></li>
									</ul>
								</div>
								// start perulangan
								<div class="panelPeriod" style="border: solid 2px #0090ff;">
									<a href="javascript:void(0)" onclick="detailKelahiran('+v.id_periode+')">
										<div class="img-pregnancy pull-left" style="background: #0090ff;">
											<img src="<?php echo url('dist/img/icon/come-in.svg'); ?>">
										</div>
										<div class="pregnancy-content pull-left p-t-0">
											<div style="font-size: 18px;font-weight: 600;color: #000;">Kunjungan ke - 1</div>
											<div style="font-size: 16px;font-style: italic;color: #000;">31-01-2018</div>
										</div>
											<div class="img-pregnancy-right pull-right" style="background: transparent;">
												<img src="<?php echo url('dist/img/icon/ic_done_black_24px.svg'); ?>">
												<img src="<?php echo url('dist/img/icon/ic_done_all_black_24px.svg'); ?>">
											</div>
										<div class="clearfix"></div>
									</a>
								</div>
								// end Perulangan
								<div class="clearfix"></div>
								
								// Jika Tidak Ada Periode
								<center>
									<img src="<?php echo url('dist/img/icon/searching.svg'); ?>" width="20%">
								</center>
								<label class="labelNoResult"><i> - = Data Kunjungan Tidak Ditemukan = - </i></label> -->
			</span>
		</div>
	</div>
	<div class="box-footer">
		<button type="button" class="btn btn-warning btn-cancel pull-right"><span class="fa fa-chevron-left"></span> Kembali</button>
	</div>
</div>
<div class="other-kunjungan"></div>
<div class="modal-kunjungan"></div>
<script type="text/javascript">
	$('.btn-cancel').click(function(e){
    	e.preventDefault();
    	$('#mainKunjungan').animateCss('bounceOutDown');
    	$('.other-page').fadeOut(function(){
    		$('.other-page').empty();
            $('.main-layer').fadeIn();
        });
    });

    reloadKunjungan();

    function reloadKunjungan() {
    	$('.loadingKunjungan').show();
    	var id_periode = <?php echo e($periode->id_periode); ?>;
    	$.post("<?php echo route('searchKunjungan'); ?>", {id:id_periode}).done(function(data){
    		if (data.status == 'success') {
    			var resultKunjungan = '';
    			if (data.kunjungan.length > 0) {
    				$.each(data.kunjungan, function(k,v){
    					if (v.sudahIsi == 1) {
    						var tglKunjungs = v.tgl_kunjungan.split("-");
							var tglKunjung = tglKunjungs[2]+"-"+tglKunjungs[1]+"-"+tglKunjungs[0];
    						if (v.hak_edit == 1) {
    							resultKunjungan += '<div class="panelPeriod" style="border: solid 2px #0090ff;">';
	    						resultKunjungan += '<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">';
	    						resultKunjungan += '<div class="img-pregnancy pull-left" style="background: #0090ff;">';
	    						resultKunjungan += '<img src="<?php echo url("dist/img/icon/come-in.svg"); ?>">';
	    						resultKunjungan += '</div>';
	    						resultKunjungan += '<div class="pregnancy-content pull-left p-t-0">';
	    						resultKunjungan += '<div id="titleKunjungan">Kunjungan ke - '+v.kunjungan+'</div>';
	    						resultKunjungan += '<div style="font-size: 16px;font-style: italic;color: #000;">'+tglKunjung+'</div>';
	    						resultKunjungan += '</div>';
	    						resultKunjungan += '<div class="img-pregnancy-right pull-right" style="background: transparent;">';
	    						resultKunjungan += '<img src="<?php echo url("dist/img/icon/ic_done_all_black_24px.svg"); ?>">';
	    						resultKunjungan += '</div>';
	    						resultKunjungan += '<div class="clearfix"></div>';
	    						resultKunjungan += '</a>';
	    						resultKunjungan += '<ul class="dropdown-menu pull-right" style="top:0;">';
	    						resultKunjungan += '<li onclick="DetailKunjungan('+v.id_pemeriksaan+')"><a href="javascript:void(0);"><i class="fa fa-eye"></i> Detail</a></li>';
	    						resultKunjungan += '<li onclick="updateKunjungan('+v.id_pemeriksaan+')"><a href="javascript:void(0);"><i class="fa fa-pencil"></i> Edit</a></li>';
	    						resultKunjungan += '</ul>';
	    						resultKunjungan += '</div>';
    						}else{
    							resultKunjungan += '<div class="panelPeriod" style="border: solid 2px #0090ff;">';
	    						resultKunjungan += '<a href="javascript:void(0)" onclick="DetailKunjungan('+v.id_pemeriksaan+')">';
	    						resultKunjungan += '<div class="img-pregnancy pull-left" style="background: #0090ff;">';
	    						resultKunjungan += '<img src="<?php echo url("dist/img/icon/come-in.svg"); ?>">';
	    						resultKunjungan += '</div>';
	    						resultKunjungan += '<div class="pregnancy-content pull-left p-t-0">';
	    						resultKunjungan += '<div id="titleKunjungan">Kunjungan ke - '+v.kunjungan+'</div>';
	    						resultKunjungan += '<div style="font-size: 16px;font-style: italic;color: #000;">'+tglKunjung+'</div>';
	    						resultKunjungan += '</div>';
	    						resultKunjungan += '<div class="img-pregnancy-right pull-right" style="background: transparent;">';
	    						resultKunjungan += '<img src="<?php echo url("dist/img/icon/ic_done_all_black_24px.svg"); ?>">';
	    						resultKunjungan += '</div>';
	    						resultKunjungan += '<div class="clearfix"></div>';
	    						resultKunjungan += '</a>';
	    						resultKunjungan += '</div>';
    						}
    					}else{ // Belum Diisi
    						resultKunjungan += '<div class="panelPeriod" style="border: solid 2px #0090ff;">';
    						resultKunjungan += '<a href="javascript:void(0)" onclick="addKunjungan('+v.id_pemeriksaan+')">';
    						resultKunjungan += '<div class="img-pregnancy pull-left" style="background: #0090ff;">';
    						resultKunjungan += '<img src="<?php echo url("dist/img/icon/come-in.svg"); ?>">';
    						resultKunjungan += '</div>';
    						resultKunjungan += '<div class="pregnancy-content pull-left p-t-0">';
    						resultKunjungan += '<div id="titleKunjungan" style="margin-top: 12px;">Kunjungan ke - '+v.kunjungan+'</div>';
    						resultKunjungan += '</div>';
    						resultKunjungan += '<div class="img-pregnancy-right pull-right" style="background: transparent;">';
    						resultKunjungan += '<img src="<?php echo url("dist/img/icon/ic_done_black_24px.svg"); ?>">';
    						resultKunjungan += '</div>';
    						resultKunjungan += '<div class="clearfix"></div>';
    						resultKunjungan += '</a>';
    						resultKunjungan += '</div>';
    					}
    					resultKunjungan += '<div class="clearfix"></div>';
    				});
    			}else{
    				resultKunjungan += '<center>';
    				resultKunjungan += '<img src="<?php echo url("dist/img/icon/searching.svg"); ?>" width="20%">';
    				resultKunjungan += '</center>';
    				resultKunjungan += '<label class="labelNoResult"><i> - = Data Kunjungan Tidak Ditemukan = - </i></label>';
    			}
    			$('#usIb').html(data.periode.usia_ibu);
    			$('#jrkThn').html(data.periode.jarak_tahun);
    			$('#jrkBln').html(data.periode.jarak_bulan);
    			$('#golDar').html(data.periode.gol_darah);
    			$('#statKeham').html(data.periode.status_kehamilan);
    			$('.loadingKunjungan').hide();
				$('.resultKunjungan').html(resultKunjungan);
    		}else{
    			$('.loadingKunjungan').hide();
    		}
    	});
    }

    function DetailKunjungan(id) {
    	$.post("<?php echo route('detailKunjungan'); ?>", {id:id}).done(function(data){
			if(data.status == 'success'){
				$('.modal-kunjungan').html(data.content);
			}
		});
    }

    function addKunjungan(id) {
    	$('.loading').show();
    	$('#mainKunjungan').hide();
    	$.post("<?php echo route('formAddKunjungan'); ?>", {id:id}).done(function(data){
			if(data.status == 'success'){
				$('.loading').hide();
				$('.other-kunjungan').html(data.content).fadeIn();
			} else {
				$('#mainKunjungan').show();
			}
		});
    }

    function updateKunjungan(id) {
    	$('.loading').show();
    	$('#mainKunjungan').hide();
    	$.post("<?php echo route('formEditKunjungan'); ?>", {id:id}).done(function(data){
			if(data.status == 'success'){
				$('.loading').hide();
				$('.other-kunjungan').html(data.content).fadeIn();
			} else {
				$('#mainKunjungan').show();
			}
		});
    }

    function detailPeriode(id) {
    	$.post("<?php echo route('detailKehamilan'); ?>", {id:id}).done(function(data){
			if(data.status == 'success'){
				$('.modal-kunjungan').html(data.content);
			}
		});
    }

    function updatePeriode(id) {
    	$('.loading').show();
    	$('#mainKunjungan').hide();
    	$.post("<?php echo route('formEditKehamilan'); ?>", {id:id}).done(function(data){
			if(data.status == 'success'){
				$('.loading').hide();
				$('.other-kunjungan').html(data.content).fadeIn();
			} else {
				$('#mainKunjungan').show();
			}
		});
    }
</script>