@extends('layouts.app')
@section('title','Form')
@section('content')
    <section class="section">
        <div class="section-header">
        <h1>Formulir Pengajuan Legalisir Online</h1>
        <div class="section-header-breadcrumb">
            <div class="breadcrumb-item"><a href="/">Dashboard</a></div>
            <div class="breadcrumb-item">Formulir</div>
        </div>
        </div>

        <div class="section-body">
        <form class="needs-validation" novalidate="">
        <div class="row">  
            <div class="col-12 col-md-8 col-lg-8">
            <div class="card">
                    <div class="card-body">
                        <div class="section-title mt-0">Data Diri</div>
                        <div class="form-group">
                            <label>Nama Lengkap</label>
                            <input type="text" class="form-control" required="" placeholder="Ketik nama Anda di sini">
                            <div class="invalid-feedback">Mohon isikan nama Anda</div>
                        </div>
                        <div class="row">
                            <div class="col-6 form-group">
                                <label>N I M</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <i class="fas fa-graduation-cap"></i>
                                        </div>
                                    </div>
                                    <input type="number" class="form-control number" required="" placeholder="Masukan NIM Anda">
                                    <div class="invalid-feedback">Mohon isikan NIM Anda</div>
                                </div>
                            </div>
                            <div class="col-6 form-group">
                                <label>Nomor KTP / NIK</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                            <i class="fas fa-id-card"></i>
                                        </div>
                                    </div>
                                    <input type="number" class="form-control number" required="" placeholder="Masukan No. KTP / NIK Anda">
                                    <div class="invalid-feedback">Mohon isikan NIK Anda</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 form-group">
                                <label>Nomor Telepon / Whatsapp</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                        <i class="fas fa-phone"></i>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control phone-number" required="" placeholder="Contoh: 081234567890">
                                    <div class="invalid-feedback">Mohon isikan nomor telepon/Whatsapp Anda</div>
                                </div>
                            </div>
                            <div class="col-6 form-group">
                                <label>Email</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">
                                        <i class="fas fa-envelope"></i>
                                        </div>
                                    </div>
                                    <input type="email" class="form-control email" required="" placeholder="Ketik Email Anda di sini">
                                    <div class="invalid-feedback" >example@example.com, dll</div>
                                </div>
                        <!-- <div id="pwindicator" class="pwindicator">
                            <div class="bar"></div>
                            <div class="label"></div>
                        </div> -->
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-8 form-group">
                                <label>Alamat Lengkap</label>
                                <div class="input-group">
                                <!-- <div class="input-group-prepend">
                                <div class="input-group-text">
                                <i class="fas fa-map-marker-alt"></i>
                                </div>
                                </div> -->
                                    <input type="text" class="form-control" required="" placeholder="">
                                    <div class="invalid-feedback">Mohon isikan alamat lengkap Anda</div>
                                </div>
                            </div>
                            <div class="col-4 form-group">
                                <label>Provinsi</label>
                                <select class="form-control" required="" placeholder="Provinsi">
                                    <option>Pilih...</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                </select>
                                <div class="invalid-feedback">Pilih Provinsi tempat tinggal Anda</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Kota / Kabupaten</label>
                                    <select class="form-control" required="Default" placeholder="Kecamatan">
                                        <option>Pilih...</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                    </select>
                                    <div class="invalid-feedback">Pilih Kota/Kabupaten tempat tinggal Anda</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Kecamatan</label>
                                    <select class="form-control" placeholder="Kota/Kabupaten">
                                        <option>Pilih...</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                    </select>
                                    <div class="invalid-feedback">Pilih Kecamatan tempat tinggal Anda</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Kode Pos</label>
                                    <input type="number" class="form-control number" required="" placeholder="Kode Pos">
                                    <div class="invalid-feedback">Isikan Kode Pos yg sesuai</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-right">
                        <button class="btn btn-primary mr-1" type="submit">Submit</button>
                        <button class="btn btn-secondary" type="reset">Reset</button>
                        </div>
                    </div>

            </div>
            <!-- <div class="card">
                <div class="card-body">
                    <div class="section-title mt-0">Upload File</div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Upload File Ijazah Asli</label>
                                    <input type="file" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Upload File Swafoto Ijazah + KTP</label>
                                    <input type="file" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Upload File Transkrip Nilai Asli</label>
                                    <input type="file" class="form-control">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Upload File Swafoto Transkrip Nilai + KTP</label>
                                    <input type="file" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            </div>
            <div class="col-12 col-md-4 col-lg-4">
            <div class="card">
                <div class="card-body">
                <div class="section-title mt-0">Layanan Pengambilan</div>
                <div class="form-group">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="pickupservice" id="pickup1" value="ambilsendiri">
                        <label class="form-check-label" for="pickup1">Ambil Sendiri</label>
                    </div>
                    <div class="form-check form-check-inline ml-4">
                        <input class="form-check-input" type="radio" name="pickupservice" id="pickup2" value="jasapengiriman">
                        <label class="form-check-label" for="pickup2">Jasa Pengiriman</label>
                    </div>
                </div>
                </div>
            </div>
            <!-- <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <center>
                            <img src="{{asset('assets/img/btn-logo.png')}}" alt="Logo BTN" height="100" weight="200">
                        </center>
                    </div>
                </div>
            </div> -->
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-8 col-md-8 col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <div class="section-title mt-0">Upload File</div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Upload File Ijazah Asli</label>
                                        <input type="file" class="form-control">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Upload File Swafoto Ijazah + KTP</label>
                                        <input type="file" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Upload File Transkrip Nilai Asli</label>
                                        <input type="file" class="form-control">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Upload File Swafoto Transkrip Nilai + KTP</label>
                                        <input type="file" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
        </div>
        </div>
    </section>
@endsection