@extends('layout')

@section('js_script')	
	<script src="{{ url("/js/plugins/uploaders/fileinput/fileinput.min.js")}}"></script>
@endsection
@section('menu_bar')
<li><a class="sidebar-mobile-detached-toggle"><i class="icon-grid7"></i></a></li>
@endsection

@section('content')
<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="#"><i class="icon-home2 position-left"></i> User</a></li>
			<li class="active">Profil</li>
		</ul>
	</div>
</div>
<div class="col-lg-12">
<!-- Content area -->
<div class="content">
<div class="col-lg-3">

	<div class="sidebar-detached">
				<div class="sidebar sidebar-default sidebar-separate">
					<div class="sidebar-content">
				<div class="content-group">
					<div class="panel-body bg-slate-800 border-radius-top text-center" style="background-image: url(images/bg.png); background-size: contain;">
						<div class="content-group-sm">
						<h6 class="text-semibold no-margin-bottom">
							{{ ucwords($data['data']['nama'])}}
						</h6>
						<span class="display-block">( {{ucwords($data['data']['nama_lokasi'])}} )</span>
			</div>
			@php if($data['data']['foto'] == '' || $data['data']['foto'] == null){ @endphp
			<a href="#" class="display-inline-block content-group-sm">
				<img src="{{url('images/placeholders/placeholder.jpg')}}" class="img-circle img-responsive" alt="" 
				style="width: 110px; height: 110px;">
			</a>
			@php }else{ @endphp
			<a href="#" class="display-inline-block content-group-sm">
				<img src="{{url($data['data']['foto'])}}" class="img-circle img-responsive" alt="" 
				style="width: 110px; height: 110px;">
			</a>
			@php } @endphp
		</div>
			<div class="panel no-border-top no-border-radius-top">
				<ul class="navigation">
					<li class="navigation-header">Edit Profil
						<div class="pull-right"> 
						<a href="#edit_profile" data-toggle="tab" aria-expanded="false" class="icon-pencil7" title="Edit" onclick="edit_table()"></a>
						</div>
					</li>
					<li class="active">
						<a href="#profile" data-toggle="tab" aria-expanded="true"><i class="icon-files-empty"></i> Profile</a>
					</li>
					<!-- <li class="">
						<a href="#edit_password" data-toggle="tab" aria-expanded="false"><i class="icon-files-empty"></i> Lupa Password</a>
					</li> -->
				</ul>
			</div>
		</div>
			</div>
		</div>
	</div>

</div>

