@extends('layout.default')

@section('content')
<div class="card">
    <div class="card-body">
        @include('layout.notifications')
        <form action="{{url('profile')}}" id="new-user-form" method="post">
            @csrf
            @method('PUT')
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-search-input">
                    Username
                </label>
                <div class="col-4">
                    <input class="form-control" type="text" value="{{$user['username']}}" disabled>
                    <input name="username" type="hidden" value="{{$user['username']}}">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-search-input">
                    Email <span class="text-danger">*</span>
                </label>
                <div class="col-4">
                    <input class="form-control" name="email" placeholder="Enter email here" required="" type="text" value="{{old('email',$user['email'])}}"/>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-search-input">
                    Nama <span class="text-danger">*</span>
                </label>
                <div class="col-4">
                    <input class="form-control" name="name" placeholder="Enter name here" required="" type="text" value="{{old('name',$user['name'])}}"/>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-search-input">
                    Password baru
                </label>
                <div class="col-4">
                    <input autocomplete="new-password" class="form-control" id="input-password" name="password" maxlength="6" type="password"/>
                    <div class="form-text text-muted">
                        kosongkan jika tidak ingin mengganti
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-search-input">
                    Ketik ulang password
                </label>
                <div class="col-4">
                    <input autocomplete="new-password" class="form-control" id="reinput-password" name="password2" maxlength="6"  type="password"/>
                    <div class="invalid-feedback d-none" id="password-invalid">
                        Password tidak sama. Ketik ulang.
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label" for="example-search-input">
                    Password saat ini
                </label>
                <div class="col-4">
                    <input class="form-control" name="current_pin" maxlength="6" type="password" required/>
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                </div>
                <div class="col-10">
                    <button class="btn btn-success mr-2" id="btn-submit" type="submit">
                        Selesai
                    </button>
                    <a class="btn btn-secondary" href="{{url('user')}}">
                        Batal
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
    	// Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        }

		$('.select2').select2();
		$('.card-custom').on('click', '#btn-submit', function(event) {
			if($('#input-password').val() !== $('#reinput-password').val()) {
				$('#reinput-password').addClass('is-invalid');
				$('#password-invalid').removeClass('d-none');
				Swal.fire(
					"Woops!",
					'Password didn\'t match' ,
					"error"
					)
				event.preventDefault();
				event.stopPropagation();
			}
		});
	});
</script>
@endsection