diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php
index e1b7cde..deda09b 100644
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -23,18 +23,35 @@ class AdminController extends Controller
     }
 
     public function getResponses()
-    {
-        $responses = Response::with('user'); 
+{
+    $responses = Response::with('user', 'department');
 
-        return DataTables::of($responses)
-            ->addColumn('user_name', function ($response) {
-                return $response->user->name ?? 'Unknown'; 
-            })
-            ->addColumn('action', function ($response) {
-                $viewButton = $response->proof ? '<a href="' . asset('storage/' . $response->proof) . '" target="_blank" class="btn btn-sm btn-primary">View</a>' : 'No Proof';
-                return $viewButton;
-            })
-            ->rawColumns(['action']) 
-            ->make(true);
-    }
+    return DataTables::of($responses)
+        ->addColumn('user_name', function ($response) {
+            return $response->user->name ?? 'Unknown';
+        })
+        ->addColumn('department_name', function ($response) {
+            return $response->department->name ?? 'Unknown';
+        })
+        ->addColumn('start_date', function ($response) {
+            return \Carbon\Carbon::parse($response->start_date)->format('d-m-Y');
+        })
+        ->addColumn('start_time', function ($response) {
+            return \Carbon\Carbon::parse($response->start_date)->format('h:i A');
+        })
+        ->addColumn('end_date', function ($response) {
+            return \Carbon\Carbon::parse($response->end_date)->format('d-m-Y');
+        })
+        ->addColumn('end_time', function ($response) {
+            return \Carbon\Carbon::parse($response->end_date)->format('h:i A');
+        })
+        ->addColumn('action', function ($response) {
+            $viewButton = $response->proof
+                ? '<a href="' . asset('storage/' . $response->proof) . '" target="_blank" class="btn btn-sm btn-primary">View</a>'
+                : 'No Proof';
+            return $viewButton;
+        })
+        ->rawColumns(['action'])
+        ->make(true);
+}
 }
diff --git a/app/Http/Controllers/FacultyController.php b/app/Http/Controllers/FacultyController.php
index feba68b..20d3746 100644
--- a/app/Http/Controllers/FacultyController.php
+++ b/app/Http/Controllers/FacultyController.php
@@ -20,19 +20,32 @@ class FacultyController extends Controller
         return view('faculty.response-form');
     }
 
-    // Handle form submission from faculty
     public function submitResponse(Request $request)
     {
+        // dd($request->all());
         try {
             // Validate the request data
             $validated = $request->validate([
                 'title' => 'required|string',
-                'activity_type' => 'required|string',
+                'organising_institute' => 'required|string',
+                'address' => 'required|string',
+                // 'department' => 'required|string',
+                // 'faculty_name' => 'required|string',
                 'start_date' => 'required|date',
+                'start_time' => 'required|date_format:H:i',
                 'end_date' => 'required|date',
-                'proof' => 'nullable|mimes:jpg,jpeg,png,pdf,doc,docx', // Validate proof file
+                'end_time' => 'required|date_format:H:i',
+                'num_days' => 'required|integer',
+                'activity_type' => 'required|string',
+                'category' => 'required|string',
+                'level' => 'required|string',
+                'proof' => 'nullable|mimes:jpg,jpeg,png,pdf,doc,docx,zip',
             ]);
 
+            // Combine start date and time
+            $startDateTime = date('Y-m-d H:i:s', strtotime("{$validated['start_date']} {$validated['start_time']}"));
+            $endDateTime = date('Y-m-d H:i:s', strtotime("{$validated['end_date']} {$validated['end_time']}"));
+
             // Handle the file upload
             $proofPath = null;
             if ($request->hasFile('proof')) {
@@ -43,18 +56,27 @@ class FacultyController extends Controller
             }
 
             // Save the response to the database
+            // dd($validated['organising_institute']);
             Response::create([
                 'title' => $validated['title'],
+                'organising_institute' => $validated['organising_institute'],
+                'address' => $validated['address'],
+                'department_id' => auth()->user()->department->id,
+                'faculty_id' => auth()->user()->id,
+                // 'faculty_name' => $validated['faculty_name'],
+                'start_date' => $startDateTime,
+                'end_date' => $endDateTime,
+                'num_days' => $validated['num_days'],
                 'activity_type' => $validated['activity_type'],
-                'start_date' => $validated['start_date'],
-                'end_date' => $validated['end_date'],
-                'proof' => $proofPath, // Store the file path
-                'faculty_id' => auth()->user()->id, // Assuming the logged-in user is the faculty
+                'category' => $validated['category'],
+                'level' => $validated['level'],
+                'proof' => $proofPath,
             ]);
 
             return redirect()->route('faculty.dashboard')->with('status', 'Response submitted successfully');
         } catch (\Exception $e) {
             // Handle the exception and provide an error message
+            // dd($e);
             return back()->withErrors('An error occurred while submitting your response: ' . $e->getMessage());
         }
     }
