@foreach ($pegawai as $p)

<div class="card card-info">
    <div class="card-header">
        <h3 class="card-title"><strong>{{$loop->index + 1}})</strong> {{$p['nip_baru']}} - {{$p['nama']}}</h3>
    </div>
    <div class="card-body">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][id_pegawai_sikep]" value="{{$p['id_pegawai_sikep']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][foto_pegawai]" value="{{$p['foto_pegawai']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][nip_baru]" value="{{$p['nip_baru']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][nip_lama]" value="{{$p['nip_lama']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][nama]" value="{{$p['nama']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][ktp]" value="{{$p['ktp']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][pangkat]" value="{{$p['pangkat']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][gol]" value="{{$p['gol']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][karpeg]" value="{{$p['karpeg']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][pendidikan]" value="{{$p['pendidikan']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][jenis_kelamin]" value="{{$p['jenis_kelamin']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][tempat_lahir]" value="{{$p['tempat_lahir']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][tanggal_lahir]" value="{{$p['tanggal_lahir']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][EmailPegawai]" value="{{$p['EmailPegawai']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][nomor_handphone]" value="{{$p['nomor_handphone']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][agama]" value="{{$p['agama']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][jabatan]" value="{{$p['jabatan']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][jabatansatker]" value="{{$p['jabatansatker']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][kode_satker]" value="{{$p['kode_satker']}}">
        <input type="hidden" name="pegawaifinal[{{$loop->index}}][satker]" value="{{$p['satker']}}">
        
        @php
         $ipeg = $loop->index;   
        @endphp
        @foreach ($usulanjenisdok as $i)
        <input type="hidden" name="pegawaifinal[{{$ipeg}}][fileindex][{{$i->id}}]" value="-">
        <div class="form-group">
            <label for="inputfile{{$p['id_pegawai_sikep']}}-{{$i->id}}">{{$i->jenis_dok}} @if ($i->wajib != 1)
                <span class="text-danger"><small>( Optional )</small></span>
                @endif</label>
            <div class="input-group">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="inputfile{{$p['id_pegawai_sikep']}}-{{$i->id}}" 
                    name="pegawaifinal[{{$ipeg}}][fileupload][{{$i->id}}]" accept="application/pdf, image/gif, image/jpg, image/jpeg, image/png" value="-"
                    @if ($i->wajib == 1)
                    required
                    @endif
                    />
                    <label class="custom-file-label" for="inputfile{{$p['id_pegawai_sikep']}}-{{$i->id}}">Pilih File</label>
                </div>

            </div>
        </div>
        @endforeach
    </div>
</div>
@endforeach
@section('js')
<script>
var aid = [@foreach($usulanjenisdok as $i)
			'{{ $i->id }}',
		@endforeach ]
//alert(a);
aid.forEach(myFunction);
function myFunction(item, index) {
  document.getElementById("inputfile{{$p['id_pegawai_sikep']}}-"+item).addEventListener("change", validateFile)
}

function validateFile(){
  const allowedExtensions =  ['jpg','JPG','png','PNG','pdf','PDF','doc','docx','xls','xlsx','ppt','txt'],
        sizeLimit = 3_000_000; // 3 megabyte

  // destructuring file name and size from file object
  const { name:fileName, size:fileSize } = this.files[0];

  /*
  * if filename is apple.png, we split the string to get ["apple","png"]
  * then apply the pop() method to return the file extension
  *
  */
  const fileExtension = fileName.split(".").pop();

  /* 
    check if the extension of the uploaded file is included 
    in our array of allowed file extensions
  */
  if(!allowedExtensions.includes(fileExtension)){
	$.bootstrapGrowl("Tipe file tidak sesuai, file yg dapat diupload jpg, png, pdf, xlsx",{
								   type:"danger",
								   offset:{from:"top",amount:280},
								   align:"center",
								   width: 'auto',
								   delay:3000,
								   allow_dismiss:true,
								   stackup_spacing:10
							   });  
    //alert("file type not allowed");
    this.value = null;
  }else if(fileSize > sizeLimit){
	$.bootstrapGrowl("File terlalu besar, max 3 Mb",{
								   type:"danger",
								   offset:{from:"top",amount:280},
								   align:"center",
								   width: 'auto',
								   delay:3000,
								   allow_dismiss:true,
								   stackup_spacing:10
							   });  
    //alert("file size too large")
    this.value = null;
  }
}
</script>