@extends('master.layout')

@section('extended_css')
	<style type="text/css">
		.tombolPeriod {
			float: left;
			margin-left: 20%;
		}
		.tombolDtBml {
			float: right;
			margin-right: 20%;
		}
		.addPeriod {
			background: #369cea;
			border-radius: 50%;
			height: 80px;
			width: 80px;
			position: relative;
			box-shadow: 4px 6px 15px 1px #999;
		}
		.dtBml {
			background: #ffb954;
			border-radius: 50%;
			height: 80px;
			width: 80px;
			position: relative;
			box-shadow: 4px 6px 15px 1px #999;
		}
		.img-add-period {
			width: 60px;
			height: 60px;
			position: absolute;
			top: 10px;
			left: 10px;
		}
		.img-dtBml {
			width: 50px;
			height: 50px;
			position: absolute;
			top: 15px;
			left: 20px;
		}
		.img-add-period > img, .img-dtBml > img {
			width: 100%;
		}
		.btnPlusPeriod {
			background: #00000087 !important;
			border-color: #000000 !important;
			color: #fff;
			border-radius: 50px;
			font-size: 20px;
			width: 28px;
			height: 28px;
			padding: 1px 5px;
			line-height: 1.42857143;
			position: absolute;
			right: 15px;
			bottom: 10px;
		}
		.labelPeriod {
			margin-top: 10px;
		}

		.panelPeriod {
			position: relative;
			text-align: justify;
			box-shadow: 2px 4px 10px #bfbfbf;
			border-radius: 10px;
			margin-bottom: 10px;
			border: solid 2px #ff00c8;
		}
		.img-pregnancy {
			width: 50px;
			height: 50px;
			padding-top: 5px;
			text-align: center;
			background: #ff00c8;
			border-radius: 10px 0px 0px 10px;
		}
		.img-pregnancy > img, .img-pregnancy-right > img {
			width: 80%;
		}
		.img-pregnancy-right {
			width: 50px;
			height: 50px;
			padding-top: 5px;
			text-align: center;
			background: #ff00c8;
			border-radius: 0px 10px 10px 0px;
		}
		.pregnancy-content {
			height: 50px;
			padding: 5px 15px;
		}
		.pregnancy-content > label {
			font-size: 20px;
			vertical-align: middle;
			position: relative;
			top: 5px;
			font-weight: 600;
		}
		.box-periode {
			height: 445px;
			overflow-y: scroll;
		}

		#titleKunjungan{
			font-size: 18px;
			font-weight: 600;
			color: #000 !important;
		}

		@media( max-width : 1024px ){
			.tombolPeriod{
				float: left;
				margin-left: 5%;
			}
			.tombolDtBml {
				float: right;
				margin-right: 5%;
			}

			#titleKunjungan{
				font-size: 16px;
				font-weight: 600;
				color: #000 !important;
			}
		}
		@media( max-width : 768px ){
			.tombolPeriod{
				float: left;
				margin-left: 15%;
			}
			.tombolDtBml {
				float: right;
				margin-right: 15%;
			}
			#titleKunjungan{
				font-size: 18px;
				font-weight: 600;
				color: #000 !important;
			}
		}
		@media( max-width : 480px ){
			.tombolPeriod{
				float: left;
				margin-left: 5%;
			}
			.tombolDtBml {
				float: right;
				margin-right: 5%;
			}
			#titleKunjungan{
				font-size: 18px;
				font-weight: 600;
				color: #000 !important;
			}
		}
	</style>
@stop

@section('content')
	<section class="content-header">
		<h1>
			{{ $title }}
			@if(!empty($smallTitle))
			<small>{{ $smallTitle }}</small>
			@endif
		</h1>
		<ol class="breadcrumb">
			<li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Home</a></li>
			<li class="active">{{ $title }}</li>
		</ol>
	</section>

	<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
		<div class="loading" align="center" style="display: none;">
			<img src="{!! url('dist/img/loading.gif') !!}" width="60%">
		</div>
	</div>

	<section class="content">
		<div class="row">
			<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
				<div class="box box-success main-layer b-t-non">
					<h4 class="labelGreen">
						<i class="fa fa-heartbeat m-r-15"></i> Cari Ibu Hamil
					</h4>
					<hr class="m-t-0">
					<div class="box-body">
						<form id='formSearchBumil'>
							<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12 form-group main-layer p-5 m-0">
								<label class='control-label col-lg-2 col-md-3 col-sm-4 col-xs-12 p-0 p-t-5'>NIK Ibu Hamil</label>
								<div class="col-lg-10 col-md-9 col-sm-8 col-xs-12 p-0">
									<input type="number" name="nikBumil" id='nikBumil' autocomplete='off' class="form-control input-sm customInput">
								</div>
							</div>
							<button class="col-lg-2 col-md-2 col-sm-4 col-xs-12 btn btn-success btn-sm m-t-5" id='cariBumil'><i class="fa fa-search"></i> Cari Ibu Hamil</button>
						</form>
						<div class="clearfix m-b-5"></div>
					</div>
					<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
						<div class="loadingResult" align="center" style="display: none;">
							<img src="{!! url('dist/img/loading.gif') !!}" width="60%">
						</div>
					</div>
					<div class="result-page p-0">

