@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="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="{{$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">{{$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="{{$product->id_category}}">{{$product->category_name}}</p>
					<select name="categories-select" data-name="id_category" class="custom-select is-odd mb-3 hidden">
						@foreach($categories as $category)
							<option {{$loop->index == 1 ? 'selected' : ''}}
							value="{{$category->id_category}}"
							>{{$category->category_name}}</option>
						@endforeach
					</select>
				</div>

				<div class="product-data-input">
					<h6 class="sm-font">Tipo</h6>
					<p class="text-std-2 text-palid-2">{{$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">{{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">{{$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"
								@if(isset($product->attashments[0]))
                                data-id="{{$product->attashments[0]->id_attashment}}"
									style="background: url('assets/img/uploads/{{$product->attashments[0]->url}}') 100% 100%;
										background-size: cover;
										"
							    @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 {{isset($product->attashments[1]) ? 'clear' : ''}} justify-content-center rounded"
									 @if(isset($product->attashments[1]))
                                             data-id="{{$product->attashments[1]->id_attashment}}"
									 style="background: url('assets/img/uploads/{{$product->attashments[1]->url}}') 100% 100%;
											 background-size: cover;
											 "
										@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 {{isset($product->attashments[2]) ? 'clear' : ''}} justify-content-center rounded"
									 @if(isset($product->attashments[2]))
                                     data-id="{{$product->attashments[2]->id_attashment}}"
									 style="background: url('assets/img/uploads/{{$product->attashments[2]->url}}') 100% 100%;
											 background-size: cover;
											 "
										@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>
	@push("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>
	@endpush

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