<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{ title }}</title>
  <base href="{{ base }}"/>
  {% if description %}
    <meta name="description" content="{{ description }}"/>
  {% endif %}
  {% if keywords %}
    <meta name="keywords" content="{{ keywords }}"/>
  {% endif %}
  <script src="{{ jquery }}" type="text/javascript"></script>
  <link href="{{ bootstrap }}" type="text/css" rel="stylesheet" media="screen"/>
  <link href="{{ bootstrapmin }}" type="text/css" rel="stylesheet" media="screen"/>
  <link href="{{ icons }}" type="text/css" rel="stylesheet"/>
  <link href="{{ stylesheet }}" type="text/css" rel="stylesheet"/>
  {% if direction == 'rtl' %}
  <link href="{{ rtl }}" type="text/css" rel="stylesheet"/>
  {% endif %}
  <link href="{{ temporaryvariables }}" type="text/css" rel="stylesheet"/>
  <link href="{{ basecss }}" type="text/css" rel="stylesheet"/>
  <link href="{{ owlcss }}" type="text/css" rel="stylesheet"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment.min.js"></script>
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/moment-with-locales.min.js"></script>
  <script type="text/javascript" src="catalog/view/javascript/jquery/datetimepicker/daterangepicker.js"></script>
  <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/magnific/magnific-popup.css" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="catalog/view/javascript/jquery/datetimepicker/daterangepicker.css" rel="stylesheet" type="text/css"/>
  <script src="catalog/view/javascript/common.js" type="text/javascript"></script>
  <script src="catalog/view/javascript/theme.js" type="text/javascript"></script>
  <script src="catalog/view/javascript/support.js" type="text/javascript"></script>
  <script src="catalog/view/javascript/owl.carousel.min.js" type="text/javascript"></script>
  {% for style in styles %}
    <link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}"/>
  {% endfor %}
  {% for script in scripts %}
    <script src="{{ script.href }}" type="text/javascript"></script>
  {% endfor %}
  {% for link in links %}
    <link href="{{ link.href }}" rel="{{ link.rel }}"/>
  {% endfor %}
  {% for analytic in analytics %}
    {{ analytic }}
  {% endfor %}
