<div class="box box-success b-t-non" id='main1000hpk'>
	<h4 class="labelGreen">
		<i class="fa fa-heartbeat m-r-15"></i> Kelahiran {{ $periode->kehamilan }}
	</h4>
	<hr class="m-t-0">
	<div class="box-body p-0">
		<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
			<div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" align="center">
				@if($bumil->foto != "")
					<img id="preview-photo" src="{!! url('/dist/img/istri/'.$bumil->foto) !!}" class="img-polaroid" width="80%">
				@else
					<img id="preview-photo" src="{!! url('dist/img/default_image.jpg') !!}" class="img-polaroid" width="80%">
				@endif
			</div>
			<div class="col-lg-7 col-md-7 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">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">Alamat Domisili</label>: {{ $periode->alamat_domisili }}
					</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>: {{ ucwords(strtolower($periode->desa->nama_desa)) }}
					</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>: {{ ucwords(strtolower($periode->kecamatan->nama_kecamatan)) }}
					</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>: {{ ucwords(strtolower($periode->kabupaten->nama_kabupaten)) }}
					</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>: {{ $periode->status_kehamilan }}
					</div>
				</div>
			</div>
			<div class="clearfix m-b-10"></div>
		</div>
		<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 boxKunjungan">
			<div class="loadingAnak" align="center" style="display: none;">
				<img src="{!! url('dist/img/loading.gif') !!}" width="60%">
			</div>
			<span class="resultAnak"></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-1000hpk"></div>
<div class="modal-1000hpk"></div>
<script type="text/javascript">
	$('.btn-cancel').click(function(e){
    	e.preventDefault();
    	$('#main1000hpk').animateCss('bounceOutDown');
    	$('.other-page').fadeOut(function(){
    		$('.other-page').empty();
            $('.main-layer').fadeIn();
        });
    });

    reloadAnak();

    function reloadAnak() {
    	$('.loadingAnak').show();
    	var id_periode = {{ $periode->id_periode }};
    	$.post("{!! route('searchAnak') !!}", {id:id_periode}).done(function(data){
    		if (data.status == 'success') {
    			var resultAnak = '';
    			if (data.anak.length > 0) {
    				$.each(data.anak, function(k,v){
    					resultAnak += '<div class="panelKunjungan panelAnak">';
    					resultAnak += '<a href="javascript:void(0)" onclick="showAnak('+v.id_perkembangan_anak+')" style="display: block;">';
    					resultAnak += '<span class="icon_anak"><i class="fa fa-child"></i></span>';
    					if (v.nama_bayi == "") {
    						resultAnak += '<label class="nama_anak" style="color:#999">Nama Bayi</label>';
    					}else{
    						resultAnak += '<label class="nama_anak">'+v.nama_bayi+'</label>';
    					}
    					resultAnak += '<span class="pull-right icon_kanan_anak"><i class="fa fa-file"></i></span>';
    					resultAnak += '</a>';
    					resultAnak += '<div class="clearfix"></div>';
    					resultAnak += '</div>';
    				});
    			}else{
    				resultAnak += '<label class="labelNoResult"><i> - = Tidak Anak yang Ditemukan = - </i></label>';
    			}
    			$('.loadingAnak').hide();
				$('.resultAnak').html(resultAnak);
    		}else{
    			$('.loadingAnak').hide();
    		}
    	});
    }

    function showAnak(id_perkembangan) {
    	$('.loading').show();
		$('#main1000hpk').hide();
		$.post("{!! route('detailPerkembanganAnak') !!}", {id:id_perkembangan}).done(function(data){
			if(data.status == 'success'){
				$('.loading').hide();
				$('.other-1000hpk').html(data.content).fadeIn();
			} else {
				$('#main1000hpk').show();
			}
		});
    }
</script>