@extends('layouts.master')
@section('memberEditBio')
<div class="container">
    <div class="row justify-content-center">

        <div class="col-md-12">
            <div class="card">
                <div class="card-header"><h2>{{$userDetails->sname}} {{$userDetails->fname}} <span>Profile</span> </h2></div>
                <div class="card-body">

                     @if ($msg = Session::get('ok'))
                        <div class="alert alert-success alert-block">
                            <button type="button" class="close" data-dismiss="alert">×</button>

                            <strong>{{ $msg }}</strong>
                        </div>
                    @endif
                    @if (Session::get('no'))
                        <div class="alert alert-danger">
                            <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        </div>
                    @endif

                    <div class="container bootstrap snippet">
                        <div class="row">
                            <div class="col-sm-3"><!--left col-->

                                <form action="{{ route('updateDetails') }}" enctype="multipart/form-data" method="POST">

                                    @csrf
                                    <div class="text-center">
                                                                                      <img src="{{asset('image/avatar5.png')}}" class="img-circle elevation-2" alt="User Image">
                                              
                                    <input type="hidden" name="image_name" value="{{$userDetails->image_name}}">
                                    
                                    </div></hr><br>
                                    </div><!--/col-3-->
                                    <div class="col-sm-9">
                                        
                                       <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4>Title</h4></label>
                                                <input type="text" value="{{$userDetails->title}}"class="form-control" name="title" id="title" disabled>
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4>First Name</h4></label>
                                                <input type="text" value="{{$userDetails->fname}}"class="form-control" name="fname" id="fname" placeholder="first name" title="enter your first name if any." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4>Middle Name</h4></label>
                                                <input value="{{$userDetails->mname}}" type="text" class="form-control" name="mname" id="mname" placeholder="middle name" title="enter your middle name if any." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> Surname</h4></label>
                                                <input value="{{$userDetails->sname}}" type="text" class="form-control" name="sname" id="sname" placeholder="surname" title="enter your surname if any." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> State/Province</h4></label>
                                                <input value="{{$userDetails->province}}" type="text" class="form-control" name="province" id="province" placeholder="state/province" title="enter your state/province if any." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> Country</h4></label>
                                                <input value="{{$userDetails->country}}" type="text" class="form-control" name="country" id="country" placeholder="country" title="enter your country if any." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> Town or City</h4></label>
                                                <input value="{{$userDetails->city}}" type="text" class="form-control" name="city" id="city" placeholder="city" title="enter your City or Town" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> Street Number</h4></label>
                                                <input value="{{$userDetails->stnumber}}" type="text" class="form-control" name="stnumber" id="stnumber" placeholder="Street Number" title="enter your Street Number" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> Street Name</h4></label>
                                                <input value="{{$userDetails->sname}}" type="text" class="form-control" name="stname" id="stName" placeholder="Street Name" title="enter your Street name" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> Post Code</h4></label>
                                                <input value="{{$userDetails->pcode}}" type="text" class="form-control" name="pcode" id="pcode" placeholder="pcode" title="enter your Post Code" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4> Post Box</h4></label>
                                                <input value="{{$userDetails->pbox}}" type="text" class="form-control" name="pbox" id="pbox" placeholder="pbox" title="enter your Post Box" disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">

                                            <div class="col-xs-6">
                                                <label><h4>Phone</h4></label>
                                                <input value="{{$userDetails->phone}}" type="text" class="form-control" name="phone" id="phone" placeholder="enter phone" title="enter your phone number if any." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4>Mobile</h4></label>
                                                <input value="{{$userDetails->mobile}}" type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-xs-6">
                                                <label><h4>Email</h4></label>
                                                <input value="{{$userDetails->email}}" type="email" class="form-control" name="email" id="email" placeholder="you@email.com" title="enter your email." disabled>
                                            </div>
                                        </div>
                                        <div class="form-group">

                                            <div class="col-xs-6">
                                                <label><h4>Bio</h4></label>
                                                <textarea disabled class="form-control gc-pic-textarea gc-pic-textarea" name="user_bio"  placeholder='Write a comment'>{{$userDetails->user_bio}}</textarea>

            								<button type="button" onclick="editBioFuntion('{{$userDetails->id}}')" class='pull-right'><span><i class="fa fa-pencil" aria-hidden="true"></i></span></button>
                                            </div>
                                        </div>
                                       
                                        <div class="form-group">
                                            <div class="col-xs-12">
                                                <br>
                                                <button class="btn btn-lg btn-success pull-right" type="submit">{{ __('Apply') }}</button>
                                            </div>
                                        </div>
                                </form>


                            </div><!--/col-9-->
                        </div><!--/row-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

	@section('scripts')

	<script>

	    function editBioFuntion(id) {
	       
           swal("Write your bio here:", {
              content: "input",
            })
            .then((value) => {
                $.ajax({
                            type: "POST",
                            url: '/editUserBio',
                            data: {id: id, editBio:value},
                            success: function( msg ) {
                                $(document).ajaxStop(function() { location.reload(true); });
                                // alert("Poof! This Comment has been Edited!");
                            }
                        });

            });
	    }


	</script>
	@endsection