@extends('layouts.app')
@include('plugins.dropify')
 @push('css')
<style type="text/css">
.modal-open .select2-container {
    z-index: 1039 !important;
}
</style>
@endpush
 @push('css')
<style type="text/css">
.modal-open .select2-container {
    z-index: 1039 !important;
}
</style>
@endpush
@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">Inbox</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        {{ Breadcrumbs::render('menuconfiguration') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">Inbox</h2>
                    </div>
                    <div class="card-body">
						<form id='form-edit' role="form" method="post" action="{{ route('profile') }}">
							<div class="row">
								<div class="col-md-4">
									<input type="file" class="dropify" name="picture_url" @if(auth()->user()->picture_url)data-default-file="{{ route('profile.picture', 'avatar.jpg') }}" @endif data-allowed-file-extensions="jpg png gif jpeg" data-max-file-size="5M"/>
									<br>
									<a class="btn btn-secondary btn-block m-t-10 text-white" onclick="passwordData()"><i class="la la-lock m-r-5"></i> Update Password</a>
								</div>
								<div class="col-md-8">
									<h3 class=''>User Profile</h3>
									<p class="small hint-text m-b-20">
										Update your profile in form below.
									</p>
									
									<div class="row">        				
										<div class="col-md-12 padding-0">
											<div class="form-group form-group-default required" aria-required="true">
												<label>
													<span id="label_name" style="">Full Name</span>
														</label>
												<input id="name" class="form-control valid" name="name" placeholder="" required="" type="text" value="{{auth()->user()->name}}" aria-required="true" aria-invalid="false">
											</div>

											<div class="form-group form-group-default required" aria-required="true">
												<label>
													<span id="label_name" style="">Email Address</span>
													<i style="cursor: help; color: #48B0F7;" class="la la-question-circle info_business_email " data-html="true" data-toggle="tooltip" title="This field cannot be updated"></i>
												</label>
												<input id="email" class="form-control valid" name="email" placeholder="" required="" type="text" value="{{ auth()->user()->email }}" aria-required="true" aria-invalid="false">
											</div>
										</div>
									 </div>
									<div class="row mb-3">
										<div class="col-md-12">
											<a type="button" class="btn btn-info pull-right text-white" onclick="submitForm('form-edit')"><i class="la la-check mr-1"></i> Save</a>
										</div>
									</div>
								</div>	        	
							</div>
						</form>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

@endsection
 @push('modal')
<!-- Modal -->
<div class="modal fade" id="modal-handover" tabindex="-1" role="dialog" aria-labelledby="addModalTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addModalTitle">Serahan <span class="bold">Tugas</span></h5>
                <small class="text-muted">Sila isi maklumat pada ruangan di bawah.</small>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body m-t-20">
            	<form id='form-handover' role="form" method="post" action="{{ route('profile.handover') }}">
                @include('components.input', [
                    'name' => 'new_email',
                    'label' => 'Email Setiausaha Baru',
                    'mode' => 'required',
                    'modal' => true,
                    'type' => 'email',
                ])
            	</form>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-info" onclick="submitForm('form-handover')"><i class="la la-check m-r-5"></i> Hantar</button>
            </div>
        </div>
    </div>
</div>
@endpush
 @push('js')
<script type="text/javascript">
	$('.dropify').dropify({
        messages: {
            'default': 'Upload profile picture, Only in JPEG & PNG format allowed with size no larger than 2MB',
        }
    });
 	$("#form-edit").validate();
 	function handOver() {
		$("#modal-handover").modal("show");
		$("#form-handover").validate();
		$("#form-handover").trigger("reset");
	}
 	$("form").submit(function(e) {
	    e.preventDefault();
	    var form = $(this);
 	    if(!form.valid())
	       return;
 	    $.ajax({
	        url: form.attr('action'),
	        method: form.attr('method'),
	        data: new FormData(form[0]),
	        dataType: 'json',
	        async: true,
	        contentType: false,
	        processData: false,
	        success: function(data) {
	            swal(data.title, data.message, data.status);
				$("#modal-handover").modal("hide");
	        }
	    });
	});

	$('body').on('keyup','input#name',function(){
		
	    $(this).val( $(this).val().toUpperCase() );

	})  


</script>
@endpush