@extends('layouts.app') @section('title','Registrasi') @section('content') <section class="section"> <div class="section-header"> <h1>Tambah Anggota dan Kegiatan</h1> <div class="section-header-breadcrumb"> </div> </div> <div class="section-body"> <form class="needs-validation" novalidate="" method="POST" action="{{ route('user.preview')}}" enctype="multipart/form-data"> @csrf <div class="row"> <div class="col-12 col-md-8 col-lg-8"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-6 form-group" @if ($errors->has('nama')) has-error @endif> <label>Nama</label> <input type="text" id="nama_anggota" class="form-control" placeholder="" value="{{ old('nama')}}"> @if ($errors->has('nama')) <label id="login-error" class="error" for="nama" style="color: red">{{$errors->first('nama')}}</label> @endif </div> <div class="col-6 form-group" @if ($errors->has('nik')) has-error @endif> <label>NIK</label> <input type="text" id="nik_anggota" class="form-control" placeholder="" value="{{ old('nik')}}"> @if ($errors->has('nik')) <label id="login-error" class="error" for="nik" style="color: red">{{$errors->first('nik')}}</label> @endif </div> </div> <div class="row"> <div class="col-6 form-group" @if ($errors->has('email')) has-error @endif> <label>E-mail</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" id="email_anggota" class="form-control email" placeholder="" value="{{ old('email')}}"> </div> @if ($errors->has('email')) <label id="login-error" class="error" for="nama_depan" style="color: red">{{$errors->first('email')}}</label> @endif </div> <div class="col-6 form-group" @if ($errors->has('telepon')) has-error @endif> <label>Telepon</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="number" id="telepon_anggota" class="form-control number" placeholder="" value="{{ old('telepon')}}"> </div> @if ($errors->has('telepon')) <label id="login-error" class="error" for="telepon" style="color: red">{{$errors->first('telepon')}}</label> @endif </div> </div> </div> </div> <div> <button type="button" class="btn btn-primary" onclick="tambahAnggota()" name="tambah-anggota" id="tambah-anggota">Tambah Anggota</button> </div> <br> <h5>Anggota</h5> <span class="badge badge-warning"><i class="fa fa-info"></i> Setiap anggota yang ditambahkan akan terdaftar sebagai peserta konvensi</span> <br> <br> <div class="card"> <div class="card-body"> <table class="table table-responsive"> <thead> <tr> <th>No.</th> <th>Nama</th> <th>Email</th> <th>Nik</th> <th>Telepon</th> <th></th> </tr> </thead> <tbody id="parent-anggota"> {!! view('row_anggota', [ 'i' => 1, 'item' => $data_registrasi ]) !!} </tbody> </table> </div> </div> </div> <div class="col-12 col-md-4 col-lg-4"> <input type="hidden" name="data_registrasi" value="{{ encrypt(json_encode($data_registrasi, true)) }}"> <p class="alert alert-info"><i class="fa fa-info"></i> Klik tambah konferensi jika ingin mengikuti konferensi dan pilih konferensi yang diinginkan untuk setiap anggota</p> <br> <br> <div class="row" id="parent-kegiatan"> </div> <div> <button type="button" class="btn btn-primary" onclick="tambahKegiatan()" name="tambah-kegiatan" id="tambah-kegiatan">Tambah Konferensi</button> </div> <hr> </div> </div> <div class="card-footer text-right"> <button class="btn btn-primary mr-1" type="submit">Daftar</button> </div> </form> </div> </section> @endsection @push('js') <script> $(document).ready(function () { //change selectboxes to selectize mode to be searchable $("#instansi").select2(); }); </script> <script> function cekKegiatan(id){ var value = document.getElementById(id).value; if(value == '498633a9-082c-4a4a-9dbd-e20b678ec15e'){ $('#grup-konferensi').hide(); $('#tambah-kegiatan').hide(); var konferensi = document.getElementById("konferensi"); konferensi.required = false; document.getElementById('konferensi').value = ""; } else { $('#grup-konferensi').show(); $('#tambah-kegiatan').show(); var konferensi = document.getElementById("konferensi"); konferensi.required = true; } } </script> <script> let anggota = {}; anggota[1] = { nama:'{{ $data_registrasi['nama'] }}', nik:'{{ $data_registrasi['nik'] }}', email:'{{ $data_registrasi['email'] }}', telepon:'{{ $data_registrasi['telepon'] }}' }; var i = 0; function tambahKegiatan(){ let token = '{{ csrf_token() }}'; if (i === undefined) { i = 1; } let list_anggota = JSON.stringify(anggota); var request = $.ajax({ url: '{{ route('registrasi.form-kegiatan.add') }}', type:'POST', dataType: 'html', data: {_token:token, i:i, anggota:true, list_anggota:list_anggota}, success: function (result) { $('#parent-kegiatan').append(result); }, error: function(error) { alert('periksa koneksi anda'); } }); i++; } function hapusKegiatan(id){ $('#'+id).remove(); } var iA = 2; function tambahAnggota() { let token = '{{ csrf_token() }}'; var request = $.ajax({ url: '{{ route('registrasi.form-anggota.add') }}', type:'POST', dataType: 'html', data: { _token:token, i:iA, nama:$('#nama_anggota').val(), nik:$('#nik_anggota').val(), email:$('#email_anggota').val(), telepon:$('#telepon_anggota').val(), }, success: function (result) { $('#parent-anggota').append(result); anggota[iA] = { nama: $('#nama_anggota').val(), nik: $('#nik_anggota').val(), email: $('#email_anggota').val(), telepon: $('#telepon_anggota').val(), }; addOptionToSelects(iA, $('#nama_anggota').val() + ' : ' + $('#email_anggota').val()); $('#nama_anggota').val(''); $('#nik_anggota').val(''); $('#email_anggota').val(''); $('#telepon_anggota').val(''); console.log(anggota); iA++; }, error: function(error) { alert('periksa koneksi anda'); } }); } function addOptionToSelects(key, name) { $('.anggota-select').each(function() { $(this).append(new Option(name, key)); }); } function hapusAnggota(id) { $('#anggota-'+id).remove(); delete anggota[id]; $('.anggota-select').each(function() { $(this).find('option[value='+id+']').remove(); }); } function hapusKegiatan(id){ $('#'+id).remove(); } </script> @endpush