@extends('layouts.genindex')

@section('title')
  <i class="fas fa-user-circle filter-maroon"></i> Butiran Anda - {{ $user->username }}
@endsection

@section('subtitle')
  Semak dan kemaskini butiran anda
@endsection

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

      <div class="row">
        <div class="col-12 col-md">
          <small>Nama: </small>
          <strong>{{ $user->fullname }}</strong>
          <i class="fas fa-info-circle text-info" data-toggle="tooltip" title="Sila hubungi pentadbir untuk membuat perubahan"></i>
        </div>
        <div class="col-12 col-md">
          <small>No ID: </small>
          <strong>{{ $user->id_no }}</strong>
          <i class="fas fa-info-circle text-info" data-toggle="tooltip" title="Sila hubungi pentadbir untuk membuat perubahan"></i>
        </div>
      </div>

      <div class="row mt-4">
        <div class="col">
          <label class="required">E-mel</label>
          <input name='email' type="email" class="form-control" value="{{ $user->email }}"
          data-parsley-trigger="change"
          required>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <label class="required">Alamat (Baris 1)</label>
          <input name="address1" type="text" class="form-control" value="{{ $user->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 (Baris 2)</label>
          <input name="address2" type="text" class="form-control" value="{{ $user->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="{{ $user->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="{{ $user->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>
            @foreach($states as $state)
              <option {{ Str::is($user->state, $state->shortname) ? 'selected' : '' }} value="{{ $state->shortname }}">{{ $state->shortname }}</option>
            @endforeach

          </select>
        </div>
      </div>
      <div class="row mt-4">

      </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="{{ $user->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="{{ $user->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')"
              {{ $user->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')"
              {{ $user->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: {{ $user->is_mara ? 'show' : 'none' }};">
          <label class="required">No MARA / No Gaji</label>
          <input name="no_mara" type="text" class="form-control" value="{{ $user->no_mara }}"
          data-parsley-trigger="change"
          data-parsley-required="{{ $user->is_mara ? 'true' : 'false' }}"
          data-parsley-type="alphanum">
          <small class="form-text text-muted">(6 digit)*</small>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-12 col-md text-right">
          <button type="submit" class="btn btn-primary">Kemaskini</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