{% comment %}
  WhatsApp Login Extension Block
  This block adds a WhatsApp login icon and popup to the Shopify theme
{% endcomment %}

  {%- assign btn_color = app.metafields.whatsapp_login.button_color | default: app.metafields.whatsapp_login.theme_color | default: '#08bb35ff' -%}

  <script id="whatsapp-login-config" type="application/json">
  {
    "themeColor": {{ app.metafields.whatsapp_login.theme_color | default: '#08bb35ff' | json }},
    "buttonColor": {{ btn_color | json }},
    "buttonTextColor": {{ app.metafields.whatsapp_login.button_text_color | default: '#ffffff' | json }},
    "leftTextColor": {{ app.metafields.whatsapp_login.left_section_text_color | default: '#ffffff' | json }},
    "restTextColor": {{ app.metafields.whatsapp_login.rest_text_color | default: '#000000' | json }},
    "shop": {{ shop.permanent_domain | json }},
    "loggedIn": {% if customer %}true{% else %}false{% endif %}
  }
  </script>

  <!-- WhatsApp Login Icon -->
  <div id="whatsapp-login-icon" class="whatsapp-login-icon">
    <button id="whatsapp-login-btn" class="whatsapp-login-btn" aria-label="Login with WhatsApp">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" fill="currentColor"/>
      </svg>
    </button>
  </div>

  <!-- WhatsApp Login Popup -->
  <div id="whatsapp-login-popup" class="whatsapp-login-popup" style="display: none;">
    <div class="whatsapp-login-overlay"></div>
    <div class="whatsapp-login-modal">
      <button class="whatsapp-login-close" aria-label="Close">&times;</button>

      <div class="whatsapp-login-content">
        <!-- Left Panel -->
        <div class="whatsapp-login-left">
          {% if app.metafields.whatsapp_login.brand_logo != blank %}
            <img src="{{ app.metafields.whatsapp_login.brand_logo }}" alt="Brand Logo" class="whatsapp-login-logo" width="200" height="auto" loading="lazy">
          {% else %}
            <div class="whatsapp-login-logo-placeholder">Logo</div>
          {% endif %}

          <h2 class="whatsapp-login-heading">{{ app.metafields.whatsapp_login.heading | default: 'Welcome to Our Store' }}</h2>

          <div class="whatsapp-login-features">
            {% assign features = app.metafields.whatsapp_login.features.value %}
            {% if features != blank %}
              {% for feature in features %}
                <div class="whatsapp-login-feature">
                  <div class="whatsapp-login-feature-icon">
                    {% if feature.icon != blank %}
                      <img src="{{ feature.icon }}" alt="Feature {{ forloop.index }}" width="20" height="20" loading="lazy">
                    {% else %}
                      {% if forloop.index == 1 %}🛕{% elsif forloop.index == 2 %}🏅{% elsif forloop.index == 3 %}📍{% else %}✨{% endif %}
                    {% endif %}
                  </div>
                  <p>{{ feature.text }}</p>
                </div>
              {% endfor %}
            {% endif %}
          </div>
        </div>

        <!-- Right Panel -->
        <div class="whatsapp-login-right">
          <h3 class="whatsapp-login-form-title">Login with WhatsApp</h3>
          <p class="whatsapp-login-form-subtitle">Enter your phone number to continue</p>

          <form class="whatsapp-login-form" id="whatsapp-login-form">
            <div class="whatsapp-login-input-group">
              <div class="whatsapp-login-phone-input">
                <select id="whatsapp-country-code" class="whatsapp-country-code">
                  <option value="+91">+91</option>
                  <option value="+1">+1</option>
                  <option value="+44">+44</option>
                  <option value="+61">+61</option>
                  <option value="+971">+971</option>
                </select>
                <input
                  type="tel"
                  id="whatsapp-phone"
                  name="phone"
                  placeholder="Enter phone number"
                  required
                  pattern="[0-9]{10}"
                  maxlength="10"
                >
              </div>
            </div>

            <button type="submit" class="whatsapp-login-submit">
              {{ app.metafields.whatsapp_login.button_text | default: 'Login' }}
            </button>
          </form>

          <p class="whatsapp-login-terms">
            By continuing, you agree to our Terms of Service and Privacy Policy
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- WhatsApp OTP Popup -->
  <div id="whatsapp-otp-popup" class="whatsapp-login-popup" style="display: none;">
    <div class="whatsapp-login-overlay"></div>
    <div class="whatsapp-login-modal whatsapp-otp-modal">
      <button class="whatsapp-login-close whatsapp-otp-close" aria-label="Close">&times;</button>

      <div class="whatsapp-login-content">
        <!-- Left Panel -->
        <div class="whatsapp-login-left">
          {% if app.metafields.whatsapp_login.brand_logo != blank %}
            <img src="{{ app.metafields.whatsapp_login.brand_logo }}" alt="Brand Logo" class="whatsapp-login-logo" width="200" height="auto" loading="lazy">
          {% else %}
            <div class="whatsapp-login-logo-placeholder">Logo</div>
          {% endif %}

          <h2 class="whatsapp-login-heading">{{ app.metafields.whatsapp_login.heading | default: 'Welcome to Our Store' }}</h2>

          <div class="whatsapp-login-features">
            {% assign features = app.metafields.whatsapp_login.features.value %}
            {% if features != blank %}
              {% for feature in features %}
                <div class="whatsapp-login-feature">
                  <div class="whatsapp-login-feature-icon">
                    {% if feature.icon != blank %}
                      <img src="{{ feature.icon }}" alt="Feature {{ forloop.index }}" width="20" height="20" loading="lazy">
                    {% else %}
                      {% if forloop.index == 1 %}🛕{% elsif forloop.index == 2 %}🏅{% elsif forloop.index == 3 %}📍{% else %}✨{% endif %}
                    {% endif %}
                  </div>
                  <p>{{ feature.text }}</p>
                </div>
              {% endfor %}
            {% endif %}
          </div>
        </div>

        <!-- Right Panel (OTP Form) -->
        <div class="whatsapp-login-right">
          <h3 class="whatsapp-otp-title" style="text-align: left;">Enter OTP</h3>
          <p class="whatsapp-otp-subtitle" style="text-align: left;">
            We've sent a 6-digit code to <br>
            <strong id="whatsapp-otp-phone-display" style="color: inherit;"></strong>
          </p>

          <form class="whatsapp-otp-form" id="whatsapp-otp-form">
            <div class="whatsapp-otp-inputs">
              <input type="text" maxlength="1" class="whatsapp-otp-input" pattern="[0-9]" required>
              <input type="text" maxlength="1" class="whatsapp-otp-input" pattern="[0-9]" required>
              <input type="text" maxlength="1" class="whatsapp-otp-input" pattern="[0-9]" required>
              <input type="text" maxlength="1" class="whatsapp-otp-input" pattern="[0-9]" required>
              <input type="text" maxlength="1" class="whatsapp-otp-input" pattern="[0-9]" required>
              <input type="text" maxlength="1" class="whatsapp-otp-input" pattern="[0-9]" required>
            </div>

            <button type="submit" class="whatsapp-otp-submit" style="width: 100%;">
              Verify OTP
            </button>
          </form>

          <div class="whatsapp-otp-resend" style="text-align: center; margin-top: 16px;">
            <p>Didn't receive code? <button type="button" class="whatsapp-otp-resend-btn">Resend</button></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{ 'whatsapp-login.css' | asset_url | stylesheet_tag }}
  <style>
    .whatsapp-country-code:focus,
    #whatsapp-phone:focus,
    .whatsapp-otp-input:focus {
      border-color: var(--wa-theme-color, #08bb35ff) !important;
      box-shadow: none !important;
    }
    .whatsapp-otp-resend-btn:hover {
      filter: brightness(0.8);
    }
  </style>
  <script src="{{ 'whatsapp-login.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "WhatsApp Login",
  "target": "body",
  "settings": []
}
{% endschema %}