<?php
/* @var \Tangibledesign\MyHome\Widgets\General\ContactFormWidget $mhCurrentWidget */
global $mhCurrentWidget;

$mhUserId = null;
if (is_author()) {
    $mhUserId = get_the_author_meta('ID');
}
?>
<div class="myhome-contact-form-widget">
    <?php if (!empty($mhCurrentWidget->getLabel())) : ?>
        <h3 class="myhome-contact-form-widget__label">
            <?php echo esc_html($mhCurrentWidget->getLabel()); ?>
        </h3>
    <?php endif; ?>

    <div class="myhome-contact-form-widget__form">
        <?php $mhCurrentWidget->displayContactForm($mhUserId); ?>
    </div>
</div>

<script>
  (function() {
    function enhance(form) {
      if (!form) return;
      var root = form.closest('.myhome-contact-form-widget');
      if (!root) return;

      function showToast(status, message) {
        var output = form.querySelector('.wpcf7-response-output');
        if (!output) return;

        output.classList.add('myhome-toast');
        output.classList.remove('is-success','is-error','is-warning');
        var state = 'is-success';
        if (status === 'validation_failed' || status === 'mail_failed') state = 'is-error';
        if (status === 'spam' || status === 'aborted') state = 'is-warning';
        output.classList.add(state);

        var inner = document.createElement('div');
        inner.className = 'myhome-toast__inner';
        var icon = document.createElement('span');
        icon.className = 'myhome-toast__icon';
        var content = document.createElement('div');
        content.className = 'myhome-toast__content';
        var close = document.createElement('button');
        close.type = 'button';
        close.className = 'myhome-toast__close';
        close.setAttribute('aria-label', 'Close notification');

        // Icons via Font Awesome
        var i = document.createElement('i');
        if (state === 'is-success') i.className = 'fas fa-check';
        else if (state === 'is-warning') i.className = 'fas fa-exclamation-triangle';
        else i.className = 'fas fa-times';
        icon.appendChild(i);

        content.textContent = (message || output.textContent || '').trim();
        close.innerHTML = '<i class="fas fa-times"></i>';

        inner.appendChild(icon);
        inner.appendChild(content);
        inner.appendChild(close);
        output.innerHTML = '';
        output.appendChild(inner);

        var timer = setTimeout(hide, 8000);
        function hide() {
          output.style.pointerEvents = 'none';
          output.style.transition = 'opacity .4s ease, transform .4s ease';
          output.style.opacity = '0';
          output.style.transform = 'translateX(100%)';
          setTimeout(function(){ output.removeAttribute('style'); output.classList.remove('myhome-toast'); }, 450);
        }
        output.addEventListener('mouseenter', function(){ clearTimeout(timer); });
        output.addEventListener('mouseleave', function(){ timer = setTimeout(hide, 3000); });
        close.addEventListener('click', hide);
      }

      // CF7 events
      ['wpcf7mailsent','wpcf7invalid','wpcf7mailfailed','wpcf7spam','wpcf7aborted'].forEach(function(evt){
        form.addEventListener(evt, function(e){
          var status = (e.detail && (e.detail.status || (e.type.replace('wpcf7','').replace(/^/,'').toLowerCase()))) || '';
          var message = e.detail && e.detail.apiResponse && e.detail.apiResponse.message || '';
          showToast(status, message);
        });
      });

      // Select placeholder color sync (for first_as_label / empty value)
      var selects = form.querySelectorAll('select');
      function updateSelectState(sel){
        var isPlaceholder = sel && (sel.value === '' || (sel.selectedIndex === 0 && sel.options[0] && sel.options[0].value === ''));
        sel.classList.toggle('is-placeholder', !!isPlaceholder);
      }
      selects.forEach(function(sel){
        updateSelectState(sel);
        sel.addEventListener('change', function(){ updateSelectState(sel); });
        sel.addEventListener('input', function(){ updateSelectState(sel); });
      });
    }

    document.addEventListener('DOMContentLoaded', function(){
      document.querySelectorAll('.myhome-contact-form-widget .wpcf7 form').forEach(enhance);
    });
  })();
</script>
