@extends('admin.layouts.app')

@section('content')

	<div class="row">
	    <div class="col-12">
	        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
	            <h4 class="mb-sm-0">Editar Slider</h4>
	            <div class="page-title-right">
	                <a href="{{ route('sliders.index') }}" class="btn btn-primary">Volver</a>
	            </div>
	        </div>
	    </div>
	</div>

			<form action="" method="post" id="sliderForm" name="sliderForm" enctype="multipart/form-data">
				<div class="card">
					<div class="card-body">
						<div class="row">
							<div class="col-md-6">
								<div class="mb-3">
									<label for="name">Nombre</label>
									<input type="text" name="name" id="name" class="form-control" placeholder="Nombre" value="{{ $slider->name }}">
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="slug">Slug</label>
									<input type="text" readonly name="slug" id="slug" class="form-control" placeholder="Slug" value="{{ $slider->slug }}">
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="name">Titulo</label>
									<input type="text" name="title" id="title" class="form-control" placeholder="Titulo" value="{{ $slider->title }}">
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="name">Descripcion</label>
									<input type="text" name="description" id="description" class="form-control" placeholder="Descripcion" value="{{ $slider->description }}">
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<input type="hidden" name="image_id" id="image_id" value="">
									<label for="image">Imagen</label>
									<div id="image" class="dropzone dz-clickable">
									    <div class="dz-message needsclick">
									        <br>Suelta los archivos aqui o haz clic para subirlos.<br><br>
									    </div>
									</div>
								</div>

								<div>
									@if(!empty($slider->image))
										<img with="450" height="600" src="{{ asset('uploads/slider/thumb/'.$slider->image) }}" alt="">
									@endif
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="name">Orden</label>
									<input type="text" name="order" id="order" class="form-control" placeholder="Orden" value="{{ $slider->order }}">
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="name">Texto del Boton</label>
									<input type="text" name="button_text" id="button_text" class="form-control" placeholder="Texto del Boton" value="{{ $slider->button_text }}">
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="name">Link del Boton</label>
									<input type="text" name="button_link" id="button_link" class="form-control" placeholder="Link del Boton" value="{{ $slider->button_link }}">
									<p></p>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="field_status">Estado</label>
									<select name="status" id="field_status" class="form-select">
										<option {{ ($slider->status == 1) ? 'selected':''}}  value = "1">Activo</option>
										<option {{ ($slider->status == 0) ? 'selected':''}}  value = "0">Inactivo</option>
									</select>
								</div>
							</div>

							<div class="col-md-6">
								<div class="mb-3">
									<label for="showHome">Mostrar en el Inicio</label>
									<select name="showHome" id="showHome" class="form-select">
										<option {{ ($slider->showHome == 'Yes') ? 'selected':''}} value = "Yes">Si</option>
										<option {{ ($slider->showHome == 'No')  ? 'selected':''}} value = "No">No</option>
									</select>
									<p></p>
								</div>
							</div>

						</div>
					</div>

					<div class="col-12">
					    <h4 class="text-primary mt-4">Configuracion de SEO</h4>
					    <hr>
					</div>

					<!-- Campos SEO -->
					<div class="card">
					    <div class="card-header">
					        <h3 class="card-title">SEO (Optimizacion para motores de busqueda)</h3>
					    </div>
					    <div class="card-body">
					        <div class="row">
					            <!-- Meta T�tulo -->
					            <div class="col-md-6">
					                <div class="mb-3">
					                    <label for="meta_title">Meta Titulo</label>
					                    <input type="text" name="meta_title" id="meta_title" class="form-control" placeholder="Ejemplo: Compra los mejores productos en nuestra tienda" value="{{ old('meta_title', $slider->meta_title) }}">
					                    <small class="form-text text-muted">
					                        Este titulo aparecera en los resultados de busqueda. Maximo 255 caracteres.
					                    </small>
					                </div>
					            </div>

					            <!-- Meta Palabras Clave -->
					            <div class="col-md-6">
					                <div class="mb-3">
					                    <label for="meta_keywords">Meta Palabras Clave</label>
					                    <input type="text" name="meta_keywords" id="meta_keywords" class="form-control" placeholder="Ejemplo: tienda online, productos, calidad, envio rapido" value="{{ old('meta_keywords', $slider->meta_keywords) }}">
					                    <small class="form-text text-muted">
					                        Palabras clave separadas por comas, que describen el contenido de la pagina.
					                    </small>
					                </div>
					            </div>
					        </div>

					        <div class="row">
					            <!-- Meta Descripci�n -->
					            <div class="col-md-12">
					                <div class="mb-3">
					                    <label for="meta_description">Meta Descripcion</label>
					                    <textarea name="meta_description" id="meta_description" class="form-control" rows="3" placeholder="Ejemplo: Encuentra una amplia seleccion de productos de alta calidad en nuestra tienda online. Envio rapido y precios competitivos.">{{ old('meta_description', $slider->meta_description) }}</textarea>
					                    <small class="form-text text-muted">
					                        Esta descripcion aparecera en los resultados de busqueda. Debe ser una descripcion breve y atractiva del contenido. Maximo 160 caracteres recomendados.
					                    </small>
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
					<!-- Fin de Campos SEO -->


				</div>

				<div class="pb-5 pt-3">
					<button type = "submit" class="btn btn-primary">Actualizar</button>
					<a href="{{ route('sliders.index') }}" class="btn btn-outline-dark ms-3">Cancelar</a>
				</div>

			</form>


		<!-- /.card -->
	
