<?php
$this->layout("_theme");
$this->insert("views/page-title", ["pageTitle" => $pageTitle]);
?>
<section id="content">
<div class="content-wrap" style="overflow: visible;">
<div class="container">
<div class="single-product">
<div class="product">
<div class="row gutter-40">
<div class="col-md-6 d-block d-md-none">
<!-- Product Single - Gallery
============================================= -->
<div class="product-image">
<div class="fslider" data-pagi="false" data-arrows="false" data-thumbs="true">
<div class="flexslider">
<div class="slider-wrap" data-lightbox="gallery">
<div class="slide" data-thumb="<?= url("storage/" . $product->cover); ?>"><a
href="<?= url("storage/" . $product->cover); ?>"
title="<?= $product->title ?>" data-lightbox="gallery-item"><img
src="<?= image($product->cover, 1200) ?>"
title="<?= $product->title ?>" alt="<?= $product->title ?>">
</a></div>
<?php
if ($gallery):
foreach ($gallery as $g):
?>
<div class="slide"
data-thumb="<?= url("storage/" . $g->gallery) ?>"><a
href="<?= url("storage/" . $g->gallery) ?>"
title="<?= $product->title ?>"
data-lightbox="gallery-item"><img
src="<?= image($g->gallery, 1200) ?>"
title="<?= $product->title ?>"
alt="<?= $product->title ?>"></a></div>
<?php
endforeach;
endif;
?>
</div>
</div>
</div>
</div><!-- Product Single - Gallery End -->
</div>
<div class="col-md-4 col-lg-6 d-none d-md-block">
<div class="position-relative" data-lightbox="gallery">
<a class="mb-3 d-block" href="<?= url("storage/" . $product->cover); ?>"
title="<?= $product->title ?>" data-lightbox="gallery-item"><img
src="<?= url("storage/" . $product->cover); ?>"
alt="<?= $product->title ?>"></a>
<?php
if ($gallery):
foreach ($gallery as $g):
?>
<a class="mb-3 d-block" href="<?= url("storage/" . $g->gallery) ?>"
title="<?= $product->title ?>" data-lightbox="gallery-item"><img
src="<?= url("storage/" . $g->gallery) ?>"
alt="<?= $product->title ?>"></a>
<?php
endforeach;
endif;
?>
</div><!-- Product Single - Gallery End -->
</div>
<div class="col-md-8 col-lg-6 product-desc position-lg-sticky h-100">
<div class="d-flex align-items-center justify-content-between mb-0">
<!-- Product Single - Price
============================================= -->
<h3 class="mb-0 fs-1"><?= $product->title ?></h3>
<!-- Product Single - Rating
============================================= -->
</div>
<h5 class="mt-0 text-secondary fs-4"><?= $product->subtitle ?></h5>
<div class="line"></div>
<!-- Product Single - Short Description
============================================= -->
<p><?= $product->content ?></p>
<!-- Product Single - Meta
============================================= -->
<?php
if ($product->cores): ?>
<div class="card product-meta">
<table class="table table-striped">
<tr>
<td class="fw-bolder">Cores</td>
<td><?= $product->cores ?></td>
</tr>
<tr>
<td class="fw-bolder">Aplicação</td>
<td><?= $product->aplicacao ?></td>
</tr>
<tr>
<td class="fw-bolder">Usos</td>
<td><?= $product->cCategoria ?></td>
</tr>
<tr>
<td class="fw-bolder">Frontal</td>
<td><?= $product->frontal ?></td>
</tr>
<tr>
<td class="fw-bolder">Espessura</td>
<td><?= $product->espessura ?></td>
</tr>
<tr>
<td class="fw-bolder">Adesivo</td>
<td><?= $product->adesivo ?></td>
</tr>
<tr>
<td class="fw-bolder">Liner</td>
<td><?= $product->liner ?></td>
</tr>
<tr>
<td class="fw-bolder">Acabamento</td>
<td><?= $product->acabamento ?></td>
</tr>
<tr>
<td class="fw-bolder">Durabilidade</td>
<td><?= $product->durabilidade ?></td>
</tr>
<tr>
<td class="fw-bolder">Tamanho</td>
<td><?= $product->tamanho ?></td>
</tr>
<tr>
<td class="fw-bolder">Metragem</td>
<td><?= $product->metragem ?></td>
</tr>
</table>
</div><!-- Product Single - Meta End -->
<?php
endif; ?>
<!-- Product Single - Short Description
============================================= -->
<div class="row">
<?php
if ($product->technology): ?>
<div class="col-12 col-lg-6 mb-4">
<div class="bg-gray p-3">
<h5 class="mb-2">Normas</h5>
<div class="line"></div>
<ul class="iconlist">
<?php
$norma = explode(";", $product->technology);
foreach ($norma as $n) :
?>
<li><i class="fa-solid fa-caret-right"></i> <?= trim($n) ?></li>
<?php
endforeach;
?>
</ul><!-- Product Single - Short Description End -->
</div>
</div>
<?php
endif; ?>
<?php
if ($product->paper_size): ?>
<div class="col-12 col-lg-6 mb-4">
<div class=" bg-gray p-3">
<h5 class="mb-2">Embalagens</h5>
<div class="line"></div>
<ul class="iconlist">
<?php
$paper = explode(";", $product->paper_size);
foreach ($paper as $p) :
?>
<li><i class="fa-solid fa-caret-right"></i> <?= trim($p) ?></li>
<?php
endforeach;
?>
</ul><!-- Product Single - Short Description End -->
</div>
</div>
<?php
endif; ?>
</div>
<div class="line"></div>
<div class="promo promo-light px-5 py-4 mb-5 rounded-6 ">
<div class="row align-items-center">
<div class="col-12 col-lg">
<h3 class="text-primary">Mais Informações?</h3>
<span>Solicite uma cotação!</span>
</div>
<div class="col-12 col-lg-auto mt-4 mt-lg-0">
<a href="#modalOrcamento" data-lightbox="inline"
class="button button-dark button-circle button-reveal text-end ls-0 m-0"
style="padding-left: 40px;padding-right: 40px;"><span>Saiba Mais</span><i
class="bi-chevron-right"></i></a>
</div>
</div>
</div>
<!-- <ul class="list-group list-group-flush">-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Category</span><span class="text-dark fw-semibold">Dress</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Color</span><span class="text-dark fw-semibold">Light Pink</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Size</span><span class="text-dark fw-semibold">Medium, Large</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Quantity</span><span class="text-dark fw-semibold">7 Pcs</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">Return Policy</span><span class="text-dark fw-semibold">30 days</span>-->
<!-- </li>-->
<!-- <li class="list-group-item d-flex justify-content-between align-items-center px-0">-->
<!-- <span class="text-muted">SKU</span><span class="text-dark fw-semibold">8465415</span>-->
<!-- </li>-->
<!-- </ul>-->
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<?php
$this->start("scripts"); ?>
<script type="text/javascript">
var ajaxResponseBaseTime = 5;
var ajaxResponseRequestError = "<div class='message error icon-warning'>Desculpe mas não foi possível processar sua requisição...</div>";
// AJAX RESPONSE
function ajaxMessage(message, time) {
var ajaxMessage = $(message);
ajaxMessage.append("<div class='message_time'></div>");
ajaxMessage.find(".message_time").animate({"width": "100%"}, time * 1000, function () {
$(this).parents(".message").fadeOut(200);
});
$(".ajax_response").append(ajaxMessage);
ajaxMessage.effect("bounce");
}
$(".j_cta").on("click", function (e) {
e.preventDefault();
var clicked = $(this);
var data = clicked.data();
data.email = $(".j_email").val();
var load = $(".ajax_load");
$.ajax({
url: data.url,
type: "POST",
data: data,
dataType: "json",
beforeSend: function () {
load.fadeIn(200).css("display", "flex");
},
success: function (response) {
//message
if (response.message) {
ajaxMessage(response.message, ajaxResponseBaseTime);
load.fadeOut();
}
},
error: function () {
ajaxMessage(ajaxResponseRequestError, 5);
load.fadeOut();
}
});
});
</script>
<?php
$this->end(); ?>
<div class="modal1 mfp-hide fadeIn fast" id="modalOrcamento">
<div class="card border-0 mx-auto" style="max-width: 500px;">
<img src="<?= url("storage/" . $product->cover); ?>" class="card-img-top" alt="Image">
<div class="card-body p-4">
<h3 class="card-title font-body"><?= $product->title ?></h3>
<div class="form-widget">
<div class="form-result"></div>
<form class="mb-0 position-relative" action="<?= url("contact") ?>" method="post"
enctype="multipart/form-data">
<div class="form-process">
<div class="css3-spinner">
<div class="css3-spinner-scaler"></div>
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<label for="modal-health-name">Nome:</label>
<input type="text" name="name" id="modal-health-name" class="form-control required" value=""
placeholder="Seu nome">
</div>
<div class="col-12 mb-2">
<label for="modal-health-email">Email:</label>
<input type="email" name="email" id="modal-health-email" class="form-control required"
value="" placeholder="Seu melhor Email">
</div>
<div class="col-12 mb-2">
<label for="modal-health-phone">Telefone:</label>
<input type="email" name="phone" id="modal-health-phone" class="form-control required"
value="" placeholder="Seu Telefone">
</div>
<div class="col-12 mb-2">
<label for="modal-health-product">Produto:</label>
<input type="text" name="product" value="<?= $product->title ?>" class="form-control"
style="background-color: #EEEEEE" readonly>
</div>
<div class="col-12 mb-2">
<label for="modal-health-email">Descreva sua necessidade</label>
<textarea name="message" class="form-control"></textarea>
</div>
<div class="col-12 form-group">
<small></small>
</div>
<div class="col-12 d-none">
<input type="text" id="modal-health-botcheck" name="modal-health-botcheck" value="">
</div>
<div class="col-12">
<button type="submit" name="modal-health-submit" class="btn btn-danger w-100 py-2">Enviar
</button>
</div>
<input type="hidden" name="action" value="orcamento">
<input type="hidden" name="subject" value="Orçamento de <?= $product->title ?>">
</div>
</form>
</div>
</div>
</div>
</div>