@extends('layout.master', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Kompaun')
@section('sub_page_title', '')
@section('name', $user->StaffDetail->full_name)
@section('img_profile', $user->StaffDetail->profile_img)

@section('content')
<style type="text/css">
	.social-timeline-left {
    	top: 0px !important; 
	}
	.social-timeline-left {
	    top: 0px !important; 
	}
</style>
<div class="row">
	<div class="row">
		<div class="col-md-12">
			<div class="fluid">
				@if(count($errors) > 0)
				<div class="alert alert-danger icons-alert">
					@foreach($errors->all() as $error)
					<p>{{$error}}</p>
					@endforeach
				</div>
				@endif

				@if(Session::get('error_msg'))
				<div class="alert alert-danger icons-alert">
					{!! Session::get('error_msg') !!}
				</div>
				@elseif(Session::get('success_msg'))
				<div class="alert alert-success icons-alert">
					{!! Session::get('success_msg') !!}
				</div>
				@endif
			</div>
		</div>
	</div>

	<div class="col-sm-12">
		<div>
			<div class="content social-timeline">
				<div class="">
					<!-- Row Starts -->
					<div class="row">
						<div class="col-xl-3 col-lg-4 col-md-4 col-xs-12">
							<!-- Social timeline left start -->
							<div class="social-timeline-left">
								<!-- social-profile card start -->
								<div class="card">
									<div class="social-profile">
										<code>Saiz gambar disyorkan: <b>350W x 330H (px)</b></code>
										<img class="img-fluid width-100" src="{{ $staff->profile_img }}" alt="">
									</div>
									<div class="card-block social-follower">
										<h4>{{ $staff->full_name }}</h4>
										<h5>{{ $staff->no_badan }} | {{ $staff->gred }}</h5>
									</div>
								</div>
								<!-- social-profile card end -->
							</div>
							<!-- Social timeline left end -->
						</div>
						<div class="col-xl-9 col-lg-8 col-md-8 col-xs-12 ">
							<div class="row">
								<div class="col-sm-12">
									<div class="card">
										<div class="card-header">
											<h5 class="card-header-text">Maklumat Asas</h5>
											@if($user->_id == $_id)
											<button id="edit-btn" type="button" class="btn btn-sm btn-outline-danger waves-effect waves-light f-right">
												<i class="icofont icofont-edit"></i>
											</button>
											@endif
										</div>
										<div class="card-block">
											<div id="view-info" class="row">
												<div class="col-lg-6 col-md-12">
													<form>
														<table class="table table-responsive m-b-0">
															<tr>
																<th class="social-label b-none p-t-0">Nama Penuh
																</th>
																<td class="social-user-name b-none p-t-0 text-muted">{{ $staff->full_name }}</td>
															</tr>
															<tr>
																<th class="social-label b-none">NRIC</th>
																<td class="social-user-name b-none text-muted">{{ $staff->identity }}</td>
															</tr>
															<tr>
																<th class="social-label b-none">Telephone</th>
																<td class="social-user-name b-none text-muted">{{ $staff->mobile }}</td>
															</tr>
														</table>
													</form>
												</div>
											</div>
											<div id="edit-info" class="row">
												<div class="col-lg-12 col-md-12">
													<form class="form-material" method="POST" action="{{ url('/main/update/basic/profile') }}"  enctype="multipart/form-data">
														<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
														<input type="hidden" name="_id" id="_id" value="{{ $user->_id }}" />
														<div class="form-group form-primary">
															<input name="profil" id="profil" type="file" class="form-control form-control-sm" />
															<span class="form-bar"></span>
															<label class="float-label">Gambar Profil</label>
														</div>
														<div class="form-group form-primary">
															<input type="text" name="full_name" class="form-control" required="" value="{{ $staff->full_name }}">
															<span class="form-bar"></span>
															<label class="float-label">Nama Penuh <code>*</code></label>
														</div>
														<div class="form-group form-primary">
															<input type="text" name="identity" class="form-control" required="" value="{{ $staff->identity }}">
															<span class="form-bar"></span>
															<label class="float-label">NRIC <code>*</code></label>
														</div>
														<div class="form-group form-primary">
															<input type="text" name="mobile" class="form-control" required="" value="{{ $staff->mobile }}">
															<span class="form-bar"></span>
															<label class="float-label">Telephone <code>*</code></label>
														</div>
														<div class="f-right m-t-20">
															<button type="submit" class="btn btn-sm btn-outline-danger waves-effect waves-light m-r-20">Kemaskini maklumat asas</button>
															<a href="javascript:;" id="edit-cancel" class="btn btn-sm btn-default waves-effect waves-light">Batal</a>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-12">
									<div class="card">
										<div class="card-header">
											<h5 class="card-header-text">Kerja</h5>
											@if($user->_id == $_id)
											<button id="edit-Contact" type="button" class="btn btn-sm btn-outline-danger waves-effect waves-light f-right">
												<i class="icofont icofont-edit"></i>
											</button>
											@endif
										</div>
										<div class="card-block">
											<div id="contact-info" class="row">
												<div class="col-lg-12 col-md-12">
													<table class="table table-responsive m-b-0">
														<tr>
															<th class="social-label b-none p-t-0">Jabatan</th>
															@if(!empty($myDepartment))
															<td class="social-user-name b-none p-t-0 text-muted">
																@foreach($myDepartment as $m)
																{{ $m->jbkod }},
																@endforeach
															</td>
															@else
															<td class="social-user-name b-none p-t-0 text-muted">-</td>
															@endif
														</tr>
														<tr>
															<th class="social-label b-none">Jawatan</th>
															<td class="social-user-name b-none text-muted">{{ $staff->roles_access }}</td>
														</tr>
														<tr>
															<th class="social-label b-none">Gred Jawatan</th>
															<td class="social-user-name b-none text-muted">{{ $staff->gred }}</td>
														</tr>
														<tr>
															<th class="social-label b-none">No. Badan</th>
															<td class="social-user-name b-none text-muted">{{ $staff->no_badan }}</td>
														</tr>
													</table>
												</div>
											</div>
											<div id="edit-contact-info" class="row">
												<div class="col-lg-12 col-md-12">
													<form class="form-material" method="POST" action="{{ url('/main/update/work/profile') }}">
														<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
														<input type="hidden" name="_id" id="_id" value="{{ $user->_id }}" />
														<!-- <div class="form-group form-primary">
															<select id="job" name="jbkod" class="form-control">
																<option value="">Sila Pilih Jabatan</option>
																@foreach($department as $d)
																<option value="{{ $d->jbkod }}">[{{ $d->jbkod }}] {{ $d->jnama }}</option>
																@endforeach
															</select>
															<span class="form-bar"></span>
															<label class="float-label">Senarai Jabatan <code>*</code></label>
														</div> -->
														<div class="form-group form-primary">
															<input type="text" name="gred" class="form-control" required="" value="{{ $staff->gred }}">
															<span class="form-bar"></span>
															<label class="float-label">Gred Jawatan <code>*</code></label>
														</div>
														<div class="form-group form-primary">
															<input type="text" name="no_badan" class="form-control" required="" value="{{ $staff->no_badan }}">
															<span class="form-bar"></span>
															<label class="float-label">No. Badan <code>*</code></label>
														</div>
														<div class="f-right m-t-20">
															<button type="submit" class="btn btn-sm btn-outline-danger waves-effect waves-light m-r-20">Kemaskini maklumat kerja</button>
															<a href="javascript:;" id="contact-cancel" class="btn btn-sm btn-default waves-effect waves-light">Batal</a>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
								@if($user->_id == $_id)
								<div class="col-sm-12">
									<div class="card">
										<div class="card-header">
											<h5 class="card-header-text">Kemaskini Kata Laluan</h5>
										</div>
										<div class="card-block">
											<div id="work-info" class="row">
												<div class="col-lg-6 col-md-12">
													<form class="form-material" method="POST" action="{{ url('/main/update/password/profile') }}">
														<input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
														<input type="hidden" name="_id" id="_id" value="{{ $user->_id }}" />
														<div class="form-group form-primary">
															<input type="text" name="password" class="form-control" required="">
															<span class="form-bar"></span>
															<label class="float-label">Kata Laluan <code>*</code></label>
														</div>
														<div class="form-group form-primary">
															<input type="text" name="password_confirmation" class="form-control" required="">
															<span class="form-bar"></span>
															<label class="float-label">Tulis Semula Kata Laluan <code>*</code></label>
														</div>
														<div class="f-right m-t-20">
															<button type="submit" class="btn btn-sm btn-outline-danger waves-effect waves-light m-r-20">Kemaskini kata-laluan</button>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
								@endif
							</div>
							<!-- Row end -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('external_js')
<script type="text/javascript">
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	$(document).ready(function() {

		var origin   = window.location.origin; 

		$(".theme-loader").animate({
			opacity: "0"
		},1000);
		setTimeout(function() {
			$(".theme-loader").remove();
		}, 800);

		$('[data-toggle="tooltip"]').tooltip();

		//    Edit information
      $('#edit-info').hide();

      $('#edit-cancel').on('click', function() {
          var c = $('#edit-btn').find("i");
          c.removeClass('icofont-close');
          c.addClass('icofont-edit');
          $('#view-info').show();
          $('#edit-info').hide();
      });

      $('#edit-save').on('click', function() {
          var c = $('#edit-btn').find("i");
          c.removeClass('icofont-close');
          c.addClass('icofont-edit');
          $('#view-info').show();
          $('#edit-info').hide();
      });


      $('#edit-btn').on('click', function() {
          var b = $(this).find("i");
          var edit_class = b.attr('class');
          if (edit_class == 'icofont icofont-edit') {
              b.removeClass('icofont-edit');
              b.addClass('icofont-close');
              $('#view-info').hide();
              $('#edit-info').show();
          } else {
              b.removeClass('icofont-close');
              b.addClass('icofont-edit');
              $('#view-info').show();
              $('#edit-info').hide();
          }
      });


      //    Edit contact
      $('#edit-contact-info').hide();

      $('#contact-save').on('click', function() {
          var c = $('#edit-Contact').find("i");
          c.removeClass('icofont-close');
          c.addClass('icofont-edit');
          $('#contact-info').show();
          $('#edit-contact-info').hide();
      });

      $('#contact-cancel').on('click', function() {
          var c = $('#edit-Contact').find("i");
          c.removeClass('icofont-close');
          c.addClass('icofont-edit');
          $('#contact-info').show();
          $('#edit-contact-info').hide();
      });

      $('#edit-Contact').on('click', function() {
          var b = $(this).find("i");
          var edit_class = b.attr('class');
          if (edit_class == 'icofont icofont-edit') {
              b.removeClass('icofont-edit');
              b.addClass('icofont-close');
              $('#contact-info').hide();
              $('#edit-contact-info').show();
          } else {
              b.removeClass('icofont-close');
              b.addClass('icofont-edit');
              $('#contact-info').show();
              $('#edit-contact-info').hide();
          }
      });

      //    Edit work
      $('#edit-contact-work').hide();

      $('#work-save').on('click', function() {
          var c = $('#edit-work').find("i");
          c.removeClass('icofont-close');
          c.addClass('icofont-edit');
          $('#work-info').show();
          $('#edit-contact-work').hide();
      });

      $('#work-cancel').on('click', function() {
          var c = $('#edit-work').find("i");
          c.removeClass('icofont-close');
          c.addClass('icofont-edit');
          $('#work-info').show();
          $('#edit-contact-work').hide();
      });

      $('#edit-work').on('click', function() {
          var b = $(this).find("i");
          var edit_class = b.attr('class');
          if (edit_class == 'icofont icofont-edit') {
              b.removeClass('icofont-edit');
              b.addClass('icofont-close');
              $('#work-info').hide();
              $('#edit-contact-work').show();
          } else {
              b.removeClass('icofont-close');
              b.addClass('icofont-edit');
              $('#work-info').show();
              $('#edit-contact-work').hide();
          }
      });

	});
</script>
@endsection