<?php $_shouldextend[1]=1; ?>

<?php $this->startSection('content'); ?>
	<div class="d-flex pt-5 container-fluid justify-content-start">
 <a href="<?php echo static::e(URL("admin/")); ?>" class=" shown-sm btn btn-light shadow-x-2 rounded-x">

 <i class="material-icons">chevron_left</i>
 </a>
	</div>
	<div class="row pt-4">
 <div class="col-12 col-lg-4">
 <div class="container-fluid bg-white py-3 bg-white shadow-sm">
 <div class="border-bottom mb-3 py-3 d-flex justify-content-between align-items-center">
 <h5 class="text-std-2 font-weight-bold" id="product-id" data-id="<?php echo static::e($product->id_product); ?>">
 Dados do Produto
 </h5>
 <button class="btn-edit-section not-active btn-outline-secondary rounded-0 btn btn-edit-data sm-font">
 Editar
 <i class="fa fa-edit ml-2"></i>
 </button>

 <button class="btn-save-ediction hidden not-active btn-primary rounded-0 btn btn-edit-data">
 <i class="fa fa-check"></i>
 </button>
 </div>

 <div class="product-data-input">
 <h6 class="sm-font">Nome</h6>
 <p class="text-std-2 text-palid-2"><?php echo static::e($product->name); ?></p>
 <input type="text" data-name="name"  class="text-std-2 hidden form-control mb-3" placeholder="">
 </div>

 <div class="product-data-input">
 <h6 class="sm-font">Categoria</h6>
 <p class="text-std-2 text-palid-2" data-index="<?php echo static::e($product->id_category); ?>"><?php echo static::e($product->category_name); ?></p>
 <select name="categories-select" data-name="id_category" class="custom-select is-odd mb-3 hidden">
 <?php $__currentLoopData = $categories; $this->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $this->incrementLoopIndices(); $loop = $this->getFirstLoop(); ?>
 <option <?php echo static::e($loop->index == 1 ? 'selected' : ''); ?>

 value="<?php echo static::e($category->id_category); ?>"
 ><?php echo static::e($category->category_name); ?></option>
 <?php endforeach; $this->popLoop(); $loop = $this->getFirstLoop(); ?>
 </select>
 </div>

 <div class="product-data-input">
 <h6 class="sm-font">Tipo</h6>
 <p class="text-std-2 text-palid-2"><?php echo static::e($product->type); ?></p>
 <input type="text" data-name="type" class="text-std-2 hidden form-control mb-3" placeholder="">
 </div>

 <div class="product-data-input">
 <h6 class="sm-font">Preço</h6>
 <p class="text-std-2 text-palid-2"><?php echo static::e(number_format($product->price, 2, ',', '.')); ?></p>
 <input type="text" data-name="price" class="text-std-2 hidden form-control mb-3" placeholder="">
 </div>

 </div>
 </div>

 <div class="col-12 col-lg-8">
 <div class="container-fluid py-3 bg-white shadow-sm">
 <div class="border-bottom mb-3 py-3 d-flex justify-content-between align-items-center">
 <h5 class="text-std-2 font-weight-bold">
 Descrição do Produto
 </h5>
 <button class="btn-edit-section not-active btn-outline-secondary rounded-0 btn btn-edit-data sm-font">
 Editar
 <i class="fa fa-edit ml-2"></i>
 </button>
 <button class="btn-save-ediction hidden not-active btn-primary rounded-0 btn btn-edit-data">
 <i class="fa fa-check"></i>
 </button>
 </div>
 <div class="product-data-input">
 <h6 class="sm-font">Descrição:</h6>
 <p class="text-std-2 text-palid-2"><?php echo static::e($product->description); ?></p>
 <textarea data-name="description" class="text-std-2 text-palid-2 form-control hidden" rows="5">

 </textarea>
 </div>
 </div>

 <div id="color-images-slide" data-interval="false" class="carousel slide" data-ride="carousel">


 <!-- The slideshow -->
 <div class="carousel-inner" id="colors-images-holder">
 <div class="carousel-item active">
 <div class="row pt-4">
 <div class="col-12 col-lg-4 vehicle-image-container">
 <div class="vehicle-image-holder clear align-items-center justify-content-center rounded"
 <?php if(isset($product->attashments[0])): ?>
 data-id="<?php echo static::e($product->attashments[0]->id_attashment); ?>"
 style="background: url('assets/img/uploads/<?php echo static::e($product->attashments[0]->url); ?>') 100% 100%;
 background-size: cover;
 "
     <?php endif; ?>
 >

 <i class="material-icons big-font-1">
 add_circle_outline
 </i>
 <div class="vehicle-image-holder-progress-bar hidden">
 <i class="d-block mx-auto fa fa-spinner fa-spin  text-light"></i>
 <p class="sm-font text-std-2 text-center">
 A processar...
 </p>
 </div>
 </div>
 <div class="d-flex justify-content-center">
 <button class="hidden btn-clear-image btn mt-3 btn-outline-secondary text-std-2 sm-font">
 Remover
 </button>
 </div>
 <input type="file" class="hidden">
 </div>

 <div class="col-12 col-lg-4 vehicle-image-container">
 <div class="vehicle-image-holder align-items-center <?php echo static::e(isset($product->attashments[1]) ? 'clear' : ''); ?> justify-content-center rounded"
  <?php if(isset($product->attashments[1])): ?>
 data-id="<?php echo static::e($product->attashments[1]->id_attashment); ?>"
  style="background: url('assets/img/uploads/<?php echo static::e($product->attashments[1]->url); ?>') 100% 100%;
  background-size: cover;
  "
 <?php endif; ?>
 >
 <i class="material-icons big-font-1">
 add_circle_outline
 </i>
 <div class="vehicle-image-holder-progress-bar hidden">
 <i class="d-block mx-auto fa fa-spinner fa-spin  text-light"></i>
 <p class="sm-font text-std-2 text-center">
 A processar...
 </p>
 </div>
 </div>
 <div class="d-flex justify-content-center">
 <button class="hidden btn-clear-image btn mt-3 btn-outline-secondary text-std-2 sm-font">
 Remover
 </button>
 </div>
 <input type="file" class="hidden">
 </div>

 <div class="col-12 col-lg-4 vehicle-image-container">
 <div class="vehicle-image-holder align-items-center <?php echo static::e(isset($product->attashments[2]) ? 'clear' : ''); ?> justify-content-center rounded"
  <?php if(isset($product->attashments[2])): ?>
 data-id="<?php echo static::e($product->attashments[2]->id_attashment); ?>"
  style="background: url('assets/img/uploads/<?php echo static::e($product->attashments[2]->url); ?>') 100% 100%;
  background-size: cover;
  "
 <?php endif; ?>
 >
 <i class="material-icons big-font-1">
 add_circle_outline
 </i>
 <div class="vehicle-image-holder-progress-bar hidden">
 <i class="d-block mx-auto fa fa-spinner fa-spin  text-light"></i>
 <p class="sm-font text-std-2 text-center">
 A processar...
 </p>
 </div>
 </div>
 <div class="d-flex justify-content-center">
 <button class="hidden btn-clear-image btn mt-3 btn-outline-secondary text-std-2 sm-font">
 Remover
 </button>
 </div>
 <input type="file" class="hidden">
 </div>
 </div>
 </div>
 </div>

 </div>
 </div>

	</div>
	<?php $this->startPush("scripts"); ?>
 <script src="assets/js/main.js"></script>
 <script >

 $('.btn-edit-section').on('click', function () {

 if($(this).hasClass('not-active')){

 let $parent = $(this).parent().parent();

 $($parent).find('input, select, textarea').show();
 $($parent).find('p').hide();
 $(this).removeClass('not-active');
 $($parent).find('.btn-save-ediction').show();

 console.log("count: ", $($parent).find('.product-data-input').length);
 for(let i=0; i < $($parent).find('.product-data-input').length; i++){

 let $productInput = $($parent).find('.product-data-input').eq(i);

 let $text = $($productInput).find('p');
 let $input = $($productInput).find('input, select, textarea');
 console.log("count: ", $($text).data("index"));

 if($($input).is('input') || $($input).is('textarea'))
 $($input).val($($text).text());
 else
 $($input).val($($text).attr('data-index'));

 }

 }else{

 let $parent = $(this).parent().parent();

 $($parent).find('input, select, textarea').hide();
 $($parent).find('p').show();
 $($parent).find('.btn-save-ediction').hide();

 for(let i=0; i < $($parent).find('.product-data-input').length; i++){

 let $productInput =$($parent).find('.product-data-input').eq(i);
 let $text = $($productInput).find('p');
 let $input = $($productInput).find('input, select, textarea');

 if($input.is('input') || $input.is('textarea'))
 $($text).text($input.val());
 else
 $($text).text($input.find(`option[value='${$input.val()}']`).html());

 }

 $(this).addClass('not-active');
 }

 });


 function saveImg(imgFormData){

 const apiURL = "..//api/product/add/img"; // TODO: Set the route
 $.ajax(
 {
 url: apiURL,
 type: "POST",
 data: imgFormData,
 cache: false,
 contentType: false,
 enctype: 'multipart/form-data',
 processData: false,
 dataType: "json",
 headers: {
 "Api-Access-Token": "$2y$10$Tc4g9Lu1IZBek357GodSkuiAjUgDUxkR4YVJLhxLyIh7Swrz5SMSS",
 },
 success: function (response) {
 console.log("Create client requisition", response);
 if (response != null) {
 if (response.status === "success") {
 // TODO: Response
 console.log("Dados: ",response.data);
 showSuccess("Produto Registado com sucesso");
 $('input').val("");
 slideTo(0);
 }
 }
 },
 error: function (err) {
 console.error("ERROR sending client subscription", err.responseText);
 showError("Aconteceu algum problema");
 }
 }
 );

 }

 </script>
 <script>

 var productFormData = new FormData();

 $('#btn-register-vehicle-for-sale').on('click', function(){

 const product = {
 name: $('#product-name').val(),
 type: $('#product-type').val(),
 obs: $('#product-obs').val(),
 price: parseFloat($('#product-price').val()),
 id_category: $("select[name='product-category-select']").val(),
 description: $("#product-description").val()
 };
 productFormData.append("obj", JSON.stringify(product));

 let images = [], innerImages=[];
 $(this).html(`A registrar <i class ="fa fa-spin fa-spinner ml-2"></i>`);

 for(let i2=0; i2 < $($('#colors-images-holder .carousel-item').eq(0)).find('.vehicle-image-container').length; i2++)
 {
 let $image = $($('#colors-images-holder .carousel-item').eq(0)).find('.vehicle-image-container').eq(i2);
 console.log("File: ", $($image).find('input')[0].files[0]);
 if($($image).find('input')[0].files[0])
 //console.log("File: ", $($image).find('input')[0].files[0]);
 productFormData.append("file"+i2, $($image).find('input')[0].files[0]);

 }

 //	console.log("Images: ", product);

 const apiURL = "..//api/product/add"; // TODO: Set the route
 $.ajax(
 {
 url: apiURL,
 type: "POST",
 data: productFormData,
 cache: false,
 contentType: false,
 enctype: 'multipart/form-data',
 processData: false,
 dataType: "json",
 headers: {
 "Api-Access-Token": "$2y$10$Tc4g9Lu1IZBek357GodSkuiAjUgDUxkR4YVJLhxLyIh7Swrz5SMSS",
 },
 success: function (response) {
 console.log("Create client requisition", response);
 if (response != null) {
 if (response.status === "success") {
 // TODO: Response
 console.log("Dados: ",response.data);
 showSuccess("Produto Registado com sucesso");
 $('input').val("");
 slideTo(0);
 }
 }
 },
 error: function (err) {
 console.error("ERROR sending client subscription", err.responseText);
 showError("Aconteceu algum problema");
 }
 }
 );


 });


 const slideTo = (pos)=>{
 $(`[data-target='#vehicle-registration-slide'][data-slide-to=${pos}]`).click();
 }

 $('.btn-next-slide').on('click', function(){

 let $parent = $(this).parent().parent();

 let hasInputs = $($parent).find('input, textarea, select').length > 0 ? true : false;

 if(hasInputs && !checkFormInputs($parent))
 {
 showError("Por favor preencha todos os campos");
 return;
 }

 if($(this).hasClass('is-odd'))
 if($('.selected-colors-holder').find('div').length == 0)
 {
 showError("Por favor adicione pelo menos uma imagem do produto para terminar o registro");
 return;
 }

 let btnPos = ($('.btn-next-slide').index(this) + 1) > ($('.vehicle-registration-step').length-1) ? 0 : $('.btn-next-slide').index(this)+1;

 $('.vehicle-registration-step').removeClass("active");
 $('.vehicle-registration-step').eq(btnPos).addClass('active');
 console.log($(this).attr('data-slide-to'));
 slideTo($(this).attr('data-slide-to'));

 });

 $('.btn-prev-slide-2').on('click', function(){

 let btnPos = ($('.btn-prev-slide-2').index(this) - 1) == 0 ? 1 : $('.btn-prev-slide-2').index(this)-1;
 $('.vehicle-registration-step').removeClass("active");
 //console.log(btnPos);
 $('.vehicle-registration-step').eq(btnPos < 0 ? 0 : btnPos).addClass('active');

 //slideTo($(this).attr('data-slide-to'));


 });


 </script>
 <script>

 const colorImagesTmpl = (index)=>`
 <div class="carousel-item ${index == 0 ? 'active' : ''}">
 <div class="row pt-4">
 <div class="col-12 col-lg-4 vehicle-image-container">
 <div class="vehicle-image-holder align-items-center justify-content-center rounded" >

 <i class="material-icons big-font-1">
 add_circle_outline
 </i>
 <div class="vehicle-image-holder-progress-bar hidden">
 <i class="d-block mx-auto fa fa-spinner fa-spin  text-light"></i>
 <p class="sm-font text-std-2 text-center">
 A processar...
 </p>
 </div>
 </div>
 <div class="d-flex justify-content-center">
 <button class="hidden btn-clear-image btn mt-3 btn-outline-secondary text-std-2 sm-font">
 Limpar
 </button>
 </div>
 <input type="file" class="hidden">
 </div>

 <div class="col-12 col-lg-4 vehicle-image-container">
 <div class="vehicle-image-holder align-items-center justify-content-center rounded" >
 <i class="material-icons big-font-1">
 add_circle_outline
 </i>
 <div class="vehicle-image-holder-progress-bar hidden">
 <i class="d-block mx-auto fa fa-spinner fa-spin  text-light"></i>
 <p class="sm-font text-std-2 text-center">
 A processar...
 </p>
 </div>
 </div>
 <div class="d-flex justify-content-center">
 <button class="hidden btn-clear-image btn mt-3 btn-outline-secondary text-std-2 sm-font">
 Limpar
 </button>
 </div>
 <input type="file" class="hidden">
 </div>

 <div class="col-12 col-lg-4 vehicle-image-container">
 <div class="vehicle-image-holder align-items-center justify-content-center rounded" >
 <i class="material-icons big-font-1">
 add_circle_outline
 </i>
 <div class="vehicle-image-holder-progress-bar hidden">
 <i class="d-block mx-auto fa fa-spinner fa-spin  text-light"></i>
 <p class="sm-font text-std-2 text-center">
 A processar...
 </p>
 </div>
 </div>
 <div class="d-flex justify-content-center">
 <button class="hidden btn-clear-image btn mt-3 btn-outline-secondary text-std-2 sm-font">
 Limpar
 </button>
 </div>
 <input type="file" class="hidden">
 </div>
 </div>
 </div>
 `;

 $('.btn-color').on('change', function(e){
 let color = e.target.value;
 console.log("color: ", color);
 let isInLoop = false;
 Array($('.selected-color')).forEach($color => {
 if($($color).css("background-color") == color)
 isInLoop = true;
 });

 if($('.selected-color').length == 0)
 $('.border-color').css("background", ""+color);

 if(!isInLoop)
 {

 $('#colors-images-holder').append(colorImagesTmpl($('.selected-color').length));

 $('.selected-colors-holder').append(`
 <div data-target="#color-images-slide" data-slide-to="${$('.selected-color').length}" class="selected-color on-hover ${$('.selected-color').length == 0 ? 'active' : ''} mr-2 position-relative" style="background: ${color}">
 <i class="fa fa-check hidden mt-1 ml-2
 text-light"></i>
 <div class="btn-close-color">
 <i class="fa fa-close sm-font"></i>
 </div>
 </div>
 `);

 }
 });

 $(document).on('click', '.selected-color', function(){

 $('.selected-color').removeClass('active');
 $(this).addClass('active');
 $('.border-color').css("background-color", $(this).css("background-color"));

 });

 $(document).on('mouseenter', '.selected-color.active', function(){

 $(this).find('.btn-close-color').show('fast');

 });

 $(document).on('click', '.btn-close-color', function(e){
 e.stopPropagation();
 let $parent = $(this).parent();
 let pos = $($parent).attr('data-slide-to');

 $('#colors-images-holder').find('.carousel-item').
 eq(pos).remove();
 $($parent).remove();

 //console.log("l: ", $($('.selected-color').eq(0)).css("background-color"));
 $($('.selected-color').eq(0)).addClass('active');
 $('.border-color').css("background-color", $($('.selected-color').eq(0)).css("background-color"));
 $('#colors-images-holder').find('.carousel-item').eq(0).addClass("active");



 });

 $(document).on('mouseleave', '.selected-color.active', function(){

 $(this).find('.btn-close-color').hide('fast');

 });

 $(document).on('click','.btn-clear-image', function () {

 let $vehicleImage = $(this).parent().parent().find('.vehicle-image-holder');
 $($vehicleImage).removeClass('clear');
 $($vehicleImage).css("background", "#fff");
 $($vehicleImage).find('i').eq(0).show();

 });

 $(document).on('click', '.vehicle-image-holder', function(){

 let $parentInput = $(this).parent().find('input');

 $($parentInput).click();

 });

 $(document).on('mouseenter', '.vehicle-image-container', function(){

 //let background = $(this).find('.vehicle-image-holder').css("background-color");
 //console.log("back: ", background);
 //if( background !== "#fff" || background !== " #4C50C5")
 $(this).find('button').slideDown('fast');

 });

 $(document).on('mouseleave', '.vehicle-image-container', function(){

 $(this).find('button').slideUp('fast');

 });

 $(document).on('mouseenter', '.vehicle-image-holder', function(){

 if($(this).css("color") !== "#fff")
 $(this).find('i').eq(0).show();

 });

 function readURLPhoto2(input) {
 if (input.files && input.files[0]) {
 var reader = new FileReader();

 reader.onload = function (e) {
 e.name = "new";
 let $vehicleImage = $(input).parent().find('.vehicle-image-holder');

 if($($vehicleImage).hasClass('clear')){
 let imgFormDataE = new FormData();
 let attr = $($vehicleImage).attr("data-id");
 //console.log("Attr: ", attr);
 if(typeof attr !== typeof undefined && attr !== false){

 console.log("Img: ", $($vehicleImage).attr("data-id"))
 imgFormDataE.append("id_product", $('#product-id').attr('data-id'));
 imgFormDataE.append("id_attashment", $('#product-id').attr('data-id'));
 imgFormDataE.append("file0", input);

 }else{

 console.log("Opcao 3");
 imgFormDataE.append("id_product", $('#product-id').attr('data-id'));
 imgFormDataE.append("file0", input);

 }
 //saveImg();
 }

 $($vehicleImage).css('background', `url('${e.target.result}') 100% 100%`);;
 $($vehicleImage).css('background-size', `cover`);
 $($vehicleImage).find('.vehicle-image-holder-progress-bar').hide();
 $($vehicleImage).addClass('clear');



 }

 reader.readAsDataURL(input.files[0]);
 }

 }
 $(document).on('change',"input", function () {

 let $vehicleImage = $(this).parent().find('.vehicle-image-holder');

 $($vehicleImage).find('.vehicle-image-holder-progress-bar').show();
 $($vehicleImage).find('i').eq(0).hide();
 readURLPhoto2(this);
 });



 $("#file-upload").change(function () {
 readURLPhoto(this);
 });


 $('#club-steps-holder div').on('click', function () {
 $('#club-steps-holder div').removeClass('active');
 $(this).addClass('active');

 });

 </script>
	<?php $this->stopPush(); ?>

<?php $this->stopSection(); ?>
<?php  $this->startComponent('components.solicitateBudget'); ?>
<?php  echo $this->renderComponent(); ?>
<?php if (@$_shouldextend[1]) { echo $this->runChild('admin.layouts.adminApp', ["title" => "Adicionar Produto"]); } ?>