@extends('layouts.frontend')

@section('content')
<div class="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="page-title">My PROFILE</h2>
            </div>
        </div>
    </div>
    <a href="#" class="btn-chat">Chat With Us</a>
</div>
<section class="main-sec">
	<div class="container">
    	<div class="row">
            <div class="col-md-3">
                <div class="lft-pnl2">
                    <ul id="menulist">
                        <li class="active"><a href="{{route('account.profile')}}">My Profile</a></li>
                        <li class=""><a href="{{route('account.display-settings')}}">Display Settings</a></li>
                        <li class=""><a href="{{route('account.subscription.index')}}">Subscriptions</a></li>
                        <li class=""><a href="{{route('change.password.index')}}">Change Password</a></li>
                        <li class=""><a href="{{route('logout')}}">Logout</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9">     
                <div class="stage">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                @if ($message = Session::get('success'))
                                    <div class="alert alert-success alert-block">
                                        <button type="button" class="close" data-dismiss="alert">×</button>	
                                            <strong>{{ $message }}</strong>
                                    </div>
                                    @endif


                                    @if ($message = Session::get('error'))
                                    <div class="alert alert-danger alert-block">
                                        <button type="button" class="close" data-dismiss="alert">×</button>	
                                            <strong>{{ $message }}</strong>
                                    </div>
                                    @endif
                                <form action="{{route('account.profile.update',['id'=> $user->id])}}" method="post" enctype="multipart/form-data">
                                @csrf
                                        <div class="form-row">
                                            <div class="col-lg-12">
                                                <h4>Personal Information</h4>
                                            </div>
                                            <div class="col-lg-6">
                                                 <div class="form-group">
                                                    <label>Name</label>
                                                    <input type="text" name="name" class="form-control" value="{{old('name',isset($user->name)?$user->name:'')}}">
                                                    @if ($errors->has('name'))
                                                        <div class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('name') }}</strong>
                                                        </div>
                                                    @endif
                                                </div>  
                                            </div>
                                            <div class="col-lg-6">
                                                 <div class="form-group">
                                                    <label>Phone No</label>
                                                    <input type="text" name="phone_no" class="form-control" value="{{old('phone_no',isset($user->phone_no)?$user->phone_no:'')}}">
                                                    @if ($errors->has('phone_no'))
                                                        <div class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('phone_no') }}</strong>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                 <div class="form-group">
                                                    <label>Email address</label>
                                                    <input type="email" name="email" class="form-control" value="{{old('email',isset($user->email)?$user->email:'')}}" disabled="">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                 <div class="form-group">
                                                    <label>City</label>
                                                    <input type="text" name="city" class="form-control" value="{{old('city',isset($user->city)?$user->city:'')}}">
                                                    @if ($errors->has('city'))
                                                        <div class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('city') }}</strong>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                 <div class="form-group">
                                                    <label>Company Name</label>
                                                    <input type="text" name="company_name" class="form-control" value="{{old('company_name',isset($user->company_name)?$user->company_name:'')}}">
                                                    @if ($errors->has('company_name'))
                                                        <div class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('company_name') }}</strong>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                            
                                            <!-- <div class="col-lg-6">
                                                 <div class="form-group">
                                                    <label>Logo </label>
                                                    <input type="file" name="company_logo" class="form-control" >
                                                    @if ($errors->has('company_logo'))
                                                        <div class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('company_logo') }}</strong>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div> -->

                                            <div class="col-lg-6">
                                                 <div class="form-group">
                                                    <label>Logo </label>
                                                    <input type="file" id="upload_image" class="form-control" name="company_logo_old" />
                                                    <br />
                                                    <div id="uploaded_image"></div>
                                                    @if ($errors->has('company_logo'))
                                                        <div class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('company_logo') }}</strong>
                                                        </div>
                                                    @endif
                                                    
                                                    <div class="note-for-logo">Note: Please follow the instruction to upload the logo <button type="button" class="btn btn-info instruction-btn" data-toggle="modal" data-target="#myModal">Click here</button> </div>
                                                </div>
                                            </div>


                                            @if(!empty($user->company_logo))
                                            <div class="col-lg-6">
                                                 <img width="250px" src="{{url('uploads/logo')}}/{{$user->company_logo}}">
                                            </div>
                                            @endif
                                            <div class="col-lg-12">
                                                <button type="submit" class="btn btn-primary btn-round">Update Profile</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- <div class="btm-shape-prt">
    	<img class="img-fluid" src="images/shape2.png" alt="" />
    </div> -->
</section>
<style>
.invalid-feedback {
    display:block;
}
</style>

<!--<div id="myModal" class="modal-dialog modal-lg" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Logo Instruction</h4>
      </div>
      <div class="modal-body">
        <img width="475px" src="{{url('f/images/instruction.png')}}">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>-->

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Logo Instruction</h4>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          <img class="instruction" src="{{url('f/images/instruction.png')}}">
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>


<div id="uploadimageModal" class="modal" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
      		<div class="modal-header">
        		<!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
        		<!--<h4 class="modal-title">Upload & Crop Logo</h4>-->
      		</div>
      		<div class="modal-body">
        		<div class="row">
  					<div class="col-md-12 text-center">
						  <div id="image_demo" style="width:350px; margin-top:30px"></div>
  					</div>
  					<div class="col-md-12" style="padding-top:30px;">
						  <button class="btn btn-success crop_image">Crop & Upload Logo</button>
					</div>
				</div>
      		</div>
      		<div class="modal-footer">
        		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      		</div>
    	</div>
    </div>
</div>

<style>
    .instruction{
        width:100%;
    }
</style>

@endsection
@section("js_after")
<script>  
$(document).ready(function(){

	$image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:300,
      height:150,
      type:'square' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });

  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimageModal').modal('show');
  });

    $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }

    });
  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
        console.log(response);
        var base_url = window.location.origin;
      $.ajax({
        url: base_url+'/logo-crop',
        //url:"