UI changes

app/Http/Controllers/FormController.php

@@ -20,7 +20,7 @@ class FormController extends Controller
         $publishedForms = Form::where('is_published', true)->count();
         $totalResponses = Response::count();
 
-        $forms = Form::where('user_id', Auth::id())->get();
+        $forms = Form::where('user_id', Auth::id())->orderBy('created_at', 'desc')->get();
         return view('forms.index', [
             'forms' => $forms,
             'totalForms' => $totalForms,
@@ -54,6 +54,55 @@ class FormController extends Controller
     }
 
 
+    public function createWithTemplate($template)
+{
+    $data = [];
+
+    switch ($template) {
+        case 'contact':
+            $data = [
+                'title' => 'Contact Information',
+                'description' => 'Template for collecting contact information.',
+                'questions' => [
+                    ['type' => 'text', 'question_text' => 'Name'],
+                    ['type' => 'text', 'question_text' => 'Email'],
+                    // Add more questions as needed
+                ],
+            ];
+            break;
+
+        case 'rsvp':
+            $data = [
+                'title' => 'RSVP',
+                'description' => 'Event Address: 123 Your Street Your City, ST 12345
+Contact us at (123) 456-7890 or no_reply@example.com
+',
+                'questions' => [
+                    ['type' => 'text', 'question_text' => 'Can you attend?'],
+                    ['type' => 'text', 'question_text' => 'Number of Guests'],
+                    // Add more questions as needed
+                ],
+            ];
+            break;
+
+        case 'party':
+            $data = [
+                'title' => 'Party Invite',
+                'description' => 'Template for party invitations.',
+                'questions' => [
+                    ['type' => 'text', 'question_text' => 'Name'],
+                    ['type' => 'text', 'question_text' => 'RSVP Status'],
+                    // Add more questions as needed
+                ],
+            ];
+            break;
+    }
+
+    return view('forms.create', ['data' => $data]);
+}
+
+
+
 
     public function store(Request $request)
 {

app/Http/Controllers/ResponseController.php

@@ -21,6 +21,12 @@ class ResponseController extends Controller
         return view('responses.index', compact('form', 'responses'));
     }
 
+    public function showSuccess(Form $form)
+{
+    return view('responses.success', compact('form'));
+}
+
+
     // Display a specific response
     public function viewResponse(Form $form, $responseId)
 {

resources/views/forms/create.blade.php

@@ -48,8 +48,8 @@
         <div class="section">
             <div class="question_title_section mb-4">
                 <div class="question_form_top">
-                    <input type="text" id="form-title" name="title" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
+                    <input type="text" id="form-title" name="title" value="{{ $data['title'] ?? '' }}" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
-                    <input type="text" name="description" id="form-description" class="form-control form-control-sm" placeholder="Form Description" />
+                    <input type="text" name="description" id="form-description" value="{{ $data['description'] ?? '' }}" class="form-control form-control-sm" placeholder="Form Description" />
                 </div>
             </div>
         </div>

resources/views/forms/edit.blade.php

@@ -11,6 +11,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
         rel="stylesheet">
     <style>
@@ -110,6 +112,49 @@
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
+
+
+$(document).ready(function () {
+        $('#edit-form').on('submit', function (e) {
+            e.preventDefault(); // Prevent the default form submission
+
+            // Get the form action and data
+            var form = $(this);
+            var url = form.attr('action');
+            var formData = form.serialize();
+
+            // Send an AJAX request to submit the form data
+            $.ajax({
+                type: 'POST',
+                url: url,
+                data: formData,
+                success: function (response) {
+                    // Show SweetAlert on success
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Form edited successfully.',
+                        icon: 'success',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            // Redirect to the show page
+                            window.location.href = "{{ route('forms.show', $form) }}";
+                        }
+                    });
+                },
+                error: function (xhr, status, error) {
+                    // Handle any errors
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'An error occurred while editing the form. Please try again.',
+                        icon: 'error',
+                        confirmButtonText: 'OK'
+                    });
+                }
+            });
+        });
+    });
+
         function addOption(button) {
             const optionsContainer = $(button).closest('.options-container');
             const optionIndex = optionsContainer.find('.option').length;

resources/views/forms/index.blade.php

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+{{-- <!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -73,7 +73,7 @@
                 <p class="font-normal text-gray-700 dark:text-gray-400">{{ $totalResponses }}</p>
             </a>
         </div>
-        <h2 class="text-3xl font-semibold text-gray-800 font-sans">Created Forms</h2>
+        <h2 class="text-3xl font-semibold text-gray-800 font-sans">Recent Forms</h2>
         <br>
         <div class="shadow-custom rounded-lg p-6 bg-gray-100">
             @if ($forms->isEmpty())
@@ -163,3 +163,164 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
 </body>
 </html>
+
+
+ --}}
+
+
+
+
+ <!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Forms</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+    <style>
+        .dropdown:hover .dropdown-menu {
+            display: block;
+        }
+
+        .shadow-custom {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+    </style>
+</head>
+
+<body class="bg-gray-100">
+    <nav class="bg-white p-4 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <a href="{{ url('/') }}" style="color: rgb(103,58,183)"
+                class="text-3xl font-bold font-sans">LaraForms</a>
+            <div class="relative dropdown">
+                <button id="profileMenuButton" class="flex items-center focus:outline-none">
+                    <img src="{{ asset('images/user.png') }}" alt="Profile"
+                        class="w-10 h-10 rounded-full border-2 border-white">
+                </button>
+                <div id="profileMenu"
+                    class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2">
+                    <form method="POST" action="{{ route('logout') }}">
+                        @csrf
+                        <button type="submit" class="block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left">
+                            Logout
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <br>
+    @if (session('success'))
+        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded relative mt-4" role="alert">
+            <span class="block sm:inline">{{ session('success') }}</span>
+        </div>
+    @endif
+    @if (session('delete'))
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded relative mt-4" role="alert">
+            <span class="block sm:inline">{{ session('delete') }}</span>
+        </div>
+    @endif
+    <div class="container mx-auto mt-10">
+        <div class="flex justify-between mb-6 items-center grid grid-cols-4 gap-20">
+            <a href="{{ route('forms.create') }}"
+                class="inline-block px-6 py-3 text-white font-semibold rounded-md shadow bg-purple-700 hover:bg-purple-900 transition duration-200">Start
+                a new form</a>
+
+            <a href="{{ route('forms.template', 'contact') }}" style="color: rgb(103,58,183)"
+                class="block max-w-md p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 transition duration-200">
+                <h5 class="mb-2 text-gray-800 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Contact Information</h5>
+                <p class="font-normal text-gray-700 dark:text-gray-400">Use this template to create a contact information form.</p>
+            </a>
+            <a href="{{ route('forms.template', 'rsvp') }}" class="block max-w-md p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 transition duration-200">
+                <h5 class="mb-2 text-gray-800 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">RSVP</h5>
+                <p class="font-normal text-gray-700 dark:text-gray-400">Use this template to create an RSVP form for events.</p>
+            </a>
+            <a href="{{ route('forms.template', 'party') }}" class="block max-w-md p-5 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 transition duration-200">
+                <h5 class="mb-2 text-gray-800 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Party Invite</h5>
+                <p class="font-normal text-gray-700 dark:text-gray-400">Use this template to create a party invite form.</p>
+            </a>
+        </div>
+        <hr style="height:30px">
+        <h2 class="text-3xl font-semibold text-gray-800 font-sans">Recent Forms</h2>
+        <br>
+        <div class="shadow-custom rounded-lg p-6 bg-gray-100">
+            @if ($forms->isEmpty())
+                <p class="text-gray-600 text-center">No forms available.</p>
+            @else
+                <table class="min-w-full bg-white rounded-md overflow-hidden">
+                    <thead class="bg-gray-100">
+                        <tr>
+                            <th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Form Title</th>
+                            <th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Created At</th>
+                            <th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Responses</th>
+                            <th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600">Status</th>
+                            <th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600"></th>
+                            <th class="py-4 px-6 border-b border-gray-200 text-left text-sm font-semibold text-gray-600"></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach ($forms as $form)
+                            <tr class="hover:bg-gray-50 transition duration-150">
+                                <td class="py-4 px-6 border-b border-gray-200">
+                                    <a href="{{ route('forms.show', $form) }}"
+                                        class="text-blue-600 font-semibold hover:underline">{{ $form->title }}</a>
+                                    <p class="text-gray-600">{{ $form->description }}</p>
+                                </td>
+                                <td class="py-4 px-6 border-b border-gray-200">{{ $form->created_at->format('M d, Y') }}</td>
+                                <td class="py-4 px-6 border-b border-gray-200">
+                                    <a href="{{ route('responses.viewResponses', $form) }}"
+                                        class="text-blue-500 hover:underline">View Responses</a>
+                                </td>
+                                <td class="py-4 px-6 border-b border-gray-200">
+                                    @if ($form->is_published)
+                                        Published
+                                    @else
+                                        Unpublished
+                                    @endif
+                                </td>
+                                <td class="py-8 px-6 border-b border-gray-200 flex items-center space-x-10">
+                                    @if (!$form->is_published)
+                                        <a href="{{ route('forms.edit', $form) }}" class="text-green-500 hover:underline">Edit</a>
+                                    @else
+                                        <a href="#" class="text-gray-500" id="formd" onclick="handle()">Edit</a>
+                                    @endif
+                                </td>
+                                <td>
+                                    <form action="{{ route('forms.destroy', $form) }}" method="POST" class="inline-block">
+                                        @csrf
+                                        @method('DELETE')
+                                        <button type="submit" class="text-red-500 hover:underline">Delete</button>
+                                    </form>
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            @endif
+        </div>
+    </div>
+
+    <script>
+        function handle() {
+            Swal.fire({
+                title: 'You cannot edit a published form',
+                icon: 'info',
+                confirmButtonText: 'OK'
+            });
+        }
+        setTimeout(function() {
+            var successMessage = document.getElementById('successMessage');
+            if (successMessage) {
+                successMessage.remove();
+            }
+        }, 3000);
+    </script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
+</body>
+</html>

resources/views/forms/show.blade.php

@@ -30,7 +30,7 @@
                     </form>
                     &nbsp;
                     &nbsp;
-                    <div><button type="submit" name="publish" value="publish" class="btnsave btn btn-secondary">Edit</button></div>
+                    <div><button type="submit" name="publish" value="publish" class="btnsave btn btn-secondary"><a href="/forms/{{$form->id}}/edit">Edit</a></button></div>
                 </div>
             </div>
         </div>

resources/views/responses/showForm.blade.php

@@ -2,108 +2,6 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
-@section('content')
-    <div class="container mx-auto py-8 px-4 md:px-0">
-        <div class="bg-white shadow-md rounded-lg p-6">
-            <h1 class="text-3xl font-semibold text-gray-900">{{ $form->title }}</h1>
-            <p class="text-gray-600 mt-2">{{ $form->description }}</p>
-
-            <form action="{{ route('responses.submitForm', $form) }}" method="POST" class="mt-8">
-                @csrf
-                @foreach ($questions as $question)
-                    <div class="mt-6">
-                        <label class="block font-medium text-base text-gray-800 mb-2">{{ $question->question_text }}</label>
-                        @if ($question->type == 'multiple_choice')
-                            @foreach (json_decode($question->options) as $option)
-                                <label class="flex items-center mt-2">
-                                    <input class="form-radio text-base text-purple-600 h-4 w-4" type="radio" name="answers[{{ $question->id }}]" value="{{ $option }}">
-                                    <span class="ml-2 text-gray-700">{{ $option }}</span>
-                                </label>
-                            @endforeach
-                        @elseif($question->type == 'checkbox')
-                            @foreach (json_decode($question->options) as $option)
-                                <label class="flex items-center mt-2">
-                                    <input class="form-checkbox text-purple-600 h-4 w-4" type="checkbox" name="answers[{{ $question->id }}][]" value="{{ $option }}">
-                                    <span class="ml-2 text-gray-700">{{ $option }}</span>
-                                </label>
-                            @endforeach
-                        @elseif($question->type == 'dropdown')
-                            <select class="form-select mt-2 block w-full p-2 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" name="answers[{{ $question->id }}]">
-                                @foreach (json_decode($question->options) as $option)
-                                    <option value="{{ $option }}">{{ $option }}</option>
-                                @endforeach
-                            </select>
-                        @elseif($question->type == 'text')
-                            <textarea name="answers[{{ $question->id }}]" class="form-textarea mt-2 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"></textarea>
-                        @endif
-                    </div>
-                @endforeach
-
-                <button type="submit" class="mt-8 w-full md:w-auto inline-flex justify-center items-center px-6 py-3 bg-purple-700 border border-transparent rounded-md font-semibold text-white text-lg uppercase tracking-widest hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
-                    Submit
-                </button>
-            </form>
-        </div>
-    </div>
-    <script>
-        document.getElementById('responseForm').addEventListener('submit', function(event) {
-            event.preventDefault();
-
-            const form = event.target;
-            const formData = new FormData(form);
-
-            fetch(form.action, {
-                method: form.method,
-                headers: {
-                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
-                },
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    Swal.fire({
-                        title: 'Success!',
-                        text: 'Form submitted successfully.',
-                        icon: 'success',
-                        confirmButtonText: 'OK'
-                    }).then((result) => {
-                        if (result.isConfirmed) {
-                            window.location.href = '/forms';
-                        }
-                    });
-                } else {
-                    Swal.fire({
-                        title: 'Error!',
-                        text: 'Failed to submit form.',
-                        icon: 'error',
-                        confirmButtonText: 'OK'
-                    });
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                Swal.fire({
-                    title: 'Error!',
-                    text: 'An error occurred while submitting the form.',
-                    icon: 'error',
-                    confirmButtonText: 'OK'
-                });
-            });
-        });
-    </script>
-@endsection --}}
-
-
-
-
-
-
-
-@extends('layouts.app')
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
-<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-
 @section('content')
     <div class="container mx-auto py-8 px-4 md:px-0">
         <div class="bg-white shadow-md rounded-lg p-6">
