<?= $this->extend('layout/template') ?>

<?= $this->section('content') ?>

<div class="card card-warning">

    <div class="card-header">

        <h3 class="card-title">
            <i class="fas fa-user-edit"></i>
            Edit Data Anggota
        </h3>

    </div>

    <div class="card-body">

        <form action="<?= base_url('anggota/update/'.$anggota['id']) ?>"
              method="post"
              enctype="multipart/form-data">

            <?= csrf_field() ?>

            <div class="row">

                <!-- FOTO -->
                <div class="col-md-4">

                    <div class="text-center mb-3">

                        <?php if($anggota['foto'] != '') : ?>

                            <img src="<?= base_url('uploads/anggota/'.$anggota['foto']) ?>"
                                 id="preview"
                                 width="180"
                                 height="180"
                                 style="border-radius:50%;object-fit:cover;border:3px solid #ddd;">

                        <?php else : ?>

                            <img src="https://via.placeholder.com/180"
                                 id="preview"
                                 width="180"
                                 height="180"
                                 style="border-radius:50%;object-fit:cover;border:3px solid #ddd;">

                        <?php endif; ?>

                    </div>

                    <div class="form-group">

                        <label>Ganti Foto</label>

                        <input type="file"
                               name="foto"
                               id="foto"
                               class="form-control"
                               accept="image/*">

                        <small class="text-muted">
                            Kosongkan jika foto tidak ingin diganti.
                        </small>

                    </div>

                </div>

                <!-- DATA -->
                <div class="col-md-8">

                    <div class="form-group">

                        <label>Nama</label>

                        <input type="text"
                               name="nama"
                               class="form-control"
                               value="<?= $anggota['nama'] ?>"
                               required>

                    </div>

                    <div class="form-group">

                        <label>NISN / NIP</label>

                        <input type="text"
                               name="nisn"
                               class="form-control"
                               value="<?= $anggota['nisn'] ?>">

                    </div>

                    <div class="form-group">

                        <label>Jenis Anggota</label>

                        <select name="jenis"
                                id="jenis"
                                class="form-control">

                            <option value="Siswa"
                                <?= ($anggota['jenis']=='Siswa')?'selected':'' ?>>
                                Siswa
                            </option>

                            <option value="Guru"
                                <?= ($anggota['jenis']=='Guru')?'selected':'' ?>>
                                Guru
                            </option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label>Kelas</label>

                        <select name="kelas"
                                id="kelas"
                                class="form-control">

                            <option value="">-- Pilih Kelas --</option>

                            <option value="X.E"
                                <?= ($anggota['kelas']=='X.E')?'selected':'' ?>>
                                X.E
                            </option>

                            <option value="XI.F1"
                                <?= ($anggota['kelas']=='XI.F1')?'selected':'' ?>>
                                XI.F1
                            </option>

                            <option value="XI.F2"
                                <?= ($anggota['kelas']=='XI.F2')?'selected':'' ?>>
                                XI.F2
                            </option>

                            <option value="XII.F1"
                                <?= ($anggota['kelas']=='XII.F1')?'selected':'' ?>>
                                XII.F1
                            </option>

                            <option value="XII.F2"
                                <?= ($anggota['kelas']=='XII.F2')?'selected':'' ?>>
                                XII.F2
                            </option>

                        </select>

                    </div>

                    <div class="form-group">

                        <label>Alamat</label>

                        <textarea name="alamat"
                                  class="form-control"
                                  rows="3"><?= $anggota['alamat'] ?></textarea>

                    </div>

                </div>

            </div>

            <hr>

            <button type="submit" class="btn btn-primary">

                <i class="fas fa-save"></i>
                Update

            </button>

            <a href="<?= base_url('anggota') ?>"
               class="btn btn-secondary">

                <i class="fas fa-arrow-left"></i>
                Kembali

            </a>

        </form>

    </div>

</div>

<script>

$(document).ready(function(){

    if($('#jenis').val()=='Guru'){

        $('#kelas').prop('disabled',true);

    }

});

$('#jenis').change(function(){

    if($(this).val()=='Guru'){

        $('#kelas').prop('disabled',true).val('');

    }else{

        $('#kelas').prop('disabled',false);

    }

});

$('#foto').change(function(){

    const file=this.files[0];

    if(file){

        let reader=new FileReader();

        reader.onload=function(e){

            $('#preview').attr('src',e.target.result);

        }

        reader.readAsDataURL(file);

    }

});

</script>

<?= $this->endSection() ?>