se eliminan los horario-container clickeando en la x

app/Http/Controllers/EventoController.php

@@ -75,7 +75,7 @@ class EventoController extends Controller
      */
     public function update(Request $request, Evento $evento)
     {
-        //
+        dd($request);
     }
 
     /**

public/css/edit.css

@@ -22,4 +22,27 @@ input.formulario.dia  {
 
 .horario-container {
     margin-bottom: 30px;
+    display: -webkit-inline-box;
+    text-align: center;
+    display: flex;
+}
+
+.columna1 {
+    width: -webkit-fill-available;
+}
+
+.columna2 {
+    width: 20%;
+    position: relative;
+}
+
+button.cerrar {
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    right: 0%;
 }

public/js/edit.js

@@ -9,18 +9,21 @@ function copiarEnlace() {
     document.execCommand("copy");
     alert("ok");
 }
-const HORARIO_CONTAINER = '<div class="horario-container">\n' +
-    '                                    <input required name="horario[]dia" type="text" class="formulario dia">\n' +
-    '                                    <div class="horas">\n' +
-    '                                        <input required name="horario[]llegada" type="time" class="formulario hora">\n' +
-    '                                        <input required name="horario[]salida" type="time" class="formulario hora">\n' +
-    '                                    </div>\n' +
-    '                                </div>';
-function agregarHorarioContainer() {
-    $('#horarios').append(HORARIO_CONTAINER);
 
-}
+let HORARIO_CONTAINER = null;
 
 $( document ).ready(function() {
-    agregarHorarioContainer();
+    HORARIO_CONTAINER = $(".horario-container");
 });
+
+function agregarHorarioContainer() {
+    var aux = HORARIO_CONTAINER.clone();
+    aux.find("input").each(function () {
+        $(this).val(null);
+    });
+    $('#horarios').append(aux);
+}
+
+function borrarHorarioContainer(event) {
+    event.target.closest(".horario-container").remove();
+}

resources/views/edit.blade.php

@@ -57,8 +57,22 @@
                         </div>
 
                         <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
-                            <form id="horarios">
-
+                            <form id="horarios" method="post" action="{{route('update')}}">
+                                @csrf
+                                <div class="horario-container">
+                                    <div class="columna1">
+                                        <input required name="horario[]dia" type="text" class="formulario dia">
+                                        <div class="horas">
+                                            <div>
+                                                <input required name="horario[]llegada" type="time" class="formulario hora">
+                                                <input required name="horario[]salida" type="time" class="formulario hora">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="columna2">
+                                        <button type="button" onclick="borrarHorarioContainer(event)" class="cerrar">X</button>
+                                    </div>
+                                </div>
                             </form>
                             <button onclick="agregarHorarioContainer()" class="mas">+</button>
                         </div>
@@ -67,7 +81,7 @@
 
                 <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
                     <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
-                        <input type="submit" value="Gestionar evento">
+                        <input type="submit" value="Enviar horarios" form="horarios">
                     </div>
                 </div>
             </div>

routes/web.php

@@ -21,3 +21,5 @@ Route::get('/', function () {
 Route::post('/eventos',[EventoController::class, 'store'])->name('store');
 
 Route::get('/eventos/{evento}',[EventoController::class, 'edit'])->name('edit');
+
+Route::post('/eventos/{evento}', [EventoController::class, 'update'])->name('update');