@endsection


@section('customJs')

	<script>
		$("#sliderForm").submit(function(event){
			event.preventDefault();
			var element = $(this);
			$("button[type=submit]").prop('disabled', true)
			$.ajax({
				url: '{{ route("sliders.update",$slider->id) }}',
				type: 'put',
				data: element.serializeArray(),
				dataType: 'json',
				success: function(response){

          $("button[type=submit]").prop('disabled', false)

					if (response["status"] == true) {

						window.location.href = "{{ route('sliders.index')}}";

						$("#name").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						$("#slug").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");

						$("#title").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						$("#description").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						$("#order").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						$("#button_text").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						$("#button_link").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");

					} else {

						if (response["notFound"] == true) {

							window.location.href = "{{ route('sliders.index')}}";
						}

						var errors = response['errors'];

						if(errors["name"]) {
							$("#name").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['name']);
						} else {
							$("#name").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}

						if(errors["slug"]){
							$("#slug").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['slug']);
						} else {
							$("#slug").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}


						if(errors["title"]){
							$("#title").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['title']);
						} else {
							$("#title").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}
						if(errors["description"]){
							$("#description").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['description']);
						} else {
							$("#description").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}
						if(errors["order"]){
							$("#order").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['order']);
						} else {
							$("#order").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}
						if(errors["button_text"]){
							$("#button_text").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['button_text']);
						} else {
							$("#button_text").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}
						if(errors["button_link"]){
							$("#button_link").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['button_link']);
						} else {
							$("#button_link").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}


					}

				}, error: function(jqXHR, exception){
					console.log("Something Went Wrong");
				}
			});
		});

		$("#name").change(function(){
			element = $(this);
			$("button[type=submit]").prop('disabled', true)
			$.ajax({
				url: '{{ route("getSlug") }}',
				type: 'get',
				data: {title: element.val()},
				dataType: 'json',
				success: function(response){
					$("button[type=submit]").prop('disabled', false)
					if(response["status"] == true) {
						$("#slug").val(response["slug"]);
					}
				}
			});
		});


		Dropzone.autoDiscover = false;
			const dropzone = $("#image").dropzone({
			    init: function() {
			        this.on('addedfile', function(file) {
			            if (this.files.length > 1) {
			                this.removeFile(this.files[0]);
			            }
			        });
			    },
			    url:  "{{ route('temp-images.create') }}",
			    maxFiles: 1,
			    paramName: 'image',
			    addRemoveLinks: true,
			    acceptedFiles: "image/jpeg,image/png,image/gif",
			    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
			    success: function(file, response){
			        $("#image_id").val(response.image_id);
			        //console.log(response)
			    }
		});

	</script>

@endsection