@extends('layoutAdmin.layoutAdmin')

@section('style')
<link rel="stylesheet" href="{{asset('src/plugins/dropzone/src/dropzone.css')}}">
@endsection

@section('container')		
				<div class="min-height-200px">
					<div class="page-header">
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<div class="title">
									<h4>Subir Imagen del Vehiculo</h4>
								</div>
							</div>
							<div class="col-md-6 col-sm-12 text-right">
							@can('vehicles-list')
							<a
								href="{{ route('vehicles.index') }}"
								class="btn btn-primary btn-sm scroll-click"
								role="button"
								>{{__('Tabla de Vehiculos')}}</a
							>
							@endcan
							@can('files-create')
							<a
								href="{{ route('files.show', $vehicle->id) }}"
                                class="btn btn-secondary btn-sm scroll-click"
                                role="button"
                                >{{__('Ver galeria de imágenes')}}</a
                            >      
							@endcan
							</div>
						</div>
					</div>

					<div class="pd-20 card-box mb-30">
						<div class="clearfix mb-20">
						<p class="alert alert-warning">
							Nota: El tamaño máximo permitido para las imágenes es de 3 MB. Por favor, asegúrate de que el archivo no exceda este límite.
						</p>
						</div>
						<form 
							action="{{ route('files.store') }}"
							method="POST"
							class="dropzone"
							id="my-dropzone">
							@csrf
							<input type="hidden" name="vehicle_id" value="{{ $vehicle->id }}">
						</form>
					</div>
				</div>			
@endsection

@section('script')
<script src="{{asset('src/plugins/dropzone/src/dropzone.js')}}"></script>
<script>
	Dropzone.autoDiscover = false;
	
	var myDropzone = new Dropzone("#my-dropzone", {
	  headers: {
		'X-CSRF-TOKEN': "{{ csrf_token() }}"
	  },
	  paramName: 'imagen', 
	  acceptedFiles: 'image/*', 
	  maxFilesize: 3, 
	  dictDefaultMessage: "Arrastra y suelta una imagen aquí o haz clic para seleccionar una", 
	  // Asegúrate de enviar los campos adicionales con cada solicitud
	  init: function() {
		this.on("sending", function(file, xhr, formData) {
		  formData.append("vehicle_id", document.querySelector('input[name="vehicle_id"]').value);
		});
	  }
	});
</script>
  
	
@endsection