@extends('layouts.vendor')
@section('content')

<link href="https://cdn.jsdelivr.net/gh/jamesssooi/Croppr.js@2.3.0/dist/croppr.min.css" rel="stylesheet"/>

<link href="{{asset('assets/vendor/css/product.css')}}" rel="stylesheet"/>
<link href="{{asset('assets/admin/css/jquery.Jcrop.css')}}" rel="stylesheet"/>
<link href="{{asset('assets/admin/css/Jcrop-style.css')}}" rel="stylesheet"/>

						<div class="content-area">
							<div class="mr-breadcrumb">
								<div class="row">
									<div class="col-lg-12">
											<h4 class="heading">{{ $langg->lang454 }}</h4>

										<ul class="links">
											<li>
												<a href="{{ route('vendor-dashboard') }}">{{ $langg->lang441 }} </a>
											</li>
											<li>
												<a href="javascript:;">{{ $langg->lang452 }} </a>
											</li>
											<li>
												<a href="{{ route('vendor-banner') }}">{{ $langg->lang454 }}</a>
											</li>
										</ul>



									</div>
								</div>
							</div>
							<div class="add-product-content">
								<div class="row">
									<div class="col-lg-12">
										<div class="product-description">
											<div class="body-area">

				                        <div class="gocover" style="background: url({{asset('assets/images/'.$gs->admin_loader)}}) no-repeat scroll center center rgba(45, 45, 45, 0.5);"></div>
											<form id="geniusform" action="{{ route('vendor-profile-update') }}" method="POST" enctype="multipart/form-data">
												{{csrf_field()}}


                      						 @include('includes.vendor.form-both')  

						                      <div class="row">
						                          <div class="col-lg-4">
						                            <div class="left-area">
						                                <h4 class="heading">{{ $langg->lang520 }} *</h4>
						                            </div>
						                          </div>
						                          <div class="col-lg-7">
						                            <div class="img-upload full-width-img">
						                                <div id="image-preview" class="img-preview" style="background: url({{ $data->shop_image ? asset('assets/images/vendorbanner/'.$data->shop_image):asset('assets/images/noimage.png') }});">
						                                    <label for="image-upload" class="img-label" id="image-label"><i class="icofont-upload-alt"></i>{{ $langg->lang522 }}</label>
						                                    <input type="file" id="shop_image" name="shop_image" class="img-upload" id="image-upload">
						                                  </div>
						                                  <p class="text">{{ $langg->lang521 }} ' {{ $langg->lang1026 }}</p> 
						                            </div>
						                       </div>
						                   </div>
						                        <div class="row">
						                        	<div class="col-lg-7">
        													<canvas id="preview"></canvas>
        													<div style="display:none;">
        													<textarea id="base64" name="base64"></textarea>
        														</div>
        											</div>
        										</div>
        										
        										<br><br><br><br><br>
						                        



						                        <div class="row">
						                          <div class="col-lg-4">
						                            <div class="left-area">
						                              
						                            </div>
						                          </div>
						                          <div class="col-lg-7">
						                            <button class="addProductSubmit-btn" type="submit">{{ $langg->lang523 }}</button>
						                          </div>
						                        </div>

											</form>


											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
<script src="https://cdn.jsdelivr.net/gh/jamesssooi/Croppr.js@2.3.0/dist/croppr.min.js"></script>
<script>
         document.addEventListener('DOMContentLoaded', () => {

             // Input File
             const inputImage = document.querySelector('#shop_image');
             // Nodo donde estará el editor
             const editor = document.querySelector('#image-preview');
             // El canvas donde se mostrará la previa
             const miCanvas = document.querySelector('#preview');
             // Contexto del canvas
             const contexto = miCanvas.getContext('2d');
             // Ruta de la imagen seleccionada
             let urlImage = undefined;
             // Evento disparado cuando se adjunte una imagen
             inputImage.addEventListener('change', abrirEditor, false);

             /**
              * Método que abre el editor con la imagen seleccionada
              */
             function abrirEditor(e) {
                 // Obtiene la imagen
                 urlImage = URL.createObjectURL(e.target.files[0]);

                 // Borra editor en caso que existiera una imagen previa
                 editor.innerHTML = '';
                 let cropprImg = document.createElement('img');
                 cropprImg.setAttribute('id', 'croppr');
                 editor.appendChild(cropprImg);

                 // Limpia la previa en caso que existiera algún elemento previo
                 contexto.clearRect(0, 0, miCanvas.width, miCanvas.height);

                 // Envia la imagen al editor para su recorte
                 document.querySelector('#croppr').setAttribute('src', urlImage);

                 // Crea el editor
                 new Croppr('#croppr', {
                     aspectRatio: 220/1920,
                     startSize: [22, 192],
                     onCropEnd: recortarImagen
                 })
             }

             /**
              * Método que recorta la imagen con las coordenadas proporcionadas con croppr.js
              */
             function recortarImagen(data) {
                 // Variables
                 const inicioX = data.x;
                 const inicioY = data.y;
                 const nuevoAncho = data.width;
                 const nuevaAltura = data.height;
                 const zoom = 1;
                 let imagenEn64 = '';
                 // La imprimo
                 miCanvas.width = nuevoAncho;
                 miCanvas.height = nuevaAltura;
                 // La declaro
                 let miNuevaImagenTemp = new Image();
                 // Cuando la imagen se carge se procederá al recorte
                 miNuevaImagenTemp.onload = function() {
                     // Se recorta
                     contexto.drawImage(miNuevaImagenTemp, inicioX, inicioY, nuevoAncho * zoom, nuevaAltura * zoom, 0, 0, nuevoAncho, nuevaAltura);
                     // Se transforma a base64
                     imagenEn64 = miCanvas.toDataURL("image/jpeg");
                     // Mostramos el código generado
                     document.querySelector('#base64').textContent = imagenEn64;
                 }
                 // Proporciona la imagen cruda, sin editarla por ahora
                 miNuevaImagenTemp.src = urlImage;
                 console.log(miNuevaImagenTemp.src)
             }
         });
        </script>
       



@endsection