<div class="box box-success b-t-non" id='mainKunjungan'>
	<h4 class="labelGreen">
		<i class="fa fa-heartbeat m-r-15"></i> Periode Kehamilan {{ $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="{!! url('dist/img/istri/'.$bumil->foto) !!}" class="img-polaroid" width="80%">

				<a href="javascript:void(0)" onclick="detailPeriode({{ $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>
                @if(Sentinel::getUser()->level_user != 6)
				<a href="javascript:void(0)" onclick="updatePeriode({{ $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>
				@endif

			</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>: {{ $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>: {{ $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">{{ $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'>{{ $periode->jarak_tahun }}</span> Tahun, <span id='jrkBln'>{{ $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'>{{ $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">{{ $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">{{ 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">{{ 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">{{ 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>: {{ $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'>{{ $periode->status_kehamilan }}</span>
					</div>
				</div>
				@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>: {{ $periode->keterangan_kehamilan }}
						</div>
					</div>
				@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="{{ $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="{!! 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="{!! 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="{!! url('dist/img/icon/ic_done_black_24px.svg') !!}">
												<img src="{!! 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="{!! 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="{!! url('dist/img/icon/ic_done_black_24px.svg') !!}">
												<img src="{!! 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="{!! 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 = {{ $periode->id_periode }};
    	$.post("{!! 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="{!! 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="{!! 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="{!! 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="{!! 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="{!! 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="{!! 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="{!! 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("{!! route('detailKunjungan') !!}", {id:id}).done(function(data){
			if(data.status == 'success'){
				$('.modal-kunjungan').html(data.content);
			}
		});
    }

    function addKunjungan(id) {
        var level_user = "{{ Sentinel::getUser()->level_user }}";
    	if (level_user != '6') {
    	    $('.loading').show();
    	    $('#mainKunjungan').hide();
    	    $.post("{!! route('formAddKunjungan') !!}", {id:id}).done(function(data){
			    if(data.status == 'success'){
				    $('.loading').hide();
				    $('.other-kunjungan').html(data.content).fadeIn();
			    } else {
    				$('#mainKunjungan').show();
			    }
		    });
    	}else{
    		swal({
    			title: "MAAF !",
    			text: "Anda Tidak Memiliki Akses Untuk Fitur Ini !!",
    			type: "warning",
    			timer: 2000,
    			showConfirmButton: false
    		});
    	}
    }

    function updateKunjungan(id) {
    	$('.loading').show();
    	$('#mainKunjungan').hide();
    	$.post("{!! 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("{!! route('detailKehamilan') !!}", {id:id}).done(function(data){
			if(data.status == 'success'){
				$('.modal-kunjungan').html(data.content);
			}
		});
    }

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