@extends('layouts.template')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js" integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css" integrity="sha512-In/+MILhf6UMDJU4ZhDL0R0fEpsp4D3Le23m6+ujDWXwl3whwpucJG1PEmI3B07nyJx+875ccs+yX2CqQJUxUw==" crossorigin="anonymous" />
<div class="card mb-5 mb-xl-10">
    <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">Add Data SDM</h3>
        </div>
    </div>
    <div id="kt_account_profile_details">
       <form method="POST" action="{{ route('sdm.store') }}" enctype="multipart/form-data" id="form">
        		@csrf
            <div class="card-body border-top p-9">
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Nama Lengkap</label>
                    <div class="col-lg-8 fv-row">
                        <input type="text" name="nama_lengkap" class="form-control form-control-lg form-control-solid" required />
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Nopeg</label>
                    <div class="col-lg-8 fv-row">
                        <input type="text" name="nopeg" class="form-control form-control-lg form-control-solid" required />
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Jenis Kelamin</label>
                    <div class="col-lg-8 fv-row">
                        <select aria-label="Pilih Jenis kelamin" data-control="select2" data-placeholder="Pilih Jenis kelamin" class="form-select form-select-solid form-select-lg" required name="jenis_kelamin">
                            <option value="">Pilih Jenis kelamin</option>
                            <option value="P">Perempuan</option>
                            <option value="L">Laki-Laki</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label fw-bold fs-6 required">Region</label>
                    <div class="col-lg-8 fv-row">
                        <select aria-label="Pilih Region" data-control="select2" data-placeholder="Pilih Region" class="form-select form-select-solid form-select-lg" required name="region" id="region">
                            <option value="">Select Region</option>
                            @foreach($region as $r)
                            <option value="{{$r->code_region}}">{{$r->region_name}}</option>
                            @endforeach   
                        </select>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label fw-bold fs-6 required">Distributor</label>
                    <div class="col-lg-8 fv-row">
                        <select aria-label="Pilih Distributor" data-control="select2" data-placeholder="Pilih Distributor" class="form-select form-select-solid form-select-lg" required name="distributor" id="distributor">
                            
                        </select>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label fw-bold fs-6 required">Territory</label>
                    <div class="col-lg-8 fv-row">
                        <select aria-label="Pilih Territory" data-control="select2" data-placeholder="Pilih Territory" class="form-select form-select-solid form-select-lg" required name="territory" id="territory">
                        </select>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Status</label>
                    <div class="col-lg-8 fv-row">
                        <select aria-label="Pilih Status" data-control="select2" data-placeholder="Pilih Status" class="form-select form-select-solid form-select-lg" required name="status">
                            <option value="">Status</option>
                            <option value="AKTIF">AKTIF</option>
                            <option value="RESIGN">RESIGN</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Jabatan</label>
                    <div class="col-lg-8 fv-row">
                        <select aria-label="Pilih Jabatan" data-control="select2" data-placeholder="Pilih Jabatan" class="form-select form-select-solid form-select-lg" required name="jabatan">
                            <option value="">Pilih Jabatan</option>
                            @foreach($position as $p)
		                    	<option value="{{$p->position}}">{{$p->position}}</option>
		                    @endforeach
                        </select>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Tanggal Lahir</label>
                    <div class="col-lg-8 fv-row">
                        <input type="date" name="tanggal_lahir" class="form-control form-control-lg form-control-solid" required />
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Pendidikan Terakhir</label>
                    <div class="col-lg-8 fv-row">
                        <select aria-label="Select Pendidikan" data-control="select2" data-placeholder="Select Pendidikan" class="form-select form-select-solid form-select-lg" required name="pendidikan">
                            <option value="">Select Pendidikan</option>
			                    	<option value="SMA">SMA</option>
			                    	<option value="SMK">SMK</option>
			                    	<option value="SMU">SMU</option>
			                    	<option value="STM">STM</option>
			                    	<option value="MA">MA</option>
			                    	<option value="D1">D1</option>
			                    	<option value="D2">D2</option>
			                    	<option value="D4">D4</option>
			                    	<option value="S1">S1</option>
			                    	<option value="S2">S2</option>
			                    	<option value="S3">S3</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Tanggal Join</label>
                    <div class="col-lg-8 fv-row">
                        <input type="date" name="tanggal_join" class="form-control form-control-lg form-control-solid" required />
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Bulan Kerja</label>
                    <div class="col-lg-8 fv-row">
                        <input type="date" name="bulan_kerja" class="form-control form-control-lg form-control-solid" required />
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label fw-bold fs-6">Tanggal Resign</label>
                    <div class="col-lg-8 fv-row">
                        <input type="date" name="tanggal_resign" class="form-control form-control-lg form-control-solid"/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">Alamat</label>
                    <div class="col-lg-8 fv-row">
                        <textarea class="form-control form-control-lg form-control-solid" aria-label="With textarea" placeholder="Enter Your Address" required name="alamat"></textarea>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">NIK</label>
                    <div class="col-lg-8 fv-row">
                        <input type="text" name="no_ktp" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">No NPWP</label>
                    <div class="col-lg-8 fv-row">
                        <input type="text" name="no_npwp" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">No BPJS Ketenagakerjaan</label>
                    <div class="col-lg-8 fv-row">
                        <input type="text" name="no_bpjs_kt" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="separator separator my-5"></div>
                <h5> Contact</h5>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">No Telp/ SMS</label>
                    <div class="col-lg-8 fv-row">
                        <input type="text" name="no_hp" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">No Whatsapp</label>
                    <div class="col-lg-8 fv-row">
                        <input type="text" name="no_wa" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">E-mail</label>
                    <div class="col-lg-8 fv-row">
                        <input type="email" name="email" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="separator separator my-5"></div>
                <h5> File Pendukung</h5>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">File Foto Diri</label>
                    <div class="col-lg-8 fv-row">
                        <input type="file" name="file_foto" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">File KTP</label>
                    <div class="col-lg-8 fv-row">
                        <input type="file" name="file_ktp" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">File NPWP</label>
                    <div class="col-lg-8 fv-row">
                        <input type="file" name="file_npwp" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
                <div class="row mb-6">
                    <label class="col-lg-4 col-form-label required fw-bold fs-6">File Kartu Keluarga</label>
                    <div class="col-lg-8 fv-row">
                        <input type="file" name="file_kk" class="form-control form-control-lg form-control-solid" required/>
                    </div>
                </div>
               <!--  <div class="row mb-6">
                    <div class="col-lg-4 fv-row">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Foto Diri</label>
                        <input type="file" class="dropify" name="file_foto" required>
                    </div>
                    <div class="col-lg-4 fv-row">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Foto KTP</label>
                        <input type="file" class="dropify" name="file_foto" required>
                    </div>
                    <div class="col-lg-4 fv-row">
                        <label class="col-lg-4 col-form-label required fw-bold fs-6">Foto NPWP</label>
                        <input type="file" class="dropify" name="file_npwp" required>
                    </div>
                </div> -->
            </div>
            <div class="card-footer d-flex justify-content-between py-6 px-9">
                <a href="{{route('gudang.index')}}" class="btn btn-warning"><i class="fas fa-arrow-left fs-4 me-2"></i>Back</a>
                <button type="submit" class="btn btn-primary" id="">
                <i class="fas fa-save"></i>Save</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
       
        // $(".select2").select2({});
        // $("#new_territory").select2({
        //     placeholder: 'Pilih Salah Satu',
        //     allowClear: true
        // });

        $("#region").on('change', function(e) {
            $("#distributor").val('').trigger('change');
            $("#territory").val('').trigger('change');
        });

        $("#distributor").on('change', function(e) {
            $("#territory").val('').trigger('change');
        });

        $('#territory').select2({
            ajax: {
                delay: 500,
                url:"{{ route('ajax.territory') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        q: params.term,
                        sp_code: $("#distributor").val(),
                    };
                    return query;
                },
            },
            placeholder: 'Pilih Salah Satu',
            allowClear: true
        });

        $('#distributor').select2({
            ajax: {
                delay: 500,
               url:"{{ route('ajax.distributor') }}",
                dataType: 'json',
                data: function(params) {
                    var query = {
                        q: params.term,
                        region: $("#region").val(),
                    };
                    return query;
                },
            }
        });


    });
</script>
@endsection