<div class="col-lg-9">
<!-- Detached content -->
					<div class="container-detached">
						<div class="content-detached">

							<!-- Tab content -->
							<div class="tab-content">
								<div class="tab-pane fade in active" id="profile">

									<!-- Profile info -->
									<div class="panel panel-flat">
										<div class="panel-heading">
											<h6 class="panel-title">Informasi Profil</h6>
											<div class="heading-elements">
												<ul class="icons-list">
							                		<li><a data-action="collapse"></a></li>
							                		<li><a data-action="reload"></a></li>
							                	</ul>
						                	</div>
										</div>

										<div class="panel-body">
											<span style="color: red;" class="info_barang"></span>
											<form class="form-horizontal" autocomplete="off">
								      			<div class="form-group">
								      				<label class="control-label col-sm-4">Nama Pengguna</label>
								      				<div class="col-sm-8">
								      					<input type="text" class="form-control" value="{{$data['data']['nama']}}" disabled="">
								      				</div>
								      			</div>
								      			<div class="form-group">
								      				<label class="control-label col-sm-4">Lokasi Produksi</label>
								      				<div class="col-sm-8">
								      					<input type="text" class="form-control" value="{{$data['data']['nama_lokasi']}}" disabled="">
								      				</div>
								      			</div>
								      			<div class="form-group">
								      				<label class="control-label col-sm-4">Proses Produksi</label>
								      				<div class="col-sm-8">								      					
								      					<i>
								      					@php for($i=0; $i < count($data['proses']); $i++){ @endphp
								      					{{$data['proses'][$i]}} <br>
								      					@php } @endphp
								      					</i>
								      				</div>
								      			</div>
								      			<div class="form-group">
								      				<label class="control-label col-sm-4">Gudang</label>
								      				<div class="col-sm-8">
								      					<b>
								      					@php for($i=0; $i < count($data['gudang']); $i++){ @endphp
								      					{{$data['gudang'][$i]}} <br>
								      					@php } @endphp
								      					</b>
								      				</div>
								      			</div>
								      			<div class="form-group">
								      				<label class="control-label col-sm-4">Foto Profil</label>
								      				<div class="col-sm-8">
								      					@php if($data['data']['foto'] == '' || $data['data']['foto'] == null){ @endphp
								      					<a href="#" class="display-inline-block content-group-sm" id="popup_namefoto">
																<img src="{{url('images/placeholders/placeholder.jpg')}}" class="img-circle img-responsive" alt="" 
																style="width: 110px; height: 110px;">
														</a>
								      					@php }else{ @endphp
								      					<a href="#" class="display-inline-block content-group-sm" id="popup_namefoto">
																<img src="{{url($data['data']['foto'])}}" class="img-circle img-responsive" alt="" 
																style="width: 110px; height: 110px;">
														</a>
														@php } @endphp
								      				</div>
								      			</div>
								      		</form>
										</div>
									</div>
									<!-- /profile info -->
								</div>

								<div class="tab-pane fade" id="edit_profile">

									<!-- Profile info -->
									<div class="panel panel-flat">
										<div class="panel-heading">
											<h6 class="panel-title">Edit Informasi Profil</h6>
											<div class="heading-elements">
												<ul class="icons-list">
							                		<li><a data-action="collapse"></a></li>
							                		<li><a data-action="reload"></a></li>
							                	</ul>
						                	</div>
										</div>

										<div class="panel-body">
											<span style="color: red;" class="info_barang"></span>
											<form class="form-horizontal form-validate-jquery" autocomplete="off" id="form_profil" enctype="multipart/form-data" action="{{url('myprofil/simpan')}}" method="POST">
												<input type="hidden" name="_token" value="{{ csrf_token() }}">
								      			<input type="hidden" name="popup_id_edit" value="{{$data['data']['kode_user']}}">
								      					<div class="form-group">
										      				<label class="control-label col-sm-4">Nama Pengguna</label>
										      				<div class="col-sm-8">
										      					<input type="text" name="popup_nama" class="form-control">
										      				</div>
										      			</div>
										      			<div class="form-group  div-foto">
										      				<label class="control-label col-sm-4">Foto</label>
										      				<div class="col-sm-8">
										      					<input type="hidden" name="popup_namefoto_hidden" value="{{$data['data']['foto']}}">
										      					@php if($data['data']['foto'] == '' || $data['data']['foto'] == null){ @endphp
								      					<a href="#" class="display-inline-block content-group-sm" id="popup_namefoto">
																<img src="{{url('images/placeholders/placeholder.jpg')}}" class="img-circle img-responsive" alt="" 
																style="width: 110px; height: 110px;">
														</a>
								      					@php }else{ @endphp
								      					<a href="#" class="display-inline-block content-group-sm" id="popup_namefoto">
																<img src="{{url($data['data']['foto'])}}" class="img-circle img-responsive" alt="" 
																style="width: 110px; height: 110px;">
														</a>
														@php } @endphp
										      				</div>
										      			</div>
										      			<div class="form-group">
										      				<label class="control-label col-sm-4" id="name-foto"></label>
										      				<div class="col-sm-8">
										      					<input type="file" class="file-input" name="popup_foto">
																<span>File Max. 1 MB (JPG. JPEG. PNG.)</span>
										      				</div>
										      			</div>
										      			
										      			<hr>
										      			<div class="form-group">
										      				<label class="control-label col-sm-4">Username <span class="text-danger">*</span></label>
										      				<div class="col-sm-8">
										      					<input type="text" name="popup_username"  class="form-control" readonly="">
										      				</div>
										      			</div>
										      			<div class="form-group">
										      				<label class="control-label col-sm-4">Konfirmasi Password <span class="text-danger">*</span></label>
										      				<div class="col-sm-8">
										      					<input type="hidden" name="popup_password" id="password" class="form-control" value="{{$data['data']['password']}}">
										      					<div class="input-group">
										      					<input type="password" name="popup_repassword" id="re_password" class="form-control" placeholder="Minimun 5 karakter">
										      					<span class="input-group-addon toggle-password" toggle="#re_password"><i id="icon-mata" class="fa fa-eye"></i></span>
										      					</div>
										      				</div>
										      			</div>
										      			<input type="hidden" name="e_id" value="{{$data['data']['kode_user']}}">
										      			<input type="hidden" name="e_nama" value="{{$data['data']['nama']}}">
										      			<input type="hidden" name="e_username" value="{{$data['data']['username']}}">
										      			<input type="hidden" name="e_password" value="{{$data['data']['password']}}">
										      			<input type="hidden" name="e_foto" value="{{$data['data']['foto']}}">
										      			<div class="form-group pull-right">
										      				<button class="btn btn-primary" type="submit">Simpan</button> 
										      			</div>
								      		</form>
										</div>
									</div>
									<!-- /profile info -->
								</div>

								<div class="tab-pane fade" id="edit_password">

									<!-- Profile info -->
									<div class="panel panel-flat">
										<div class="panel-heading">
											<h6 class="panel-title">Profile information</h6>
											<div class="heading-elements">
												<ul class="icons-list">
							                		<li><a data-action="collapse"></a></li>
							                		<li><a data-action="reload"></a></li>
							                	</ul>
						                	</div>
										</div>

										<div class="panel-body">
											<form class="form-horizontal" autocomplete="off" id="form_user">
												<label class="control-label col-sm-4">Password</label>
												<div class="col-sm-8">
													<div class="input-group">
													<input type="password" name="lihat_password" id="lihat_password" class="form-control" placeholder="Minimun 5 karakter" value="{{$data['data']['password']}}" disabled="">
										      		<span class="input-group-addon toggle-password-lihat" toggle="#lihat_password"><i id="icon-mata-lihat" class="fa fa-eye"></i></span>
										      		</div>
												</div>
								      		</form>
										</div>
									</div>
									<!-- /profile info -->
								</div>


							</div>
							<!-- /tab content -->

						</div>
					</div>
					<!-- /detached content -->