<!-- 						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-0">
							<h4 class="labelGreen m-b-10">
								<i class="fa fa-puzzle-piece m-r-15"></i> Hasil Pencarian
							</h4>
							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 lineRight">
								<div class="panelResurt" align="center">
									<div class="col-lg-12 p-0">';
										<img id="preview-photo" src="{!! url('dist/img/default_image.jpg') !!}" class="img-polaroid" height="250">
									</div>
									<div class="col-xs-12 m-t-25">
										<div class="tombolPeriod">
											<a href="javascript:void(0)" onclick="addKelahiran('+data.bumil.id_bumil+')">
												<div class="addPeriod">
													<div class="img-add-period">
														<img src="{!! url('dist/img/icon/period2.png') !!}">
													</div>
													<span class="btnPlusPeriod"><i class="fa fa-plus"></i></span>
												</div>
												<div class="clearfix"></div>
											</a>
											<label class="labelPeriod">Tambah Periode Kehamilan</label>
										</div>
										<div class="tombolDtBml">
											<a href="javascript:void(0)" onclick="detailBumil('+data.bumil.id_bumil+')">
												<div class="dtBml">
													<div class="img-dtBml">
														<img src="{!! url('dist/img/icon/search.png') !!}">
													</div>
												</div>
												<div class="clearfix"></div>
											</a>
											<label class="labelPeriod">Detail Ibu Hamil</label>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 box-periode">
								// Jika ada Periode
								
								<div class="panelPeriod">
									<div class="img-pregnancy pull-left">
										<img src="{!! url('dist/img/icon/pregnancy.png') !!}">
									</div>
									<div class="pregnancy-content pull-left">
										<label>Kehamilan 1</label>
									</div>
									<a href="javascript:void(0)" onclick="detailKelahiran('+v.id_periode+')">
										<div class="img-pregnancy-right pull-right">
											<img src="{!! url('dist/img/icon/next.svg') !!}">
										</div>
									</a>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
								
								// Jika Tidak Ada Periode
								<center>
									<img src="{!! url('dist/img/icon/searching.svg') !!}" width="20%">
								</center>
								<label class="labelNoResult"><i> - = Kehamilan Tidak Ditemukan = - </i></label>
							</div>
							<div class="clearfix m-b-10"></div>
						</div> -->

					</div>
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 noResult" style="display:none;">
						<h4 class="labelGreen m-b-10 t-a-justify">
							<i class="fa fa-puzzle-piece m-r-15"></i> Hasil Pencarian
						</h4>
						<div class="p-25">
							<center>
								<div  style='width: 200px;'>
									<img src="{!! url('dist/img/icon/searching.svg') !!}" width="80%">
								</div>
							</center>
							<label class="labelNoResult m-b-0 p-b-0"><i> - = Pencarian Ibu Hamil Tidak Ditemukan = - </i></label>
							<label class="labelNoResult m-t-0 p-0 m-b-15"><i style="font-size: 14px"> silahkan cek kembali inputan Anda </i></label>
						</div>
					</div>
					<div class='clearfix'></div>
				</div> <!-- end box -->
				<div class="other-page"></div>
				<div class="modal-dialog"></div>
			</div>
		</div>
	</section>
@stop

