<?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="d-flex pb-3 justify-content-center align-items-center">
 <div data-slide-to="1" class="vehicle-registration-step active hover-shadow-0 sm-font rounded-x bg-white py-2 px-3 text-std-2 text-light-x">
 Dados do Produto
 </div>

 <div data-slide-to="1" class="vehicle-registration-step hover-shadow-0 sm-font rounded-x bg-white py-2 px-3 text-std-2 text-light-x ml-2">
 Imagens
 </div>

 <div data-slide-to="1" class="vehicle-registration-step hover-shadow-0 sm-font rounded-x bg-white py-2 px-3 text-std-2 text-light-x ml-2">
 Concluir
 </div>

	</div>
	<div id="vehicle-registration-slide" class="carousel slide mb-0 mt-4" data-interval="false" data-ride="carousel">

 <!-- Indicators -->
 <ul class="carousel-indicators hidden">
 <li data-target="#vehicle-registration-slide" data-slide-to="0"></li>
 <li data-target="#vehicle-registration-slide" data-slide-to="1"></li>
 <li data-target="#vehicle-registration-slide" data-slide-to="2"></li>
 </ul>
 <!-- The slideshow -->
 <div class="carousel-inner">
 <div class="carousel-item active" style="height: 75vh;">
 <div class="h-100 row justify-content-center align-items-top">
 <div class="col-12 col-lg-4">
 <div class="bg-white container-fluid py-4">

 <h5 class="text-std-2 text-uppercase pt-3">
 Registro de produto
 </h5>
 <p class="text-std-2 text-light-x">Informe os dados do produto</p>
 <div class="form-group pt-4">
 <label class="text-std-2 sm-font font-weight-bold">Nome</label>
 <input type="text" placeholder="Nome" class="form-control text-std-2 sm-font" id="product-name" />
 </div>

 <div class="form-group">
 <label class="text-std-2 sm-font font-weight-bold">Tipo</label>
 <input type="text" placeholder="Tipo" class="form-control text-std-2 sm-font" id="product-type" />
 </div>
 <div class="form-group">
 <label class="text-std-2 sm-font font-weight-bold">Categoria</label>
 <select name="product-category-select" class="custom-select sm-font text-std-2">
 <?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="form-group">
 <label class="text-std-2 sm-font font-weight-bold">Preço</label>
 <input type="number" placeholder="Preço" class="form-control text-std-2 sm-font" id="product-price" />
 </div>
 <div  class="d-flex justify-content-end mt-5">
 <div data-slide-to="1" class="bg-orange btn-next-slide btn text-light text-std-2">
 Prosseguir
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

 <div class="carousel-item" style="height: 75vh;">
 <div class="row justify-content-center">
 <div class="col-12 col-lg-6">
 <div class="bg-white container-fluid py-4">
 <div class="w-100 d-flex justify-content-left">
 <a href="#vehicle-registration-slide" data-slide="prev"
    class="btn-prev-slide-2 d-flex hover-shadow-0 bg-light align-items-top justify-content-center btn text-std-2 text-dark rounded-circle" style="width: 30px; height: 30px;">
 <i
 class="material-icons float-right" style="margin-top: -4px;">
 chevron_left
 </i></a>
 </div>
 <h5 class="text-std-2 text-uppercase pt-3">
 Descreva o produto
 </h5>
 <p class="text-std-2 text-light-x">De uma explicação detalhada sobre o produto</p>
 <div class="form-group">
 <textarea class="form-control" rows="7" id="product-description"></textarea>
 </div>
 <div class="form-group">
 <label class="text-std-2 sm-font font-weight-bold">Observação</label>
 <input type="text" placeholder="Observação" class="form-control text-std-2 sm-font" id="product-obs" />
 </div>
 <div class="d-flex justify-content-end mt-5">
 <div data-slide-to="2" class="bg-orange btn-next-slide btn text-light text-std-2">
 Prosseguir
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

 <div class="carousel-item" style="height: 75vh;">
 <div class="h-100 row justify-content-center align-items-top">
 <div class="col-12 col-lg-6">
 <div class="bg-white position-relative container-fluid py-4">
 <div class="w-100 d-flex justify-content-left">
 <a href="#vehicle-registration-slide" data-slide="prev"
    class="btn-prev-slide-2 d-flex hover-shadow-0 bg-light align-items-top justify-content-center btn text-std-2 text-dark rounded-circle" style="width: 30px; height: 30px;">
 <i
 class="material-icons float-right" style="margin-top: -4px;">
 chevron_left
 </i></a>
 </div>
 <div class="d-flex align-items-center justify-content-between">
 <div class="">
 <h5 class="text-std-2 text-uppercase pt-3">
 Selecione as imagens do produto
 </h5>
 <p class="text-std-2 text-light-x mb-0">Carregue pelo menos uma imagem do produto</p>
 </div>


 </div>

 <div  class="d-flex align-items-center justify-content-between">
 <div class="d-flex align-items-center selected-colors-holder">

 </div>

 <div id="btn-register-vehicle-for-sale"  class="bg-orange btn text-light text-std-2">
 Terminar registro
 </div>
 </div>
 <div class="py-1 border-color position-absolute on-bottom-0 on-left-0 w-100">

 </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 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>
 </div>

 </div>
 </div>
 </div>
 </div>



 </div>

	</div>

	<?php $this->startPush("scripts"); ?>
 <script src="assets/js/main.js"></script>
 <script src="views/admin/assets/js/forwardTechnician.js"></script>
 <script src="views/admin/assets/js/contract.js"></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');
 $($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"]); } ?>