</div>
</div>
</div>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		var id = $("[name=popup_id_edit]").val();
		
		$(".toggle-password").click(function() {
		  $("#icon-mata").toggleClass("fa-eye fa-eye-slash");
			  var input = $($(this).attr("toggle"));
			  if (input.attr("type") == "password") {
			    input.attr("type", "text");
			  } else {
			    input.attr("type", "password");
			  }

		});

		$(".toggle-password-lihat").click(function() {
		  $("#icon-mata-lihat").toggleClass("fa-eye fa-eye-slash");
			  var input = $($(this).attr("toggle"));
			  if (input.attr("type") == "password") {
			    input.attr("type", "text");
			  } else {
			    input.attr("type", "password");
			  }

		});

		$('.file-input').fileinput({
        browseLabel: 'browse',
        browseIcon: '<i class="icon-file-plus"></i>',
        uploadIcon: '<i class="icon-file-upload2"></i>',
        removeIcon: '<i class="icon-cross3"></i>',
        layoutTemplates: {
            icon: '<i class="icon-file-check"></i>',
            modal: modalTemplate
        },
        initialCaption: "No file selected",
        previewZoomButtonClasses: previewZoomButtonClasses,
        previewZoomButtonIcons: previewZoomButtonIcons,
        fileActionSettings: fileActionSettings
    });


	});

	function edit_table(){
		var id 			= $("[name=popup_id_edit").val();
		var nama 		= $("[name=e_nama]").val();
		var username 	= $("[name=e_username]").val();
		var kelamin 	= $("[name=e_kelamin]").val();
		var foto 		= $("[name=e_foto").val();

		$("[name=popup_id]").val(id);
		$("[name=popup_nama]").val(nama);
		$("[name=popup_username]").val(username);
		$("input:radio[name=popup_kelamin][value="+kelamin+"]")[0].checked=true;
		$('[name=popup_namefoto]').hide();
		
		$(".control-primary").uniform({
        wrapperClass: 'border-primary-400 text-primary-600'
    });
	}

	$("[name=popup_foto]").change(function(){
			var d_foto = $(this).val();			
			if(d_foto==''){
				$('#name-foto').text('');
				$('.div-foto').show();
			}else{
				$('#name-foto').text('Foto');
				$('.div-foto').hide();
			}
			
	});

