FLATPICKR SUBMIT? - Trying to make a booking button but not working - ruby-on-rails

Question

the thing, that i tried a lot of stuff is is not working at all, somehow i am having this kind of error in my terminal, when i do my post request from my form:
20:21:01 web.1 | Started POST "/bookings" for ::1 at 2023-02-19 20:21:01 +0100
20:21:01 web.1 | Processing by BookingsController#create as TURBO_STREAM
20:21:01 web.1 | Parameters: {"authenticity_token"=>"[FILTERED]", "booking"=>{"start_time"=>"2023-02-28", "end_time"=>"2023-03-08"}, "commit"=>"Schedule your appointment"}
20:21:01 web.1 | User Load (0.9ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 3], ["LIMIT", 1]]
20:21:01 web.1 | Completed 404 Not Found in 4ms (ActiveRecord: 0.9ms | Allocations: 2628)
20:21:01 web.1 |
20:21:01 web.1 |
20:21:01 web.1 |
20:21:01 web.1 | ActiveRecord::RecordNotFound (Couldn't find Game without an ID):
20:21:01 web.1 |
20:21:01 web.1 | app/controllers/bookings_controller.rb:38:in `set_game'
20:21:01 web.1 | Started GET "/games/37" for ::1 at 2023-02-19 20:21:01 +0100
20:21:01 web.1 | Processing by GamesController#show as HTML
So I have a Games_controller User created with the devise, and a Bookings_controller. And in my show page, I see my bookings option, but somehow, when I click the submit button, nothing happend, and i got the error that I shared before, and I am not sure why. And the thing, that i dont understand is why i am not having any kind of flags like if my booking is not being saved at all, or if it saved i should have some kind of flag. So after a lot of consideration i decided to ask here.
Because I am definint my games_id in the form of my _show.html.erb. So if anyone has a solution for it will be great
GAMES_CONTROLLER
class GamesController < ApplicationController def home
authorize Game end
def index
#games = Game.all
#games = policy_scope(Game) end
def new
#game = Game.new
authorize #game end
def create
#game = Game.new(game_params)
#game.user = current_user
if #game.save
redirect_to game_path(#game) # later to be changed in game_path(#game) when we have a show
else
render :new, status: :unprocessable_entity
end
authorize #game end
def show
#game = Game.find(params[:id])
#booking = Booking.new(game: #game)
authorize #game end
def edit
#game = Game.find(params[:id])
authorize #game end
def update
#game = Game.find(params[:id])
if #game.update(game_params)
redirect_to game_path(#game)
else
render :new, status: :unprocessable_entity
end
authorize #game end
def destroy
#game = Game.find(params[:id])
#game.destroy
redirect_to games_path
authorize #game end
private
def game_params
params.require(:game).permit(:price, :title, :description, :photo) end end
BOOKING_CONTROLLER
class BookingsController < ApplicationController before_action :set_game, only: [:create] before_action :set_booking, only: [:show]
def index
authorize Booking
#bookings = policy_scope(Booking)
puts "Number of bookings: #{#bookings.count}" end
def show
authorize #booking end
def create
puts "Params: #{params.inspect}"
#booking = Booking.new(booking_params.merge(game: #game, user: current_user))
authorize #booking
if #booking.save
flash[:notice] = "Booking was successfully created."
redirect_to #booking
else
flash[:alert] = "There was an error creating the booking."
redirect_to #game
end
Rails.logger.debug "Params: #{params.inspect}"
Rails.logger.debug "Game: #{#game.inspect}"
Rails.logger.debug "Booking: #{#booking.inspect}"
Rails.logger.debug "Booking params: #{booking_params.inspect}"
Rails.logger.debug "Current user: #{current_user.inspect}" end
private
def set_game
#game = Game.find(params[:game_id])
puts #game.inspect end
def set_booking
#booking = Booking.find(params[:id]) end
def booking_params
params.require(:booking).permit(:start_date, :end_date, :game_id) end
def set_dates
self.start_date = start_date.to_date
self.end_date = end_date.to_date end
end
GAMES - SHOW.HTML.ERB
<%= render 'shared/navbar' %>
<h1>Show</h1> <h2><%= #game.title %></h2> <%= cl_image_tag #game.photo.key,
width: 400, height: 300, crop: :fill %> <p><%= #game.description %></p> <p><%= #game.price %></p> <p><% #game.categories.each do |category| %> <%= category.name %> <% end %> </p>
<p><%= link_to 'Edit game listing', edit_game_path(#game) if policy(#game).edit?%></p> <p><%= link_to 'Delete game listing', game_path(#game), data: { turbo_method: :delete, turbo_confirm: "Are you sure?" }if policy(#game).edit?%></p> <p><%= link_to 'Back to games', games_path %></p>
<h1>BOOKINGS</h1>
<%= render partial: 'bookings/show', locals: { booking: #booking } %>
BOOKING _SHOW.HTML.ERB
<%= simple_form_for #booking, data: { controller: 'flatpickr' } do |f| %> <%= f.hidden_field :game_id, value: #game.id %> <%= f.input :start_time, as: :string, input_html: { data: { flatpickr_target: "startTime" } } %> <%= f.input :end_time, as: :string, input_html: { data: { flatpickr_target: "endTime" } } %> <%= f.submit 'RENT THE GAME', class: 'btn btn-primary' %> <% end %>
<h1>Booking Details</h1> <p><strong>Start date:</strong> <%= #booking.start_date %></p> <p><strong>End date:</strong> <%= #booking.end_date %></p>
<h1>Here Come the calendar</h1> <%= render partial: 'bookings/calendar', locals: { bookings: #bookings } %>
BOOKING _CALENDAR.HTML.ERB
<div id='calendar'></div> <% if #bookings.present? %> <% #bookings.each do |booking| %>
<%= booking.inspect %><br> # Add this line <% end %> <% else %> No bookings to display. <% end %>
<script> document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
<% if #bookings %>
<% #bookings.each do |booking| %>
{
title: '<%= booking.game.title %>',
start: '<%= booking.start_date %>',
end: '<%= booking.end_date %>',
color: 'red'
},
<% end %>
<% end %>
]
});
calendar.render(); }); </script>
<html lang='en'> <head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/fullcalendar#6.1.4/index.global.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
});
</script> </head> <body>
<div id='calendar'></div> </body> </html>