{extends file="[shared]/window.tpl"}

{block js}
   {$smarty.block.parent}
{/block}
{block tabs}
    {windowTab id='flapUnsubscribed' label='MailerLite Unsubscribed'}
    <!--{windowTab id='flapActive' label='MailerLite Active'}-->
    {windowTab id='flapShopUnsubscribed' label='Shop Unsubscribed'}
    {windowTab id='flapShopUsers' label='Shop Newsletter Subscribers'}
{/block}

{block title}
    {if $body.title}
        {$body.title}
    {/if}
{/block}

{block css append}
{literal}<style>table.mailerlite{background-color:#cccccc;border-spacing:1px;border-collapse:separate;} .mailerlite td{background:white;padding:2px 5px;} .mailerlite th{background:#eeeeee;padding:2px 5px;}</style>{/literal}
{/block}

{block name=windowContent prepend}
<div id="mailerlite_group">
    <div class="col-md-12">
        <h1 class="h4 main-panel-title">MailerLite Group: {$body.group.name}</h1>
        {if $ErrStr}<legend class="row-red">{$ErrStr}</legend>{/if}
        {if $body.data.Synchronize.err}<legend class="row-red">Synchronize Errors: <br>{implode('; ', $body.data.Synchronize.err)};</legend>{/if}
        {if $body.data.Synchronize.success}<legend class="row-green">Synchronize: <br>{implode('; ', $body.data.Synchronize.success)};</legend>{/if}
    </div>
    <div class="col-md-2 bottom-space"><label>Group ID:</label> {$body.group.id}</div>
    <div class="col-md-3 bottom-space"><label>Created:</label> {$body.group.date_created}</div>
    <div class="col-md-3 bottom-space"><label>Updated:</label> {$body.group.date_updated}</div>
    <div class="col-md-4 bottom-space"><label>Active Subscribers:</label> {$body.group.active}</div>
</div>
{/block}

{block tabsContent}
   {$shop_users = $body.data.ShopUsers.subscribers + $body.data.ShopUsers.unsubscribed}
   <div id="flapUnsubscribed" class="tab-pane fade active in boxStatic">
      {$type = 'Unsubscribed'}
      <legend>MailerLite {$type}: {$body.data.$type.subscribers_count} {if $body.data.$type.filter_date}[date_unsubscribe >= {$body.data.$type.filter_date}]{/if}</legend>
      {if $body.data.Junk.subscribers_count}
          <legend>MailerLite Junk (spam complaints): {$body.data.Junk.subscribers_count}</legend>
      {/if}
      {if $body.data.Bounced.subscribers_count}
          <legend>MailerLite Bounced (mailbox does not exists or disabled): {$body.data.Bounced.subscribers_count}</legend>
      {/if}
      {if $body.data.$type.err}<legend class="row-red">{$body.data.$type.err}</legend>{/if}
      {if $body.data.$type.success}<legend class="row-green">{$body.data.$type.success}</legend>{/if}
      {if $body.data.$type.subscribers}
         <div class="form-group">
            <div class="col-md-12">
               <table class="mailerlite">
                  <tr><th></th><th colspan="2">MailerLite</th><th colspan="3">wpjshop</th></tr>
                  <tr>
                     <th>#</th>
                     <th>email</th>
                     <th>date_unsubscribe</th>
                     <th>exists</th>
                     <th>get_news</th>
                     <th><input type="checkbox" name="unsubscribeSelectAll" title="Select All"></th>
                  </tr>
                  {$i=1}
                  {foreach $body.data.Junk.subscribers as $subscriber}
                      {$class = 'row-red'}
                      {$user = null}
                      {if array_key_exists($subscriber['email'], $shop_users)}
                          {$user = $shop_users[$subscriber['email']]}
                      {/if}
                      <tr class="{$class}">
                          <td>{$i++}</td>
                          <td>{$subscriber.email}</td>
                          <td>{$subscriber.date_unsubscribe}</td>
                          {if ($user)}
                              <td>Y</td>
                              <td>{$user.get_news}</td>
                              <td><input type="checkbox" name="unsubscribe[{$user.id}]" {($user.get_news == 'Y')?' checked':''}></td>
                          {else}
                              <td>N</td>
                              <td>--</td>
                              <td>--</td>
                          {/if}
                      </tr>
                  {/foreach}
                  {foreach $body.data.$type.subscribers as $subscriber}
                      {if $i > 20000}
                          {break}
                      {/if}
                      {$class = ''}
                      {$user = null}
                      {if array_key_exists($subscriber['email'], $shop_users)}
                          {$user = $shop_users[$subscriber['email']]}
                          {$class = 'row-green'}
                          {if $user.get_news == 'Y'}
                              {$class = 'row-red'}
                          {/if}
                      {/if}
                     <tr class="{$class}">
                        <td>{$i++}</td>
                        <td>{$subscriber.email}</td>
                        <td>{$subscriber.date_unsubscribe}</td>
                        {if ($user)}
                        <td>Y</td>
                        <td>{$user.get_news}</td>
                        <td><input type="checkbox" name="unsubscribe[{$user.id}]" {($user.get_news == 'Y')?' checked':''}></td>
                        {else}
                        <td>N</td>
                        <td>--</td>
                        <td>--</td>
                        {/if}
                     </tr>
                  {/foreach}
                  <tr><th colspan="5">&nbsp;</th><th><button type="submit" class="btn btn-danger btn-block confirm" name="acn" value="shopUnsubscribe" title="Unsubscribe on Shop">Unsubscribe</button></th></tr>
               </table>
            </div>
         </div>
      {/if}
   </div>

   <div id="flapActive" class="tab-pane fade active in boxStatic">
      {$type = 'Active'}
      {$page = $body.data.page+1}
      {$i = $body.data.limit*($page-1)+1}
      <legend>MailerLite {$type}: {$i}-{$i+$body.data.$type.subscribers_count-1} (page {$page})</legend>
      {if $body.data.$type.err}<legend class="row-red">{$body.data.$type.err}</legend>{/if}
      {if $body.data.$type.success}<legend class="row-green">{$body.data.$type.success}</legend>{/if}
      {if $body.data.$type.subscribers}
          <div class="form-group">
             <div class="col-md-12">
                <table class="mailerlite">
                   <tr><th></th><th colspan="2">MailerLite</th><th colspan="3">wpjshop</th></tr>
                   <tr>
                      <th>#</th>
                      <th>email</th>
                      <th>date_subscribe</th>
                      <th>exists</th>
                      <th>get_news</th>
                      <th><input type="checkbox" name="subscribeSelectAll" title="Select All"></th>
                   </tr>
                    {foreach $body.data.$type.subscribers as $subscriber}
                        {if $i > 20000}
                            {break}
                        {/if}
                        {$class = ''}
                        {$user = null}
                        {if array_key_exists($subscriber['email'], $shop_users)}
                            {$user = $shop_users[$subscriber['email']]}
                            {$class = 'row-green'}
                            {if $user.get_news == 'N'}
                                {$class = 'row-red'}
                            {/if}
                        {/if}
                       <tr class="{$class}">
                          <td>{$i++}</td>
                          <td>{$subscriber.email}</td>
                          <td>{$subscriber.date_subscribe}</td>
                           {if ($user)}
                              <td>Y</td>
                              <td>{$user.get_news}</td>
                              <td><input type="checkbox" name="subscribe[{$user.id}]" {($user.get_news == 'N')?' checked':''}></td>
                           {else}
                              <td>N</td>
                              <td>--</td>
                              <td>--</td>
                           {/if}
                       </tr>
                    {/foreach}
                   <tr><th colspan="5">&nbsp;</th><th><button type="submit" class="btn btn-danger btn-block confirm" name="acn" value="shopSubscribe" title="Subscribe on Shop">Subscribe</button></th></tr>
                </table>
             </div>
          </div>
      {/if}
   </div>

   <div id="flapShopUnsubscribed" class="tab-pane fade active in boxStatic">
      {$type = 'ShopUsers'}
      <legend>Shop Unsubscribed: {$body.data.$type.unsubscribed_count}</legend>
      {if $body.data.ShopUnsubscribed.err}<legend class="row-red">{$body.data.ShopUnsubscribed.err}</legend>{/if}
      {if $body.data.ShopUnsubscribed.success}<legend class="row-green">{$body.data.ShopUnsubscribed.success}</legend>{/if}
      {if $body.data.$type.unsubscribed}
          <div class="form-group">
             <div class="col-md-12">
                <table class="mailerlite">
                   <tr><th></th><th colspan="2">wpjshop</th><th colspan="2">MailerLite</th></tr>
                   <tr>
                      <th>#</th>
                      <th>email</th>
                      <th>date_updated</th>
                      <th>unsubscribed</th>
                      <th><input type="checkbox" name="mailerlite_unsubscribeSelectAll" title="Select All"></th>
                   </tr>
                   {$i=1}
                   {$mailerliteUnsubscribed = array_flip(array_column($body.data.Unsubscribed.subscribers, 'email'))}
                   {foreach $body.data.$type.unsubscribed as $subscriber}
                      {$user_unsubscribed = array_key_exists($subscriber.email, $mailerliteUnsubscribed)}
                      {$class = ''}
                      {if $user_unsubscribed}
                         {$class = 'row-green'}
                      {/if}
                      <tr class="{$class}">
                         <td>{$i++}</td>
                         <td>{$subscriber.email}</td>
                         <td>{$subscriber.date_updated}</td>
                         {if ($user_unsubscribed)}
                            <td>Y</td>
                            <td><input type="checkbox" name="mailerlite_unsubscribe[{$subscriber.email}]"></td>
                         {else}
                            <td>N</td>
                            <td><input type="checkbox" name="mailerlite_unsubscribe[{$subscriber.email}]" checked></td>
                         {/if}
                      </tr>
                   {/foreach}
                   <tr><th colspan="4">&nbsp;</th><th><button type="submit" class="btn btn-danger btn-block confirm" name="acn" value="mailerliteUnsubscribe" title="Unsubscribe on Mailerlite">Unsubscribe</button></th></tr>
                </table>
             </div>
          </div>
      {/if}
   </div>

   <div id="flapShopUsers" class="tab-pane fade active in boxStatic">
       {$type = 'ShopUsers'}
       <legend>Shop Newsletter Subscribers: {$body.data.$type.subscribers_count}</legend>
       {if $body.data.$type.err}<legend class="row-red">{$body.data.$type.err}</legend>{/if}
       {if $body.data.$type.success}<legend class="row-green">{$body.data.$type.success}</legend>{/if}
       {if $body.data.$type.subscribers}
           <div class="form-group" style="margin-bottom: 100px;">
               <div class="col-md-12">
                   <table class="mailerlite">
                       <tr><th></th><th colspan="4">wpjshop</th><th colspan="2">MailerLite</th></tr>
                       <tr>
                           <th>#</th>
                           <th>email</th>
                           <th>price_level</th>
                           <th>user_groups</th>
                           <th>date_updated</th>
                           <th>unsubscribed</th>
                           <th><input type="checkbox" name="exportSelectAll" title="Select All"></th>
                       </tr>
                       {$i=1}
                       {$mailerliteUnsubscribed = array_flip(array_column($body.data.Unsubscribed.subscribers, 'email'))}
                       {foreach $body.data.$type.subscribers as $subscriber}
                           {if $i > 20000}
                               {break}
                           {/if}
                           {$user_unsubscribed = array_key_exists($subscriber.email, $mailerliteUnsubscribed)}
                           {$class = ''}
                           {if $user_unsubscribed}
                               {$class = 'row-red'}
                           {/if}
                           <tr class="{$class}">
                               <td>{$i++}</td>
                               <td>{$subscriber.email}</td>
                               <td>{$subscriber.user_price_level}</td>
                               <td>{$subscriber.user_groups}</td>
                               <td>{$subscriber.date_updated}</td>
                               {if ($user_unsubscribed)}
                                   <td>Y</td>
                                   <td><input type="checkbox" name="export[{$subscriber.id}]" value='{$subscriber.id}'></td>
                               {else}
                                   <td>N</td>
                                   <td><input type="checkbox" name="export[{$subscriber.id}]" value='{$subscriber.id}' checked></td>
                               {/if}
                           </tr>
                       {/foreach}
                       <tr><th colspan="6">&nbsp;</th><th><button type="submit" class="btn btn-danger btn-block confirm" name="acn" value="mailerliteSubscribe" title="Exportovat do Mailerlite">Export</button></th></tr>
                   </table>
               </div>
           </div>
       {/if}
   </div>
{/block}
{block buttonsLeft}
   <div class="col-md-4">
      <div class="btn-group">
         <button type="button" onClick="javascript:document.location='launch.php?s=MailerLite.php&acn=MailerLite&ID=Active&page={$body.data.page-1}';" data-goto="prev" class="btn">
            <span class="glyphicon glyphicon-chevron-left"></span> {'prev'|translate:'button'}</button>
         <button type="button" onClick="javascript:document.location='launch.php?s=MailerLite.php&acn=MailerLite&ID=Active&page={$body.data.page+1}';" data-goto="next" class="btn">{'next'|translate:'button'}
            <span class="glyphicon glyphicon-chevron-right"></span>
         </button>
      </div>
   </div>
   <input type="hidden" name="page" value="{$body.data.page}">
{/block}
{block buttonsRight}
   <div class="col-md-2 col-md-offset-4">
       {if empty($ErrStr)}<button type="submit" class="btn btn-danger btn-block confirm" name="acn" value="mailerliteSynchronize" title="Sync everything">Synchronize</button>{/if}
   </div>
   <div class="col-md-2">
      <input type="button" class="btn btn-primary btn-block" onClick="closeWindow();" value="{'windowCancel'|translate:'button'}"/>
   </div>
{/block}

<script type="text/javascript">
{block onready prepend}
$(document).ready(function () {
    {if $body.type == 'Active'}
        showPrevNextButtons();
    {else}
        hidePrevNextButtons();
    {/if}
});

$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    if ($(this).parent().index() == 1) {
        //showPrevNextButtons();
    }
    else {
        hidePrevNextButtons();
    }
});

function hidePrevNextButtons() {
    $('[data-goto="prev"]').attr('style', 'display:none;');
    $('[data-goto="next"]').attr('style', 'display:none;');
}

function showPrevNextButtons() {
    $('[data-goto="prev"]').prop("disabled", "");
    $('[data-goto="next"]').prop("disabled", "");
    {if $body.data.page == 0}
    $('[data-goto="prev"]').prop("disabled", "disabled");
    {/if}
    {if $body.data.Active.subscribers_count < $body.data.limit}
    $('[data-goto="next"]').prop("disabled", "disabled");
    {/if}
    $('[data-goto="prev"]').attr('style', 'display:block;');
    $('[data-goto="next"]').attr('style', 'display:block;');
}

$("input[type='checkbox'][name$='SelectAll']").change(function (event) {
    checkboxAll = event.target;
    checkbox_name = checkboxAll.name.replace('SelectAll', '');
    checkbox_checked = checkboxAll.checked;
    $("input[type='checkbox'][name^='" + checkbox_name + "[']").prop("checked", checkbox_checked);
})
{/block}
</script>