</head>
<div class="quickview">
  <div class="quickview-container">   
      <div id="content" class="productpage-quickview">{{ content_top }}   
        <h2 class="page-title hidden">{{ heading_title }}</h2>    
        <div class="row">     
          <div class="col-md-6 col-sm-6 col-xs-12 product-left">
            <div class="product-info">
              {% if (thumb or images) %} 
                <div class="left product-image thumbnails">
                  {% if (thumb) %}      
                    <div class="image"><a class="thumbnail" title="{{ heading_title }}"><img id="czzoom" src="{{ popup }}" data-zoom-image="{{ popup }}" class="img-fluid" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></div> 
                    {% endif %} 
                    {% if (images) %} 
                    {% set sliderFor = 3 %}
                    {% set imageCount = images|length %} 
                  {% endif %}
                </div>
              {% endif %} 
            </div>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-12 product-right">
            <h3 class="product-title">{{ heading_title }}</h3>        
            {% if (review_status) %} 
              <div class="rating-wrapper">            
                {% set i = 1 %}{% for i in i..5 %} 
                {% if (rating < i) %} 
                <span class="fa fa-stack"><i class="fa fa-star gray off fa-stack-1x"></i></span>
                {% else %} 
                <span class="fa fa-stack"><i class="fa fa-star yellow fa-stack-1x"></i></span>
                {% endif %} 
                {% endfor %} 
                <a class="review-count" href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;">{{ reviews }}</a>
                <a class="write-review" href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><i class="fa fa-pencil"></i> {{ text_write }}</a>
              </div>
            {% endif %} 
             {% if (price) %} 
              <ul class="list-unstyled price">
                {% if (not special) %} 
                <li>
                  <h4 class="product-price">{{ price }}</h4>
                </li>
                {% else %} 
                <li><span class="old-price" style="text-decoration: line-through;">{{ price }}</span></li>
                <li>
                  <h3 class="special-price">{{ special }}</h3>
                </li>
                {% endif %} 
                {% if (tax) %} 
                <li class="price-tax">{{ text_tax }}&nbsp;<span>{{ tax }}</span></li>
                {% endif %} 
               <!--  {% if (points) %} 
                <li class="rewardpoint">{{ text_points }}&nbsp;&nbsp;<span>{{ points }}</span></li>
                {% endif %}  -->
                {% if (discounts) %} 
                {% for discount in discounts %} 
                <li class="discount">{{ discount['quantity'] }}{{ text_discount }}{{ discount['price'] }}</li>
                {% endfor %} 
                {% endif %} 
              </ul>
            {% endif %}        
            <ul class="list-unstyled attr clearfix">
              {% if (manufacturer) %} 
              <li><span>{{ text_manufacturer }}</span>&nbsp; <a href="{{ manufacturers }}">{{ manufacturer }}</a></li>
              {% endif %} 
              <li><span>{{ text_model }}</span>&nbsp; {{ model }}</li>
              {% if (reward) %} 
              <li><span>{{ text_reward }}</span>&nbsp; {{ reward }}</li>
              {% endif %} 
              <li><span>{{ text_stock }}</span>&nbsp; {{ stock_status }}</li>
            </ul>
            <div id="product2">
              <form id="form-product">
              {% if options %}
              <!-- <h4>{{ text_option }}</h4> -->
              {% for option in options %}
              {% if option.type == 'select' %}
              <div class="form-group{% if option.required %} required {% endif %} mb-2 col-6">
                <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                <select name="option[{{ option.product_option_id }}]" id="input-option-{{ option.product_option_id }}" class="form-control">
                  <option value="">{{ text_select }}</option>
                  {% for option_value in option.product_option_value %}
                  <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
                  {% if option_value.price %}
                  ({{ option_value.price_prefix }}{{ option_value.price }})
                  {% endif %} </option>
                  {% endfor %}
                </select>
                <div id="error-option-{{ option.product_option_id }}" class="invalid-feedback"></div>
              </div>
              {% endif %}
              {% if option.type == 'radio' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label radio-text">{{ option.name }}</label>
                <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                  <div class="radio">
                    <label>
                      <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
                      {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}                  
                      {{ option_value.name }}
                      {% if option_value.price %}
                      ({{ option_value.price_prefix }}{{ option_value.price }})
                      {% endif %} </label>
                  </div>
                  {% endfor %} 
                </div>
              </div>
              {% endif %}
              {% if option.type == 'checkbox' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label checkbox-text">{{ option.name }}</label>
                <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
                      {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
                      {{ option_value.name }}
                      {% if option_value.price %}
                      ({{ option_value.price_prefix }}{{ option_value.price }})
                      {% endif %} </label>
                  </div>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
              {% if option.type == 'text' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control" />
              </div>
              {% endif %}
              {% if option.type == 'textarea' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
              </div>
              {% endif %}
              {% if option.type == 'file' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label">{{ option.name }}</label>
                <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block btn-file"><i class="fa fa-upload"></i> {{ button_upload }}</button>
                <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
              </div>
              {% endif %}
              {% if option.type == 'date' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                <div class="input-group date">
                  <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" class="form-control" />
                  <span class="input-group-btn">
                  <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                  </span>
                </div>
              </div>
              {% endif %}
              {% if option.type == 'datetime' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                <div class="input-group datetime">
                  <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                  </span>
                </div>
              </div>
              {% endif %}
              {% if option.type == 'time' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                <div class="input-group time">
                  <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
                  </span>
                </div>
              </div>
              {% endif %}
              {% endfor %}
              {% endif %}
              {% if recurrings %}
              <h3>{{ text_payment_recurring }}</h3>
              <div class="form-group required">
                <select name="recurring_id" class="form-control">
                  <option value="">{{ text_select }}</option>
                  {% for recurring in recurrings %}
                  <option value="{{ recurring.recurring_id }}">{{ recurring.name }}</option>
                  {% endfor %}
                </select>
                <div class="help-block" id="recurring-description"></div>
              </div>
              {% endif %}
              
                <label class="control-label mb-2" for="input-quantity">{{ entry_qty }}</label>
                <div class="form-group mb-4">
                <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />
                <input type="hidden" name="product_id" value="{{ product_id }}" />
                {% if stock_statusclass == '' %}
                 <!--  <button type="submit" id="button-cart" class="btn btn-default btn-lg btn-block">{{ button_cart }}</button> -->
                  <button type="submit" id="button-cart" formaction="{{ add_to_cart }}" data-bs-toggle="tooltip" class="btn btn-default btn-lg btn-block" title="{{ button_cart }}">
                 {{ button_cart }}
              </button>
                <input type="hidden" name="product_id" value="{{ product_id }}"/>
                <input type="hidden" name="quantity" value="{{ minimum }}"/>
                {% endif %}
                </div>
              {% if minimum > 1 %}
              <div class="alert alert-info quantity-height"><i class="fa fa-info-circle"></i> {{ text_minimum }}</div>
              {% endif %}
            </form>
            </div>                  
          </div>    
        </div>
      </div>
      {{ content_middle }}{{ content_bottom }}
  </div>
</div>
<script type="text/javascript"><!--
  $('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
    $.ajax({
      url: 'index.php?route=product/product/getRecurringDescription',
      type: 'post',
      data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
      dataType: 'json',
      beforeSend: function() {
        $('#recurring-description').html('');
      },
      success: function(json) {
        alert()

        if (json['success']) {
          $('#recurring-description').html(json['success']);
        }
      }
    });
  });
//--></script>

<script>
 $('#form-product').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: 'index.php?route=checkout/cart|add&language={{ language }}',
        type: 'post',
        data: $('#form-product').serialize(),
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded',
        cache: false,
        processData: false,
        beforeSend: function () {
            $('#button-cart').prop('disabled', true).addClass('loading');
        },
        complete: function () {
            $('#button-cart').prop('disabled', false).removeClass('loading');
        },
        success: function (json) {
            $('#form-product').find('.is-invalid').removeClass('is-invalid');
            $('#form-product').find('.invalid-feedback').removeClass('d-block');

            if (json['error']) {
                for (key in json['error']) {
                    $('#input-' + key.replaceAll('_', '-')).addClass('is-invalid').find('.form-control, .form-select, .form-check-input, .form-check-label').addClass('is-invalid');
                    $('#error-' + key.replaceAll('_', '-')).html(json['error'][key]).addClass('d-block');
                }
            }

            if (json['success']) {
                //$('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-circle-check"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                parent.$('#header-cart').load('index.php?route=common/cart|info', function() {
                  parent.$(".cart-link").click();
                  parent.$.magnificPopup.close();
                }); 
                
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
  });
</script>
<script type="text/javascript"><!--
  // $('.date').datetimepicker({
  //   language: '{{ datepicker }}',
  //   pickTime: false
  // });

  // $('.datetime').datetimepicker({
  //   language: '{{ datepicker }}',
  //   pickDate: true,
  //   pickTime: true
  // });

  // $('.time').datetimepicker({
  //   language: '{{ datepicker }}',
  //   pickDate: false
  // });

  $('button[id^=\'button-upload\']').on('click', function() {
    var node = this;

    $('#form-upload').remove();

    $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

    $('#form-upload input[name=\'file\']').trigger('click');

    if (typeof timer != 'undefined') {
        clearInterval(timer);
    }

    timer = setInterval(function() {
      if ($('#form-upload input[name=\'file\']').val() != '') {
        clearInterval(timer);

        $.ajax({
          url: 'index.php?route=tool/upload',
          type: 'post',
          dataType: 'json',
          data: new FormData($('#form-upload')[0]),
          cache: false,
          contentType: false,
          processData: false,
          beforeSend: function() {
            $(node).button('loading');
          },
          complete: function() {
            $(node).button('reset');
          },
          success: function(json) {
            $('.text-danger').remove();

            if (json['error']) {
              $(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
            }

            if (json['success']) {
              alert(json['success']);

              $(node).parent().find('input').val(json['code']);
            }
          },
          error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
          }
        });
      }
    }, 500);
  });
</script>
<script type="text/javascript"><!--
  $('#review').delegate('.pagination a', 'click', function(e) {
    e.preventDefault();

      $('#review').fadeOut('slow');

      $('#review').load(this.href);

      $('#review').fadeIn('slow');
  });

  $('#review').load('index.php?route=product/product/review&product_id={{ product_id }}');


  $('#top').remove();
  $('.top_button').remove();
//-->  
</script>

<style>
  nav, header, .wrap-breadcrumb {
      display: none;
  }
  .content_product_block { display:none; }
  .content_header_top, .page-title  { display:none; }

  footer {
      display: none;
  }
  .content-top-breadcum {
      display: none;
  }
  #powered {
      display: none;
  }
  #container {
      width: 850px;
  }
  .top_button { display:none !important; }
</style>
