@extends('template')

@section('title')
	HRIS | Data Keluarga
@stop

@section('top_script')
	@include('kepegawaian::layouts.top_script')
    <style type="text/css">
    .table-list-keluarga td {
        vertical-align: middle !important;
    }
    </style>
@stop

@section('content')
<section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li><a href="{{ url('home') }}"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#">Kepegawaian</a></li>
        <li class="active">Keluarga Pegawai</li>
    </ul>
    <div class="m-b-md text-center" style="margin-bottom: 10px !important">
        <h5 class="m-b-none"><strong>DATA</strong> KELUARGA PEGAWAI</h5>
        <span style="font-size: 11px">Fitur untuk memproses dan merubah data keluarga pegawai</span>
    </div>
    <div class="panel panel-info">
        <div class="wizard clearfix" id="form-wizard">
            <ul class="steps">
                <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Cari</li>
                <li data-target="#step2"><span class="badge">2</span>Pegawai</li>
                <li data-target="#step3"><span class="badge">3</span>Keluarga</li>
            </ul>
        </div>
        <div class="step-content">
            <form data-validation="parsley" enctype="multipart/form-data">
                <div class="step-pane active" id="step1">
                    <div class="form-group">
                        <label>Kata Kunci :</label>
                        <input name="cek_nip" data-required="true" type="text" class="form-control required group1" placeholder="Masukkan Kata Kunci Pencarian Pegawai"> 
                        <input name="nip_pegawai" type="hidden"></input>
                    </div>
                </div>
                <div class="step-pane row" id="step2">
                    <div class="msg_cek" style="padding:0 10px"></div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4 style="margin-top: 0px">Data Pegawai</h4>        
                                </div>
                                <div class="col-md-6">
                                    <input name="nip" type="hidden"></input>
                                    <input name="npp" type="hidden"></input>
                                    <input name="status_tunjangan" type="hidden" value="0"></input>
                                    <input name="pegawai_id" class="id-pegawai" type="hidden"></input>
                                    <input name="id" type="hidden"></input>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>NO KK :</label>
                                    <input name="no_kk" class="form-control" placeholder="Masukkan No KK" data-required="true">
                                </div>
                                <div class="col-md-6">
                                    <label>NIK :</label>
                                    <input name="nik" class="form-control nik-pegawai" placeholder="Masukkan NIK">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Nama Pegawai :</label>
                                    <input name="nama" type="text" data-required="true" class="form-control nama-pegawai" placeholder="Masukkan Nama Pegawai"> 
                                    <input name="hubkel" value="P" type="hidden">
                                </div>
                                <div class="col-md-3">
                                    <label>Tempat Lahir :</label>
                                    <input name="tempat_lahir" type="text" class="form-control tempat-lahir-pegawai" placeholder="Masukkan Tempat Lahir"> 
                                </div>
                                <div class="col-md-3">
                                    <label>Tanggal Lahir : (dd-mm-yyyy)</label>
                                    <input name="tanggal_lahir" data-required="true" data-type="dateIso" type="text" data-date-format="dd-mm-yyyy" class="form-control group2 datepicker-input tanggal-lahir-pegawai" placeholder="Masukkan Tanggal Lahir" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label>Jenis Kelamin :</label>
                                    <select name="jenis_kelamin" class="select2-option jenis-kelamin-pegawai" style="width:100%" data-placeholder="Pilih Jenis Kelamin">
                                        <option value=""></option>
                                        <option value="L">Laki-laki</option>
                                        <option value="P">Perempuan</option>
                                    </select> 
                                </div>
                                <div class="col-md-3">
                                    <label>Status Kawin :</label>
                                    <select name="status_kawin" class="select2-option status-kawin-pegawai" style="width:100%" data-placeholder="Pilih Status Kawin">
                                        <option value=""></option>
                                        <option value="BK">Belum Kawin</option>
                                        <option value="K">Kawin</option>
                                        <option value="CH">Cerai Hukum</option>
                                        <option value="CM">Cerai Mati</option>
                                        <option value="TDKTAU">Tidak Diketahui</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label>Tanggal Status Kawin : (dd-mm-yyyy)</label>
                                    <input name="tanggal_nikah" data-required="true" data-type="dateIso" type="text" data-date-format="dd-mm-yyyy" class="tanggal-nikah-pegawai form-control group2 datepicker-input" placeholder="Masukkan Tanggal Kawin">
                                </div>
                                <div class="col-md-3">
                                    <label>Agama :</label>
                                    <select name="agama" class="select2-option" style="width:100%" data-placeholder="Pilih Agama">
                                        {!! $opt_agama !!}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4">
                                    <label>No Telp :</label>
                                    <input name="no_telp" type="text" class="form-control" placeholder="Masukkan No Telp">
                                </div>
                                <div class="col-md-4">
                                    <label>No Telp Kerabat :</label>
                                    <input name="telp_kerabat" type="text" class="form-control" placeholder="Masukkan No Telp Kerabat">
                                </div>
                                <div class="col-md-4">
                                    <label>Ibu Kandung :</label>
                                    <input name="ortu_ibu" type="text" class="form-control" placeholder="Masukkan Nama Ibu">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Alamat (KTP):</label>
                                    <textarea name="alamat" class="form-control" style="height:95px;" placeholder="Masukkan Alamat"></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label>Alamat Tempat Tinggal:</label>
                                    <textarea name="alamat_tinggal" class="form-control" style="height:95px;" placeholder="Masukkan Alamat Tempat Tinggal"></textarea>
                                </div>
                            </div>
                        </div>
                        <fieldset>
                            <legend style="margin-bottom: 5px"><h4>Data Kepegawaian</h4></legend>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label>Pangkat :</label>
                                        <input name="pangkat" type="text" class="form-control" placeholder="Pangkat Pegawai" readonly>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Jabatan :</label>
                                        <input name="jabatan" type="text" class="form-control" placeholder="Jabatan Pegawai" readonly>
                                    </div>
                                    <div class="col-md-3">
                                        <label>Layer :</label>
                                        <input name="layer" type="text" class="form-control" placeholder="Layer Jabatan Pegawai" readonly>
                                        <input name="aktif" type="hidden"></input>
                                    </div>
									<div class="col-md-2">
                                        <label>Status Aktif :</label>
										<input name="aktif" type="text" class="form-control" placeholder="Status Pegawai" readonly>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend style="margin-bottom: 5px"><h4>Data NPWP</h4></legend>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>NO NPWP :</label>
                                        <input name="npwp" type="text" class="form-control" placeholder="Masukkan No. NPWP">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        @can('kepegawaian.keluarga.bpjs')
                            <fieldset>
                                <legend style="margin-bottom: 5px">
                                    <h4>Data BPJS</h4>
                                </legend>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="checkbox" style="margin-bottom:0px; margin-top: 5px">
                                                <label class="checkbox-custom">
                                                    <input type="checkbox" name="status_bpjs" id="status_bpjs_pegawai" class="status-bpjs-pegawai"> <i class="fa fa-fw fa-square-o"></i> <strong>Masuk dalam <span class="text-info">Tunjangan BPJS</span></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        @endcan
                        @can('kepegawaian.keluarga.askom')
                            <fieldset>
                                <legend style="margin-bottom: 5px">
                                    <h4>Data ASKOM</h4>
                                </legend>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="checkbox" style="margin-bottom:0px; margin-top: 5px">
                                                <label class="checkbox-custom">
                                                    <input type="checkbox" name="status_askom" id="status_askom_pegawai" class="status-askom-pegawai"> <i class="fa fa-fw fa-square-o"></i> <strong>Masuk dalam <span class="text-info">Tunjangan ASKOM</span></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        @endcan
                        <fieldset>
                            <legend style="margin-bottom: 10px"><h4>Dokumen</h4></legend>
                            <div class="form-group" style="margin-bottom: 10px">
                                <div class="col-sm-12" style="padding-left:0px">
                                    <form id="upload-dokumen" enctype="multipart/form-data" method="POST">
                                        <select name="nama_dokumen" class="select2-option">
                                            <option value="KK">KK</option>
                                            <option value="Surat_Nikah">Surat Nikah</option>
                                            <option value="SK_Kuliah">Surat Keterangan Sekolah/Kuliah</option>
                                            <option value="Lainnya">Lainnya</option>
                                        </select>
                                        <input type="text" class="form-control inline input-s input-lain" placeholder="Nama File" name="nama_dokumen_lainnya">
                                        <input name="dokumen" type="file" class="filestyle" data-icon="false" data-classButton="btn btn-default" data-classInput="form-control inline input-s">    
                                        <input type="button" class="btn btn-info" id="button-upload" value="upload">
                                    </form>
                                </div>
                            </div>
                        </fieldset>
                        <section class="panel panel-default">
                            <table class="table table-striped m-b-none text-sm" style="font-size: 11px">
                                <thead>
                                    <tr>
                                        <th class="text-center">NAMA FILE</th>
                                        <th class="text-center">TANGGAL</th>
                                        <th class="text-center" style="width: 250px">TIPE FILE</th>
                                        <th class="text-center" style="width: 150px">AKSI</th>
                                    </tr>
                                </thead>
                                <tbody class="table-list-dokumen">
                                </tbody>
                            </table>
                        </section>
                    </div>
                </div>
                <div class="step-pane" id="step3">
                    <div class="msg_sk" style="padding:0 10px"></div>
                    <div class="col-md-12">
                        <div class="form-group" style="margin-bottom: 5px">
                            <div class="row">
                                <div class="col-md-11">
                                    <h5 style="margin-top: 0px; font-weight: bold">Data Keluarga <pegawai class="text-info"></pegawai></h5>
                                </div>
                                <div class="col-md-1">
                                    <input name="npp" type="hidden"></input>
                                    <input name="id" class="id-keluarga" type="hidden"></input>
                                </div>
                            </div>
                        </div>
                        <section class="panel panel-default">
							<div class="table-responsive">
								<table class="table table-striped m-b-none text-sm" style="font-size: 11px">
									<thead>
										<tr>
											<th class="text-center">NAMA</th>
											<th class="text-center" style="width: 150px">TGL LAHIR</th>
											<th class="text-center" style="width: 100px">HUBKEL</th>
											<th class="text-center" style="width: 75px">TUNJ</th>
											<th class="text-center" style="width: 75px">BPJS</th>
											<th class="text-center" style="width: 75px">ASKOM</th>
											<th class="text-center" style="width: 75px">AKTIF</th>
											<th class="text-center" style="width: 150px">AKSI</th>
										</tr>
									</thead>
									<tbody class="table-list-keluarga">
									</tbody>
								</table>
							</div>
                        </section>
                        <div class="form-group" style="margin-bottom:0">
                            <div class="row">
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>NO KK :</label>
                                    <input name="no_kk" class="form-control no-kk-keluarga" placeholder="Masukkan No KK">
                                </div>
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>NIK :</label>
                                    <input name="nik" class="nik-keluarga form-control" placeholder="Masukkan NIK">
                                </div>
                                <div class="col-md-6 col-xs-12" style="margin: 5px 0">
                                    <label>Nama Anggota Keluarga :</label>
                                    <input name="nama" type="text" data-required="true" class="form-control nama-keluarga" placeholder="Masukkan Nama Anggota Keluarga"> 
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom:0">
                            <div class="row">
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>Tempat Lahir :</label>
                                    <input name="tempat_lahir" type="text" class="form-control tempat-lahir-keluarga" placeholder="Masukkan Tempat Lahir"> 
                                </div>
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>Tanggal Lahir : (dd-mm-yyyy)</label>
                                    <input name="tanggal_lahir" data-required="true" data-type="dateIso" type="text" data-date-format="dd-mm-yyyy" class="form-control group2 datepicker-input tanggal-lahir-keluarga" placeholder="Masukkan Tanggal Lahir">
                                </div>
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>Hubungan Keluarga :</label>
                                    <select name="hubkel" class="select2-option hubkel-keluarga" data-required="true" style="width:100%" data-placeholder="Pilih Hubungan Keluarga">
                                        <option value=""></option>
                                        <option value="I">Istri</option>
                                        <option value="S">Suami</option>
                                        <option value="A">Anak</option>
                                        <option value="AK">Anak Kandung</option>
                                        <option value="AT">Anak Tiri</option>
                                        <option value="AA">Anak Angkat</option>
                                    </select> 
                                </div>
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>Jenis Kelamin :</label>
                                    <select name="jenis_kelamin" class="select2-option jenis-kelamin-keluarga" style="width:100%" data-placeholder="Pilih Jenis Kelamin">
                                        <option value=""></option>
                                        <option value="L">Laki-laki</option>
                                        <option value="P">Perempuan</option>
                                    </select> 
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom:0">
                            <div class="row">
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>Status Kawin :</label>
                                    <select name="status_kawin" class="select2-option status-kawin-keluarga" style="width:100%" data-placeholder="Pilih Status Kawin">
                                        <option value=""></option>
                                        <option value="BK">Belum Kawin</option>
                                        <option value="K">Kawin</option>
                                        <option value="CH">Cerai Hukum</option>
                                        <option value="CM">Cerai Mati</option>
                                        <option value="TDKTAU">Tidak Diketahui</option>
                                    </select>
                                </div>
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>Tanggal Status Kawin : (dd-mm-yyyy)</label>
                                    <input name="tanggal_nikah" data-required="true" data-type="dateIso" type="text" data-date-format="dd-mm-yyyy" class="form-control group2 datepicker-input tanggal-nikah-keluarga" placeholder="Masukkan Tanggal Kawin">
                                </div>
                                <div class="col-md-3 col-xs-12" style="margin: 5px 0">
                                    <label>Nomor Telepon</label>
                                    <input name="no_telp" class="form-control no-telp-keluarga" placeholder="Masukkan No_Telp">
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom:0">
                            <div class="row">
                                <div class="col-md-2 data-anak col-xs-12" style="margin: 5px 0">
                                    <label>Status Kegiatan :</label>
                                    <select name="status_kegiatan" class="select2-option" style="width:100%" data-placeholder="Pilih Kegiatan">
                                        <option value=""></option>
                                        <option value="sekolah">Sekolah</option>
                                        <option value="kuliah">Kuliah</option>
                                        <option value="bekerja">Bekerja</option>
                                        <option value="tidak bekerja">Tidak Bekerja</option>
                                    </select>
                                </div>
                                <div class="col-md-2 data-anak col-xs-12" style="margin: 5px 0">
                                    <label>Kegiatan :</label>
                                    <span id="kegiatan"><input name="tempat_kegiatan" type="text" data-required="true" class="form-control" placeholder="Kegiatan"> </span>
                                </div>
                                <div class="col-md-3 data-anak col-xs-12" style="margin: 5px 0" id="ket-kegiatan">
                                    <label>Keterangan Kegiatan :</label>
                                    <input name="keterangan_kegiatan" type="text" data-required="true" class="form-control" placeholder="Keterangan Kegiatan">
                                </div>
                                <div class="col-md-2 data-anak col-xs-12" style="margin: 5px 0">
                                    <label>Tahun Mulai Kegiatan :</label>
                                    <input name="tahun_mulai" type="text" data-required="true" class="form-control" placeholder="tahun kegiatan"> 
                                </div>
                                <div class="col-md-3 data-pasangan col-xs-12" style="margin: 5px 0">
                                    <label>Penghasilan (Jika Bekerja):</label>
                                    <input name="penghasilan_bulanan" type="text" class="form-control penghasilan-bulanan-keluarga" placeholder="Masukkan Gaji">
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom:0">
                            <div class="row">
                                <div class="col-md-3 data-anak col-xs-12" style="margin: 5px 0">
                                    <label>Nama Ayah <span style="color:#fb6b5b">**</span> : </label>
                                    <input name="ortu_ayah" type="text" class="form-control ortu-ayah-keluarga" placeholder="Masukkan Nama Ayah">
                                </div>
                                <div class="col-md-3 data-anak col-xs-12" style="margin: 5px 0">
                                    <label>Nama Ibu <span style="color:#fb6b5b">**</span> : </label>
                                    <input name="ortu_ibu" type="text" class="form-control ortu-ibu-keluarga" placeholder="Masukkan Nama Ibu">
                                </div>
                                <div class="col-md-3 data-anak col-xs-12" style="margin: 5px 0">
                                    <label>Tanggal <span style="color:#fb6b5b">***</span> : (dd-mm-yyyy)</label>
                                    <input name="ortu_tanggal" data-required="true" data-type="dateIso" type="text" data-date-format="dd-mm-yyyy" class="form-control group2 datepicker-input ortu-tanggal-keluarga" placeholder="Masukkan Tanggal">
                                </div>
                                <div class="col-md-6 col-xs-12" style="margin: 5px 0">
                                    <span style="font-size:10px"><span style="color:#fb6b5b">**</span> Diisi apabila anak dilahirkan dari istri/suami yang meninggal dunia / diceraikan</span><br>
                                    <span style="font-size:10px"><span style="color:#fb6b5b">***</span> Tanggal meninggal / diceraikannya Ayah / Ibu</span>
                                </div>
                            </div>
                        </div>
                        @can('kepegawaian.keluarga.tunjangan')
                            <fieldset>
                                <legend style="margin-bottom: 5px">
                                    <h4>Aktif</h4>
                                </legend>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="checkbox" style="margin-bottom:0px; margin-top: 5px">
                                                <label class="checkbox-custom">
                                                    <input type="checkbox" name="aktif" id="aktif" class="aktif"> <i class="fa fa-fw fa-square-o"></i> <strong>Anggota Keluarga <span class="text-info">Aktif</span></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        @endcan
						@can('kepegawaian.keluarga.tunjangan')
                            <fieldset>
                                <legend style="margin-bottom: 5px">
                                    <h4>Tunjangan</h4>
                                </legend>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="checkbox" style="margin-bottom:0px; margin-top: 5px">
                                                <label class="checkbox-custom">
                                                    <input type="checkbox" name="status_tunjangan" id="status_tunjangan_keluarga" class="status-tunjangan-keluarga"> <i class="fa fa-fw fa-square-o"></i> <strong>Masuk dalam <span class="text-info">Tunjangan Keluarga</span></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        @endcan
                        @can('kepegawaian.keluarga.bpjs')
                            <fieldset>
                                <legend style="margin-bottom: 5px">
                                    <h4>Data BPJS</h4>
                                </legend>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="checkbox" style="margin-bottom:0px; margin-top: 5px">
                                                <label class="checkbox-custom">
                                                    <input type="checkbox" name="status_bpjs" id="status_bpjs_keluarga" class="status-bpjs-keluarga"> <i class="fa fa-fw fa-square-o"></i> <strong>Masuk dalam <span class="text-info">Tunjangan BPJS</span></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        @endcan
                        @can('kepegawaian.keluarga.askom')
                            <fieldset>
                                <legend style="margin-bottom: 5px">
                                    <h4>Data ASKOM</h4>
                                </legend>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="checkbox" style="margin-bottom:0px; margin-top: 5px">
                                                <label class="checkbox-custom">
                                                    <input type="checkbox" name="status_askom" id="status_askom_keluarga" class="status-askom-keluarga"> <i class="fa fa-fw fa-square-o"></i> <strong>Masuk dalam <span class="text-info">Tunjangan ASKOM</span></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        @endcan
                    </div>
                </div>
            </form>
            <div class="actions m-t">
                <button type="button" class="btn btn-default btn-sm btn-prev" data-target="#form-wizard" data-wizard="previous" disabled="disabled">Kembali</button>
                <button type="button" class="btn btn-default btn-sm btn-next" data-target="#form-wizard" data-wizard="next" data-last="Submit">Selanjutnya</button>
                <button type="button" class="btn btn-primary btn-sm pull-right btn-selesai" style="display:none" onclick="window.location.reload(true)">Selesai</button>
            </div>
        </div>
    </div>
</section>
@stop

@section('bottom_script')
	@include('kepegawaian::layouts.bottom_script')
@stop