@extends('layouts.admin')
@section('content')

<div class="row gap-20 masonry pos-r">
  	<div class="masonry-sizer col-md-12"></div>

  	<!-- <div class="masonry-item col-md-12">
	    <div class="bgc-white p-20 bd">
	      <h6 class="c-grey-900">Change Email</h6>
	      	@if (session('email-error'))
	      		<div class="alert alert-danger alert-dismissible fade show" role="alert">
				  	{{ session('email-error') }}
				  	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
				</div>
            @endif
            @if (session('email-success'))
            	<div class="alert alert-success alert-dismissible fade show" role="alert">
				  	{{ session('email-success') }}
				  	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
				</div>
            @endif
            
	      	<div class="mT-30">
		        <form class="form-horizontal submitChangeEmailForm" method="POST" action="{{ url('admin/update-email') }}">
			        @csrf
			        <div class="mb-3">
			            <label class="form-label" for="exampleInputEmail1">Email <span class="bg-red">*</span></label>
			            <input type="email" class="form-control" name="email" value="{{ (!empty(Auth::user()->email)) ? Auth::user()->email : old('email') }}" placeholder="Email">
			        </div>
			        <button type="submit" class="btn btn-primary btn-color" id="saveEmailButton">Submit</button>
		        </form>
	      	</div>
	    </div>
  	</div> -->

	<!-- Change Password -->

	<div class="masonry-item col-md-12">
	    <div class="bgc-white p-20 bd">
			<h6 class="c-grey-900">{{__('labels.setting.change')}}</h6>
			@if (session('error'))
				<div class="alert alert-danger alert-dismissible fade show" role="alert">
					{{ session('error') }}
					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
				</div>
			@endif
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
				  	{{ session('success') }}
				  	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
				</div>
            @endif

	      	<div class="mT-10">
		        <form class="form-horizontal submitChangePasswordForm" method="POST" action="{{ url('change-password') }}">
			        @csrf
			        <div class="mb-3">
			            <label class="form-label" for="exampleInputEmail1">{{__('labels.setting.current')}} <span class="text-danger">*</span></label>
			            <input id="current-password" type="password" class="form-control" name="current-password" value="{{old('current-password')}}" required>
						<div class="show-password">
							<label>
								<input type="checkbox" onclick="passwordVisibility('current-password')"> {{__('labels.setting.show')}}
							</label>
						</div>
			            @if ($errors->has('current-password'))
							<div class="help-block text-danger mt-1">
								<strong>{{ $errors->first('current-password') }}</strong>
							</div>
						@endif
			        </div>

			        <div class="mb-3">
						<label class="form-label" for="exampleInputEmail1">{{__('labels.setting.new')}} <span class="text-danger">*</span></label>
			            <input id="new-password" type="password" class="form-control" name="new-password" required value="{{old('new-password')}}">
						<div class="show-password">
							<label>
								<input type="checkbox" onclick="passwordVisibility('new-password')"> {{__('labels.setting.show')}}
							</label>
						</div>
			            @if ($errors->has('new-password'))
							<div class="help-block text-danger mt-1">
								<strong>{{ $errors->first('new-password') }}</strong>
							</div>
						@endif
			        </div>

			        <div class="mb-3">
			            <label class="form-label" for="exampleInputEmail1">{{__('labels.setting.confirm')}} <span class="text-danger">*</span></label>
			            <input id="new-password-confirm" type="password" class="form-control" name="new-password_confirmation" required  value="{{old('new-password_confirmation')}}">
						<div class="show-password">
							<label>
								<input type="checkbox" onclick="passwordVisibility('new-password-confirm')"> {{__('labels.setting.show')}} 
							</label>
						</div>
						@if ($errors->has('new-password_confirmation'))
							<div class="help-block text-danger mt-1">
								<strong>{{ $errors->first('new-password_confirmation') }}</strong>
							</div>
						@endif
			        </div>
			        <button type="submit" class="btn btn-primary btn-color" id="savePasswordButton">Submit</button>
		        </form>
	      	</div>
	    </div>
  	</div>
</div>

<script>
    // $("#saveEmailButton").on('click', function(e){
    //     e.preventDefault();
    //     $("#saveEmailButton").prop('disabled', true);
    //     $("#saveEmailButton").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Submitting...');
    //     $("form.submitChangeEmailForm").submit();
    // });

    $("#savePasswordButton").on('click', function(e){
        e.preventDefault();
        $("#savePasswordButton").prop('disabled', true);
        $("#savePasswordButton").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Submitting...');
        $("form.submitChangePasswordForm").submit();
    });

    

	// function used to toogle the password visibility
	function passwordVisibility(passwordId) {
  		var x = document.getElementById(passwordId);
		if (x.type === "password") {
			x.type = "text";
		} else {
			x.type = "password";
		}
	}
</script>
@endsection