@section('script')
	<script type="text/javascript">
		$('#cariBumil').click(function(e){
			e.preventDefault();
			reloadResult();
		});

		function reloadResult() {
			$('.loadingResult').show();
			var nik = $('#nikBumil').val();
			var level_user = {{ Sentinel::getUser()->level_user }};
			$.post("{!! route('searchIbuHamil') !!}", {nik:nik}).done(function(data){
				if(data.status == 'success'){
					var searchResult = '<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-0">';
					searchResult += '<h4 class="labelGreen m-b-10">';
					searchResult += '<i class="fa fa-puzzle-piece m-r-15"></i> Hasil Pencarian';
					searchResult += '</h4>';
					searchResult += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 lineRight">';
					searchResult += '<div class="panelResurt" align="center">';
					searchResult += '<div class="col-lg-12 p-0">';
					if (data.bumil.foto != "") {
						var linkDepan = '{!! url("/dist/img/istri/") !!}';
	        			var link = linkDepan+'/'+data.bumil.foto;
					}else{
						var link = '{!! url("dist/img/default_image.jpg") !!}';
					}
					searchResult += '<img id="preview-photo" src="'+link+'" class="img-polaroid" height="250">';
					searchResult += '</div>';
					searchResult += '<div class="col-xs-12 m-t-25">';
					if (level_user != '6') {
					    searchResult += '<div class="tombolPeriod">';
					    searchResult += '<a href="javascript:void(0)" onclick="addKehamilan('+data.bumil.id_bumil+')">';
					    searchResult += '<div class="addPeriod">';
					    searchResult += '<div class="img-add-period">';
					    searchResult += '<img src="{!! url("dist/img/icon/period2.png") !!}">';
					    searchResult += '</div>';
					    searchResult += '<span class="btnPlusPeriod"><i class="fa fa-plus"></i></span>';
					    searchResult += '</div>';
					    searchResult += '<div class="clearfix"></div>';
					    searchResult += '</a>';
					    searchResult += '<label class="labelPeriod">Tambah Periode Kehamilan</label>';
					    searchResult += '</div>';
					}
					if(level_user == 6){
					    searchResult += '<div class="tombolDtBml" style="margin-right:42.5%;">';
					}else{
					    searchResult += '<div class="tombolDtBml">';
					}
					searchResult += '<a href="javascript:void(0)" onclick="detailBumil('+data.bumil.id_bumil+')">';
					searchResult += '<div class="dtBml">';
					searchResult += '<div class="img-dtBml">';
					searchResult += '<img src="{!! url("dist/img/icon/search.png") !!}">';
					searchResult += '</div>';
					searchResult += '</div>';
					searchResult += '<div class="clearfix"></div>';
					searchResult += '</a>';
					searchResult += '<label class="labelPeriod">Detail Ibu Hamil</label>';
					searchResult += '</div>';
					searchResult += '</div>';
					searchResult += '</div>';
					searchResult += '</div>';
					searchResult += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 box-periode">';
					// Jika ada Periode
					if(data.periode.length > 0){
						$.each(data.periode, function(k,v){
							searchResult += '<div class="panelPeriod">';
							searchResult += '<div class="img-pregnancy pull-left">';
							searchResult += '<img src="{!! url("dist/img/icon/pregnancy.png") !!}">';
							searchResult += '</div>';
							searchResult += '<div class="pregnancy-content pull-left">';
							searchResult += '<label>Kehamilan '+v.kehamilan+'</label>';
							searchResult += '</div>';
							searchResult += '<a href="javascript:void(0)" onclick="detailKehamilan('+v.id_periode+')">';
							searchResult += '<div class="img-pregnancy-right pull-right">';
							searchResult += '<img src="{!! url("dist/img/icon/next.svg") !!}">';
							searchResult += '</div>';
							searchResult += '</a>';
							searchResult += '<div class="clearfix"></div>';
							searchResult += '</div>';
							searchResult += '<div class="clearfix"></div>';
						});
					// Jika Tidak Ada Periode
					}else{
						searchResult += '<center>';
						searchResult += '<img src="{!! url("dist/img/icon/searching.svg") !!}" width="20%">';
						searchResult += '</center>';
						searchResult += '<label class="labelNoResult"><i> - = Kehamilan Tidak Ditemukan = - </i></label>';
					}
					searchResult += '</div>';
					searchResult += '<div class="clearfix m-b-10"></div>';
					searchResult += '</div>';

					$('.loadingResult').hide();
					$('.noResult').hide();
					$('.result-page').html(searchResult);
				} else {
					$('.loadingResult').hide();
					$('.result-page').empty();
					$('.noResult').show();
				}
			});
		}

		function detailBumil(id) {
			$.post("{!! route('detailBumil') !!}", {id:id}).done(function(data){
				if(data.status == 'success'){
					$('.modal-dialog').html(data.content);
				}
			});
		}

		function addKehamilan(id) {
			$('.loading').show();
			$('.main-layer').hide();
			$.post("{!! route('formAddKehamilan') !!}", {id:id}).done(function(data){
				if(data.status == 'success'){
					$('.loading').hide();
					$('.other-page').html(data.content).fadeIn();
				} else if(data.status == 'error'){
					$('.loading').hide();
					$('.main-layer').show();
					swal("Maaf !!", "Tidak dapat menambah Periode Kehamilan, karena Ibu Masih dalam Periode Hamil", "warning");
				} else {
					$('.main-layer').show();
				}
			});
		}

		function detailKehamilan(id_periode) {
			$('.loading').show();
			$('.main-layer').hide();
			$.post("{!! route('mainKunjungan') !!}", {id:id_periode}).done(function(data){
				if(data.status == 'success'){
					$('.loading').hide();
					$('.other-page').html(data.content).fadeIn();
				} else {
					$('.main-layer').show();
				}
			});
		}
	</script>
@stop