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

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">Auto Replies</h4>
      <p class="wac-subtitle">Train your bot — define triggers and what the bot replies</p>
    </div>
    <a href="{{ route('admin.whatsappcenter.replies.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>
      Add Auto Reply
    </a>
  </div>

  <div class="wac-notice inf" style="margin-bottom:1.25rem">
    <strong>How it works:</strong> Customer sends message → Bot matches trigger → Bot sends your reply → Moves to next state
  </div>

  <script>
  window.dtRenders = window.dtRenders || {};
  window.dtRenders.wacTriggerType = function(val) {
    var m={keyword:'wac-badge-green',button_reply:'wac-badge-blue',contains:'wac-badge-blue',exact:'wac-badge-grey',wildcard:'wac-badge-orange',fallback:'wac-badge-red'};
    return '<span class="wac-badge '+(m[val]||'wac-badge-grey')+'">'+val+'</span>';
  };
  window.dtRenders.wacResponseType = function(val) {
    var m={text:'wac-badge-grey',buttons:'wac-badge-blue',list:'wac-badge-teal',handover:'wac-badge-orange'};
    return '<span class="wac-badge '+(m[val]||'wac-badge-grey')+'">'+val+'</span>';
  };
  window.dtRenders.wacState = function(val) {
    if(!val||val==='any') return '<span style="font-size:.78rem;color:var(--text-secondary);font-style:italic">any</span>';
    return '<code style="font-size:.72rem;background:var(--wac-green-bg);color:var(--wac-green);padding:2px 7px;border-radius:.35rem;font-family:var(--wac-mono)">'+val+'</code>';
  };
  window.dtRenders.wacActiveToggle = function(val, row) {
    return '<label class="wac-toggle"><input type="checkbox" role="switch" '+(val?'checked':'')+' onchange="wacToggle('+row.id+',this)"><span class="wac-toggle-slider"></span></label>';
  };
  window.dtRenders.wacReplyActions = function(val, row) {
    var e=row._edit_url?'<a href="'+row._edit_url+'" class="wac-btn-edit"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> Edit</a>':'';
    var d=row._delete_url?'<button class="wac-btn-del" onclick="wacDelete(\''+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> Delete</button>':'';
    return '<div class="wac-actions-cell">'+e+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="repliesTable"
             data-route="{{ route('admin.whatsappcenter.replies.data') }}"
             data-bulk-route="{{ route('admin.whatsappcenter.replies.bulk-action') }}">
        <thead>
          <tr>
            <th data-col="sort_order"    class="dt-sort" style="width:55px">#</th>
            <th data-col="trigger_type"  class="dt-sort" data-render="wacTriggerType">Trigger Type</th>
            <th data-col="trigger_value" class="dt-sort">Trigger Value</th>
            <th data-col="state_required"               data-render="wacState">State</th>
            <th data-col="response_type" class="dt-sort" data-render="wacResponseType">Response</th>
            <th data-col="response_text">Preview</th>
            <th data-col="next_state"                   data-render="wacState">Next State</th>
            <th data-col="is_active" style="width:80px"  data-render="wacActiveToggle">Active</th>
            <th data-col="id" style="width:150px"        data-render="wacReplyActions">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
  @include('components.datatable')

</div>
<script>
function wacToggle(id, el) {
  fetch('/admin/whatsappcenter/replies/'+id+'/toggle', {method:'POST',headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'}})
    .then(r=>r.json()).then(d=>el.checked=d.is_active);
}
function wacDelete(url) {
  if(!confirm('Delete this auto reply?')) 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>