@extends('layouts.location')

@section('title', 'Auto Msg')
@section('page-title', 'Auto Message')

@push('styles')
<style>
  .auto-msg-card { max-width: 680px; }
</style>
@endpush

@section('content')
<div class="row justify-content-start">
  <div class="col-lg-8">
    <div class="card auto-msg-card border-0 shadow-sm">
      <div class="card-header bg-transparent">
        <h5 class="mb-0"><i class="fas fa-paper-plane me-2"></i>Send Auto Message</h5>
      </div>
      <div class="card-body">
        <form id="autoMsgForm">
          @csrf
          <div class="mb-3">
            <label for="autoMsgPhone" class="form-label">Contact No.</label>
            <input type="tel" class="form-control" id="autoMsgPhone" placeholder="e.g. 9999999999" required>
            <div class="form-text">Enter the user's phone number (with or without country code)</div>
          </div>
          <div class="mb-3">
            <label for="autoMsgText" class="form-label">Message</label>
            <textarea id="autoMsgText" class="form-control" rows="2">Hello from API</textarea>
            <!-- <div class="form-text">Will be sent using HTML parse mode</div> -->
          </div>
          <button type="submit" id="autoMsgSubmit" class="btn btn-primary">
            <span class="submit-text">Send</span>
            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
          </button>
        </form>
        <div id="autoMsgResult" class="mt-3"></div>

        <!-- <div class="mt-4">
          <h6 class="text-muted">How it works</h6>
          <ol class="small ps-3">
            <li>Searches user by phone via proxy at <code>/auto-msg-proxy.php?action=search</code></li>
            <li>Sends message via proxy at <code>/auto-msg-proxy.php?action=send</code> using retrieved <code>chat_id</code></li>
          </ol>
        </div> -->
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
(function(){
  const form = document.getElementById('autoMsgForm');
  const phoneInput = document.getElementById('autoMsgPhone');
  const textInput = document.getElementById('autoMsgText');
  const submitBtn = document.getElementById('autoMsgSubmit');
  const resultBox = document.getElementById('autoMsgResult');
  const spinner = submitBtn ? submitBtn.querySelector('.spinner-border') : null;
  const submitText = submitBtn ? submitBtn.querySelector('.submit-text') : null;

  function setLoading(state){
    if(!submitBtn) return;
    if(state){
      submitBtn.setAttribute('disabled','disabled');
      if (spinner) spinner.classList.remove('d-none');
      if (submitText) submitText.textContent = 'Sending...';
    } else {
      submitBtn.removeAttribute('disabled');
      if (spinner) spinner.classList.add('d-none');
      if (submitText) submitText.textContent = 'Send';
    }
  }

  if(form){
    form.addEventListener('submit', async function(e){
      e.preventDefault();
      resultBox.innerHTML = '';
      const phone = (phoneInput.value || '').trim();
      const message = (textInput.value || 'Hello from API').trim();
      if (!phone){
        resultBox.innerHTML = '<div class="alert alert-warning">Please enter a contact number.</div>';
        return;
      }
      if (!message){
        resultBox.innerHTML = '<div class="alert alert-warning">Message cannot be empty.</div>';
        return;
      }
      setLoading(true);
      try {
        const searchRes = await fetch('/auto-msg-proxy.php?action=search&phone_number=' + encodeURIComponent(phone));
        const searchJson = await searchRes.json();
        if (!searchRes.ok || !searchJson.success) {
          throw new Error('Search failed: ' + (searchJson.error || ('HTTP ' + searchRes.status)));
        }
        const list = Array.isArray(searchJson.data) ? searchJson.data : [];
        if (!list.length || !list[0].chat_id) {
          throw new Error('No user found for this phone number.');
        }
        const chatId = list[0].chat_id;

        const payload = { chat_id: chatId, message: message, parse_mode: 'HTML' };
        const sendRes = await fetch('/auto-msg-proxy.php?action=send', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        const sendJson = await sendRes.json();
        if (!sendRes.ok || !sendJson.success) {
          throw new Error('Send failed: ' + (sendJson.error || ('HTTP ' + sendRes.status)));
        }

        resultBox.innerHTML = `
          <div class="alert alert-success">
            <div>Message sent successfully.</div>
            <div class="small text-muted">chat_id: <strong>${chatId}</strong></div>
            <pre class="mb-0 mt-2" style="white-space: pre-wrap;">${message.replace(/[<>&]/g, c => ({'<':'&lt;','>':'&gt;','&':'&amp;'}[c]))}</pre>
          </div>`;
      } catch (err) {
        resultBox.innerHTML = '<div class="alert alert-danger">' + (err && err.message ? err.message : 'Unexpected error') + '</div>';
      } finally {
        setLoading(false);
      }
    });
  }
})();
</script>
@endpush