manjapro_v6/pages/whatsapp_gateway/customer_ai.php

<?php

if($SvId == 2 || $_SESSION['user']['id'] == 1) { ?>
<!--Mode Pengembangan-->

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-6">
                <h3 class="card-title">AI Customer Service</h3>
              </div>
              <div class="col-sm-6">
                <!-- Posisi Jika Butuh Button Modal di kanan atas -->
              </div>
            </div>
          </div>
           
            
          <!-- /.card-header -->
          <div class="card-body">
            <!--START ISI KONTEN-->
            <div class="row">
              <div class="col-md-5">
                <div class="row">
                  <div class="col-md-12">
                    <center>
                      <p>Beritahu AI Informasi</p>
                    </center>
                  </div>
                  <!--<div class="col-md-3 mb-2 text-right">-->
                  <!--   <a type="button" class="btn btn-primary btn-sm m-1" data-toggle="modal" data-target="#ModalPencairan">Pencairan Dana</a> -->
                  <!--</div>-->
                </div>
                <table id="topikPercakapan" class="table table-striped table-bordered" style="zoom: 90%; width: 100%;">
                    <thead>
                        <tr>
                            <th>Topik</th>
                            <th>Deskripsi</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
              </div>
            </div>
            
            <!--END ISI KONTEN-->
            
            
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->
</section>
<!-- /.content -->

<!-- Modal Edit Topik -->
<div class="modal fade" id="modalEditTopik" tabindex="-1" role="dialog" aria-labelledby="modalEditTopikLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form id="formEditTopik">
        <div class="modal-header">
          <h5 class="modal-title" id="modalEditTopikLabel"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="hidden" name="id" id="editId">
            <div class="form-group">
              <label for="editDeskripsi">Deskripsi</label>
              <textarea class="form-control" name="deskripsi" id="editDeskripsi" rows="8" required></textarea>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
          <button type="submit" class="btn btn-primary">Simpan</button>
        </div>
      </form>
    </div>
  </div>
</div>


<script>
$(document).ready(function() {
    $('#topikPercakapan').DataTable({
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "ajax": {
            "url": "controller/get_topik_ai.php?action=list&i=<?= $SvId; ?>",
            "type": "POST"
        },
        "pageLength": 10,
        "columns": [
            { "data": 0 }, // Topik
            { "data": 1 }, // Deskripsi
            {
                "data": 2,  // id unik
                "render": function(data) {
                    return `<button class="btn btn-sm btn-secondary me-1" onclick="editTopik('${data.id}')">
                                Edit
                            </button>`;
                }
            }
        ],
        "order": [[1, "desc"]]
    });
});

function editTopik(id) {
    $.ajax({
        url: "controller/get_topik_ai.php?action=detail",
        type: "POST",
        data: { id: id },
        dataType: "json",
        success: function(res) {
            if (res) {
                $("#editId").val(res.id);
                $('#modalEditTopikLabel').html(`Edit Topik <b>${res.topik}</b>`);
                $("#editDeskripsi").val(res.deskripsi);
                $("#modalEditTopik").modal("show");
            } else {
                alert("Data tidak ditemukan!");
            }
        },
        error: function() {
            alert("Gagal mengambil data dari server!");
        }
    });
}


$("#formEditTopik").on("submit", function(e) {
    e.preventDefault();
    $.ajax({
        url: "controller/get_topik_ai.php?action=save&i=<?= $SvId; ?>",
        type: "POST",
        data: $(this).serialize(),
        dataType: "json",
        success: function(res) {
            if(res.status === "ok") {
                $("#modalEditTopik").modal("hide");
                $('#topikPercakapan').DataTable().ajax.reload();
                Swal.fire("Sukses", "Deskripsi berhasil disimpan!", "success");
            } else {
                Swal.fire("Error", res.msg, "error");
            }
        }
    });
});
</script>



<?php } else { ?>
<!--MODE AKAN DATANG FITUR NYA-->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-6">
                <h3 class="card-title">AI Customer Service</h3>
              </div>
              <div class="col-sm-6"></div>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <div class="row align-items-center">
              <!-- Bagian Gambar -->
              <div class="col-sm-5 text-center">
                <div style="padding:30px;">
                  <img src="https://maxicus.com/wp-content/uploads/2023/05/5_AI-in-Customer-service.png" alt="Coming Soon" width="100%" style="max-width:500px; border-radius:15px; box-shadow:0px 4px 15px rgba(0,0,0,0.1);">
                  <h2 style="margin-top:20px; font-weight:bold; color:#2c3e50;">Fitur ini akan segera hadir!</h2>
                  <p style="font-size:16px; color:#666;">Kami sedang mempersiapkan teknologi AI yang siap membantu bisnis Anda.</p>
                </div>
              </div>

              <!-- Bagian Fitur -->
              <div class="col-sm-7">
                <div style="padding:30px;">
                  <h4 style="font-weight:bold; color:#34495e; margin-bottom:20px;">✨ Fitur - Fitur yang Membantu Customer Service</h4>
                  <p style="font-size:15px; color:#555; margin-bottom:20px; line-height:1.6;">
                    AI ini bukan menggantikan Customer Service, tapi menjadi asisten yang membuat pekerjaan lebih ringan, cepat, dan efisien.
                  </p>

                  <!-- Grid Fitur dengan Card -->
                  <div class="row">
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        🤖 <b>Chatbot Cerdas</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Menjawab pertanyaan rutin pelanggan otomatis.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        🧭 <b>Mengenali Customer</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Dapat langsung mengenali pelanggan saat chat masuk.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        🔍 <b>Pencarian Cepat</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Memberikan info instan dari database.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        📊 <b>Analisis Percakapan</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Menampilkan tren pertanyaan pelanggan.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        💬 <b>Saran Balasan</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Memberi rekomendasi jawaban cepat untuk CS.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        📱 <b>Integrasi WhatsApp</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Melayani langsung dari aplikasi populer.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        🗂️ <b>Auto-Routing</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Mengarahkan pertanyaan ke CS yang tepat.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        ⏱️ <b>24/7 Online</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Tetap melayani pelanggan di luar jam kerja.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        📂 <b>Integrasi Data</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Menampilkan data pelanggan otomatis saat chat masuk.</p>
                      </div>
                    </div>
                    <div class="col-md-6 mb-3">
                      <div style="background:#fff; border-radius:12px; padding:15px; box-shadow:0 4px 12px rgba(0,0,0,0.1); height:100%;">
                        ⚡ <b>Notifikasi Real-Time</b>
                        <p style="margin:5px 0 0; font-size:14px; color:#555;">Memberi tahu CS saat ada pesan penting atau urgent.</p>
                      </div>
                    </div>
                  </div>

                  <div style="margin-top:20px; text-align:center;">
                    <span style="background:#3498db; color:#fff; padding:10px 20px; border-radius:25px; font-weight:bold; box-shadow:0 4px 10px rgba(52,152,219,0.4);">
                      🚀 Coming Soon!
                    </span>
                  </div>
                </div>
              </div>
            </div> 
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



          
<?php } ?>