<?php
/**
 * TOI Calculator Template (Basic + Scientific)
 * AMP-aware: AMP হলে JS ব্লক লুকিয়ে দেয়
 * Shortcode: [toi_calculator]
 */
$is_amp = function_exists('is_amp_endpoint')
  ? is_amp_endpoint()
  : ( function_exists('amp_is_request') && amp_is_request() );
?>
<section class="toi-calc" itemscope itemtype="https://schema.org/SoftwareApplication">
  <meta itemprop="applicationCategory" content="EducationApplication" />
  <meta itemprop="operatingSystem" content="Web" />
  <meta itemprop="name" content="Time of Info – Online Calculator (Basic & Scientific)" />
  <meta itemprop="offers" content="Free" />

  <header class="toi-head">
    <h2 class="toi-title">Online Calculator <span class="toi-sub">Basic ↔ Scientific</span></h2>
  </header>

  <?php if ( $is_amp ) : ?>
    <!-- ---------- AMP BLOCK (no JS) ---------- -->
    <div class="toi-amp" amp>
      <amp-state id="state">
        <script type="application/json">{"expr":"0","a":0,"b":0,"op":"","clearNext":false}</script>
      </amp-state>

      <div class="toi-panel">
        <div class="toi-display">
          <output class="toi-screen" [text]="state.expr">0</output>
          <div class="toi-row toi-aux">
            <span class="toi-hint">Tap numbers and + − × ÷. Tap = to evaluate.</span>
            <span class="toi-switch" role="note">AMP Mode</span>
          </div>
        </div>

        <div class="toi-grid">
          <button class="toi-btn toi-func" on="tap:AMP.setState({state:{expr:'0',a:0,b:0,op:'',clearNext:false}})">AC</button>
          <button class="toi-btn toi-func" on="tap:AMP.setState({state:{expr:(state.expr.length>1? state.expr.slice(0,-1) : '0')}})">CE</button>
          <button class="toi-btn toi-func" on="tap:AMP.setState({state:{expr:(state.expr=='0'? '-' : (state.expr[0]=='-'? state.expr.slice(1) : '-' + state.expr))}})">±</button>
          <button class="toi-btn toi-op"   on="tap:AMP.setState({state:{a:(+state.expr),op:'/',clearNext:true}})">÷</button>

          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '7' : (state.expr=='0'?'7':state.expr+'7')), clearNext:false}})">7</button>
          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '8' : (state.expr=='0'?'8':state.expr+'8')), clearNext:false}})">8</button>
          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '9' : (state.expr=='0'?'9':state.expr+'9')), clearNext:false}})">9</button>
          <button class="toi-btn toi-op" on="tap:AMP.setState({state:{a:(+state.expr),op:'*',clearNext:true}})">×</button>

          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '4' : (state.expr=='0'?'4':state.expr+'4')), clearNext:false}})">4</button>
          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '5' : (state.expr=='0'?'5':state.expr+'5')), clearNext:false}})">5</button>
          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '6' : (state.expr=='0'?'6':state.expr+'6')), clearNext:false}})">6</button>
          <button class="toi-btn toi-op" on="tap:AMP.setState({state:{a:(+state.expr),op:'-',clearNext:true}})">−</button>

          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '1' : (state.expr=='0'?'1':state.expr+'1')), clearNext:false}})">1</button>
          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '2' : (state.expr=='0'?'2':state.expr+'2')), clearNext:false}})">2</button>
          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '3' : (state.expr=='0'?'3':state.expr+'3')), clearNext:false}})">3</button>
          <button class="toi-btn toi-op" on="tap:AMP.setState({state:{a:(+state.expr),op:'+',clearNext:true}})">+</button>

          <button class="toi-btn toi-wide" on="tap:AMP.setState({state:{expr:(state.clearNext? '0' : (state.expr=='0'?'0':state.expr+'0')), clearNext:false}})">0</button>
          <button class="toi-btn" on="tap:AMP.setState({state:{expr:(state.clearNext? '0.' : (state.expr.indexOf('.')==-1? state.expr+'.' : state.expr)), clearNext:false}})">.</button>
          <button class="toi-btn toi-eq" on="tap:AMP.setState({state:{b:(+state.expr), expr:(state.op=='+'? (state.a + (+state.expr)) : (state.op=='-'? (state.a - (+state.expr)) : (state.op=='*'? (state.a * (+state.expr)) : ( (+state.expr)==0 && state.op=='/' ? 'Error' : (state.a / (+state.expr)) )) )), clearNext:true, op:''}})">=</button>
        </div>
      </div>
    </div>
  <?php else : ?>
    <!-- ---------- STANDARD (JS) ---------- -->
    <div class="toi-std" aria-hidden="false">
      <div class="toi-panel">
        <div class="toi-guard">
          <div class="toi-display" role="group" aria-label="Calculator display">
            <output id="toi-screen" class="toi-screen" aria-live="polite" aria-atomic="true">0</output>
            <div class="toi-row toi-aux">
              <button class="toi-chip" data-action="copy" title="Copy result" aria-label="Copy result">Copy</button>
              <span class="toi-hint" id="toi-hint">Type numbers and operators (+ − × ÷). Press Enter for =.</span>
              <label class="toi-switch" title="Toggle scientific keys">
                <input type="checkbox" id="toi-mode" aria-label="Scientific mode">
                <span>Scientific</span>
              </label>
            </div>
          </div>
        </div>

        <div class="toi-grid" aria-label="Calculator keys" role="group">
          <button class="toi-btn toi-func" data-k="AC">AC</button>
          <button class="toi-btn toi-func" data-k="CE">CE</button>
          <button class="toi-btn toi-func" data-k="±">±</button>
          <button class="toi-btn toi-op" data-k="÷">÷</button>

          <button class="toi-btn" data-k="7">7</button>
          <button class="toi-btn" data-k="8">8</button>
          <button class="toi-btn" data-k="9">9</button>
          <button class="toi-btn toi-op" data-k="×">×</button>

          <button class="toi-btn" data-k="4">4</button>
          <button class="toi-btn" data-k="5">5</button>
          <button class="toi-btn" data-k="6">6</button>
          <button class="toi-btn toi-op" data-k="−">−</button>

          <button class="toi-btn" data-k="1">1</button>
          <button class="toi-btn" data-k="2">2</button>
          <button class="toi-btn" data-k="3">3</button>
          <button class="toi-btn toi-op" data-k="+">+</button>

          <button class="toi-btn toi-wide" data-k="0">0</button>
          <button class="toi-btn" data-k=".">.</button>
          <button class="toi-btn toi-eq" data-k="=">=</button>
        </div>

        <div class="toi-grid toi-sci" hidden aria-hidden="true">
          <button class="toi-btn" data-k="%">%</button>
          <button class="toi-btn" data-k="π">π</button>
          <button class="toi-btn" data-k="e">e</button>
          <button class="toi-btn" data-k="x²">x²</button>
          <button class="toi-btn" data-k="x³">x³</button>
          <button class="toi-btn" data-k="x^y">x^y</button>
          <button class="toi-btn" data-k="√">√</button>
          <button class="toi-btn" data-k="∛">∛</button>
          <button class="toi-btn" data-k="log">log</button>
          <button class="toi-btn" data-k="ln">ln</button>
          <button class="toi-btn" data-k="sin">sin</button>
          <button class="toi-btn" data-k="cos">cos</button>
          <button class="toi-btn" data-k="tan">tan</button>
          <button class="toi-btn" data-k="(">(</button>
          <button class="toi-btn" data-k=")">)</button>
          <button class="toi-btn toi-func" data-k="MC">MC</button>
          <button class="toi-btn toi-func" data-k="MR">MR</button>
          <button class="toi-btn toi-func" data-k="M+">M+</button>
          <button class="toi-btn toi-func" data-k="M-">M-</button>
        </div>
      </div>
    </div>
  <?php endif; ?>

  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"SoftwareApplication","name":"Time of Info – Online Calculator (Basic & Scientific)","applicationCategory":"EducationApplication","operatingSystem":"Web","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"}}
  </script>
</section>
/* keep widget perfectly inside on mobile */
.toi-calc{max-width:min(720px, 92vw);}
.toi-grid{gap:10px}
@media (max-width:420px){
  .toi-grid{gap:8px}
  .toi-btn{padding:12px 10px;font-size:16px}
}

/* make sure svg/icon use current text color */
.toi-btn svg{fill:currentColor;stroke:currentColor}
