@extends('admin.layouts.adminApp', ["title" => "Adicionar Produto"])

@section('content')
	<div class="d-flex pt-5 container-fluid justify-content-start">
		<a href="{{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">
									@foreach($categories as $category)
										<option {{$loop->index == 1 ? 'selected' : ''}} value="{{$category->id_category}}" >{{$category->category_name}}</option>
									@endforeach
								</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>

	@push("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>
	@endpush

@endsection
@component('components.solicitateBudget')
@endcomponent