{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="float-end">
        {% if signature %}
					<button type="button" id="button-api" data-bs-toggle="tooltip" title="{{ button_api }}" class="btn btn-info"><i class="fa-solid fa-cog"></i></button>
				{% else %}
					<button type="button" id="button-api" data-bs-toggle="tooltip" title="{{ button_api }}" data-placement="left" class="btn btn-danger"><i class="fa-solid fa-triangle-exclamation"></i></button>
				{% endif %}
				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a>
			</div>
			<h1>{{ heading_title }}</h1>
			<ol class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
					<li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
				{% endfor %}
			</ol>
		</div>
	</div>
	<div id="marketplace-extension-info" class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger"><i class="fa-solid fa-circle-exclamation"></i> {{ error_warning }}</div>
    {% endif %}
		<div class="card">
			<div class="card-header"><i class="fa-solid fa-puzzle-piece"></i> {{ name }}</div>
			<div class="card-body">
				<div class="row extension-info">
					<div class="col-md-8 col-lg-9">
						{% if banner %}
							<div id="banner" class="text-center img-thumbnail mb-3"><img src="{{ banner }}" title="{{ name }}" alt="{{ name }}" class="img-fluid"/></div>
						{% endif %}
						<div class="row thumbnails">
							{% for image in images %}
								<div class="col-4 col-md-3 col-lg-2 mb-3"><a href="{{ image.popup }}"><img src="{{ image.thumb }}" alt="{{ image.name }}" title="{{ image.name }}" class="img-fluid img-thumbnail"/></a></div>
							{% endfor %}
						</div>
						<ul class="nav nav-tabs">
							<li class="nav-item"><a href="#tab-description" class="nav-link active" data-bs-toggle="tab">{{ tab_general }}</a></li>
							<li class="nav-item"><a href="#tab-documentation" class="nav-link" data-bs-toggle="tab">{{ tab_documentation }}</a></li>
							<li class="nav-item"><a href="#tab-download" class="nav-link" data-bs-toggle="tab">{{ tab_download }}</a></li>
							<li class="nav-item"><a href="#tab-comment" class="nav-link" data-bs-toggle="tab">{{ tab_comment }} ({{ comment_total }})</a></li>
						</ul>
						<div class="tab-content">
							<div id="tab-description" class="tab-pane fade show active">{{ description }}</div>
							<div id="tab-documentation" class="tab-pane fade">{{ documentation }}</div>
							<div id="tab-download" class="tab-pane fade">
								<fieldset>
									<legend>{{ text_available }}</legend>
									<div id="download"></div>
								</fieldset>
							</div>
							<div id="tab-comment" class="tab-pane">
								<fieldset>
									<legend>{{ text_comment_add }}</legend>
									<div class="mb-3">
										<textarea name="comment" rows="5" placeholder="{{ text_write }}" id="input-history-comment" class="form-control"></textarea>
									</div>
									<div class="text-end">
										<button type="button" id="button-comment" class="btn btn-primary">{{ button_comment }}</button>
									</div>
								</fieldset>
								<br/>
								<fieldset>
									<legend>{{ text_comment }}</legend>
									<div id="comment"></div>
								</fieldset>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-lg-3">
						<div id="buy" class="card mb-3">
							<div class="card-body">
								{% if license == '1' and not purchased %}
									<button type="button" id="button-buy" class="btn btn-success btn-lg btn-block">{{ button_purchase }}</button>
								{% endif %}
								<div id="price" class="row">
									<div class="col-lg-5"><strong>{{ text_price }}</strong></div>
									<div class="col-lg-7 text-end">{% if license %}
											{{ price }}
										{% else %}
											{{ text_free }}
										{% endif %}
									</div>
								</div>
								<hr>
								<ul class="list-check">
									<li>{{ text_partner }}</li>
									<li>{{ text_support }}</li>
									<li>{{ text_documentation }}</li>
								</ul>
								<hr>
								<div class="row">
									<div class="col-md-5"><strong>{{ text_rating }}</strong></div>
									<div class="col-md-7 text-end">{% for i in 1..5 %}
											{% if rating < i %}
                        <i class="fa-regular fa-star"></i>
                      {% else %}
                        <i class="fa-solid fa-star"></i>
                      {% endif %}
										{% endfor %} ({{ rating_total }})
									</div>
								</div>
								<hr>
								<div class="row">
									<div class="col-md-5"><strong>{{ text_compatibility }}</strong></div>
									<div class="col-md-7 text-end">{{ compatibility }}</div>
								</div>
								<hr>
								<div class="row">
									<div class="col-md-5"><strong>{{ text_date_modified }}</strong></div>
									<div class="col-md-7 text-end">{{ date_modified }}</div>
								</div>
								<hr>
								<div class="row">
									<div class="col-md-5"><strong>{{ text_date_added }}</strong></div>
									<div class="col-md-7 text-end">{{ date_added }}</div>
								</div>
							</div>
						</div>
						<div id="sales" class="card mb-3">
							<div class="card-body"><i class="fa-solid fa-shopping-cart"></i> <strong>{{ sales }}</strong> {{ text_sales }}</div>
						</div>
						<div id="sales" class="card mb-3">
							<div class="card-body"><i class="fa-solid fa-download"></i> <strong>{{ downloaded }}</strong> {{ text_downloaded }}</div>
						</div>
						<div class="card mb-3">
							<div class="card-body">
								<div class="media">
									<img src="{{ member_image }}" alt="{{ member_username }}" title="{{ member_username }}" class="me-3 rounded-circle">
									<div class="media-body">
										<h5 class="mt-0"><a href="{{ filter_member }}">{{ member_username }}</a></h5>
										<small>{{ text_member_since }} {{ member_date_added }}</small>
									</div>
								</div>
								<br/>
								<a href="{{ filter_member }}" class="btn btn-primary btn-lg btn-block">{{ button_view_all }}</a> <a href="https://www.opencart.com/index.php?route=support/seller&amp;extension_id={{ extension_id }}" target="_blank" class="btn btn-outline-secondary btn-lg btn-block">{{ button_support }}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript"><!--
$('#button-api').on('click', function (e) {
    $('#modal-api').remove();

    $.ajax({
        url: 'index.php?route=marketplace/api&user_token={{ user_token }}',
        dataType: 'html',
        beforeSend: function () {
            $('#button-api').button('loading');
        },
        complete: function () {
            $('#button-api').button('reset');
        },
        success: function (html) {
            $('body').append(html);

            $('#modal-api').modal('show');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
//--></script>
<script type="text/javascript"><!--
$('#button-buy').on('click', function (e) {
    e.preventDefault();

    $('#modal-purchase').remove();

    html = '<div id="modal-purchase" class="modal">';
    html += '  <div class="modal-dialog">';
    html += '    <div class="modal-content">';
    html += '      <div class="modal-header">';
    html += '        <h5 class="modal-title">{{ text_purchase|escape('js') }}</h5>';
    html += '        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>';
    html += '      </div>';
    html += '      <div class="modal-body">';
    html += '        <p>{{ text_pin|escape('js') }}</p>';
    html += '        <p>{{ text_secure|escape('js') }}</p>';
    html += '        <div class="mb-3">';
    html += '          <label for="input-pin">{{ entry_pin|escape('js') }}</label>';
    html += '          <input type="password" name="pin" value="" placeholder="{{ entry_pin|escape('js') }}" id="input-pin" class="form-control"/>';
    html += '        </div>';
    html += '        <div class="mb-3 text-end">';
    html += '          <div class="text-end"><a href="https://www.opencart.com/index.php?route=support/contact" class="btn btn-light btn-lg" target="_blank">{{ button_forgot_pin|escape('js') }}</a></div>';
    html += '          <button type="button" id="button-purchase" class="btn btn-primary btn-lg">{{ button_purchase|escape('js') }}</button>';
    html += '        </div>';
    html += '      </div>';
    html += '    </div>';
    html += '  </div>';
    html += '</div>';

    $('body').append(html);

    $('#modal-purchase').modal('show');
});

$('body').on('click', '#modal-purchase #button-purchase', function (e) {
    e.preventDefault();

    var element = this;

    $.ajax({
        url: 'index.php?route=marketplace/marketplace.purchase&user_token={{ user_token }}&extension_id={{ extension_id }}',
        type: 'post',
        data: $('#input-pin'),
        dataType: 'json',
        beforeSend: function () {
            $(element).button('loading');
        },
        complete: function () {
            $(element).button('reset');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#modal-purchase .modal-body').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#modal-purchase').modal('hide');

                $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                $('#download').load('index.php?route=marketplace/marketplace.extension&user_token={{ user_token }}&extension_id={{ extension_id }}');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

// Download
$('#download').load('index.php?route=marketplace/marketplace.extension&user_token={{ user_token }}&extension_id={{ extension_id }}');

$('#tab-download').on('click', '.btn-primary', function (e) {
    e.preventDefault();

    var element = this;

    $.ajax({
        url: $(element).val(),
        dataType: 'json',
        beforeSend: function () {
            $(element).button('loading');
        },
        complete: function () {
            $(element).button('reset');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#download').before('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div></div>');
            }

            if (json['success']) {
                $('#download').before('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + '  <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

$('#tab-download').on('click', '.dropdown-item', function (e) {
    e.preventDefault();

    var element = this;

    $.ajax({
        url: $(element).attr('href'),
        dataType: 'json',
        beforeSend: function () {
            $(element).button('loading');
        },
        complete: function () {
            $(element).button('reset');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#download').before('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + '  <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div></div>');
            }

            if (json['success']) {
                $('#download').before('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + '  <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                $('#download').load('index.php?route=marketplace/marketplace.extension&user_token={{ user_token }}&extension_id={{ extension_id }}');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

// Comment
$('#comment').on('click', '.pagination a', function (e) {
    e.preventDefault();

    $('#comment').load(this.href);
});

$('#comment').load('index.php?route=marketplace/marketplace.comment&user_token={{ user_token }}&extension_id={{ extension_id }}');

// Add comment
$('#button-comment').on('click', function () {
    $.ajax({
        url: 'index.php?route=marketplace/marketplace.addComment&user_token={{ user_token }}&extension_id={{ extension_id }}',
        type: 'post',
        dataType: 'json',
        data: 'comment=' + encodeURIComponent($('#input-history-comment').val()),
        beforeSend: function () {
            $('#button-comment').button('loading');
        },
        complete: function () {
            $('#button-comment').button('reset');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#tab-comment').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#tab-comment').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                $('#comment').load('index.php?route=marketplace/marketplace.comment&user_token={{ user_token }}&extension_id={{ extension_id }}');

                $('#input-history-comment').val('');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

// Next replies
$('#comment').on('click', '.btn-block', function (e) {
    e.preventDefault();

    var element = this;

    $.ajax({
        url: $(element).attr('href'),
        dataType: 'html',
        beforeSend: function () {
            $(element).button('loading');
        },
        complete: function () {
            $(element).button('reset');
        },
        success: function (html) {
            $(element).parent().parent().parent().append(html);

            $(element).parent().remove();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

// Reply
$('#comment').on('click', '.btn-link', function (e) {
    e.preventDefault();

    $(this).parent().parent().find('.reply-input-box').toggle();
});

// Add reply
$('#comment').on('click', '.btn-primary', function (e) {
    e.preventDefault();

    var element = this;

    $.ajax({
        url: $(element).attr('href'),
        type: 'post',
        dataType: 'json',
        data: 'comment=' + encodeURIComponent($(element).parents('.reply-input-box').find('textarea[name=\'comment\']').val()),
        beforeSend: function () {
            $(element).button('loading');
        },
        complete: function () {
            $(element).button('reset');
        },
        success: function (json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $(element).parents('.reply-input-box').before('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $(element).parents('.reply-input-box').before('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

                $(element).parents('.reply-input-box').parents('.media').find('.reply-refresh').last().trigger('click');

                $(element).parents('.reply-input-box').find('textarea[name=\'comment\']').val('');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

// Refresh
$('#comment').on('click', '.reply-refresh', function (e) {
    e.preventDefault();

    var element = this;

    $.ajax({
        url: $(element).attr('href'),
        dataType: 'html',
        beforeSend: function () {
            $(element).button('loading');
        },
        complete: function () {
            $(element).button('reset');
        },
        success: function (html) {
            $(element).parent().replaceWith(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

$(document).ready(function () {
    $('.thumbnails').magnificPopup({
        type: 'image',
        delegate: 'a',
        gallery: {
            enabled: true
        }
    });
});
//--></script>
{{ footer }}
