<main id="main" class="main">
  <div class="pagetitle">
    <h1>Akun</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="index.php">Home</a></li>
        <li class="breadcrumb-item">Akun</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->
  <section class="section profile">
    <?php
    if (isset($_GET['notif'])) {
      if ($_GET['notif'] == "berhasil_tambah_data") {
        echo '
              <div class="alert alert-success" role="alert">
                  Berhasil menambahkan data.
              </div>
          ';
      } else if ($_GET['notif'] == "berhasil_ubah_data") {
        echo '
              <div class="alert alert-success" role="alert">
                  Berhasil mengubah data.
              </div>
          ';
      } else if ($_GET['notif'] == "berhasil_hapus_data") {
        echo '
              <div class="alert alert-success" role="alert">
                  Berhasil menghapus data.
              </div>
          ';
      } else if ($_GET['notif'] == "berhasil_ubah_foto") {
        echo '
              <div class="alert alert-success" role="alert">
                  Berhasil mengubah foto.
              </div>
          ';
      } else if ($_GET['notif'] == "berhasil_hapus_foto") {
        echo '
              <div class="alert alert-success" role="alert">
                  Berhasil menghapus foto.
              </div>
          ';
      } else if ($_GET['notif'] == "format_gambar_salah") {
        echo '
              <div class="alert alert-warning" role="alert">
                  Hanya boleh menggunakan format gambar PNG, JPG, atau JPEG !.
              </div>
          ';
      }
    }
    ?>
    <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="assets/img/<?php echo $foto_akun_masuk; ?>" alt="Profile" class="rounded-circle">
            <h2><?php echo $nama_akun_masuk; ?></h2>
            <h3><?php echo $nama_pengguna_akun_masuk; ?></h3>
            <!--<div class="social-links mt-2">
              <a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
              <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
              <a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
              <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
            </div>-->
          </div>
        </div>
      </div>
      <div class="col-xl-8">
        <div class="card">
          <div class="card-body pt-3">
            <!-- Bordered Tabs -->
            <ul class="nav nav-tabs nav-tabs-bordered">
              <li class="nav-item">
                <button class="nav-link " data-bs-toggle="tab" data-bs-target="#akun_saya">Akun Saya</button>
              </li>
              <!--<li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data_akun">Data Akun</button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tambah_akun">Tambah Akun</button>
              </li>-->
            </ul>
            <div class="tab-content pt-2">
              <div class="tab-pane fade show active akun_saya pt-3" id="akun_saya">
                <!-- Profile Edit Form -->
                <div class="text-center mb-3">
                  <img src="assets/img/<?php echo $foto_akun_masuk; ?>" alt="Profile" class="img-fluid">
                  <div class="pt-5">
                    <button type="button" data-bs-toggle="modal" data-bs-target="#unggah_foto"
                      class="btn btn-primary"><i class="bi bi-upload"></i> Unggah Foto Baru</button>
                    <button type="button" data-bs-toggle="modal" data-bs-target="#hapus_foto" class="btn btn-danger"><i
                        class="bi bi-trash"></i> Hapus Foto</button>
                  </div>
                  <div class="modal fade" id="unggah_foto" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <form action="prs_ubah_foto.php" method="post" enctype="multipart/form-data">
                          <div class="modal-header">
                            <h5 class="modal-title">Unggah Foto Baru</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <input type="hidden" name="id_akun_masuk" value="<?php echo $id_akun_masuk; ?>">
                            <div class="mb-3">
                              <label for="foto_akun_masuk" class="form-label text-danger">Catatan : Format gambar harus
                                PNG, JPG, atau JPEG dan juga gambar harus 1:1 (persegi) !</label>
                              <input class="form-control" type="file" id="foto_akun_masuk" name="foto_akun_masuk">
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary">Ubah Foto</button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div><!-- End Vertically centered Modal-->
                  <div class="modal fade" id="hapus_foto" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <form action="prs_hapus_foto.php" method="post">
                          <div class="modal-header">
                            <h5 class="modal-title">Hapus Foto</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <input type="hidden" name="id_akun_masuk" value="<?php echo $id_akun_masuk; ?>">
                            Yakin ingin menghapus foto? (akan diubah ke foto bawaan).
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary">Hapus Foto</button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div><!-- End Vertically centered Modal-->
                </div>
                <form action="prs_ubah_akun.php" method="post">
                  <input type="hidden" name="id_akun_masuk" value="<?php echo $id_akun_masuk; ?>">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="nama_akun_masuk" name="nama_akun_masuk"
                      value="<?php echo $nama_akun_masuk; ?>">
                    <label for="nama_akun_masuk">Nama</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="nama_pengguna_akun_masuk"
                      name="nama_pengguna_akun_masuk" value="<?php echo $nama_pengguna_akun_masuk; ?>">
                    <label for="nama_pengguna_akun_masuk">Nama Pengguna</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="kata_sandi_akun" name="kata_sandi_akun"
                      placeholder="Password Baru">
                    <label for="kata_sandi_akun">Password Baru</label>
                  </div>
                  <div class="text-center">
                    <button type="submit" class="btn btn-primary">Ubah Data</button>
                  </div>
                </form><!-- End Profile Edit Form -->
              </div>

              <!--<div class="tab-pane fade data_akun pt-3" id="data_akun">
                <table class="table table-borderless datatable">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Nama</th>
                      <th scope="col">Nama Pengguna</th>
                      <th scope="col">Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php
                    $no = 1;
                    $qry_akun = mysqli_query($koneksi, "SELECT * FROM akun");
                    while ($dt_akun = mysqli_fetch_array($qry_akun)) {
                      $id_akun = $dt_akun['id_akun'];
                      $nama_akun = $dt_akun['nama_akun'];
                      $nama_pengguna_akun = $dt_akun['nama_pengguna_akun'];
                      $kata_sandi_akun = $dt_akun['kata_sandi_akun'];
                      $foto_akun = $dt_akun['foto_akun'];
                      ?>
                    <tr>
                      <th><?php echo $no++; ?></th>
                      <td><?php echo $nama_akun; ?></td>
                      <td><?php echo $nama_pengguna_akun; ?></td>
                      <td>
                        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#ubah_<?php echo $id_akun; ?>"><i class="bi bi-pencil-square"></i></button>
                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#hapus_<?php echo $id_akun; ?>"><i class="bi bi-trash"></i></button>

                        <div class="modal fade" id="ubah_<?php echo $id_akun; ?>" tabindex="-1">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <form action="prs_ubah_akun.php" method="post">
                                <div class="modal-header">
                                  <h5 class="modal-title">Ubah Data</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                  <input type="hidden" name="id_akun_masuk" value="<?php echo $id_akun; ?>">
                                  <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="nama_akun_masuk" name="nama_akun_masuk" value="<?php echo $nama_akun; ?>">
                                    <label for="nama_akun_masuk">Nama</label>
                                  </div>
                                  <div class="form-floating mb-3">
                                    <input type="text" class="form-control" id="nama_pengguna_akun_masuk" name="nama_pengguna_akun_masuk" value="<?php echo $nama_pengguna_akun; ?>">
                                    <label for="nama_pengguna_akun_masuk">Nama Pengguna</label>
                                  </div>
                                  <div class="form-floating mb-3">
                                    <input type="password" class="form-control" id="kata_sandi_akun" name="kata_sandi_akun" placeholder="Kata Sandi Baru">
                                    <label for="kata_sandi_akun">Kata Sandi Baru</label>
                                  </div>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                  <button type="submit" class="btn btn-primary">Ubah Data</button>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                        <div class="modal fade" id="hapus_<?php echo $id_akun; ?>" tabindex="-1">
                          <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title">Hapus Data</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                                Yakin ingin menghapus akun <strong><?php echo $nama_akun; ?></strong> ?
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                <a href="prs_hapus_akun.php?id_akun=<?php echo $id_akun; ?>" class="btn btn-primary">Hapus Data</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <?php } ?>
                  </tbody>
                </table>
              </div>

              <div class="tab-pane fade tambah_akun pt-3" id="tambah_akun">
                <form action="prs_ubah_akun.php" method="post">
                  <input type="hidden" name="id_akun_masuk" value="<?php echo $id_akun; ?>">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="nama_akun_masuk" name="nama_akun_masuk" value="<?php echo $nama_akun; ?>">
                    <label for="nama_akun_masuk">Nama</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="nama_pengguna_akun_masuk" name="nama_pengguna_akun_masuk" value="<?php echo $nama_pengguna_akun; ?>">
                    <label for="nama_pengguna_akun_masuk">Nama Pengguna</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="kata_sandi_akun" name="kata_sandi_akun" placeholder="Kata Sandi Baru">
                    <label for="kata_sandi_akun">Kata Sandi Baru</label>
                  </div>
                  <div class="text-center">
                    <button type="submit" class="btn btn-primary">Ubah Data</button>
                  </div>
                </form>
              </div>-->

            </div><!-- End Bordered Tabs -->

          </div>
        </div>

      </div>
    </div>
  </section>

</main><!-- End #main -->