@extends('master.layout')

@section('extended_css')
    <link rel="stylesheet" href="{!! url('plugins/Highcharts-6.0.1/css/highcharts.css') !!}">
	<style type="text/css">
		#resultChart,#resultChartPbU {
			height: 500px;margin: 0 auto;
		}
		#resultChartPbBb {
			height: 900px;margin: 0 auto;
		}

		/* Warna Hitam */
		#resultChart .highcharts-color-0,
		#resultChartPbU .highcharts-color-0,
		#resultChartPbBb .highcharts-color-0 {fill: #000;stroke: #000;}
		#resultChart .highcharts-axis.highcharts-color-0 .highcharts-axis-line,
		#resultChartPbU .highcharts-axis.highcharts-color-0 .highcharts-axis-line,
		#resultChartPbBb .highcharts-axis.highcharts-color-0 .highcharts-axis-line {stroke: #000;}
		#resultChart .highcharts-axis.highcharts-color-0,
		#resultChartPbU .highcharts-axis.highcharts-color-0,
		#resultChartPbBb .highcharts-axis.highcharts-color-0 text {fill: #000;}

		#resultChart .highcharts-color-4,
		#resultChartPbU .highcharts-color-4,
		#resultChartPbBb .highcharts-color-6 {fill: #000;stroke: #000;}
		#resultChart .highcharts-axis.highcharts-color-4 .highcharts-axis-line,
		#resultChartPbU .highcharts-axis.highcharts-color-4 .highcharts-axis-line,
		#resultChartPbBb .highcharts-axis.highcharts-color-6 .highcharts-axis-line {stroke: #000;}
		#resultChart .highcharts-axis.highcharts-color-4,
		#resultChartPbU .highcharts-axis.highcharts-color-4,
		#resultChartPbBb .highcharts-axis.highcharts-color-6 text {fill: #000;}
		/* Warna Merah */
		#resultChart .highcharts-color-1,
		#resultChartPbU .highcharts-color-1,
		#resultChartPbBb .highcharts-color-1 {fill: #f00;stroke: #f00;}
		#resultChart .highcharts-axis.highcharts-color-1 .highcharts-axis-line,
		#resultChartPbU .highcharts-axis.highcharts-color-1 .highcharts-axis-line,
		#resultChartPbBb .highcharts-axis.highcharts-color-1 .highcharts-axis-line {stroke: #f00;}
		#resultChart .highcharts-axis.highcharts-color-1,
		#resultChartPbU .highcharts-axis.highcharts-color-1,
		#resultChartPbBb .highcharts-axis.highcharts-color-1 text {fill: #f00;}

		#resultChart .highcharts-color-3,
		#resultChartPbU .highcharts-color-3,
		#resultChartPbBb .highcharts-color-5 {fill: #f00;stroke: #f00;}
		#resultChart .highcharts-axis.highcharts-color-3 .highcharts-axis-line,
		#resultChartPbU .highcharts-axis.highcharts-color-3 .highcharts-axis-line,
		#resultChartPbBb .highcharts-axis.highcharts-color-5 .highcharts-axis-line {stroke: #f00;}
		#resultChart .highcharts-axis.highcharts-color-3,
		#resultChartPbU .highcharts-axis.highcharts-color-3,
		#resultChartPbBb .highcharts-axis.highcharts-color-5 text {fill: #f00;}
		/* Warna Hijau */
		#resultChart .highcharts-color-2,
		#resultChartPbU .highcharts-color-2,
		#resultChartPbBb .highcharts-color-3 {fill: #0f0;stroke: #0f0;}
		#resultChart .highcharts-axis.highcharts-color-2 .highcharts-axis-line,
		#resultChartPbU .highcharts-axis.highcharts-color-2 .highcharts-axis-line,
		#resultChartPbBb .highcharts-axis.highcharts-color-3 .highcharts-axis-line {stroke: #0f0;}
		#resultChart .highcharts-axis.highcharts-color-2,
		#resultChartPbU .highcharts-axis.highcharts-color-2,
		#resultChartPbBb .highcharts-axis.highcharts-color-3 text {fill: #0f0;}
        /* Warna Kuning */
		#resultChartPbBb .highcharts-color-2,
		#resultChartPbBb .highcharts-color-4 {fill: #ff0;stroke: #ff0;}
		#resultChartPbBb .highcharts-axis.highcharts-color-2 .highcharts-axis-line,
		#resultChartPbBb .highcharts-axis.highcharts-color-4 .highcharts-axis-line {stroke: #ff0;}
		#resultChartPbBb .highcharts-axis.highcharts-color-2,
		#resultChartPbBb .highcharts-axis.highcharts-color-4 text {fill: #ff0;}
		/*Warna Pertumbuhan*/
		#resultChart .highcharts-color-5,
		#resultChartPbU .highcharts-color-5,
		#resultChartPbBb .highcharts-color-7 {fill: #fff;stroke: #2e58c1;stroke-width: 2;}
		#resultChart .highcharts-axis.highcharts-color-5 .highcharts-axis-line,
		#resultChartPbU .highcharts-axis.highcharts-color-5 .highcharts-axis-line,
		#resultChartPbBb .highcharts-axis.highcharts-color-7 .highcharts-axis-line {stroke: #2e58c1;}
		#resultChart .highcharts-axis.highcharts-color-5,
		#resultChartPbU .highcharts-axis.highcharts-color-5,
		#resultChartPbBb .highcharts-axis.highcharts-color-7 text {fill: #2e58c1;}
	</style>
	<script src="{!! url('plugins/Highcharts-6.0.1/js/highcharts.js') !!}"></script>
	<script src="{!! url('plugins/Highcharts-6.0.1/js/modules/exporting.js') !!}"></script>
	<style type="text/css">
		.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;
		}
	</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
					</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</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</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>
					<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>
						<img src="{!! url('dist/img/transparant.png') !!}" class='notFound'>
					</div>
					<div class='clearfix'></div>
				</div>
				<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('searchBumil') !!}", {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>';
					if (level_user == 1 || level_user == 2 || level_user == 3) {
						searchResult += '<a href="javascript:void(0)" onclick="addKelahiran('+data.bumil.id_bumil+')" class="col-lg-6 col-md-6 col-sm-8 col-xs-10 col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-xs-offset-1 TblBumil TblBumilBlue m-t-20">';
						searchResult += 'Tambah Kelahiran';
						searchResult += '<span class="btn-circleBlue btn-circle"><i class="fa fa-plus"></i></span>';
						searchResult += '</a>';
					}
					searchResult += '<a href="javascript:void(0)" onclick="detailBumil('+data.bumil.id_bumil+')" class="col-lg-6 col-md-6 col-sm-8 col-xs-10 col-lg-offset-3 col-md-offset-3 col-sm-offset-2 col-xs-offset-1 TblBumil TblBumilYellow m-t-20">';
					searchResult += 'Biodata Ibu';
					searchResult += '<span class="btn-circleYellow btn-circle"><i class="fa fa-external-link"></i></span>';
					searchResult += '</a>';
					searchResult += '</div>';
					searchResult += '</div>';
					searchResult += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 box-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/newborn.svg') !!}">';
							searchResult += '</div>';
							searchResult += '<div class="pregnancy-content pull-left">';
							searchResult += '<label>Kelahiran '+v.kehamilan+'</label>';
							searchResult += '</div>';
							searchResult += '<a href="javascript:void(0)" onclick="detailKelahiran('+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>';
					
							// searchResult += '<div class="panelPeriode">';
							// searchResult += '<h4>Kelahiran '+v.kehamilan+'</h4>';
							// searchResult += '<span class="panelTblPerod">';
							// searchResult += '<a href="javascript:void(0)" onclick="detailKelahiran('+v.id_periode+')" class="btn btn-info btn-sm tblPeriode" data-toggle="tooltip" data-placement="left" title="Detail Periode"><i class="fa fa-external-link"></i></a>';
							// searchResult += '</span>';
							// searchResult += '</div>';
							// searchResult += '<div class="clearfix"></div>';
						});
					}else{
						searchResult += '<label class="labelNoResult"><i> - = Kelahiran 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 addKelahiran(id) {
			$('.loading').show();
			$('.main-layer').hide();
			$.post("{!! route('formAddKelahiran') !!}", {id:id}).done(function(data){
				if(data.status == 'success'){
					$('.modal-dialog').html(data.content);
					$('.loading').hide();
					$('.main-layer').show();
				}
			});
		}

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

		function detailKelahiran(id_periode) {
			$('.loading').show();
			// $('#mainKunjungan').hide();
			$('.main-layer').hide();
			// var status = $('#sttKehamilan').val();
			// if (status == "Hamil") {
			// 	swal("Maaf !", "Fitur 1000 HPK hanya digunakan untuk Ibu dengan status Melahirkan", "error");
			// 	$('.loading').hide();
			// 	$('#mainKunjungan').show();
			// }else{
				
				$.post("{!! route('cek1000hpk') !!}", {id:id_periode}).done(function(data){
					if(data.status == 'notfound'){
						$.post("{!! route('formJumlahAnak') !!}", {id:id_periode}).done(function(data){
							if(data.status == 'success'){
								// $('.modal-kunjungan').html(data.content);
								$('.modal-dialog').html(data.content);
								$('.loading').hide();
								// $('#mainKunjungan').show();
								$('.main-layer').show();
							}
						});
					} else {
						// $('#mainKunjungan').show();
						$.post("{!! route('main1000hpk') !!}", {id:id_periode}).done(function(data){
							if(data.status == 'success'){
								$('.loading').hide();
								// $('.other-kunjungan').html(data.content).fadeIn();
								$('.other-page').html(data.content).fadeIn();
							} else {
								// $('#mainKunjungan').show();
								$('.main-layer').show();
							}
						});
					}
				});
			// }


		}
	</script>
@stop