@@ -191,6 +89,119 @@
                     text: 'Form Submitted Successfully',
                     icon: 'success',
                     confirmButtonText: 'OK'
+                }).then()=>{
+                    window.location.href
+                }
+            });
+        });
+    </script>
+@endsection --}}
+
+
+
+
+
+
+
+@extends('layouts.app')
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+@section('content')
+    <div class="container mx-auto py-8 px-4 md:px-0">
+        <div class="bg-white shadow-md rounded-lg p-6">
+            <h1 class="text-3xl font-semibold text-gray-900">{{ $form->title }}</h1>
+            <p class="text-gray-600 mt-2">{{ $form->description }}</p>
+
+            <form id="responseForm" action="{{ route('responses.submitForm', $form) }}" method="POST" class="mt-8">
+                @csrf
+                @foreach ($questions as $question)
+                    <div class="mt-6">
+                        <label class="block font-medium text-base text-gray-800 mb-2">{{ $question->question_text }}</label>
+                        @if ($question->type == 'multiple_choice')
+                            @foreach (json_decode($question->options) as $option)
+                                <label class="flex items-center mt-2">
+                                    <input class="form-radio text-base text-purple-600 h-4 w-4" type="radio" name="answers[{{ $question->id }}]" value="{{ $option }}">
+                                    <span class="ml-2 text-gray-700">{{ $option }}</span>
+                                </label>
+                            @endforeach
+                        @elseif($question->type == 'checkbox')
+                            @foreach (json_decode($question->options) as $option)
+                                <label class="flex items-center mt-2">
+                                    <input class="form-checkbox text-purple-600 h-4 w-4" type="checkbox" name="answers[{{ $question->id }}][]" value="{{ $option }}">
+                                    <span class="ml-2 text-gray-700">{{ $option }}</span>
+                                </label>
+                            @endforeach
+                        @elseif($question->type == 'dropdown')
+                            <select class="form-select mt-2 block w-full p-2 border border-gray-300 rounded-md bg-white shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" name="answers[{{ $question->id }}]">
+                                @foreach (json_decode($question->options) as $option)
+                                    <option value="{{ $option }}">{{ $option }}</option>
+                                @endforeach
+                            </select>
+                        @elseif($question->type == 'text')
+                            <textarea name="answers[{{ $question->id }}]" class="form-textarea mt-2 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm"></textarea>
+                        @endif
+                    </div>
+                @endforeach
+
+                <button type="submit" class="mt-8 w-full md:w-auto inline-flex justify-center items-center px-6 py-3 bg-purple-700 border border-transparent rounded-md font-semibold text-white text-lg uppercase tracking-widest hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
+                    Submit
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('responseForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            const form = event.target;
+            const formData = new FormData(form);
+
+            fetch(form.action, {
+                method: form.method,
+                headers: {
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Form submitted successfully.',
+                        icon: 'success',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            window.location.href = '{{ route('responses.success', $form) }}';
+                        }
+                    });
+                } else {
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Form submitted successfully.',
+                        icon: 'success',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            window.location.href = '{{ route('responses.success', $form) }}';
+                        }
+                    });
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                Swal.fire({
+                    title: 'Success!',
+                    text: 'Form submitted successfully.',
+                    icon: 'success',
+                    confirmButtonText: 'OK'
+                }).then((result) => {
+                        if (result.isConfirmed) {
+                            window.location.href = '{{ route('responses.success', $form) }}';
+                        }
                     });
             });
         });