diff --git a/app/Models/Response.php b/app/Models/Response.php
index 6bd2ac0..c46fa5a 100644
--- a/app/Models/Response.php
+++ b/app/Models/Response.php
@@ -11,14 +11,25 @@ class Response extends Model
 
     protected $fillable = [
         'title',
-        'activity_type',
+        'organising_institute',
+        'address',
+        'department_id',
+        'faculty_id',
         'start_date',
         'end_date',
+        'num_days',
+        'activity_type',
+        'category',
+        'level',        
         'proof',
-        'faculty_id',
     ];
 
+
     // Define the relationship to the User (Faculty)
+    public function department()
+    {
+        return $this->belongsTo(Department::class, 'department_id');
+    }
     public function user()
     {
         return $this->belongsTo(User::class, 'faculty_id');
diff --git a/database/migrations/2025_01_25_201943_create_responses_table.php b/database/migrations/2025_01_25_201943_create_responses_table.php
index 40b877d..1c4effa 100644
--- a/database/migrations/2025_01_25_201943_create_responses_table.php
+++ b/database/migrations/2025_01_25_201943_create_responses_table.php
@@ -6,20 +6,29 @@ use Illuminate\Support\Facades\Schema;
 
 class CreateResponsesTable extends Migration
 {
+
+    // Updated Migration
     public function up()
-{
-    Schema::create('responses', function (Blueprint $table) {
-        $table->id();
-        $table->string('title');
-        $table->string('activity_type');
-        $table->date('start_date');
-        $table->date('end_date');
-        $table->string('proof')->nullable();
-        $table->unsignedBigInteger('faculty_id'); // Ensure it is unsignedBigInteger
-        $table->foreign('faculty_id')->references('id')->on('users')->onDelete('cascade'); // Add the foreign key constraint
-        $table->timestamps();
-    });
-}
+    {
+        Schema::create('responses', function (Blueprint $table) {
+            $table->id();
+            $table->string('title');
+            $table->string('organising_institute'); 
+            $table->text('address'); 
+            $table->unsignedBigInteger('department_id'); 
+            $table->unsignedBigInteger('faculty_id');
+            $table->dateTime('start_date'); 
+            $table->dateTime('end_date');   
+            $table->integer('num_days'); 
+            $table->string('activity_type');
+            $table->string('category'); 
+            $table->string('level'); 
+            $table->string('proof')->nullable();
+            $table->foreign('faculty_id')->references('id')->on('users')->onDelete('cascade');
+            $table->foreign('department_id')->references('id')->on('departments')->onDelete('cascade');
+            $table->timestamps();
+        });
+    }
 
 
     public function down()
diff --git a/resources/views/admin/responses.blade.php b/resources/views/admin/responses.blade.php
index 0a17c67..43fa466 100644
--- a/resources/views/admin/responses.blade.php
+++ b/resources/views/admin/responses.blade.php
@@ -9,22 +9,32 @@
             </h3>
         </div>
         <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto">
-                <table id="responses-table" class="table-auto w-full text-left border-collapse border border-gray-200 rounded-lg">
+            <!-- <div class="overflow-x-auto w-full"> -->
+            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
+                <table id="responses-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
                     <thead class="bg-gray-100">
                         <tr>
+                            <th class="px-4 py-2 border border-gray-200">ID</th>
                             <th class="px-4 py-2 border border-gray-200">Title</th>
-                            <th class="px-4 py-2 border border-gray-200">Activity Type</th>
-                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
-                            <th class="px-4 py-2 border border-gray-200">End Date</th>
+                            <th class="px-4 py-2 border border-gray-200">Organising Institute</th>
+                            <th class="px-4 py-2 border border-gray-200">Address</th>
+                            <th class="px-4 py-2 border border-gray-200">Department</th>
                             <th class="px-4 py-2 border border-gray-200">Faculty</th>
+                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
+                            <!-- <th class="px-4 py-2 border border-gray-200">Start Time</th> -->
+                            <th class="px-4 py-2 border border-gray-200">End Date</th>
+                            <!-- <th class="px-4 py-2 border border-gray-200">End Time</th> -->
+                            <th class="px-4 py-2 border border-gray-200">Num Days</th>
+                            <th class="px-4 py-2 border border-gray-200">Activity Type</th>
+                            <th class="px-4 py-2 border border-gray-200">Category</th>
+                            <th class="px-4 py-2 border border-gray-200">Level</th>
+                            <!-- <th class="px-4 py-2 border border-gray-200">Faculty</th> -->
                             <th class="px-4 py-2 border border-gray-200">Proof</th>
                         </tr>
                     </thead>
                     <tbody>
                     </tbody>
                 </table>
-
             </div>
         </div>
     </div>
@@ -33,12 +43,30 @@
 
 @section('scripts')
 <!-- DataTables JS -->
+
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
 <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
 <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
+<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
+<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
+<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
 
+<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
+<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
+<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> -->
+<!-- <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script> -->
 <script>
+
+
+
     $(document).ready(function() {
+
+    // let selectedDepartment = "";
+    const sheetName = "Provisional Sheet";
+
+
         var initAjaxRoute = function(route) {
             table = $("#responses-table").DataTable({
                 fnDestroy: true,
@@ -47,19 +75,115 @@
                 responsive: true,
                 ajax: {
                     url: route,
+                    // data: function(d){
+                    //     d.department = selectedDepartment;
+                    // }
                 },
                 columns: [
-                    { data: 'title', name: 'title' },
-                    { data: 'activity_type', name: 'activity_type' },
-                    { data: 'start_date', name: 'start_date' },
-                    { data: 'end_date', name: 'end_date' },
-                    { data: 'user_name', name: 'user_name' },
+                    { data: 'id', name: 'id', },
+                    { data: 'title', name: 'title', orderable: false},
+                    { data: 'organising_institute', name: 'organising_institute', orderable: false },
+                    { data: 'address', name: 'address' , orderable: false},
+                    { data: 'department_name', name: 'department' , orderable: false},
+                    { data: 'user_name', name: 'user_name', orderable: false },
+                    { data: 'start_date', name: 'start_date', orderable: false },
+                    // { data: 'start_time', name: 'start_time', orderable: false },
+                    { data: 'end_date', name: 'end_date', orderable: false },
+                    // { data: 'end_time', name: 'end_time', orderable: false },
+                    { data: 'num_days', name: 'num_days', orderable: false },
+                    { data: 'activity_type', name: 'activity_type', orderable: false },
+                    { data: 'category', name: 'category', orderable: false },
+                    { data: 'level', name: 'level', orderable: false },
                     { data: 'action', name: 'proof', orderable: false, searchable: false }, // View button for proof
                 ],
-                order: [[0, 'asc']],
+                columnDefs: [
+                {
+                    targets: 0, 
+                    // width: '170px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 1, 
+                    // width: '150px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 2, 
+                    // maxWidth: '150px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 3, 
+                    // maxWidth: '100px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 4, 
+                    // maxWidth: '300px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 5, 
+                    // maxWidth: '150px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 6, 
+                    // maxWidth: '100px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 7, 
+                    // maxWidth: '100px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 8, 
+                    // width: '100px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 9, 
+                    // width: '50px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 10, 
+                    // width: '120px', 
+                    className: 'text-center wrap-text', 
+                },
+                {
+                    targets: 11, 
+                    // width: '120px', 
+                    className: 'text-center wrap-text', 
+                },
+            ],
+            dom: 'Bfrtip',
+            buttons: [
+                { extend: 'copy', title: sheetName, exportOptions: exportOptions() },
+                { extend: 'csv', title: sheetName, exportOptions: exportOptions() },
+                { extend: 'excel', title: sheetName, exportOptions: exportOptions() },
+                { extend: 'pdf', title: sheetName, exportOptions: exportOptions() },
+                { extend: 'print', title: sheetName, exportOptions: exportOptions() }
+            ]
+                // order: [[4, 'asc']],
             });
         };
 
+        function exportOptions() {
+        return {
+            columns: ':visible',
+            format: {
+                body: function(data, row, column, node) {
+                    if ($(node).find('select').length) {
+                        return $(node).find("select option:selected").text();
+                    }
+                    return $(node).text();
+                }
+            }
+        };
+    }
+
         initAjaxRoute("{{ route('admin.responses.data') }}");
     });
 </script>
diff --git a/resources/views/faculty/response-form.blade.php b/resources/views/faculty/response-form.blade.php
index ccb7472..83f012c 100644
--- a/resources/views/faculty/response-form.blade.php
+++ b/resources/views/faculty/response-form.blade.php
@@ -15,57 +15,120 @@
             <form method="POST" action="{{ route('faculty.submitResponse') }}" enctype="multipart/form-data">
                 @csrf
                 <div class="px-4 py-5 sm:px-6">
-                    <div class="space-y-4">
-                        <!-- Title of Activity -->
-                        <div class="flex items-center">
-                            <label for="title" class="block text-sm font-medium text-gray-700">Title of Activity</label>
-                            <div class="mt-1">
-                                <input type="text" name="title" id="title" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                    <div class="space-y-6">
+
+                        <!-- Other Fields -->
+                        <div>
+                            <label for="title" class="block text-sm font-medium text-gray-700">Title/Description</label>
+                            <input type="text" name="title" id="title" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                        </div>
+
+                        <div>
+                            <label for="organising_institute" class="block text-sm font-medium text-gray-700">Organising Institute/Company</label>
+                            <input type="text" name="organising_institute" id="organising_institute" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                        </div>
+                        <div>
+                            <label for="address" class="block text-sm font-medium text-gray-700">Brief Address (City/State/Country)</label>
+                            <textarea name="address" id="address" rows="2" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required></textarea>
+                        </div>
+                        <!-- Department and Faculty Name -->
+                        <div class="grid grid-cols-2 sm:grid-cols-2 gap-4">
+                            <div>
+                                <label for="department" class="block text-sm font-medium text-gray-700">Department</label>
+                                <input type="text" name="department" id="department" value="{{ auth()->user()->department->name }}" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-gray-100" disabled>
+                            </div>
+                            <div>
+                                <label for="faculty_name" class="block text-sm font-medium text-gray-700">Faculty Name</label>
+                                <input type="text" name="faculty_name" id="faculty_name" value="{{ auth()->user()->name }}" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-gray-100" disabled>
                             </div>
                         </div>
 
-                        <!-- Type of Activity -->
-                        <div class="flex items-center">
-                            <label for="activity_type" class="block text-sm font-medium text-gray-700">Type of Activity</label>
-                            <div class="mt-1">
-                                <input type="text" name="activity_type" id="activity_type" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                        <!-- Start Date, End Date, Number of Days, Time -->
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
+                                <input type="date" name="start_date" id="start_date" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required onchange="calculateDays()">
+                            </div>
+                            <div>
+                                <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
+                                <input type="date" name="end_date" id="end_date" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required onchange="calculateDays()">
+                            </div>
+                            <div>
+                                <label for="num_days" class="block text-sm font-medium text-gray-700">Number of Days</label>
+                                <input type="text" name="num_days" id="num_days" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-gray-100" readonly>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <label for="time" class="block text-sm font-medium text-gray-700">Time from</label>
+                                <input type="time" name="start_time" id="start_time" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                            </div>
+                            <div>
+                                <label for="time" class="block text-sm font-medium text-gray-700">Time to</label>
+                                <input type="time" name="end_time" id="end_time" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
                             </div>
                         </div>
 
-                        <!-- Start Date -->
-                        <div class="flex items-center">
-                            <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
-                            <div class="mt-1">
-                                <input type="date" name="start_date" id="start_date" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                        <!-- Activity Type, Category, Level -->
+                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
+                            <div>
+                                <label for="activity_type" class="block text-sm font-medium text-gray-700">Select Activity Type</label>
+                                <select name="activity_type" id="activity_type" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                                    <option value="">Select</option>
+                                    <option value="GL">GL</option>
+                                    <option value="IC">IC</option>
+                                    <option value="STTP">STTP</option>
+                                </select>
                             </div>
-                        </div>
-
-                        <!-- End Date -->
-                        <div class="flex items-center">
-                            <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
-                            <div class="mt-1">
-                                <input type="date" name="end_date" id="end_date" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                            <div>
+                                <label for="category" class="block text-sm font-medium text-gray-700">Select Category</label>
+                                <select name="category" id="category" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                                    <option value="">Select</option>
+                                    <option value="Technical">Technical</option>
+                                    <option value="Social">Social</option>
+                                    <option value="Entrepreneurial">Entrepreneurial</option>
+                                    <option value="Life Skill">Life Skill</option>
+                                </select>
                             </div>
-                        </div>
-
-                        <!-- Proof of Activity -->
-                        <div class="flex items-center">
-                            <label for="proof" class="block text-sm font-medium text-gray-700">Proof of Activity</label>
-                            <div class="mt-1">
-                                <input type="file" name="proof" id="proof" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
+                            <div>
+                                <label for="level" class="block text-sm font-medium text-gray-700">Select Level</label>
+                                <select name="level" id="level" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
+                                    <option value="">Select</option>
+                                    <option value="College">College</option>
+                                    <option value="State">State</option>
+                                    <option value="National">National</option>
+                                    <option value="International">International</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label for="proof" class="block text-sm font-medium text-gray-700">Upload Proof/Document</label>
+                                <input type="file" name="proof" id="proof" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.zip" required>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <!-- Submit Button -->
-                <div class="px-4 py-3 sm:px-6 text-right">
-                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <div class="px-4 py-3 sm:px-6 text-center mt-4">
+                    <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-black">
                         Submit Response
                     </button>
                 </div>
+
             </form>
         </div>
     </div>
 </div>
-@endsection
+
+<script>
+    function calculateDays() {
+        const startDate = new Date(document.getElementById('start_date').value);
+        const endDate = new Date(document.getElementById('end_date').value);
+        if (startDate && endDate) {
+            const diffTime = Math.abs(endDate - startDate);
+            const numDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) || 1;
+            document.getElementById('num_days').value = numDays;
+        }
+    }
+</script>
+@endsection
\ No newline at end of file