@extends('master.layout')

@section('extended_css')
@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>
			@if(Sentinel::getUser()->level_user == 1 || Sentinel::getUser()->level_user == 2 || Sentinel::getUser()->level_user == 3 || Sentinel::getUser()->level_user == 4 || Sentinel::getUser()->level_user == 6)
				<li>Pasangan Keluarga Sehat</li>
			@endif
			<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">
					<div class="col-md-4 col-sm-4 col-xs-12 form-inline main-layer p-5">
					    @if(Sentinel::getUser()->level_user == 7)
    						<button type="button" class="btn btn-sm btn-primary" id="btn-add">
    							<span class="fa fa-plus"></span> &nbsp Tambah Data
    						</button>
    					@endif
					</div>
					<!-- Search -->
					<div class="col-md-8 col-sm-8 col-xs-12 form-inline main-layer panelSearch">
						<div class="form-group">
							<select class="input-sm form-control input-s-sm inline v-middle option-search" id="search-option"></select>
						</div>
						<div class="form-group">
							<input type="text" class="input-sm form-control" placeholder="Search" id="search">
						</div>
					</div>
					<div class='clearfix'></div>
					<div class="col-md-12 p-0">
						<!-- Datagrid -->
						<div class="table-responsive">
							<table class="table table-striped b-t b-light" id="datagrid"></table>
						</div>
						<footer class="panel-footer">
							<div class="row">
								<!-- Page Option -->
								<div class="col-sm-1 hidden-xs">
									<select class="input-sm form-control input-s-sm inline v-middle option-page" id="option"></select>
								</div>
								<!-- Page Info -->
								<div class="col-sm-6 text-center">
									<small class="text-muted inline m-t-sm m-b-sm" id="info"></small>
								</div>
								<!-- Paging -->
								<div class="col-sm-5 text-right text-center-xs">
									<ul class="pagination pagination-sm m-t-none m-b-none" id="paging"></ul>
								</div>
							</div>
						</footer>
					</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">
		var datagrid = $("#datagrid").datagrid({
			url                     : "{!! route('dtPernikahanDatagrid') !!}",
			primaryField            : 'id_pernikahan_pasangan',
			rowNumber               : true,
			rowCheck                : false,
			searchInputElement      : '#search',
			searchFieldElement      : '#search-option',
			pagingElement           : '#paging',
			optionPagingElement     : '#option',
			pageInfoElement         : '#info',
			columns                 : [
				{field: 'no_registrasi', title: 'No Registrasi', editable: false, sortable: true, width: 150, align: 'left', search: true},
				{field: 'no_reg_pernikahan', title: 'No Registrasi Pernikahan', editable: false, sortable: true, width: 200, align: 'left', search: true},
				{field: 'tgl_pernikahan', title: 'Tanggal Pernikahan', editable: false, sortable: true, width: 150, align: 'left', search: true},
				{field: 'nama_suami', title: 'Nama Calon Suami', editable: false, sortable: true, width: 200, align: 'left', search: true},
				{field: 'nama_bumil', title: 'Nama Calon Istri', editable: false, sortable: true, width: 200, align: 'left', search: true},
				{field: 'menu', title: 'Menu', sortable: false, width: 100, align: 'center', search: false, 
					rowStyler: function(rowData, rowIndex) {
						return menu(rowData, rowIndex);
					}
				}
			]
		});

		$(document).ready(function() {
			datagrid.run();
		});

		$('#btn-add').click(function(){
			$('.loading').show();
			$('.main-layer').hide();
			$.post("{!! route('formAddDtPernikahan') !!}").done(function(data){
				if(data.status == 'success'){
					$('.loading').hide();
					$('.other-page').html(data.content).fadeIn();
				} else {
					$('.main-layer').show();
				}
			});
		});

		function detail(rowIndex) {
			var id = datagrid.getRowData(rowIndex).id_pernikahan_pasangan;
			$.post("{!! route('detailDtPernikahan') !!}", {id:id}).done(function(data){
				if(data.status == 'success'){
					$('.modal-dialog').html(data.content);
				}
			});
		}

		function updated(rowIndex) {
			var rowData = datagrid.getRowData(rowIndex);
			$('.loading').show();
			$('.main-layer').hide();
			$.post("{!! route('formEditDtPernikahan') !!}", {id:rowData.id_pernikahan_pasangan}).done(function(data){
				if(data.status == 'success'){
					$('.loading').hide();
					$('.other-page').html(data.content).fadeIn();
				} else {
					$('.main-layer').show();
				}
			});
		}

		function tglRegis(rowData, rowIndex){
			var tgl = rowData.tgl_registrasi.split("-")
			var tag = tgl[2]+"-"+tgl[1]+"-"+tgl[0];
			return tag;
		}

		function menu(rowData, rowIndex) {
		    var level_user = {{ Sentinel::getUser()->level_user }};
			if(level_user == 7){
    			var menu = 
    				'<div class="btn-group">' + 
    				'<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i></a>' +
    				'<ul class="dropdown-menu pull-right">' +
    				'<li onclick="detail('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-eye"></i> Detail</a></li>' +
    				'<li onclick="updated('+rowIndex+')"><a href="javascript:void(0);"><i class="fa fa-pencil"></i> Edit</a></li>'+
    				'</ul>' +
    				'</div>';
			}else{
				var menu = '<a onclick="detail('+rowIndex+')" href="javascript:void(0);" class="btn btn-xs btn-primary"><i class="fa fa-eye"></i> Detail</a>';
			}
			return menu;
		}
	</script>
@stop