@extends('layouts.fullLayoutMaster')

{{-- page title --}}
@section('title','Register Page')
{{-- page scripts --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/forms/validation/form-validation.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/authentication.css')}}">
@endsection

@section('content')
<!-- register section starts -->
<section class="row d-flex align-items-center justify-content-center">
  <div class="col-xl-4 col-md-8 col-11">
      <div class="row m-0">
        <!-- right section image -->
        <div class="col-md-12 text-center align-self-center p-3">
          <div class="card-content">
            <img class="img-fluid" src="{{asset('images/pages/garuda.png')}}" alt="branding logo" style="max-width:200px">
          </div>
        </div>
      </div>
    <div class="card bg-authentication mb-5">
      <div class="row m-0">
        <!-- register section left -->
        <div class="col-12 px-0">
          <div class="card disable-rounded-right mb-0 p-2 h-100 d-flex justify-content-center">
            <div class="card-header pb-1">
              <div class="card-title">
                <h2 class="text-center">Sign Up</h2>
              </div>
            </div>
            <div class="text-muted text-center">
              <p> <small>Silakan isi form dibawah untuk mendaftar dan menggunakan<br/> layanan E-Kelurahan Wagom</small>
              </p>
            </div>
            <div class="card-content">
              <div class="card-body">
                <form method="POST" action="{{ route('register') }}" class="form">
                  @csrf
                  <div class="form-group mb-50">
                    <div class="controls">
                      <label class="text-bold-600" for="name">NIK</label>
                      <input id="nik" type="number" minlength="16" maxlength="16" class="form-control @error('nik') is-invalid @enderror" class="form-control" name="nik" value="{{ old('nik') }}" required 
                        autocomplete="nik" autofocus placeholder="Nomor KTP"
                        data-validation-required-message="NIK wajib diisi."
                        data-validation-minlength-message="Harus terdiri dari minimal 16 karakter."
                        data-validation-maxlength-message="Harus terdiri dari minimal 16 karakter.">
                      @error('nik')
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
                      @enderror
                    </div>
                  </div>
                  <div class="form-group mb-50">
                    <div class="controls">
                      <label class="text-bold-600" for="name">Nama</label>
                      <input id="name" type="text" minlength="3" class="form-control @error('name') is-invalid @enderror" class="form-control" name="name" value="{{ old('name') }}" required 
                        autocomplete="name" autofocus placeholder="Nama Lengkap"
                        data-validation-required-message="Nama wajib diisi."
                        data-validation-minlength-message="Harus terdiri dari minimal 3 karakter.">
                      @error('name')
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
                      @enderror
                    </div>
                  </div>
                  <div class="form-group mb-50">
                    <div class="controls">
                      <label class="text-bold-600" for="email">Alamat email</label>
                      <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required 
                        autocomplete="email" placeholder="Alamat email"
                        data-validation-email-message="Masukkan email yang valid."
                        data-validation-required-message="Email wajib diisi.">
                      @error('email')
                        <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                        </span>
                      @enderror
                    </div>
                  </div>
                  <div class="form-group mb-50">
                    <div class="controls">
                      <label class="text-bold-600" for="password">Password</label>
                      <input id="password" type="password" minlength="8" class="form-control @error('password') is-invalid @enderror" name="password" required 
                        autocomplete="new-password" placeholder="Password"
                        data-validation-required-message="Password wajib diisi."
                        data-validation-minlength-message="Harus terdiri dari minimal 8 karakter.">
                      @error('password')
                      <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                      </span>
                      @enderror
                    </div>
                  </div>
                  <div class="form-group mb-2">
                    <div class="controls">
                      <label class="text-bold-600" for="password-confirm">Konfirmasi Password</label>
                      <input id="password-confirm" type="password" minlength="8" class="form-control" name="password_confirmation" required 
                        autocomplete="new-password" placeholder="Konfirmasi Password"
                        data-validation-required-message="Konfirmasi Password wajib diisi."
                        data-validation-match-message="Password Harus Sama."
                        data-validation-minlength-message="Harus terdiri dari minimal 8 karakter."
                        data-validation-match-match="password">
                    </div>
                  </div>
                  <button type="submit" class="btn btn-danger glow position-relative w-100">Daftar<i
                    id="icon-arrow" class="bx bx-right-arrow-alt"></i></button>
                </form>
                <hr>
                <div class="text-center"><small class="mr-25">Sudah punya akun?</small>
                  <a href="{{asset('login')}}"><small>Login</small> </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- register section endss -->
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="{{asset('js/scripts/forms/validation/form-validation.js')}}"></script>
@endsection
