<?php
/**
 * customer/includes/feedback_thanks.php
 * Thank-you modal shown after a feedback form is submitted.
 * Include just before footer. Reads ?fb=rest|dabil|both from the URL.
 * Optionally set $__fb_rest_name before including to personalize the
 * restaurant message.
 */
$__fb = $_GET['fb'] ?? '';
if (!in_array($__fb, ['rest', 'dabil', 'both'], true)) return;

$__fb_rest_name = trim((string)($__fb_rest_name ?? ''));
$__rn = $__fb_rest_name !== '' ? htmlspecialchars($__fb_rest_name) : 'the restaurant';

if ($__fb === 'rest') {
    $__fb_title = 'Thank you for your feedback!';
    $__fb_msg   = "Your opinion matters. 💙 What you shared goes straight to <strong>{$__rn}</strong> and helps them serve you even better next time.";
} elseif ($__fb === 'dabil') {
    $__fb_title = 'Thank you for helping us improve!';
    $__fb_msg   = "Your opinion matters to all of us at <strong>Dabil</strong>. Feedback like yours shapes what we build next — we read every single one.";
} else { // both
    $__fb_title = 'Thank you — twice!';
    $__fb_msg   = "Your opinion matters. 💙 Your review is on its way to <strong>{$__rn}</strong>, and your thoughts on <strong>Dabil</strong> help us make the app better for everyone.";
}
?>
<style>
  .fbt-overlay { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center;
    background:rgba(15,23,42,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:20px;
    animation:fbtFade .25s ease both; }
  .fbt-modal { width:100%; max-width:400px; background:#fff; border-radius:24px; padding:34px 26px 24px;
    text-align:center; box-shadow:0 24px 60px rgba(15,23,42,.32); animation:fbtPop .32s cubic-bezier(.22,1,.36,1) both; }
  .fbt-icon { width:72px; height:72px; margin:0 auto 18px; border-radius:50%;
    background:linear-gradient(135deg,#225AE3 0%,#1844b8 100%); display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px rgba(34,90,227,.35); animation:fbtHeart 1.1s ease .25s both; }
  .fbt-modal h3 { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; color:var(--text,#0F172A); }
  .fbt-modal p { font-size:.9rem; color:var(--text-muted,#64748B); line-height:1.6; margin-bottom:22px; }
  .fbt-btn { width:100%; height:52px; border:none; border-radius:14px; background:var(--primary,#225AE3); color:#fff;
    font-family:var(--font,inherit); font-weight:700; font-size:.95rem; cursor:pointer;
    box-shadow:0 8px 22px rgba(34,90,227,.3); touch-action:manipulation; }
  .fbt-btn:active { background:var(--primary-dark,#1844b8); }
  @keyframes fbtFade  { from{opacity:0} to{opacity:1} }
  @keyframes fbtPop   { from{opacity:0; transform:scale(.9) translateY(12px)} to{opacity:1; transform:none} }
  @keyframes fbtHeart { 0%{transform:scale(0)} 55%{transform:scale(1.15)} 75%{transform:scale(.95)} 100%{transform:scale(1)} }
  @media (prefers-reduced-motion: reduce){ .fbt-overlay,.fbt-modal,.fbt-icon{animation:none !important} }
</style>
<div class="fbt-overlay" id="fbThanksOverlay" role="dialog" aria-modal="true" aria-labelledby="fbtTitle"
     onclick="if(event.target===this)closeFbThanks()">
  <div class="fbt-modal">
    <div class="fbt-icon">
      <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff" stroke="none">
        <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
      </svg>
    </div>
    <h3 id="fbtTitle"><?php echo $__fb_title; ?></h3>
    <p><?php echo $__fb_msg; ?></p>
    <button type="button" class="fbt-btn" onclick="closeFbThanks()">Done</button>
  </div>
</div>
<script>
function closeFbThanks(){
  const ov = document.getElementById('fbThanksOverlay');
  if (ov) ov.remove();
  // Strip the fb flag from the URL so a refresh doesn't re-show the modal.
  try {
    const u = new URL(window.location.href);
    u.searchParams.delete('fb');
    window.history.replaceState({}, '', u.toString());
  } catch(e) {}
}
</script>
