@extends('layouts.genindex')

@section('title')
  <i class="fas fa-user-circle filter-maroon">&nbsp;</i>{{ __('Register') }}
@endsection

@section('subtitle')
@endsection

@section('list')
<div class="fdb-box row mx-1">
  <div class="col-12">
    <form id="app" method="post" action="{{ route('register') }}" data-parsley-validate="">
      @csrf

      <h3>Butiran anda | <small>Maklumat ini akan digunakan untuk mendapatkan maklumat pinjaman/fasiliti anda dan memudakan pendaftaran dan pembayaran kursus/program MARA</small></h3>

      <div class="row">
        <div class="col-12 col-md">
          <label class="required">Nama</label>
          <input name="name" type="text" class="form-control" value="{{ old('name') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
          required>
        </div>
        <div class="col-12 col-md">
          <label class="required">E-mel</label>
          <input name='email' type="email" class="form-control" value="{{ old('email') }}"
          data-parsley-trigger="change"
          required>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-12 col-md">
          <label class="required">Jenis ID</label>
          <select name="id_type" class="form-control" required>
            <option {{ old('id_type') ? "" : "selected" }} disabled>Sila pilih</option>
            @foreach($id_types as $id_type)
              <option {{ old('id_type') == $id_type->No ? "selected" : "" }} value="{{ $id_type->No }}">{{ $id_type->Description }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-12 col-md">
          <label class="required">No ID/Pendaftaran</label>
          <input name='id_no' type="text" class="form-control" value="{{ old('id_no') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^[0-9A-Za-z\/]+"
          {{-- data-parsley-type="alphanum" --}}
          required>
          <!-- data-parsley-pattern="(([[1-9]{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01]))([0-9]{2})([0-9]{4})" -->
        </div>
      </div>

      <div class="row mt-4">
        <div class="col">
          <label class="required">Alamat <small>(Baris 1: Nombor/unit rumah/bangunan)</small></label>
          <input name="address1" type="text" class="form-control" value="{{ old('address1') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
          required>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <label class="required">Alamat <small>(Baris 2: Nama jalan/taman/kampung)</small></label>
          <input name="address2" type="text" class="form-control" value="{{ old('address2') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
          required>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-12 col-md-6">
          <label class="required">Bandar</label>
          <input name="city" type="text" class="form-control" value="{{ old('city') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+"
          required>
        </div>
        <div class="col-12 col-md-2 mt-4 mt-md-0">
          <label class="required">Poskod</label>
          <input name="postcode" type="text" class="form-control" value="{{ old('postcode') }}"
          data-parsley-trigger="change"
          data-parsley-type="digits"
          data-parsley-length="[5, 5]"
          data-parsley-error-message="Poskod perlu 5 angka"
          required>
        </div>
        <div class="col-12 col-md-4 mt-4 mt-md-0">
          <label class="required">Negeri</label>
          <select name="state" class="form-control" required>
            <option {{ old('state') ? "" : "selected" }} disabled>Sila pilih</option>
            @foreach($states as $state)
              <option {{ old('state') == $state->shortname ? "selected" : "" }} value="{{ $state->shortname }}">{{ $state->shortname }}</option>
            @endforeach
          </select>
        </div>
      </div>

      <div class="row mt-4">
        <div class="col-12 col-md">
          <label class="required">No Tel Bimbit</label>
          <input name="mobile_no" type="text" class="form-control" value="{{ old('mobile_no') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^(6?0)[0|1|2|3|4|6|7|8|9]{1,2}[0-9]{7,8}$"
          data-parsley-length="[10, 13]"
          data-parsley-error-message="Pastikan bilangan angka mencukupi dan cuma mengandungi angka"
          required>
        </div>
        <div class="col-12 col-md mt-4 mt-md-0">
          <label>No Tel Rumah</label>
          <input name="phone_no" type="text" class="form-control" value="{{ old('phone_no') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^(6?0)[0|1|2|3|4|6|7|8|9]{1,2}[0-9]{7,8}$"
          data-parsley-error-message="Pastikan bilangan angka mencukupi dan cuma mengandungi angka">
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-12 col-md">
          <label class="required">Adakah anda staf/bekas staf MARA? </label><br />
            <div class="form-check">
              <input class="form-check-input" id="is_mara1" type="radio" name="is_mara" value="1" onchange="chck('1')"
              {{ old('is_mara') == 1 ? 'checked' : ''}} />
              <label class="form-check-label" for="is_mara1">Ya</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" id="is_mara2" type="radio" name="is_mara" value="0"
              data-parsley-error-message="Sila pilih salah satu"
              required onchange="chck('0')"
              {{ old('is_mara') == 0 ? 'checked' : ''}} />
              <label class="form-check-label" for="is_mara2">Tidak</label>
            </div>
        </div>
        <div id="mara-div" class="col-12 col-md mt-4 mt-md-0" style="display: {{ old('is_mara') ? 'show' : 'none' }};">
          <label class="required">No MARA / No Gaji</label>
          <input name="no_mara" type="text" class="form-control" value="{{ old('no_mara') }}"
          data-parsley-trigger="change"
          data-parsley-required="{{ old('is_mara') ? 'true' : 'false' }}"
          data-parsley-type="alphanum">
          <small class="form-text text-muted">(6 digit)*</small>
        </div>
      </div>

      <h3 class="mt-4">Butiran pengguna | <small>Pilih username dan katalaluan untuk log masuk bayar@MARAeps</small></h3>

      <div class="row mt-4">
        <div class="col-12 col-md">
          <label class="required">Username</label>
          <input name="username" id="username" type="text" class="form-control"
          value="{{ old('username') }}"
          data-parsley-trigger="change"
          data-parsley-pattern="^[A-Za-z0-9]+(?:[_-][A-Za-z0-9]+)*$"
          data-parsley-minlength="5"
          data-parsley-error-message="Pastikan username sekurangnya 5 aksara cuma mengandungi huruf, angka dan tanda dash atau underscord (-/_)"
          required>
        </div>
        <div class="col-12 col-md">
          <label class="required">Ulangi Username</label>
          <input name='username_confirmation' id='username-confirm' type="text" class="form-control"
          data-parsley-trigger="change"
          data-parsley-pattern="^[A-Za-z0-9]+(?:[_-][A-Za-z0-9]+)*$"
          data-parsley-equalto="#username"
          required>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-12 col-md">
          <label class="required">Katalaluan</label>
          <input name="password" id="password" type="password" class="form-control"
          data-parsley-trigger="change"
          data-parsley-minlength="8"
          data-parsley-pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$%^&*()_+\-=\[\]{}|;:'\\,./<>?])[A-Za-z\d$%^&*()_+\-=\[\]{}|;:'\\,./<>?]{8,}$"
          data-parsley-pattern-message="Kata laluan mesti mengandungi sekurang-kurangnya satu huruf, satu nombor, dan satu simbol (kecuali !, @, #)."
          required>
        </div>
        <div class="col-12 col-md">
          <label class="required">Sahkan Katalaluan</label>
          <input name='password_confirmation' id="password-confirm" type="password" class="form-control"
          data-parsley-trigger="change"
          data-parsley-equalto="#password"
          required>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-12 col-md text-right">
          <button type="submit" class="btn btn-primary">Daftar</button>
        </div>
      </div>

    </form>

  </div>
</div>
@endsection

@section('page_scripts')
<script>

  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })

  function chck(val){
    if(val == '1'){
      $("#mara-div").show();
      $('input[name=no_mara]').attr('data-parsley-required', 'true');
    }else{
      $("#mara-div").hide();
      $('input[name=no_mara]').val(null);
      $('input[name=no_mara]').attr('data-parsley-required', 'false');
    }
  }

</script>

@endsection