<body>
  <main id="main" class="main">

    <div class="pagetitle">
      <h4><b>IKATAN ALUMNI WIDYAGAMA</b></h4>
      <hr>
    </div>

    <!--PAGE PROFIL-->
    <section class="section profile" id="show_profil">
      <div class="row">
        <div class="col-xl-4">
          <div class="card">
            <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
              <img src="<?php echo base_url(); ?>assets/materi/foto_alumni/<?php echo $detail->foto ?>" alt="Profile" class="">
              <br>
              <p><b><?php echo $detail->nama ?></b></p>
              <p class="small fst-italic">"<?php echo $detail->motto ?>"</p>
              <p></p>
            </div>
          </div>
        </div>
        <div class="col-xl-8">
          <div class="card">
            <div class="card-body pt-3">
              <ul class="nav nav-tabs nav-tabs-bordered">
                <li class="nav-item">
                  <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Profil</button>
                </li>
                <li class="nav-item">
                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit Profil</button>
                </li>
                <li class="nav-item">
                  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Ganti Password</button>
                </li>
              </ul>
              <div class="tab-content pt-2">
                <div class="tab-pane fade show active profile-overview" id="profile-overview">
                  <h5 class="card-title">Profile Details</h5>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label ">Nama Lengkap</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->nama ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Tahun Masuk</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->th_masuk ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Tahun Lulus</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->th_lulus ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Jurusan</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->jurusan ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Alamat</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->alamat ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Telepon / No HP</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->telp ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Email</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->email ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Profesi</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->profesi ?></div>
                  </div>
                  <div class="row">
                    <div class="col-lg-3 col-md-4 label">Alamat Kantor</div>
                    <div class="col-lg-9 col-md-8"><?php echo $detail->alamat_kantor ?></div>
                  </div>
                </div>
                <!-- Profile Edit Form -->
                <div class="tab-pane fade profile-edit pt-3" id="profile-edit">
                  <form method="post" action="<?php echo base_url().'alumni/update_alumni' ?>" enctype="multipart/form-data">
                    <div class="row mb-3">
                      <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                      <div class="col-md-8 col-lg-9">
                        <img src="<?php echo base_url(); ?>assets/materi/foto_alumni/<?php echo $detail->foto ?>" alt="Profile">
                      </div>  
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Ganti Foto</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="foto" type="file" class="form-control">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Nama Lengkap</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="nama" type="text" class="form-control" value="<?php echo $detail->nama ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Tahun Masuk</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="th_masuk" type="text" class="form-control" value="<?php echo $detail->th_masuk ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Tahun Lulus</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="th_lulus" type="text" class="form-control" value="<?php echo $detail->th_lulus ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Jurusan</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="jurusan" type="text" class="form-control" value="<?php echo $detail->jurusan ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Alamat</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="alamat" type="text" class="form-control" value="<?php echo $detail->alamat ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Telepon</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="telp" type="text" class="form-control" value="<?php echo $detail->telp ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Email</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="email" type="text" class="form-control" value="<?php echo $detail->email ?>" disabled>
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Profesi</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="profesi" type="text" class="form-control" value="<?php echo $detail->profesi ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Alamat Kantor</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="alamat_kantor" type="text" class="form-control" value="<?php echo $detail->alamat_kantor ?>">
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Motto</label>
                      <div class="col-md-8 col-lg-9">
                      <textarea class="form-control" name="motto" style="height: 100px" value=""><?php echo $detail->motto ?></textarea>
                      </div>
                    </div>
                    <div class="text-center">
                      <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                  </form>
                </div>
                <!-- End Profile Edit Form -->
                <!-- Change Password Form -->
                <div class="tab-pane fade pt-3" id="profile-change-password">
                  <form method="post" action="<?php echo base_url().'alumni/update_password_alumni' ?>">
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Password sekarang</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="password" type="password" class="form-control" required>
                      </div>
                    </div>
                    <div class="row mb-3">
                      <label class="col-md-4 col-lg-3 col-form-label">Password baru</label>
                      <div class="col-md-8 col-lg-9">
                        <input name="password_baru" type="password" class="form-control" required>
                      </div>
                    </div>
                    <div class="text-center">
                      <button type="submit" class="btn btn-primary">Change Password</button>
                    </div>
                  </form>
                </div>
                <!-- End Change Password Form -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--END PAGE PROFIL-->

    <!--PAGE DATA ALUMNI-->
    <section class="" id="show_alumnus">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">DATA ALUMNI</h5>
              <table id="tabel_alumni" class="table display row-border table-hover">
                <thead>
                  <tr>   
                    <th>NAMA</th>
                    <th>MASUK</th>
                    <th>LULUS</th>
                    <th>JURUSAN</th>
                    <th>DETAIL</th>
                  </tr>
                </thead>
                <tbody>
                <?php foreach ($data_alumni as $data) : $username = $data['email'];?> 
                  <tr>
                    <td id="nama" name="nama"><?php echo $data['nama'] ?></td>
                    <td style="text-align: center;"><?php echo $data['th_masuk'] ?></td>
                    <td style="text-align: center;"><?php echo $data['th_lulus'] ?></td>
                    <td><?php echo $data['jurusan'] ?></td>
                    <td style="text-align: center;"><button type="button" class="btn btn-primary" onClick="viewDetail('<?php echo $username;?>')">
                        <i class="bi bi-eye"></i>
                      </button>
                    </td>
                  </tr>
                <?php endforeach; ?>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--END PAGE DATA ALUMNI-->

    <!--MODAL DETAIL-->
    <div class="modal fade " id="modalz" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title"><b>DETAIL ALUMNI</b></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div id="" class="modal-body">
            <table class="table">
                <tr>
                    <td>Foto</td>
                    <td>:</td>
                    <td><img id="alumni_foto" width="100px"></td>
                </tr>
                <tr>
                    <td>Nama</td>
                    <td>:</td>
                    <td id="alumni_nama"></td>
                </tr>
                <tr>
                    <td>Tahun Masuk</td>
                    <td>:</td>
                    <td id="alumni_th_masuk"></td>
                </tr>
                <tr>
                    <td>Tahun Lulus</td>
                    <td>:</td>
                    <td id="alumni_th_lulus"></td>
                </tr>
                <tr>
                    <td>Jurusan</td>
                    <td>:</td>
                    <td id="alumni_jurusan"></td>
                </tr>
                <tr>
                    <td>Alamat</td>
                    <td>:</td>
                    <td id="alumni_alamat"></td>
                </tr>
                <tr>
                    <td>Telepon</td>
                    <td>:</td>
                    <td id="alumni_telp"></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>:</td>
                    <td id="alumni_email"></td>
                </tr>
                <tr>
                    <td>Profesi</td>
                    <td>:</td>
                    <td id="alumni_profesi"></td>
                </tr>
                <tr>
                    <td>Alamat Kantor</td>
                    <td>:</td>
                    <td id="alumni_alamat_kantor"></td>
                </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--END MODAL DETAIL-->

  </main>

  <script type="text/javascript"> 
    function viewDetail(username){
      $.ajax({
        url: '<?php echo base_url() . "alumni/detail_alumni/"?>'+encodeURIComponent(username),
        success: function(response) {
            const responseJSON = JSON.parse(response);
            //console.log(responseJSON);
            $('#alumni_foto').attr('src','<?php echo base_url() . "assets/materi/foto_alumni/"?>'+responseJSON.foto)
            $('#alumni_nama').html(responseJSON.nama)
            $('#alumni_th_masuk').html(responseJSON.th_masuk)
            $('#alumni_th_lulus').html(responseJSON.th_lulus)
            $('#alumni_jurusan').html(responseJSON.jurusan)
            $('#alumni_alamat').html(responseJSON.alamat)
            $('#alumni_telp').html(responseJSON.telp)
            $('#alumni_email').html(responseJSON.email)
            $('#alumni_profesi').html(responseJSON.profesi)
            $('#alumni_alamat_kantor').html(responseJSON.alamat_kantor)
            $('#modalz').modal('show');
        },
        error: function(error) {
            console.error('Error:', error);
        }
      });
    }

    // function viewDetail(username){
    //   const responseJSON = JSON.parse('<?php //echo json_encode($data_alumni)?>');
    //   console.log(responseJSON);
    //   for(let i=0; i<responseJSON.length;i++){
    //     const data = responseJSON[i];
    //     if(data.email === username){
    //       $('#alumni_nama').html(data.nama)
    //       $('#modalz').modal('show');
    //       break;
    //     }
    //   }
    // };
  </script>
  <script type="text/javascript">
    document.getElementById("show_profil").style.display = "block";
    document.getElementById("show_alumnus").style.display = "none";

    function showProfil() {
      document.getElementById("show_profil").style.display = "block";
      document.getElementById("show_alumnus").style.display = "none";
    }
    function showAlumnus() {
      document.getElementById("show_profil").style.display = "none";
      document.getElementById("show_alumnus").style.display = "block";
    }
	</script> 
</body>

</html>