<?php include(__DIR__ . '/../../session.php'); ?>

<!DOCTYPE html>
<html lang="en">

<?php include(__DIR__ . '/../../layouts/header.php'); ?>

<body>
  <div class="wrapper">
    <?php include(__DIR__ . '/../../layouts/sidebar.php'); ?>

    <div class="main-panel">
      <?php include(__DIR__ . '/../../layouts/navbar.php'); ?>

      <div class="container">
        <div class="page-inner">

          <div class="page-header">
            <h3 class="fw-bold mb-3">Edit Profil</h3>
            <ul class="breadcrumbs mb-3">
              <li class="nav-home">
                <a href="#">
                  <i class="icon-home"></i>
                </a>
              </li>
              <li class="separator">
                <i class="icon-arrow-right"></i>
              </li>
              <li class="nav-item">
                <a href="#">Profil</a>
              </li>
              <li class="separator">
                <i class="icon-arrow-right"></i>
              </li>
              <li class="nav-item">
                <a href="#">Edit Profil</a>
              </li>
            </ul>
          </div>

          <div class="row">
            <!-- Profile Summary Section -->
            <div class="col-md-4">
              <div class="card card-info card-annoucement card-round">
                <div class="card-body text-center">
                  <div class="card-opening">Selamat datang <?= $admin['fullname']; ?>,</div>
                  <div class="card-desc">
                    Selamat dan semoga sukses dalam hidup barumu! Aku tahu kamu akan melakukan ini!
                  </div>
                  <div class="card-detail">
                    <div class="btn btn-light btn-rounded">Selengkapnya</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-8">
              <div class="card card-with-nav">
                <div class="card-header">
                  <div class="row row-nav-line">
                    <ul class="nav nav-tabs nav-line nav-color-secondary w-100 ps-4" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active show" data-bs-toggle="tab" href="#profile" role="tab" aria-selected="true">Profil</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#password" role="tab" aria-selected="false">Kata Sandi</a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="card-body">
                  <div class="tab-content">
                    <!-- Profile Form -->
                    <div class="tab-pane fade show active" id="profile" role="tabpanel">
                      <form id="profileForm" method="POST">
                        <input type="hidden" name="csrf_token" id="csrf_token" value="<?= $csrf_token; ?>">
                        <input type="hidden" name="id" id="id" value="<?= $admin['id']; ?>">
                        <div class="row mt-3">
                          <div class="col-md-6">
                            <div class="form-group form-group-default" id="timeline">
                              <label>Nama Lengkap</label>
                              <input type="text" class="form-control" name="fullname" placeholder="Masukan Nama Lengkap" value="<?= $admin['fullname']; ?>">
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group form-group-default">
                              <label>Nama Pengguna</label>
                              <input type="text" class="form-control" name="username" placeholder="Masukan Nama Pengguna" value="<?= $admin['username']; ?>">
                            </div>
                          </div>
                        </div>
                        <div class="text-end mt-3 mb-3">
                          <input type="hidden" name="id" value="<?php echo $admin['id']; ?>">
                          <button class="btn btn-primary" type="submit">Simpan</button>
                        </div>
                      </form>
                    </div>

                    <!-- Password Form -->
                    <div class="tab-pane fade" id="password" role="tabpanel">
                      <form id="passwordForm" method="POST">
                        <input type="hidden" name="csrf_token" id="csrf_token" value="<?= $csrf_token; ?>">
                        <input type="hidden" name="id" id="id" value="<?= $admin['id']; ?>">
                        <div class="row mt-3">
                          <div class="col-md-6">
                            <div class="form-group form-group-default">
                              <label>Kata Sandi Baru</label>
                              <input type="password" class="form-control" name="new_password" placeholder="Masukan Kata Sandi Baru">
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group form-group-default">
                              <label>Konfirmasi Kata Sandi Baru</label>
                              <input type="password" class="form-control" name="confirm_password" placeholder="Konfirmasi Kata Sandi Baru">
                            </div>
                          </div>
                        </div>
                        <!-- Action Buttons -->
                        <div class="form-group">
                          <a href="window.history.back()" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali
                          </a>
                          <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Simpan
                          </button>
                        </div>
                      </form>
                    </div>
                    <!-- Form ends here -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <?php include(__DIR__ . '/../../layouts/footer.php'); ?>

    </div>
  </div>

  <?php include(__DIR__ . '/../../layouts/script.php'); ?>

  <script>
    $(document).ready(function() {

      $('#profileForm').on('submit', function(e) {
        e.preventDefault();

        var formData = new FormData(this);
        formData.append('action', 'profile');

        $.ajax({
          url: 'update-profile',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function(response) {
            var res = JSON.parse(response);
            alert(res.message);

            if (res.status === 'success' || res.status === 'error') {
              location.reload();
            }
          },
          error: function() {
            alert('Terjadi kesalahan, coba lagi!');
          }
        });
      });

      $('#passwordForm').on('submit', function(e) {
        e.preventDefault();

        var formData = new FormData(this);
        formData.append('action', 'password');

        $.ajax({
          url: 'update-profile',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function(response) {
            var res = JSON.parse(response);
            alert(res.message);

            if (res.status === 'success' || res.status === 'error') {
              location.reload();
            }
          },
          error: function() {
            alert('Terjadi kesalahan, coba lagi!');
          }
        });
      });

    });
  </script>

</body>

</html>