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

  <div class="wac-page-header">
    <div>
      <h4 class="wac-title">{{ isset($reply) ? 'Edit Auto Reply' : 'Create Auto Reply' }}</h4>
      <p class="wac-subtitle">Define what the bot replies when a trigger matches</p>
    </div>
    <a href="{{ route('admin.whatsappcenter.replies.index') }}" class="wac-btn-secondary">
      <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
      Back
    </a>
  </div>

  @if($errors->any())
    <div class="wac-notice err">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>
  @endif

  <form action="{{ isset($reply) ? route('admin.whatsappcenter.replies.update', $reply->id) : route('admin.whatsappcenter.replies.store') }}" method="POST">
    @csrf
    @if(isset($reply)) @method('PUT') @endif

    <div class="row g-4">

      {{-- TRIGGER ───────────────────────────────────────────────────────────── --}}
      <div class="col-lg-5">
        <div class="wac-panel" style="position:sticky;top:1rem">
          <div class="wac-panel-head">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
            Trigger — When to reply?
          </div>
          <div class="wac-panel-body">

            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Trigger Type <span class="req">*</span></label>
              <select name="trigger_type" class="wac-ctrl" id="triggerType" onchange="updateHelp()">
                @foreach(['keyword'=>'Keyword (exact word)','contains'=>'Contains (message includes word)','exact'=>'Exact Match (full message)','button_reply'=>'Button Reply (button tap)','wildcard'=>'Wildcard (any message in state)','fallback'=>'Fallback (nothing else matched)'] as $val=>$label)
                <option value="{{ $val }}" {{ old('trigger_type',$reply->trigger_type??'') === $val ? 'selected':'' }}>{{ $label }}</option>
                @endforeach
              </select>
              <p class="wac-hint" id="triggerHelp"></p>
            </div>

            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Trigger Value <span class="req">*</span></label>
              <input type="text" name="trigger_value" class="wac-ctrl" value="{{ old('trigger_value',$reply->trigger_value??'') }}" placeholder="hi, hello, hey">
            </div>

            <div style="margin-bottom:1rem">
              <label class="wac-lbl">State Required</label>
              <select name="state_required" class="wac-ctrl">
                <option value="" {{ old('state_required',$reply->state_required??'')=== '' ?'selected':'' }}>Any state</option>
                @foreach(['IDLE','MENU_SHOWN','WAITING_ORDER_ID','WAITING_INVOICE','WAITING_INPUT'] as $st)
                <option value="{{ $st }}" {{ old('state_required',$reply->state_required??'')===$st?'selected':'' }}>{{ $st }}</option>
                @endforeach
              </select>
              <p class="wac-hint">Only fire this reply when conversation is in this state</p>
            </div>

            <div class="wac-divider"></div>

            <div class="wac-form-row col2" style="margin-bottom:0">
              <div>
                <label class="wac-lbl">Sort Order</label>
                <input type="number" name="sort_order" class="wac-ctrl" value="{{ old('sort_order',$reply->sort_order??10) }}" min="1">
                <p class="wac-hint">Lower = higher priority</p>
              </div>
              <div>
                <label class="wac-lbl">Status</label>
                <div style="padding-top:.6rem">
                  <label class="d-flex align-items-center gap-2" style="cursor:pointer">
                    <label class="wac-toggle">
                      <input type="checkbox" name="is_active" value="1" {{ old('is_active',$reply->is_active??true) ? 'checked':'' }}>
                      <span class="wac-toggle-slider"></span>
                    </label>
                    <span style="font-size:.85rem;color:var(--text-secondary)">Active</span>
                  </label>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      {{-- RESPONSE ──────────────────────────────────────────────────────────── --}}
      <div class="col-lg-7">
        <div class="wac-panel">
          <div class="wac-panel-head">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
            Response — What to reply?
          </div>
          <div class="wac-panel-body">

            <div style="margin-bottom:1rem">
              <label class="wac-lbl">Response Type <span class="req">*</span></label>
              <select name="response_type" class="wac-ctrl" id="responseType" onchange="showFields()">
                @foreach(['text'=>'Text Message','buttons'=>'Interactive Buttons (max 3)','list'=>'List Menu (max 10)','handover'=>'Human Handover'] as $val=>$label)
                <option value="{{ $val }}" {{ old('response_type',$reply->response_type??'')===$val?'selected':'' }}>{{ $label }}</option>
                @endforeach
              </select>
            </div>

            <div id="fHeader" style="display:none;margin-bottom:1rem">
              <label class="wac-lbl">Header Text <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.7rem">(max 60 chars)</span></label>
              <input type="text" name="response_header" class="wac-ctrl" maxlength="60" value="{{ old('response_header',$reply->response_header??'') }}" placeholder="Welcome to Our Store">
            </div>

            <div id="fBody" style="margin-bottom:1rem">
              <label class="wac-lbl">Message Text <span class="req">*</span></label>
              <textarea name="response_text" class="wac-ctrl" rows="4" placeholder="Hi {name}! 👋 How can we help you today?">{{ old('response_text',$reply->response_text??'') }}</textarea>
              <p class="wac-hint">Placeholders: <code style="background:var(--wac-green-bg);color:var(--wac-green);padding:1px 5px;border-radius:.3rem">{name}</code> <code style="background:var(--wac-green-bg);color:var(--wac-green);padding:1px 5px;border-radius:.3rem">{phone}</code> <code style="background:var(--wac-green-bg);color:var(--wac-green);padding:1px 5px;border-radius:.3rem">{company}</code></p>
            </div>

            <div id="fButtons" style="display:none;margin-bottom:1rem">
              <label class="wac-lbl">Buttons <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.7rem">max 3 · 20 chars each</span></label>
              @php $btns=isset($reply)?json_decode($reply->response_buttons??'[]',true):[];$btns=array_pad($btns,3,['id'=>'','title'=>'']); @endphp
              <div style="display:grid;gap:.5rem">
                @for($i=0;$i<3;$i++)
                <div style="display:grid;grid-template-columns:1fr 1.5fr;gap:.5rem">
                  <input type="text" name="btn_id[]"    class="wac-ctrl" style="font-family:var(--wac-mono);font-size:.82rem;color:var(--wac-green)" placeholder="btn_id_{{ $i+1 }}" value="{{ old('btn_id.'.$i,$btns[$i]['id']??'') }}">
                  <input type="text" name="btn_title[]" class="wac-ctrl" placeholder="Button Label" maxlength="20" value="{{ old('btn_title.'.$i,$btns[$i]['title']??'') }}">
                </div>
                @endfor
              </div>
              <p class="wac-hint">ID is used as trigger_value for button_reply rules</p>
            </div>

            <div id="fList" style="display:none;margin-bottom:1rem">
              <label class="wac-lbl">List Rows <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.7rem">max 5 shown</span></label>
              @php $rows=isset($reply)?json_decode($reply->response_buttons??'[]',true):[];$rows=array_pad($rows,5,['id'=>'','title'=>'','description'=>'']); @endphp
              <div style="background:var(--body-bg);border-radius:.6rem;overflow:hidden;border:1.5px solid rgba(0,0,0,.07)">
                <div style="display:grid;grid-template-columns:130px 1fr 1.5fr;gap:.5rem;padding:.4rem .875rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);border-bottom:1px solid rgba(0,0,0,.06)">
                  <div>Row ID</div><div>Title (24)</div><div>Description (72)</div>
                </div>
                @for($i=0;$i<5;$i++)
                <div style="display:grid;grid-template-columns:130px 1fr 1.5fr;gap:.5rem;padding:.45rem .875rem;border-bottom:1px solid rgba(0,0,0,.04);align-items:center">
                  <input type="text" name="row_id[]"    class="wac-ctrl" style="padding:.35rem .6rem;font-size:.8rem;font-family:var(--wac-mono);color:var(--wac-green)" placeholder="row_{{ $i+1 }}" value="{{ old('row_id.'.$i,$rows[$i]['id']??'') }}">
                  <input type="text" name="row_title[]" class="wac-ctrl" style="padding:.35rem .6rem;font-size:.8rem" placeholder="Title" maxlength="24" value="{{ old('row_title.'.$i,$rows[$i]['title']??'') }}">
                  <input type="text" name="row_desc[]"  class="wac-ctrl" style="padding:.35rem .6rem;font-size:.8rem" placeholder="Description" maxlength="72" value="{{ old('row_desc.'.$i,$rows[$i]['description']??'') }}">
                </div>
                @endfor
              </div>
            </div>

            <div class="wac-divider"></div>

            <div style="margin-bottom:0">
              <label class="wac-lbl">Next State <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.7rem">after sending this reply</span></label>
              <select name="next_state" class="wac-ctrl">
                <option value="">— No change —</option>
                @foreach(['IDLE'=>'IDLE (reset conversation)','MENU_SHOWN'=>'MENU_SHOWN','WAITING_ORDER_ID'=>'WAITING_ORDER_ID','WAITING_INVOICE'=>'WAITING_INVOICE','WAITING_INPUT'=>'WAITING_INPUT','HANDOVER'=>'HANDOVER'] as $val=>$label)
                <option value="{{ $val }}" {{ old('next_state',$reply->next_state??'')===$val?'selected':'' }}>{{ $label }}</option>
                @endforeach
              </select>
            </div>

          </div>
        </div>

        <div class="wac-action-bar">
          <a href="{{ route('admin.whatsappcenter.replies.index') }}" class="wac-btn-secondary">Cancel</a>
          <button type="submit" class="wac-btn-primary">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            {{ isset($reply) ? 'Update Reply' : 'Save Reply' }}
          </button>
        </div>
      </div>

    </div>
  </form>
</div>
<script>
const helps={keyword:'Comma-separated exact words: hi, hello, hey',contains:'Any message containing this word: order',exact:'Full message must equal this: ORD-1234',button_reply:'Must match the Button ID exactly: university',wildcard:'Matches any message while in the required state',fallback:'Fires when nothing else matches. Use * as value.'};
function updateHelp(){ document.getElementById('triggerHelp').textContent=helps[document.getElementById('triggerType').value]||''; }
function showFields(){
  const t=document.getElementById('responseType').value;
  document.getElementById('fHeader').style.display=['buttons','list'].includes(t)?'block':'none';
  document.getElementById('fBody').style.display=t!=='handover'?'block':'none';
  document.getElementById('fButtons').style.display=t==='buttons'?'block':'none';
  document.getElementById('fList').style.display=t==='list'?'block':'none';
}
updateHelp(); showFields();
</script>