@include('whatsappcenter::admin.partials.styles')
<div class="wac-page container-fluid">

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">Campaigns</h4>
      <p class="wac-subtitle">Send bulk WhatsApp messages to your contacts</p>
    </div>
    <a href="{{ route('admin.whatsappcenter.campaigns.create') }}" class="wac-btn-primary" style="padding:.5rem 1.1rem;font-size:.82rem">
      <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      New Campaign
    </a>
  </div>

  <script>
  window.dtRenders = window.dtRenders || {};
  window.dtRenders.wacCampName = function(val, row) {
    var url=row._show_url||'#';
    return '<a href="'+url+'" style="font-weight:700;font-size:.875rem;text-decoration:none;color:var(--text-primary)">'+val+'</a>'
      +(row.message_preview?'<div style="font-size:.72rem;color:var(--text-secondary);margin-top:2px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+row.message_preview+'</div>':'');
  };
  window.dtRenders.wacCampStatus = function(val) {
    var m={completed:'wac-badge-green',sending:'wac-badge-orange',draft:'wac-badge-grey',failed:'wac-badge-red',scheduled:'wac-badge-blue'};
    return '<span class="wac-badge '+(m[val]||'wac-badge-grey')+'">'+val+'</span>';
  };
  window.dtRenders.wacCampStats = function(val, row) {
    return '<div style="display:flex;gap:.875rem;font-size:.8rem">'
      +'<span><span style="font-weight:700;color:#22c55e">'+row.sent_count+'</span> <span style="color:var(--text-secondary)">sent</span></span>'
      +'<span><span style="font-weight:700;color:#3b82f6">'+row.delivered_count+'</span> <span style="color:var(--text-secondary)">delivered</span></span>'
      +'<span><span style="font-weight:700;color:#8b5cf6">'+row.read_count+'</span> <span style="color:var(--text-secondary)">read</span></span>'
      +'<span><span style="font-weight:700;color:#ef4444">'+row.failed_count+'</span> <span style="color:var(--text-secondary)">failed</span></span>'
      +'</div>';
  };
  window.dtRenders.wacCampActions = function(val, row) {
    var v=row._show_url?'<a href="'+row._show_url+'" class="wac-btn-view"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> View</a>':'';
    var d=row._delete_url?'<button class="wac-btn-del" onclick="wacDeleteCamp(\''+row._delete_url+'\')"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/></svg></button>':'';
    return '<div class="wac-actions-cell">'+v+d+'</div>';
  };
  </script>

  <div class="wac-card" style="margin-bottom:0">
    <div class="wac-card-body p-0">
      <table class="dt-table dt-search dt-export dt-perpage dt-checkbox"
             id="campaignsTable"
             data-route="{{ route('admin.whatsappcenter.campaigns.data') }}"
             data-bulk-route="{{ route('admin.whatsappcenter.campaigns.bulk-action') }}">
        <thead>
          <tr>
            <th data-col="name"        class="dt-sort" data-render="wacCampName">Campaign</th>
            <th data-col="total_count" class="dt-sort" style="width:90px">Contacts</th>
            <th data-col="sent_count"  style="width:300px" data-render="wacCampStats">Stats</th>
            <th data-col="status"      class="dt-sort" data-render="wacCampStatus" style="width:120px">Status</th>
            <th data-col="created_at"  class="dt-sort" style="width:130px">Created</th>
            <th data-col="id"          style="width:120px" data-render="wacCampActions">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
  @include('components.datatable')

</div>
<script>
function wacDeleteCamp(url) {
  if(!confirm('Delete this campaign?')) return;
  const f=document.createElement('form'); f.method='POST'; f.action=url;
  f.innerHTML='<input type="hidden" name="_token" value="{{ csrf_token() }}"><input type="hidden" name="_method" value="DELETE">';
  document.body.appendChild(f); f.submit();
}
</script>