<?php 
$phoneUtil = \libphonenumber\PhoneNumberUtil::getInstance();
$regions = $phoneUtil->getSupportedRegions();
asort($regions);

?>
<div style="display:flex;justify-content:space-between;align-items:center">
  <div style="display:flex;align-items:center">
    <a href="https://smsforwoocommerce.gitlab.io"><img src="" id="logoImg" style="width:10em"></img></a>
    <h1 style="margin-left:1em">Free SMS for Woocommerce</h1>
  </div>
  <!-- QR code -->
  <div style="display:flex;align-items:center">
    <p>
      Download <a href="https://smsforwoocommerce.gitlab.io#bookmarkDownload">Android app</a> 
      <br/>and scan this QR code
      <br/>to use the plugin!
    </p>
    <img sr="" id="arrowImg" style="width:8em"</img>
    <div id="qrPlaceholder" style="margin-right:2em;margin-top:1em;margin-left: 3em;"></div>
  </div>
  
</div>

<div class="wrap">
  <div class="wp-clearfix">
    <div class="col-wrap">
      <div id="col-left">
        <!-------------- ADD MESSAGE ------------------->
        <?php if(empty($editedHook)): ?>
        <p>
        <h1>1. Download <a href="https://smsforwoocommerce.gitlab.io#bookmarkDownload">Android App</a></h1>
        <h2> and scan QR code at the top of this page. (<a href="https://smsforwoocommerce.gitlab.io#bookmarkFaq" target="_blank">about</a>)</h2>
        </p>
        <p>
        <h1>2. Add new message</h1>
        </p>
        <?php endif; ?>
        <?php if(!empty($editedHook)): ?>
        <p>
          <h1>Edit</h1>
        </p>
        <?php endif; ?>
        <div class="form-wrap">
          <form method="POST">

            <div class="form-field form-required term-name-wrap">
              <label for="hookNameSelect">Send SMS message when</label>
              <select name="hookName" id="hookNameSelect">
                <?php foreach($SMSFWC_AVAILABLE_HOOKS as $val => $label): ?>
                  <option value="<?php echo $val ?>" <?php if($val == (empty($editedHook) ? 'woocommerce_order_status_completed' : $editedHook->hookName)) {echo 'selected';} ?>>
                  <?php echo $label ?></option>
                <? endforeach; ?>
              </select>
            </div>
            <div class="form-field form-required term-name-wrap">
              <label for="regionCodeSelect">Select country code</label>
              <select name="regionCode" id="regionCodeSelect">
                <?php foreach($regions as $r): ?>
                  <option value="<?php echo $r ?>" <?php if($r == (empty($editedHook) ? 'US' : $editedHook->regionCode)) {echo 'selected';} ?>>
                  <?php echo $r ?></option>
                <? endforeach; ?>
              </select>
              <p>This SMS will be sent only to numbers from selected country.</p>
            </div>
            <div class="form-field form-required term-name-wrap">
              <label for="messageInput">Message text</label>
              <textarea type="text" name="message" id="messageInput" rows="4"
                placeholder="Example: Hello :billing_first_name. your payment has been confirmed, and order is now being processed."><?php if (!empty($editedHook)) echo esc_attr_e($editedHook->message); ?></textarea>
            </div>

            <?php wp_nonce_field( 'submit_wc_hook_nonce' ); ?>
            <?php if (!empty($editedHook)): ?>
              <input type="hidden" name="index" value="<?php echo esc_html($editedHook->index) ?>">
            <?php endif; ?>
            <input type="submit" name="addHook" value="<?php echo empty($editedHook) ? 'Add' : 'Save' ?>" class="button button-primary button-large">
          </form>
        </div>
        </br>
        <div class="card" style="margin-right:1em">
          <p><strong>Hint:</strong> You can use variables in SMS message. Just type a colon (:) and variable name.
                E.g :billing_first_name
                - will be replaced with the customer first name!
                All available variables are listed below.
              </p>
              
          <strong>Available variables: </strong>
          <p>
            <?php 
              echo join(', ', $SMSFWC_AVAILABLE_VARIABLES)
            ?>
          </p>
        </div>
        <small style="color:silver;">user id: <?php echo esc_html($settings->token) ?></small>
      </div>

      <div id="col-right">
        <!-------------- ACTIVE MESSAGES ------------------->
        <div class="col-wrap">
          <p>
            <h1>Active messages</h1>
          </p>
          <p>
            <strong>How it works?</strong><br/>
            This is the list of your SMS templates. When order status is changed, the plugin will look for corresponding template and
            matching customer's phone region code (like +1 prefix for US, +49 prefix for DE etc.) below. If customer's phone number has no region prefix,
            the first matching template is chosen, because such number is usually valid for most regions. You most likely want to keep your region at the top of the list, to handle phone numbers without region prefix.
          </p>
          
          <p>
            <a class="button-primary" href="https://smsforwoocommerce.gitlab.io/?qrToken=<?php echo esc_attr_e($settings->token); ?>">
              Click here to check you account status
            </a>
          </p>
          <?php if(count($settings->registeredHooks) > 0): ?></1>
          <table class="widefat">
            <thead>
              <tr>
                <th>Woocommerce action</th>
                <th>Message</th>
                <th>Region</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <?php foreach($settings->registeredHooks as $i => $h): ?>
              <tr class="<?php echo $i % 2 == 0 ? '' : 'alternate'; ?>">
                <td class="row-title"><?php echo esc_html($SMSFWC_AVAILABLE_HOOKS[$h->hookName]); ?></td>
                <td><?php echo esc_attr_e($h->message) ?></td>
                <td><?php echo esc_html($h->regionCode) ?></td>
                <td>
                  <div style="display:flex;flex-direction:row;justify-content:center;">
                    <form method="POST">
                      <?php wp_nonce_field( 'submit_edit_nonce' ); ?>
                      <input type="hidden" name="index" value="<?php echo $i ?>">
                      <input type="submit" name="edit" value="Edit" class="button button-small" style="margin-right:1em">
                    </form>
                    <form method="POST">
                      <?php wp_nonce_field( 'submit_remove_nonce' ); ?>
                      <input type="hidden" name="index" value="<?php echo $i ?>">
                      <input type="submit" name="remove" value="Remove" class="button button-small">
                    </form>
                  </div>
                </td>
              </tr>
              <? endforeach; ?>
            </tbody>
          </table>

          <div>
            <p>
              <h1>Send test message</h1>
            </p>

            <!-- Try it out - messages -->
            <?php if (!empty($_GET['test_not_registered'])): ?>
            <div class="notice notice-error inline">
              <p>QR Code not registered! Download the Android app and scan the QR code at the top-right of the page.</p>
            </div>
            <? endif; ?>
            <?php if (!empty($_GET['test_no_match'])): ?>
            <div class="notice notice-warning inline">
              <p>No matching message found for the provided phone number (make sure to select the correct region).</p>
            </div>
            <? endif; ?>
            <?php if (!empty($_GET['test_success'])): ?>
            <div class="notice notice-success inline">
              <p>Message sent successfully.</p>
            </div>
            <? endif; ?>
            
            <div class="form-wrap">
              <form method="POST">
                <?php wp_nonce_field( 'submit_test_nonce' ); ?>
                <div class="form-field form-required term-name-wrap">
                  <label for="testHookNameSelect">Action (simulate order status change)</label>
                  <select name="testHookNameSelect" id="testHookNameSelect">
                    <?php foreach($SMSFWC_AVAILABLE_HOOKS as $val => $label): ?>
                      <option value="<?php echo $val ?>"><?php echo $label ?></option>
                    <? endforeach; ?>
                  </select>
                </div>

                <div class="form-field form-required term-name-wrap">
                  <label for="testPhone">Send to (simulate customer number):</label> 
                  <input type="text" id="testPhone" style="width:200px" name="testPhone" placeholder="phone number" >
                </div>
                <input type="submit" name="test" value="Try it out!" class="button button-submit ">
              </form>
            </div>
          </div>

          <?php endif; ?>

          <?php if(count($settings->registeredHooks) == 0): ?>
          <div class="notice notice-info inline">
            <p>No active messages yet! Select an action and enter a message text, to start sending SMS messages from
              your phone.</p>
          </div>
          <?php endif; ?>

        </div>

        

      </div>
    </div>
  </div>
</div>