Laravel + UI Task

Laravel + UI Task.md

Task Description:

You are required to create a web application using Laravel that implements a dynamic registration form with form handling, validation, Google Autocomplete for address input, and AJAX form submission. The application should also include the functionality to save the form for later completion, display the saved forms using Bootstrap and DataTables with pagination.

Requirements:

1. Dynamic Registration Form:

   • Generate the registration form dynamically based on a JSON data structure (Form should auto generate even if I add new sections or fields).

   {
     "sections": [
       {
         "name": "user_information",
         "label": "User Information",
         "fields": [
           {
             "name": "first_name",
             "label": "First Name",
             "type": "text",
             "required": true
           },
           {
             "name": "last_name",
             "label": "Last Name",
             "type": "text",
             "required": true
           },
           {
             "name": "email",
             "label": "Email",
             "type": "email",
             "required": true
           },
           {
             "name": "password",
             "label": "Password",
             "type": "password",
             "required": true
           },
           {
             "name": "confirm_password",
             "label": "Confirm Password",
             "type": "password",
             "required": true
           }
         ]
       },
       {
         "name": "contact_information",
         "label": "Contact Information",
         "fields": [
           {
             "name": "phone1",
             "label": "Phone 1",
             "type": "text",
             "required": true
           },
           {
             "name": "phone2",
             "label": "Phone 2",
             "type": "text",
             "required": false
           }
         ]
       },
       {
         "name": "address_information",
         "label": "Address Information",
         "fields": [
           {
             "name": "address_line1",
             "label": "Address Line 1",
             "type": "text",
             "required": true
           },
           {
             "name": "address_line2",
             "label": "Address Line 2",
             "type": "text",
             "required": false
           },
           {
             "name": "city",
             "label": "City",
             "type": "text",
             "required": true
           },
           {
             "name": "state",
             "label": "State",
             "type": "text",
             "required": true
           },
           {
             "name": "zip",
             "label": "Zip",
             "type": "text",
             "required": true
           }
         ]
       }
     ]
   }

   • Use Laravel's built-in form handling and validation to handle the form submission.
   • Implement fields for first name, last name, email, password, confirm password, address line 1, address line 2, city, state, zip, phone 1, and phone 2.
   • Form should be generated based on the section available in JSON data structure
   • Utilize Google Autocomplete API for address input to provide suggestions and retrieve address details including latitude and longitude.
   • Perform server-side validation to ensure all required fields are filled, email is valid, and passwords match.

2. AJAX Form Submission:

   • Implement AJAX form submission to handle the registration form.
   • Use JavaScript/jQuery to send the form data asynchronously to the server.
   • Handle the form submission on the server-side using Laravel's form handling and validation.
   • Return appropriate success or error response to the client-side upon form submission completion.

3. Save Form for Later Completion:

   • Implement functionality to save the form for later completion.
   • Store the partially completed form data in the database, associating it with the user's session or a unique identifier.
   • Allow the user to continue working on the same form from the same browser later.
   • Provide a mechanism for the user to retrieve their saved form and continue editing.

4. Display Registered Forms using Bootstrap and DataTables (separate url):

   • Use Bootstrap to design and style the user interface of the application.
   • Implement DataTables plugin to display all partially or fully registered forms.
   • Create a paginated list of registered forms with relevant details such as name, email, and completion status.
   • Add search and filtering functionality to allow users to search for specific registered forms based on criteria.

5. Additional Features

   • Use any database
   • Implement pagination to display a limited number of registered forms per page.
   • Allow users to edit and update their saved forms.
   • Implement form validation on the client-side to provide real-time feedback to users.
   • Add error handling and display appropriate error messages if form submission or form retrieval fails.