<% var pageTitle = 'Poruke'; var currentPage = 'messages'; %>
<%- include('partials/header') %>

<h1>Predlošci poruka za goste</h1>
<p class="subtitle">Koristi zamjenske oznake: {ime_gosta}, {apartman}, {adresa}, {datum_dolaska}, {datum_odlaska}, {broj_gostiju}</p>

<div class="panel">
  <h2 style="margin-top:0;">Novi predložak</h2>
  <form method="POST" action="/messages/new">
    <div class="form-row">
      <div class="form-group">
        <label for="name">Naziv predloška</label>
        <input type="text" id="name" name="name" required placeholder="npr. Upute za check-in">
      </div>
      <div class="form-group">
        <label for="trigger_type">Vrsta</label>
        <select id="trigger_type" name="trigger_type">
          <option value="potvrda">Potvrda rezervacije</option>
          <option value="checkin_upute">Upute za check-in</option>
          <option value="checkout_podsjetnik">Podsjetnik za check-out</option>
          <option value="ostalo">Ostalo</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="content">Tekst poruke</label>
      <textarea id="content" name="content" required placeholder="Poštovani/a {ime_gosta}, veselimo se vašem dolasku u {apartman} dana {datum_dolaska}..."></textarea>
    </div>
    <button type="submit" class="btn">Spremi predložak</button>
  </form>
</div>

<div class="panel">
  <h2 style="margin-top:0;">Pošalji poruku za rezervaciju</h2>
  <div class="form-row">
    <div class="form-group">
      <label for="booking_select">Rezervacija</label>
      <select id="booking_select">
        <option value="">— odaberi rezervaciju —</option>
        <% bookings.forEach(b => { %>
          <option value="<%= b.id %>"><%= b.apartment_name %> — <%= b.guest_name || 'gost' %> (<%= fmt.date(b.check_in) %>)</option>
        <% }) %>
      </select>
    </div>
    <div class="form-group">
      <label for="template_select">Predložak</label>
      <select id="template_select">
        <option value="">— odaberi predložak —</option>
        <% templates.forEach(t => { %>
          <option value="<%= t.id %>"><%= t.name %></option>
        <% }) %>
      </select>
    </div>
  </div>
  <button type="button" class="btn btn-secondary" onclick="previewMessage()">Prikaži popunjenu poruku</button>
  <div class="form-group" style="margin-top:1rem;">
    <textarea id="preview_text" readonly style="min-height:130px;"></textarea>
  </div>
  <button type="button" class="btn" onclick="copyPreview()">Kopiraj tekst</button>
  <span id="copy_status" style="margin-left:0.6rem; color:var(--teal); font-family:sans-serif; font-size:0.85rem;"></span>
</div>

<div class="panel">
  <h2 style="margin-top:0;">Svi predlošci</h2>
  <% if (templates.length === 0) { %>
    <p class="empty-state">Još nema predložaka.</p>
  <% } else { %>
    <table>
      <thead><tr><th>Naziv</th><th>Vrsta</th><th></th></tr></thead>
      <tbody>
        <% templates.forEach(t => { %>
          <tr>
            <td><%= t.name %></td>
            <td><%= t.trigger_type %></td>
            <td>
              <form class="inline" method="POST" action="/messages/<%= t.id %>/delete" onsubmit="return confirm('Obrisati predložak?');">
                <button type="submit" style="background:none;border:none;color:#a83c3c;cursor:pointer;font-family:inherit;">obriši</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</div>

<script>
async function previewMessage() {
  const bookingId = document.getElementById('booking_select').value;
  const templateId = document.getElementById('template_select').value;
  if (!bookingId || !templateId) {
    alert('Odaberi i rezervaciju i predložak.');
    return;
  }
  const res = await fetch('/messages/preview', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ booking_id: bookingId, template_id: templateId })
  });
  const data = await res.json();
  document.getElementById('preview_text').value = data.text || data.error || '';
}

function copyPreview() {
  const el = document.getElementById('preview_text');
  el.select();
  document.execCommand('copy');
  const status = document.getElementById('copy_status');
  status.textContent = 'Kopirano!';
  setTimeout(() => { status.textContent = ''; }, 2000);
}
</script>

<%- include('partials/footer') %>
