{* views/templates/admin/configure.tpl *}

<div class="panel">
    <h3><i class="icon icon-cogs"></i> {l s='EcomZone Configuration' mod='ecomzone'}</h3>
    <form method="post" class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-3">{l s='API Token' mod='ecomzone'}</label>
            <div class="col-lg-6">
                <input type="text" name="ECOMZONE_API_TOKEN"
                       value="{$ECOMZONE_API_TOKEN|escape:'html':'UTF-8'}"
                       class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-lg-3">{l s='Last Sync' mod='ecomzone'}</label>
            <div class="col-lg-6">
                <p class="form-control-static">
                    {if $ECOMZONE_LAST_SYNC}
                        {$ECOMZONE_LAST_SYNC|escape:'html':'UTF-8'}
                    {else}
                        {l s='Never' mod='ecomzone'}
                    {/if}
                </p>
            </div>
        </div>

        <div class="panel-footer">
            <button type="submit" name="submitEcomZoneModule" class="btn btn-default pull-right">
                <i class="process-icon-save"></i> {l s='Save' mod='ecomzone'}
            </button>
        </div>
    </form>
</div>

<div class="panel">
    <h3><i class="icon icon-cloud-download"></i> {l s='Product Import' mod='ecomzone'}</h3>
    <div class="panel-body">
        <form method="post" class="form-horizontal">
            <div class="form-group">
                <div class="col-lg-9 col-lg-offset-3">
                    <button type="submit" name="fetchProducts" class="btn btn-primary">
                        <i class="process-icon-download"></i> {l s='Fetch Products' mod='ecomzone'}
                    </button>
                </div>
            </div>
        </form>

        {if isset($API_PRODUCTS) && $API_PRODUCTS}
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>{l s='SKU' mod='ecomzone'}</th>
                            <th>{l s='Name' mod='ecomzone'}</th>
                            <th>{l s='Price' mod='ecomzone'}</th>
                            <th>{l s='Stock' mod='ecomzone'}</th>
                            <th class="text-right">{l s='Actions' mod='ecomzone'}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach from=$API_PRODUCTS item=product}
                            <tr>
                                <td>{$product.sku|escape:'html':'UTF-8'}</td>
                                <td>{$product.product_name|escape:'html':'UTF-8'}</td>
                                <td>{$product.product_price|escape:'html':'UTF-8'}</td>
                                <td>{$product.stock|escape:'html':'UTF-8'}</td>
                                <td class="text-right">
                                    <form method="post" style="display:inline;">
                                        <input type="hidden" name="import_sku"
                                               value="{$product.sku|escape:'html':'UTF-8'}" />
                                        <button type="submit" name="importSingleProduct"
                                                class="btn btn-xs btn-primary"
                                                title="{l s='Import this product' mod='ecomzone'}">
                                            <i class="icon-download"></i> {l s='Import' mod='ecomzone'}
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>

            {if isset($PAGINATION)}
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <ul class="pagination">
                            {if $PAGINATION.current_page > 1}
                                <li>
                                    <a href="{$current_url|escape:'html':'UTF-8'}&page=1" title="{l s='First page' mod='ecomzone'}">
                                        <i class="icon-double-angle-left"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{$current_url|escape:'html':'UTF-8'}&page={$PAGINATION.current_page-1}"
                                       title="{l s='Previous page' mod='ecomzone'}">
                                        <i class="icon-angle-left"></i>
                                    </a>
                                </li>
                            {/if}

                            {assign var=p value=$PAGINATION.current_page-2}
                            {if $p < 1}
                                {assign var=p value=1}
                            {/if}
                            {assign var=stop value=$p+4}
                            {if $stop > $PAGINATION.total_pages}
                                {assign var=stop value=$PAGINATION.total_pages}
                                {assign var=p value=$stop-4}
                                {if $p < 1}
                                    {assign var=p value=1}
                                {/if}
                            {/if}

                            {while $p <= $stop}
                                <li {if $p == $PAGINATION.current_page}class="active"{/if}>
                                    <a href="{$current_url|escape:'html':'UTF-8'}&page={$p}">{$p}</a>
                                </li>
                                {assign var=p value=$p+1}
                            {/while}

                            {if $PAGINATION.current_page < $PAGINATION.total_pages}
                                <li>
                                    <a href="{$current_url|escape:'html':'UTF-8'}&page={$PAGINATION.current_page+1}"
                                       title="{l s='Next page' mod='ecomzone'}">
                                        <i class="icon-angle-right"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="{$current_url|escape:'html':'UTF-8'}&page={$PAGINATION.total_pages}"
                                       title="{l s='Last page' mod='ecomzone'}">
                                        <i class="icon-double-angle-right"></i>
                                    </a>
                                </li>
                            {/if}
                        </ul>
                    </div>
                </div>
            {/if}
        {/if}
    </div>
</div>

<div class="panel">
    <h3><i class="icon icon-clock-o"></i> {l s='Automatic Sync' mod='ecomzone'}</h3>
    <div class="panel-body">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-lg-3">{l s='Cron URL' mod='ecomzone'}</label>
                <div class="col-lg-9">
                    <div class="input-group">
                        <input type="text" class="form-control" readonly="readonly"
                               value="{$shop_url}modules/ecomzone/cron.php?token={$ECOMZONE_CRON_TOKEN|escape:'html':'UTF-8'}" />
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="selectText(this.parentElement.previousElementSibling)">
                                <i class="icon-copy"></i> {l s='Copy' mod='ecomzone'}
                            </button>
                        </span>
                    </div>
                    <p class="help-block">
                        {l s='Add this URL to your server\'s crontab to run every 24 hours.' mod='ecomzone'}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

{if isset($ECOMZONE_LOGS) && $ECOMZONE_LOGS}
    <div class="panel">
        <h3><i class="icon icon-list"></i> {l s='Recent Logs' mod='ecomzone'}</h3>
        <div class="panel-body">
            <div class="log-container" style="max-height: 400px; overflow-y: auto;">
                <table class="table table-striped">
                    <tbody>
                        {foreach from=$ECOMZONE_LOGS item=log}
                            <tr>
                                <td style="font-family: monospace;">{$log|escape:'html':'UTF-8'}</td>
                            </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{/if}

<script type="text/javascript">
    function selectText(element) {
        element.select();
        try {
            document.execCommand('copy');
            showSuccessMessage('{l s='Copied to clipboard!' mod='ecomzone'}');
        } catch (err) {
            showErrorMessage('{l s='Failed to copy. Please copy manually.' mod='ecomzone'}');
        }
    }
</script>

<style type="text/css">
    .log-container {
        background: #f8f8f8;
        border: 1px solid #ddd;
        border-radius: 3px;
    }
    .log-container table {
        margin-bottom: 0;
    }
    .input-group .form-control {
        font-family: monospace;
        font-size: 12px;
    }
</style>