// Setup validation
    // ------------------------------=

    // Initialize
    var validator = $(".form-validate-jquery").validate({
        errorClass: 'validation-error-label',
        successClass: 'validation-valid-label',
        highlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
        },
        errorPlacement: function(error, element) {

            // Styled checkboxes, radios, bootstrap switch
            if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container') ) {
                if(element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo( element.parent().parent().parent().parent() );
                }
                 else {
                    error.appendTo( element.parent().parent().parent().parent().parent() );
                }
            }

            // Unstyled checkboxes, radios
            else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                error.appendTo( element.parent().parent().parent() );
            }

            // Input with icons and Select2
            else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                error.appendTo( element.parent() );
            }

            // Inline checkboxes, radios
            else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                error.appendTo( element.parent().parent() );
            }

            // Input group, styled file input
            else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                error.appendTo( element.parent().parent() );
            }

            else {
                error.insertAfter(element);
            }
        },
        validClass: "validation-valid-label",
        success: function(label) {
            label.addClass("validation-valid-label").text("Success.")
        },
        rules: {
            popup_password: {
                minlength: 5
            },
            popup_repassword: {
                equalTo: "[name=popup_password]"
            }            
        }
    });

    // Reset form
    $('#reset').on('click', function() {
        validator.resetForm();
    });

     var modalTemplate = '<div class="modal-dialog modal-lg" role="document">\n' +
        '  <div class="modal-content">\n' +
        '    <div class="modal-header">\n' +
        '      <div class="kv-zoom-actions btn-group">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
        '      <h6 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h6>\n' +
        '    </div>\n' +
        '    <div class="modal-body">\n' +
        '      <div class="floating-buttons btn-group"></div>\n' +
        '      <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
        '    </div>\n' +
        '  </div>\n' +
        '</div>\n';

    // Buttons inside zoom modal
    var previewZoomButtonClasses = {
        toggleheader: 'btn btn-default btn-icon btn-xs btn-header-toggle',
        fullscreen: 'btn btn-default btn-icon btn-xs',
        borderless: 'btn btn-default btn-icon btn-xs',
        close: 'btn btn-default btn-icon btn-xs'
    };

    // Icons inside zoom modal classes
    var previewZoomButtonIcons = {
        prev: '<i class="icon-arrow-left32"></i>',
        next: '<i class="icon-arrow-right32"></i>',
        toggleheader: '<i class="icon-menu-open"></i>',
        fullscreen: '<i class="icon-screen-full"></i>',
        borderless: '<i class="icon-alignment-unalign"></i>',
        close: '<i class="icon-cross3"></i>'
    };

    // File actions
    var fileActionSettings = {
        zoomClass: 'btn btn-link btn-xs btn-icon',
        zoomIcon: '<i class="icon-zoomin3"></i>',
        dragClass: 'btn btn-link btn-xs btn-icon',
        dragIcon: '<i class="icon-three-bars"></i>',
        removeClass: 'btn btn-link btn-icon btn-xs',
        removeIcon: '<i class="icon-trash"></i>',
        indicatorNew: '<i class="icon-file-plus text-slate"></i>',
        indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
        indicatorError: '<i class="icon-cross2 text-danger"></i>',
        indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>'
    };


	
</script>



@endsection