tengo una aplicación de encuestas tipo facebook, en donde un usuario puede crear las preguntas y las posibles respuestas.... en los campos de respuesta tengo un input de tipo text obviamente... A las posibles respuestas tiene la opción de agregarle una imagen para referencia de la respuesta si así lo desea...
<form action="{{url('encuesta')}}" class="form-horizontal" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="card-body">
<h4 class="card-title">Completa los datos para crear tu encuesta <b>{{$tipo_encuesta}}</b></h4>
<div class="form-group row">
<input type="hidden" value="{{$tipo_encuesta}}" name="tipo_encuesta">
<label for="fname" class="col-sm-3 text-right control-label col-form-label">Titulo *</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="titulo" id="titulo" placeholder="Agrega el titulo (requerido)" required>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-3 text-right control-label col-form-label">Fecha Inicio *</label>
<div class="col-sm-9">
<input type="datetime-local" class="form-control" name="fecha_inicio" data-select="datepicker">
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-3 text-right control-label col-form-label">Fecha Finalizacion *</label>
<div class="col-sm-9">
<input type="datetime-local" class="form-control" name="fecha_finalizacion" data-select="datepicker">
<div style="width: 250px; margin: 50px auto;">
<div id="picker"> </div>
<input type="hidden" id="result" value="" />
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-3 text-right control-label col-form-label">Portada</label>
<div class="col-sm-9">
<input type="file" class="form-control" name="foto" accept="image/*" onchange="loadFile(event)">
<img id="output" width="50" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<h4>Apartir de abajo escribe las preguntas que deseas que los usuarios respondan:</h4>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-3 text-right control-label col-form-label">Escribe una pregunta</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="subtitulo" id="subtitulo" placeholder="Escribe una pregunta">
</div>
</div>
<div class="form-group row" v-for="(item, index) in lista">
<label for="" class="col-sm-3 text-right control-label col-form-label">
Opción @{{ index + 1 }}
</label>
<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<input :id="index + 1" type="text" class="form-control" name="opcion[]" placeholder="">
</div>
<div class="col-md-6">
<label :for="'input'+index + 1">
<img width="50" src="{{asset('imagenes/addImage.png')}}" alt="">
</label>
<input type="file" name="opcionesImg[]" :id="'input'+index + 1" style="display: none;">
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<button type="button" class="btn btn-info float-right" v-on:click="agregarInput">
<i class="fa fa-plus-circle"></i>
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-warning" v-on:click="quitarInput">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
</div>
<div class="border-top">
<div class="card-body">
<button type="submit" class="btn btn-success">Guardar</button>
</div>
</div>
</form>
Como se puede ver el formulario es dinámico.. la cantidad de campos que se puede agregar es 20, para eso uso un poco de vuejs. El problema aquí es que las imágenes deben ser opcionales... y al ser opcionales un usuario podría crear 5 posibles respuestas y solo agregar 3 imágenes. En mi controlador:
public function store(Request $request)
{
//
$pregunta = new Pregunta();
$pregunta->titulo = $request->titulo;
$pregunta->subtitulo = $request->subtitulo;
$pregunta->fecha_inicio = $request->fecha_inicio;
$pregunta->fecha_finalizacion = $request->fecha_finalizacion;
$pregunta->estado = '1';
if(Input::hasFile('foto')) {
$file=Input::file('foto');
Image::make($request->file('foto'))
->resize(244, 245)
->save(public_path().'/imagenes/preguntas/' . $file->getClientOriginalName());
$pregunta->foto=$file->getClientOriginalName();
}
$pregunta->user_id = Auth::user()->id;
$pregunta->opciones = serialize($request->opcion);
var_dump($request->opcionesImg); die;
if ($request->opcionesImg) {
if(Input::hasFile('opcionesImg')) {
foreach($request->file('opcionesImg') as $image)
{
Image::make($image)
->resize(400, 150)
->save(public_path().'/imagenes/preguntas/' . $image->getClientOriginalName());
$name=$image->getClientOriginalName();
$data[] = $name;
}
}
}
$pregunta->opcionesImg=json_encode($data);
$pregunta->tipo_encuesta = $request->tipo_encuesta;
if ($pregunta->save()) {
var_dump("encuesta agregada");
}
}
En mi controlador como se puede apreciar estoy haciendo uso de las imágenes y de las respuesta totalmente aparte y como dije mas arriba un usuario podria crear 5 respuestas pero solo 3 imagenes... Esto es un problema porque el sistema se basa en colocar la imagen con la respuesta por el orden y la cantidad de imágenes que hay... Por ejemplo si yo creo una encuesta de quien es el mejor jugador del mundo y las opciones serian
`imagen_messi` `Messi`
`imagen_neymar` `Neymar`
`imagen_cavanni` `Cavanni`
`imagen_suarez` `Suarez`
`imagen_ronaldo` `CR7`
en el caso de que el usuario agregue las 5 imágenes y 5 posibles respuestas no habría problema.. Pero si el usuario crea 5 respuestas pero solo agrega 3 imágenes quedaría así y me saltaría un error al querer mostrar
`imagen_messi` `Messi`
`imagen_suarez` `Neymar`
`imagen_ronaldo` `Cavanni`
`Suarez`
`CR7`
Intente agregando una imagen por defecto a mi input file pero según leí y pregunte no se puede... Entonces mi pregunta es... Como puedo asociar mis preguntas con mis imágenes para no tener este problema?