@extends('musharaf.baseLanding')

@section('css')
<!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
<!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you 
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview. 
    This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
    HTML files. This must be loaded before fileinput.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
   3.3.x versions without popper.min.js. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>
<!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/themes/fa/theme.js"></script>
<!-- optionally if you need translation for your language then include  locale file as mentioned below -->

@endsection

@section('content')
<style>
  .btn-success {
    color: #fff;
    background-color: #9933cc;
    border-color: #9C27B0;
}
</style>

<div class="container-fluid">
  <div class="fade-in">
    <div class="row">
      <div class="mx-auto col-md-6 col-sm-10">
        <div class="card">
            <div class="card-header text-center">
              <img src="{{ asset('img/naila.png') }}" width="125" alt="naila">
              <h4 style="margin-top:12px;">Naila Syafaah - Registrasi Agen</h4>
            </div>
            <div class="card-body">
                @if( $message ?? false )
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-success" role="alert">{{ $message }}</div>
                        </div>
                    </div>
                @endif   
                @if( $error ?? false )
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-warning" role="alert">{{ $error }}</div>
                        </div>
                    </div>
                @endif            
                <div class="row">
                    <div class="col-12">
                        <form method="POST" action="{{ route('registerAgentCreate') }}">
                            @csrf
                            <input name="marker" value="selectModel" type="hidden">
                            <div class="form-group">
                                <label>{{ __('Nama Depan') }}</label>
                                <input 
                                    type="text"
                                    placeholder=""
                                    name="first_name"
                                    class="form-control"
                                >
                            </div>
                            <div class="form-group">
                              <label>{{ __('Nama Belakang') }}</label>
                              <input 
                                  type="text"
                                  placeholder=""
                                  name="last_name"
                                  class="form-control"
                              >
                            </div>
                            <div class="form-group">
                                <label>{{ __('Gelar') }}</label>
                                <input 
                                    type="text"
                                    placeholder="S.Kom, Spd"
                                    name="gelar"
                                    class="form-control"
                                >
                            </div>
                            <div class="form-group">
                                <label>{{ __('Jenis Kelamin') }}</label>
                                <select class="input-group" name="" id="">
                                    <option value="pria">Pria</option>
                                    <option value="wanita">Wanita</option>
                                </select>
                            </div>
                            <div class="form-group">
                              <label>{{ __('Alamat') }}</label>
                              <textarea 
                                  placeholder=""
                                  name="address"
                                  class="form-control"
                              ></textarea>
                            </div>
                            <div class="form-group">
                              <label>{{ __('No. Telp.') }}</label>
                              <input 
                                  type="text"
                                  placeholder=""
                                  name="phone"
                                  class="form-control"
                              >
                            </div>
                            <hr>
                            <div class="form-group">
                              <label>{{ __('No. KTP') }}</label>
                              <input 
                                  type="text"
                                  placeholder=""
                                  name="ktp"
                                  class="form-control"
                              >
                              <br/>
                              <label class="control-label">Upload Foto KTP</label>
                              <input id="ktp_image" name="ktp_image" type="file">
                              <script>
                                $(document).ready(function() {
                                    $("#ktp_image").fileinput({
                                        showUpload: false,
                                        dropZoneEnabled: false,
                                        maxFileCount: 1,
                                        mainClass: "input-group"
                                    });
                                });
                              </script>
                            </div>
                            <hr>
                            <div class="form-group">
                              <label>{{ __('No. NPWP') }}</label>
                              <input 
                                  type="text"
                                  placeholder=""
                                  name="npwp"
                                  class="form-control"
                              >
                              <br/>
                              <label class="control-label">Upload Foto NPWP</label>
                              <input id="npwp_image" name="npwp_image" type="file">
                              <script>
                                $(document).ready(function() {
                                    $("#npwp_image").fileinput({
                                        showUpload: false,
                                        dropZoneEnabled: false,
                                        maxFileCount: 1,
                                        mainClass: "input-group"
                                    });
                                });
                              </script>
                            </div>
                            <hr>
                            <div class="form-group">
                              <label>{{ __('No. Kartu Keluarga') }}</label>
                              <input 
                                  type="text"
                                  placeholder=""
                                  name="kk"
                                  class="form-control"
                              >
                              <br/>
                              <label class="control-label">Upload Foto KK</label>
                              <input id="kk_image" name="kk_image" type="file">
                              <script>
                                $(document).ready(function() {
                                    $("#kk_image").fileinput({
                                        showUpload: false,
                                        dropZoneEnabled: false,
                                        maxFileCount: 1,
                                        mainClass: "input-group"
                                    });
                                });
                              </script>
                            </div>
                            
                            <hr>
                            <div class="form-group">
                                <label>{{ __('Nama Bank') }}</label>
                                <input 
                                    type="text"
                                    placeholder=""
                                    name="bank_name"
                                    class="form-control"
                                >
                            </div>
                            <div class="form-group">
                                <label>{{ __('Cabang Bank') }}</label>
                                <input 
                                    type="text"
                                    placeholder=""
                                    name="bank_name"
                                    class="form-control"
                                >
                            </div>
                            <div class="form-group">
                              <label>{{ __('No. Rekening Bank') }}</label>
                              <input 
                                  type="text"
                                  placeholder=""
                                  name="bank_account_number"
                                  class="form-control"
                              >
                            </div>
                            <div class="form-group">
                                <label>{{ __('Nama Pemilik Rekening Bank') }}</label>
                                <input 
                                    type="text"
                                    placeholder=""
                                    name="bank_account_name"
                                    class="form-control"
                                >
                            </div>
                            <hr>
                            <div class="form-group">
                                <label>{{ __('Alamat Kantor Cabang') }}</label>
                                <textarea 
                                    placeholder=""
                                    name="branch_address"
                                    class="form-control"
                                ></textarea>
                                <br/>
                              <label class="control-label">Upload Foto Kantor Cabang</label>
                              <input id="branch_image" name="branch_image" type="file">
                              <script>
                                $(document).ready(function() {
                                    $("#branch_image").fileinput({
                                        showUpload: false,
                                        dropZoneEnabled: false,
                                        maxFileCount: 1,
                                        mainClass: "input-group"
                                    });
                                });
                              </script>
                            </div>
                            <hr>
                            <div class="form-group">
                                <label>{{ __('Rekomendasi') }}</label>
                                <select class="select-group" name="" id="">
                                    <option value="0">Tanpa Rekomendasi</option>
                                    <option value="1">Fullan 1 (no-anggota)</option>
                                    <option value="2">Fullan 2 (no-anggota)</option>
                                    <option value="3">Fullan 3 (no-anggota) </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>{{ __('Tipe Pengurus') }}</label>
                                <select class="form-input" name="" id="">
                                    <option value="">Cabang Wilayah Province (CWP)</option>
                                    <option value="">Cabang Kota Kabupaten (CK) </option>
                                    <option value="">Agen Pewakilan (AP)</option>
                                    <option value="">Marketing Freelance (MF)</option>
                                </select>
                            </div>
                            <hr>
                            <button
                                type="submit"
                                class="btn btn-success"
                            >
                                Submit
                            </button>
                            <a 
                                href="{{ 'http://nailasyafaah.com' }}"
                                class="btn btn-primary"
                            >
                                Kembali
                            </a>
                        </form>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('javascript')


@endsection