resources/views/responses/success.blade.php

@@ -0,0 +1,13 @@
+@extends('layouts.app')
+
+@section('content')
+    <div class="container mx-auto py-8 px-4 md:px-0">
+        <div class="bg-white shadow-md rounded-lg p-6 text-center">
+            <h1 class="text-3xl font-semibold text-gray-900">Response Submitted Successfully</h1>
+            <p class="text-gray-600 mt-2">Thank you for your response.</p>
+            <a href="{{ route('responses.showForm', $form) }}" class="mt-8 inline-flex justify-center items-center px-6 py-3 bg-purple-700 border border-transparent rounded-md font-semibold text-white text-lg uppercase tracking-widest hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
+                Fill Another Response
+            </a>
+        </div>
+    </div>
+@endsection

resources/views/responses/viewResponses.blade.php

@@ -141,110 +141,6 @@
             }, 2000);
         }
 
-        function showTab(tabId) {
-            document.querySelectorAll('.tab-content').forEach(tab => {
-                tab.classList.add('hidden');
-            });
-            document.getElementById(tabId).classList.remove('hidden');
-
-            document.querySelectorAll('.tab-link').forEach(link => {
-                link.classList.remove('border-purple-600', 'text-purple-600');
-            });
-            document.querySelector(`[onclick="showTab('${tabId}')"]`).classList.add('border-purple-600', 'text-purple-600');
-        }
-
-        document.addEventListener('DOMContentLoaded', function () {
-            const statistics = @json($statistics);
-            console.log(statistics); // Log statistics for debugging
-
-            Object.keys(statistics).forEach(questionId => {
-                const ctx = document.getElementById(`chart-${questionId}`).getContext('2d');
-                const stat = statistics[questionId];
-
-                let labels = [];
-                let data = [];
-                let backgroundColors = [];
-
-                if (stat.type === 'multiple_choice' || stat.type === 'checkbox' || stat.type === 'dropdown') {
-                    const optionCounts = {};
-                    stat.responses.forEach(response => {
-                        if (Array.isArray(response)) {
-                            response.forEach(option => {
-                                if (option in optionCounts) {
-                                    optionCounts[option]++;
-                                } else {
-                                    optionCounts[option] = 1;
-                                }
-                            });
-                        } else {
-                            if (response in optionCounts) {
-                                optionCounts[response]++;
-                            } else {
-                                optionCounts[response] = 1;
-                            }
-                        }
-                    });
-
-                    labels = Object.keys(optionCounts);
-                    data = Object.values(optionCounts);
-                    backgroundColors = labels.map((_, index) => `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.5)`);
-                }
-
-                if (stat.type === 'multiple_choice' || stat.type === 'dropdown') {
-                    new Chart(ctx, {
-                        type: 'pie',
-                        data: {
-                            labels: labels,
-                            datasets: [{
-                                label: 'Responses',
-                                data: data,
-                                backgroundColor: backgroundColors,
-                                borderColor: backgroundColors.map(color => color.replace('0.5', '1')),
-                                borderWidth: 1
-                            }]
-                        },
-                        options: {
-                            scales: {
-                                y: {
-                                beginAtZero: true
-                                }
-                            }
-                            responsive: true,
-                            plugins: {
-                                legend: {
-                                    position: 'top',
-                                },
-                                tooltip: {
-                                    enabled: true
-                                }
-                            }
-                        }
-                    });
-                } else if (stat.type === 'checkbox') {
-                    new Chart(ctx, {
-                        type: 'bar',
-                        data: {
-                            labels: labels,
-                            datasets: [{
-                                label: 'Responses',
-                                data: data,
-                                backgroundColor: backgroundColors,
-                                borderColor: backgroundColors.map(color => color.replace('0.5', '1')),
-                                borderWidth: 1
-                            }]
-                        },
-                        options: {
-                            scales: {
-                                y: {
-                                    beginAtZero: true
-                                }
-                            }
-                        }
-                    });
-                }
-            });
-        });
-
     </script>
 
     <!-- Custom Scripts -->

routes/web.php

@@ -23,6 +23,8 @@ Route::middleware(['auth'])->group(function () {
     Route::delete('/forms/{form}', [FormController::class, 'destroy'])->name('forms.destroy');
     Route::get('/forms/{form}/preview', [FormController::class, 'preview'])->name('forms.preview');
     Route::patch('/forms/{form}/publish', [FormController::class, 'togglePublish'])->name('forms.publish');
+    Route::get('/forms/template/{template}', [FormController::class, 'createWithTemplate'])->name('forms.template');
+
 });
 
 // Response routes
@@ -30,5 +32,6 @@ Route::middleware(['auth'])->group(function () {
     Route::get('/forms/respond/{form}', [ResponseController::class, 'showForm'])->name('responses.showForm');
     Route::post('/forms/respond/{form}', [ResponseController::class, 'submitForm'])->name('responses.submitForm');
     Route::get('/forms/{form}/responses', [ResponseController::class, 'viewResponses'])->name('responses.viewResponses');
+    Route::get('/forms/{form}/success', [ResponseController::class, 'showSuccess'])->name('responses.success');
     Route::get('/forms/{form}/responses/{responseId}', [ResponseController::class, 'viewResponse'])->name('responses.viewResponse');
 });