<div class="wa-tab-view" data-wa-tab="report">
<style>
.wa-report-page{padding-bottom:32px}.wa-report-card{padding:24px;border:1px solid #dfe6ef;border-radius:17px;background:#fff;box-shadow:0 3px 10px rgba(15,30,55,.05)}.wa-report-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:17px;border-bottom:1px solid #e9edf3}.wa-report-head h1{margin:0 0 4px;color:#111a2d;font-size:19px;font-weight:800}.wa-report-head h1 i{margin-right:9px;color:var(--app-theme-color,#1958ae)}.wa-report-head p{margin:0;color:#718099;font-size:12px}.wa-report-stats{display:flex;align-items:center;gap:9px}.wa-report-stats span{padding:6px 12px;border-radius:16px;background:#f1f4f7;color:#233149;font-size:10px;font-weight:800}.wa-report-stats .success{color:#087b61;background:#dcf8ed}.wa-report-stats .failed{color:#d52f45;background:#ffe7eb}.wa-report-filters{display:grid;grid-template-columns:minmax(280px,2fr) minmax(170px,1fr) minmax(180px,1fr) auto;align-items:center;gap:12px;margin:25px 0;padding:16px;border:1px solid #edf1f5;border-radius:14px;background:#f8fafc}.wa-report-search{display:flex;align-items:center;gap:10px;height:40px;margin:0;padding:0 13px;border:1px solid #dce3ed;border-radius:12px;background:#fff;color:#8c9ab0}.wa-report-search input{width:100%;border:0;outline:0;background:transparent;color:#27364d}.wa-report-filters select{width:100%;height:40px;padding:0 12px;border:1px solid #dce3ed;border-radius:12px;background:#fff;color:#27364d}.wa-report-limit{display:flex;align-items:center;gap:9px;margin:0;color:#68778e;font-size:11px;white-space:nowrap}.wa-report-sync{height:40px;padding:0 14px;border:1px solid #dce3ed;border-radius:12px;background:#fff;color:var(--app-theme-color,#1958ae);font-size:11px;font-weight:800}.wa-report-table-wrap{overflow:hidden;border:1px solid #edf1f5;border-radius:14px}.wa-report-table{width:100%;margin:0;border-collapse:collapse}.wa-report-table th{padding:14px 12px!important;border:0!important;background:#f1f5f9!important;color:#52627b!important;font-size:10px;font-weight:800;text-align:left;text-transform:uppercase}.wa-report-table td{padding:14px 12px;border:0;border-top:1px solid #edf1f5;color:#33425a;vertical-align:top}.wa-report-table tbody tr:hover td{background:#fafbfe}.wa-report-number{width:38px;text-align:center}.wa-report-time{width:135px;white-space:nowrap}.wa-report-recipient{width:210px}.wa-report-recipient b,.wa-report-recipient small{display:block}.wa-report-recipient small{margin-top:3px;color:#8190a5}.wa-report-message{max-width:590px;line-height:1.5;word-break:break-word}.wa-report-status{width:115px}.wa-status-badge{display:inline-flex;padding:5px 10px;border-radius:13px;background:#fff2d8;color:#a36a00;font-size:10px;font-weight:800}.wa-status-badge.success{background:#dcf8ed;color:#087b61}.wa-status-badge.failed{background:#ffe7eb;color:#d52f45}.wa-report-action{width:62px;text-align:center}.wa-report-delete{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:10px;background:#fff0f2;color:#df354b}.wa-report-empty td{height:105px;color:#93a0b4!important;text-align:center;vertical-align:middle!important;font-style:italic}.wa-report-empty i{display:block;margin-bottom:7px;color:var(--app-theme-color,#1958ae);font-size:20px}.wa-report-pagination{display:flex;justify-content:flex-end;margin-top:16px}.wa-report-loading{height:140px;border-radius:14px;background:linear-gradient(90deg,#f1f4f8 25%,#fafbfc 37%,#f1f4f8 63%);background-size:400% 100%;animation:reportShimmer 1.25s infinite}@keyframes reportShimmer{0%{background-position:100% 0}100%{background-position:0 0}}#confirm-delete .modal-content{overflow:hidden;border:0;border-radius:17px;box-shadow:0 22px 65px rgba(12,29,52,.24)}@media(max-width:950px){.wa-report-head{align-items:flex-start;flex-direction:column}.wa-report-filters{grid-template-columns:1fr 1fr}.wa-report-table-wrap{overflow-x:auto}.wa-report-table{min-width:900px}}@media(max-width:600px){.wa-report-filters{grid-template-columns:1fr}.wa-report-stats{flex-wrap:wrap}}
</style>
<style>
.wa-report-card{font-size:12px}.wa-report-head p,.wa-report-filters,.wa-report-search input,.wa-report-filters select,.wa-report-limit,.wa-report-sync{font-size:12px}.wa-report-stats span{font-size:11px}.wa-report-table{font-size:12px;line-height:1.5}.wa-report-table th,.wa-report-table td,.wa-report-number,.wa-report-time,.wa-report-recipient,.wa-report-recipient b,.wa-report-recipient small,.wa-report-message,.wa-report-status,.wa-report-action{font-size:12px}.wa-report-table th{line-height:1.3;letter-spacing:.01em}.wa-report-recipient b{font-weight:700}.wa-report-recipient small{line-height:1.5}.wa-report-message{line-height:1.58}.wa-status-badge{font-size:11px;line-height:1.3}.wa-report-delete{font-size:12px}.wa-report-pagination,.wa-report-pagination .page-link{font-size:12px}
</style>
<div class="container-fluid wa-report-page" id="container-wrapper">
<?php $wa_workspace_tab = 'report'; $this->load->view('whatsapp/_workspace_tabs', compact('wa_workspace_tab')); ?>
<section class="wa-report-card">
  <header class="wa-report-head"><div><h1><i class="fa fa-clock-o"></i>RIWAYAT PENGIRIMAN PESAN</h1><p>Daftar pesan WhatsApp yang telah diproses oleh aplikasi.</p></div><div class="wa-report-stats"><span>Total: <b id="report-total">0</b></span><span class="success"><i class="fa fa-check-circle-o"></i> Berhasil: <b id="report-success">0</b></span><span class="failed"><i class="fa fa-times-circle-o"></i> Gagal: <b id="report-failed">0</b></span></div></header>
  <div class="wa-report-filters"><label class="wa-report-search"><i class="fa fa-search"></i><input type="text" id="keywords" placeholder="Cari penerima, no WA, atau pesan..." onkeyup="search_LaporanGrup();"></label><input type="hidden" id="sortBy" value="DESC"><select id="statusFilter" onchange="search_LaporanGrup()"><option value="">Semua Status</option><option value="success">Berhasil</option><option value="waiting">Menunggu</option><option value="failed">Gagal</option></select><label class="wa-report-limit"><span>Tampilkan:</span><select id="limits" name="limits" onchange="search_LaporanGrup()"><option value="10">10 / Hal</option><option value="20">20 / Hal</option><option value="50">50 / Hal</option><option value="100">100 / Hal</option></select></label><button type="button" class="wa-report-sync sync-report-status"><i class="fa fa-info-circle"></i> Info Status</button></div>
  <div id="data_report"><div class="wa-report-loading"></div></div>
</section></div>

<!-- Modal Hapus -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
        <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <p>Anda akan menghapus satu data, prosedur ini tidak dapat diubah.</p>
        <p>Apakah Anda ingin melanjutkan?</p>
        <p class="debug-url"></p>
        <input type="hidden" id="data-hapusid">
        <input type="hidden" id="data-konsumen">
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button>
        <button class="btn btn-danger hapus" type="button">YA</button>
      </div>
    </div>
  </div>
</div>

<script>
	$(document).ready(function () {
		// Muat tabel pada kunjungan pertama, tanpa menunggu pengguna
		// mengubah filter limit, urutan, atau pencarian.
		search_LaporanGrup(0);
		if (window.waReportStatusTimer) {
			clearInterval(window.waReportStatusTimer);
		}
		window.waReportStatusTimer = setInterval(function () {
			if ($('.wa-tab-view[data-wa-tab="report"]').length === 0) {
				clearInterval(window.waReportStatusTimer);
				window.waReportStatusTimer = null;
				return;
			}
			if (!document.hidden) {
				search_LaporanGrup(0, true);
			}
		}, 8000);
	});

	function syncStatusReport(silent) {
		return $.ajax({
			url: base_url + "whatsapp/sync_report_status",
			method: "POST",
			dataType: "json",
			beforeSend: function () {
				$(".sync-report-status").prop("disabled", true);
			},
			success: function (data) {
				if (!silent) {
					showNotif("bottom-right", "Status Pesan", data.msg, data.status ? "success" : "info");
				}
				search_LaporanGrup(0, true);
			},
			error: function (res, status, message) {
				if (!silent) {
					showNotif("bottom-right", "Status Pesan", message, "warning");
				}
			},
			complete: function () {
				$(".sync-report-status").prop("disabled", false);
			}
		});
	}

	$(document).on("click", ".sync-report-status", function () {
		syncStatusReport(false);
	});

  function search_LaporanGrup(page_num, silent) {
    page_num = page_num ? page_num : 0;
    var keywords = $("#keywords").val();
    var sortBy = $("#sortBy").val();
    var limits = $("#limits").val();
    var statusFilter = $("#statusFilter").val();

    $.ajax({
      type: "POST",
      url: base_url + "whatsapp/ajaxReport/" + page_num,
      data: { page: page_num, keywords: keywords, sortBy: sortBy, limits: limits, statusFilter: statusFilter },
      dataType: "html",
      beforeSend: function () {
		if (!silent) {
			$("#data_report").html('<div class="wa-report-loading"></div>');
		}
      },
      success: function (data) {
        $("#data_report").html(data);
        updateReportStats();
      },
      error: function (res, status, httpMessage) {
        $("body").loading("stop");
        console.log(res.status);
        if (res.status == 401) {
          sweet_login(httpMessage, "warning", base_url);
        } else {
          sweet("Peringatan!!!", httpMessage, "warning", "warning");
        }
      },
    });
  }

  function updateReportStats() {
    var $rows = $('.wa-report-table tbody tr[data-status]');
    $('#report-total').text($rows.length);
    $('#report-success').text($rows.filter('[data-group="success"]').length);
    $('#report-failed').text($rows.filter('[data-group="failed"]').length);
  }

  // Ambil nilai dari tombol yang memicu modal
  $("#confirm-delete").on("show.bs.modal", function (e) {
    $("#data-hapusid").val($(e.relatedTarget).data("id"));
    $("#data-konsumen").val($(e.relatedTarget).data("konsumen"));
  });

  // Hapus data
  $(document).on("click", ".hapus", function (e) {
    e.preventDefault();
    var id = $("#data-hapusid").val();
    var konsumen = $("#data-konsumen").val();

    $.ajax({
      url: base_url + "whatsapp/hapus_report",   // <<< FIX di sini (dulu: promo/hapus_report)
      method: "POST",
      dataType: "json",
      data: { id: id, konsumen: konsumen },
      beforeSend: function () {
        $("body").loading();
      },
      success: function (data) {
        if (data.status == 200) {
          $("#confirm-delete").modal("hide");
          sweet_time(500, "Status!!!", data.msg);
        } else {
          sweet("Peringatan!!!", data.msg, "warning", "warning");
        }
        search_LaporanGrup();
        $("body").loading("stop");
      },
      error: function (res, status, httpMessage) {
        $("body").loading("stop");
        console.log(res.status);
        if (res.status == 401) {
          sweet_login(httpMessage, "warning", base_url);
        } else {
          sweet("Peringatan!!!", httpMessage, "warning", "warning");
        }
      },
    });
  });
</script>
</div>
