<?php echo $header; ?>
<?php
if ($this->config->get('config_pixel_facebook_status')=='enable'){
  if (!$this->config->get('config_pixel_facebook')==''){
    echo html_entity_decode("<script> fbq('track', 'InitiateCheckout'); </script>", ENT_QUOTES, 'UTF-8');
  }
}
?>

<?php echo $column_left; ?>
<?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
      <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <div class="checkout-steps ft-flex ft-bottom-margin-x-large">
    <div data-form="shipping-method" class="step shipping-method ft-ghost-element-parent">
      <div class="checkout-step-icons">
        <i class="fa fa-truck"></i>
      </div>
      <span class="ft-ghost-vertical-middle"><?php echo $text_checkout_shipping_method ?></span>
    </div>
    <div data-form="payment-method" class="step payment-method ft-ghost-element-parent">
      <div class="checkout-step-icons">
        <i class="fa fa-credit-card-alt"></i>
      </div>
      <span class="ft-ghost-vertical-middle"><?php echo $text_checkout_payment_method ?></span>
    </div>
    <div data-form="confirm" class="step confirm ft-ghost-element-parent">
      <div class="checkout-step-icons">
        <i class="fa fa-th-list"></i>
      </div>
      <span class="ft-ghost-vertical-middle"><?php echo $text_checkout_confirm ?></span>
    </div>
  </div>

  <div class="checkout">
    <?php if ($shipping_required) { ?>
      <!-- <form id="shipping-address" action="index.php?route=checkout/shipping_address" method="post" class="checkout-form">
        <div class="checkout-heading">
          <span><?php //echo $text_checkout_shipping_address; ?></span>
        </div>
        <div class="checkout-content"></div>
      </form> -->
      <form id="shipping-method" action="index.php?route=checkout/shipping_method" method="post" class="checkout-form">
        <div class="checkout-heading">
          <span class="ft-text-x-large"><?php echo $text_checkout_shipping_method; ?></span>
          <p class="ft-text-medium ft-top-margin-x-small"><?php echo $text_shipping_method; ?></p>
        </div>
        <div class="checkout-content"></div>
      </form>
    <?php } ?>

    <!-- <form id="payment-address" action="index.php?route=checkout/payment_address" method="post" class="checkout-form">
      <div class="checkout-heading">
        <span><?php //echo $text_checkout_payment_address; ?></span>
      </div>
      <div class="checkout-content"></div>
    </form> -->

    <form id="payment-method" action="index.php?route=checkout/payment_method" method="post" class="checkout-form">
      <div class="checkout-heading">
        <span class="ft-text-x-large"><?php echo $text_checkout_payment_method; ?></span>
        <p class="ft-text-medium ft-top-margin-x-small"><?php echo $text_payment_method; ?></p>
      </div>
      <div class="checkout-content"></div>
    </form>
    <form id="confirm" action="index.php?route=checkout/confirm" method="post">
      <div class="checkout-heading">
        <span class="ft-text-x-large"><?php echo $text_checkout_confirm; ?></span>
        <p class="ft-text-medium ft-top-margin-x-small"><?php echo $text_checkout_confirm_subtitle; ?></p>
      </div>
      <div class="checkout-content"></div>
    </form>
  </div>
  <?php echo $content_bottom; ?>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    function displayErrors(error) {
      for (var key in error) {
        $('#shipping-address input[name="' + key + '"]').after('<span class="error">' + error[key] + '</span>');
      }
    }

    <?php if ($this->config->get('config_status_analytics_avancado')){ ?>
      var analyticsProdutos = <?php echo json_encode($produtosCarrinho); ?>;
    <?php } ?>

    function displayStep(step) {

      <?php if ($this->config->get('config_status_analytics_avancado')){ ?>
      if (step.attr('id') == 'shipping-method'){
        analyticsStepCheckout(1,analyticsProdutos);
      } else if (step.attr('id') == 'payment-method'){
        analyticsStepCheckout(2,analyticsProdutos);
      } else if (step.attr('id') == 'confirm'){
        analyticsStepCheckout(3,analyticsProdutos);
      }
      <?php } ?>

      $(step).show();
      $(step).siblings('form').hide();
    }

    function markStep($form) {
      $('.step.' + $form.attr('id')).css({cursor: 'pointer'}).addClass('card-success').on('click', function() {
        displayStep($form);
      });
    }

    function getForm($formG) {
      $.ajax({
        url: $formG.attr('action'),
        dataType: 'html',
        success: function(html) {
          $formG.find('.checkout-content').html(html);
          displayStep($formG);
        },
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    }


    <?php if ($this->config->get('config_status_analytics_avancado')){ ?>
      $('#button-confirm').live('click', function() {
          //var analyticsProdutos = <?php // echo json_encode($produtosCarrinho); ?>;
          var analyticsOrder = [];
          analyticsOrder['orderID'] = '1';
          analyticsOrder['taxas'] = '1.25';
          analyticsOrder['frete'] = '0';
          analyticsOrder['total'] = '1000.50';

          analyticsPurchase(analyticsProdutos,analyticsOrder);
      });
      $('#button-shipping-method').live('click', function() {
        analyticsStepCheckoutOption(1,$('input[name=\'shipping_method\']:checked').val());
      });
      $('#button-payment-method').live('click', function() {
        analyticsStepCheckoutOption(2,$('input[name=\'payment_method\']:checked').val());
      });
    <?php } ?>

    $('#checkout .checkout-content input[name="account"]').live('change', function() {
    	if ($(this).attr('value') == 'register') {
    		$('#payment-address .checkout-heading span').html('<?php echo $text_checkout_account; ?>');
    	} else {
    		$('#payment-address .checkout-heading span').html('<?php echo $text_checkout_payment_address; ?>');
    	}
    });

    $('.checkout-heading a').live('click', function() {
    	$('.checkout-content').fadeOut('slow');
    	$(this).parent().parent().find('.checkout-content').fadeIn('slow');
    });

    getForm($('#shipping-method'));
    markStep($('#shipping-method'));

    $('form').live('submit', function(e) {
      $this = $(this);
      e.preventDefault();
      var $form = $this.next('form');

      <?php if ($this->config->get('config_status_analytics_avancado')){ ?>
      /*if ($this.attr('id') == 'shipping-method'){
        analyticsStepCheckoutOption(1,$('input[name=\'shipping_method\']:checked').val());
      } else if ($this.attr('id') == 'payment-method'){
        analyticsStepCheckoutOption(2,$('input[name=\'payment_method\']:checked').val());
      } */
      <?php } ?>

      var validate = ($this.attr('id') == 'confirm') ? '' : '/validate/';
      $.ajax({
        url: $this.attr('action') + validate,
        type: $this.attr('method'),
        data: $this.serializeObject(),
        dataType: 'json',
        beforeSend: function() {
          $this.find('button[type=submit]').attr('disabled', true).after('<span class="wait">&nbsp;<img src="catalog/view/theme/default/image/loading.gif" alt="" /></span>');
        },
        complete: function() {
          $this.find('button[type="submit"]').attr('disabled', false);
          $('.wait').remove();
        },
        success: function(json) {
          $('.warning, .error').remove();

          if (json['redirect']) {
            location = json['redirect'];
          } else if (json['error']) {
            if (json['error']['warning']) {

              $this.find('.checkout-content').prepend('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

              $('.warning').fadeIn('slow');
            }

            displayErrors(json['error']);

          } else {
            $.ajax({
              url: $form.attr('action'),
              dataType: 'html',
              success: function(html) {
                markStep($form);
                getForm($form);
              },
              error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
              }
            });
          }
        },
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
      });
    });
  });
</script>
<?php echo $footer; ?>
