From f6ddf1d9c15f86ebe132476b3281c63dc26c56e3 Mon Sep 17 00:00:00 2001
From: Nurmuhammet Allanov <nurmuhammet@mail.com>
Date: Tue, 29 Jul 2025 12:37:25 +0500
Subject: [PATCH] Enhance internship application process: update
 InternshipsPageController to retrieve internships and validate application
 submissions, modify Internship model to include relationships, and implement
 dynamic application modals in views for internships and careers. Update
 Livewire configuration for improved file upload handling.

---
 app/Filament/Resources/InternshipResource.php | 125 ++++++++++++++
 .../Pages/CreateInternship.php                |  12 ++
 .../Pages/EditInternship.php                  |  19 +++
 .../Pages/ListInternships.php                 |  19 +++
 .../ApplicationsRelationManager.php           |  83 +++++++++
 .../Controllers/InternshipsPageController.php |  31 +++-
 app/Models/Internship.php                     |  20 ++-
 app/Models/InternshipApplication.php          |  24 +++
 config/livewire.php                           | 159 +++++++++++++++--
 ...dd_internship_id_to_applications_table.php |  28 +++
 ...22832_add_columns_to_internships_table.php |  40 +++++
 ...7_create_internship_applications_table.php |  34 ++++
 ..._internship_id_from_applications_table.php |  29 ++++
 .../components/application_modal.blade.php    | 122 +++++++++++++
 .../views/web/pages/careers/index.blade.php   | 161 +++++++-----------
 .../views/web/pages/careers/show.blade.php    |  32 ++++
 .../web/pages/internships/index.blade.php     | 135 +++++++++++++++
 .../web/pages/internships/show.blade.php      |  32 ++++
 18 files changed, 986 insertions(+), 119 deletions(-)
 create mode 100644 app/Filament/Resources/InternshipResource.php
 create mode 100644 app/Filament/Resources/InternshipResource/Pages/CreateInternship.php
 create mode 100644 app/Filament/Resources/InternshipResource/Pages/EditInternship.php
 create mode 100644 app/Filament/Resources/InternshipResource/Pages/ListInternships.php
 create mode 100644 app/Filament/Resources/InternshipResource/RelationManagers/ApplicationsRelationManager.php
 create mode 100644 app/Models/InternshipApplication.php
 create mode 100644 database/migrations/2025_07_29_122320_add_internship_id_to_applications_table.php
 create mode 100644 database/migrations/2025_07_29_122832_add_columns_to_internships_table.php
 create mode 100644 database/migrations/2025_07_29_123157_create_internship_applications_table.php
 create mode 100644 database/migrations/2025_07_29_123220_drop_internship_id_from_applications_table.php
 create mode 100644 resources/views/web/components/application_modal.blade.php

diff --git a/app/Filament/Resources/InternshipResource.php b/app/Filament/Resources/InternshipResource.php
new file mode 100644
index 0000000..15028b3
--- /dev/null
+++ b/app/Filament/Resources/InternshipResource.php
@@ -0,0 +1,125 @@
+<?php
+
+namespace App\Filament\Resources;
+
+use App\Filament\Resources\InternshipResource\Pages;
+use App\Filament\Resources\InternshipResource\RelationManagers;
+use App\Models\Internship;
+use Filament\Forms;
+use Filament\Forms\Form;
+use Filament\Resources\Resource;
+use Filament\Tables;
+use Filament\Tables\Table;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\SoftDeletingScope;
+use Filament\Forms\Components\Repeater;
+use Filament\Forms\Components\TextInput;
+use Filament\Forms\Components\Textarea;
+
+class InternshipResource extends Resource
+{
+    protected static ?string $model = Internship::class;
+
+    protected static ?string $navigationGroup = 'Internships';
+
+    protected static ?string $navigationIcon = 'heroicon-o-academic-cap';
+
+    public static function form(Form $form): Form
+    {
+        return $form
+            ->schema([
+                TextInput::make('title')
+                    ->required()
+                    ->maxLength(255),
+
+                TextInput::make('location')
+                    ->required()
+                    ->maxLength(255),
+
+                Textarea::make('title_description')
+                    ->label('Description (show on modal)')
+                    ->required()
+                    ->maxLength(65535)
+                    ->columnSpan('full'),
+
+                TextInput::make('salary_per_month')
+                    ->required()
+                    ->numeric()
+                    ->label('Salary per month')
+                    ->maxLength(255),
+                Forms\Components\Select::make('salary_currency')
+                    ->options(getCurrencies())
+                    ->required()
+                    ->label('Salary currency')
+                    ->searchable()
+                    ->default('USD'),
+                    
+                Repeater::make('bullets')
+                    ->schema([
+                        TextInput::make('bullet')
+                            ->required()
+                            ->maxLength(255),
+                    ])
+                    ->minItems(1)
+                    ->defaultItems(1)
+                    ->columnSpan('full'),
+            ]);
+    }
+
+    public static function table(Table $table): Table
+    {
+        return $table
+            ->columns([
+                Tables\Columns\TextColumn::make('title')
+                    ->searchable(),
+                Tables\Columns\TextColumn::make('title_description')
+                    ->searchable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+                Tables\Columns\TextColumn::make('salary_per_month')
+                    ->searchable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+                Tables\Columns\TextColumn::make('salary_currency')
+                    ->searchable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+                Tables\Columns\TextColumn::make('location')
+                    ->searchable(),
+                Tables\Columns\TextColumn::make('salary')
+                    ->searchable(),
+                Tables\Columns\TextColumn::make('created_at')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+                Tables\Columns\TextColumn::make('updated_at')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+            ])
+            ->filters([
+                //
+            ])
+            ->actions([
+                Tables\Actions\EditAction::make(),
+            ])
+            ->bulkActions([
+                Tables\Actions\BulkActionGroup::make([
+                    Tables\Actions\DeleteBulkAction::make(),
+                ]),
+            ]);
+    }
+
+    public static function getRelations(): array
+    {
+        return [
+            RelationManagers\ApplicationsRelationManager::class,
+        ];
+    }
+
+    public static function getPages(): array
+    {
+        return [
+            'index' => Pages\ListInternships::route('/'),
+            'create' => Pages\CreateInternship::route('/create'),
+            'edit' => Pages\EditInternship::route('/{record}/edit'),
+        ];
+    }
+} 
\ No newline at end of file
diff --git a/app/Filament/Resources/InternshipResource/Pages/CreateInternship.php b/app/Filament/Resources/InternshipResource/Pages/CreateInternship.php
new file mode 100644
index 0000000..e77b067
--- /dev/null
+++ b/app/Filament/Resources/InternshipResource/Pages/CreateInternship.php
@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Filament\Resources\InternshipResource\Pages;
+
+use App\Filament\Resources\InternshipResource;
+use Filament\Actions;
+use Filament\Resources\Pages\CreateRecord;
+
+class CreateInternship extends CreateRecord
+{
+    protected static string $resource = InternshipResource::class;
+} 
\ No newline at end of file
diff --git a/app/Filament/Resources/InternshipResource/Pages/EditInternship.php b/app/Filament/Resources/InternshipResource/Pages/EditInternship.php
new file mode 100644
index 0000000..163f70c
--- /dev/null
+++ b/app/Filament/Resources/InternshipResource/Pages/EditInternship.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Filament\Resources\InternshipResource\Pages;
+
+use App\Filament\Resources\InternshipResource;
+use Filament\Actions;
+use Filament\Resources\Pages\EditRecord;
+
+class EditInternship extends EditRecord
+{
+    protected static string $resource = InternshipResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\DeleteAction::make(),
+        ];
+    }
+} 
\ No newline at end of file
diff --git a/app/Filament/Resources/InternshipResource/Pages/ListInternships.php b/app/Filament/Resources/InternshipResource/Pages/ListInternships.php
new file mode 100644
index 0000000..4b7a0c3
--- /dev/null
+++ b/app/Filament/Resources/InternshipResource/Pages/ListInternships.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Filament\Resources\InternshipResource\Pages;
+
+use App\Filament\Resources\InternshipResource;
+use Filament\Actions;
+use Filament\Resources\Pages\ListRecords;
+
+class ListInternships extends ListRecords
+{
+    protected static string $resource = InternshipResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            Actions\CreateAction::make(),
+        ];
+    }
+} 
\ No newline at end of file
diff --git a/app/Filament/Resources/InternshipResource/RelationManagers/ApplicationsRelationManager.php b/app/Filament/Resources/InternshipResource/RelationManagers/ApplicationsRelationManager.php
new file mode 100644
index 0000000..3a7a4aa
--- /dev/null
+++ b/app/Filament/Resources/InternshipResource/RelationManagers/ApplicationsRelationManager.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace App\Filament\Resources\InternshipResource\RelationManagers;
+
+use Filament\Forms;
+use Filament\Forms\Form;
+use Filament\Resources\RelationManagers\RelationManager;
+use Filament\Tables;
+use Filament\Tables\Table;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\SoftDeletingScope;
+use App\Models\InternshipApplication; // Added this use statement
+
+class ApplicationsRelationManager extends RelationManager
+{
+    protected static string $relationship = 'applications';
+
+    // Add this line to define the inverse relationship
+    protected static ?string $model = InternshipApplication::class;
+
+    public function form(Form $form): Form
+    {
+        return $form
+            ->schema([
+                Forms\Components\TextInput::make('name')
+                    ->required()
+                    ->maxLength(255),
+                Forms\Components\DatePicker::make('birthdate')
+                    ->required(),
+                Forms\Components\FileUpload::make('resume_file')
+                    ->required()
+                    ->acceptedFileTypes(['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'])
+                    ->disk('public') // or your preferred disk
+                    ->directory('resumes'),
+                Forms\Components\TextInput::make('email')
+                    ->email()
+                    ->required()
+                    ->maxLength(255),
+                Forms\Components\TextInput::make('phone_number')
+                    ->required()
+                    ->maxLength(20),
+                Forms\Components\Textarea::make('cover_letter')
+                    ->maxLength(65535)
+                    ->nullable()
+                    ->columnSpan('full'),
+            ]);
+    }
+
+    public function table(Table $table): Table
+    {
+        return $table
+            ->recordTitleAttribute('name')
+            ->columns([
+                Tables\Columns\TextColumn::make('name')
+                    ->searchable()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('email')
+                    ->searchable()
+                    ->sortable(),
+                Tables\Columns\TextColumn::make('phone_number')
+                    ->searchable(),
+                Tables\Columns\TextColumn::make('created_at')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+            ])
+            ->filters([
+                //
+            ])
+            ->headerActions([
+                Tables\Actions\CreateAction::make(),
+            ])
+            ->actions([
+                Tables\Actions\EditAction::make(),
+                Tables\Actions\DeleteAction::make(),
+            ])
+            ->bulkActions([
+                Tables\Actions\BulkActionGroup::make([
+                    Tables\Actions\DeleteBulkAction::make(),
+                ]),
+            ]);
+    }
+} 
\ No newline at end of file
diff --git a/app/Http/Controllers/InternshipsPageController.php b/app/Http/Controllers/InternshipsPageController.php
index 735a34f..2fb05c6 100644
--- a/app/Http/Controllers/InternshipsPageController.php
+++ b/app/Http/Controllers/InternshipsPageController.php
@@ -4,17 +4,44 @@ namespace App\Http\Controllers;
 
 use App\Models\Internship;
 use Illuminate\Http\Request;
+use App\Models\InternshipApplication; // Changed from App\Models\Application
 
 class InternshipsPageController extends Controller
 {
     public function index()
     {
-        return view('web.pages.internships.index');
+        $internships = Internship::query()->get();
+
+        return view('web.pages.internships.index', compact('internships'));
     }
 
     public function store(Request $request)
     {
-        dd($request->all());
+        $validatedData = $request->validate([
+            'internship_id' => 'required|exists:internships,id',
+            'name' => 'required|string|max:255',
+            'birthdate' => 'required|date',
+            'resume_file' => 'required|file|mimes:pdf,doc,docx|max:2048',
+            'email' => 'required|email|max:255',
+            'phone_number' => 'required|string',
+            'cover_letter' => 'nullable|string',
+        ]);
+
+        $resumePath = $request->file('resume_file')->store('resumes');
+
+        InternshipApplication::create([ // Changed to InternshipApplication::create
+            'internship_id' => $validatedData['internship_id'],
+            'name' => $validatedData['name'],
+            'birthdate' => $validatedData['birthdate'],
+            'resume_file' => $resumePath,
+            'email' => $validatedData['email'],
+            'phone_number' => $validatedData['phone_number'],
+            'cover_letter' => $validatedData['cover_letter'] ?? null,
+        ]);
+
+        return response()->json([
+            'message' => 'Your application has been submitted successfully!',
+        ]);
     }
 
     public function show(Internship $internship)
diff --git a/app/Models/Internship.php b/app/Models/Internship.php
index b1d105a..609055e 100644
--- a/app/Models/Internship.php
+++ b/app/Models/Internship.php
@@ -3,8 +3,26 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use App\Models\InternshipApplication;
 
 class Internship extends Model
 {
-    //
+    protected $fillable = [
+        'title',
+        'title_description',
+        'salary_per_month',
+        'bullets',
+        'location',
+        'salary_currency',
+    ];
+
+    protected $casts = [
+        'bullets' => 'array',
+    ];
+
+    public function applications(): HasMany
+    {
+        return $this->hasMany(InternshipApplication::class);
+    }
 }
diff --git a/app/Models/InternshipApplication.php b/app/Models/InternshipApplication.php
new file mode 100644
index 0000000..295a6d6
--- /dev/null
+++ b/app/Models/InternshipApplication.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class InternshipApplication extends Model
+{
+    protected $fillable = [
+        'internship_id',
+        'name',
+        'birthdate',
+        'resume_file',
+        'email',
+        'phone_number',
+        'cover_letter',
+    ];
+
+    public function internship(): BelongsTo
+    {
+        return $this->belongsTo(Internship::class);
+    }
+} 
\ No newline at end of file
diff --git a/config/livewire.php b/config/livewire.php
index af15a0a..88e0947 100644
--- a/config/livewire.php
+++ b/config/livewire.php
@@ -3,33 +3,158 @@
 return [
 
     /*
-    |--------------------------------------------------------------------------
-    | Livewire Temporary File Uploads
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
+    | Class Namespace
+    |---------------------------------------------------------------------------
     |
-    | By default, Livewire will upload temporary files to the local disk
-    | and clear them after a maximum of 5 minutes. You may customize
-    | this process by changing the "disk" and "max_upload_time" properties.
+    | This value sets the root class namespace for Livewire component classes in
+    | your application. This value will change where component auto-discovery
+    | finds components. It's also referenced by the file creation commands.
+    |
+    */
+
+    'class_namespace' => 'App\\Livewire',
+
+    /*
+    |---------------------------------------------------------------------------
+    | View Path
+    |---------------------------------------------------------------------------
+    |
+    | This value is used to specify where Livewire component Blade templates are
+    | stored when running file creation commands like `artisan make:livewire`.
+    | It is also used if you choose to omit a component's render() method.
+    |
+    */
+
+    'view_path' => resource_path('views/livewire'),
+
+    /*
+    |---------------------------------------------------------------------------
+    | Layout
+    |---------------------------------------------------------------------------
+    | The view that will be used as the layout when rendering a single component
+    | as an entire page via `Route::get('/post/create', CreatePost::class);`.
+    | In this case, the view returned by CreatePost will render into $slot.
+    |
+    */
+
+    'layout' => 'components.layouts.app',
+
+    /*
+    |---------------------------------------------------------------------------
+    | Lazy Loading Placeholder
+    |---------------------------------------------------------------------------
+    | Livewire allows you to lazy load components that would otherwise slow down
+    | the initial page load. Every component can have a custom placeholder or
+    | you can define the default placeholder view for all components below.
+    |
+    */
+
+    'lazy_placeholder' => null,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Temporary File Uploads
+    |---------------------------------------------------------------------------
+    |
+    | Livewire handles file uploads by storing uploads in a temporary directory
+    | before the file is stored permanently. All file uploads are directed to
+    | a global endpoint for temporary storage. You may configure this below:
     |
     */
 
     'temporary_file_upload' => [
-        'disk' => 'public', // This is the default disk for temporary uploads.
-        'rules' => null, // Set this to null to use default upload rules (e.g., file size, mime types).
-        'middleware' => null, // Set this to null to use default middleware for temporary uploads.
-        'max_upload_time' => 30, // The maximum number of minutes a temporary file can be stored.
+        'disk' => null,        // Example: 'local', 's3'              | Default: 'default'
+        'rules' => ['required', 'file', 'max:100000'],       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
+        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
+        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
+            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
+            'mov', 'avi', 'wmv', 'mp3', 'm4a',
+            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
+        ],
+        'max_upload_time' => 20, // Max duration (in minutes) before an upload is invalidated...
+        'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
     ],
 
     /*
-    |--------------------------------------------------------------------------
-    | Livewire App URL
-    |--------------------------------------------------------------------------
+    |---------------------------------------------------------------------------
+    | Render On Redirect
+    |---------------------------------------------------------------------------
     |
-    | This is the app URL that Livewire will use to make requests to.
-    | If you're using a custom domain, you may need to change this.
+    | This value determines if Livewire will run a component's `render()` method
+    | after a redirect has been triggered using something like `redirect(...)`
+    | Setting this to true will render the view once more before redirecting
     |
     */
 
-    'app_url' => env('APP_URL'),
+    'render_on_redirect' => false,
 
-]; 
\ No newline at end of file
+    /*
+    |---------------------------------------------------------------------------
+    | Eloquent Model Binding
+    |---------------------------------------------------------------------------
+    |
+    | Previous versions of Livewire supported binding directly to eloquent model
+    | properties using wire:model by default. However, this behavior has been
+    | deemed too "magical" and has therefore been put under a feature flag.
+    |
+    */
+
+    'legacy_model_binding' => false,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Auto-inject Frontend Assets
+    |---------------------------------------------------------------------------
+    |
+    | By default, Livewire automatically injects its JavaScript and CSS into the
+    | <head> and <body> of pages containing Livewire components. By disabling
+    | this behavior, you need to use @livewireStyles and @livewireScripts.
+    |
+    */
+
+    'inject_assets' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Navigate (SPA mode)
+    |---------------------------------------------------------------------------
+    |
+    | By adding `wire:navigate` to links in your Livewire application, Livewire
+    | will prevent the default link handling and instead request those pages
+    | via AJAX, creating an SPA-like effect. Configure this behavior here.
+    |
+    */
+
+    'navigate' => [
+        'show_progress_bar' => true,
+        'progress_bar_color' => '#2299dd',
+    ],
+
+    /*
+    |---------------------------------------------------------------------------
+    | HTML Morph Markers
+    |---------------------------------------------------------------------------
+    |
+    | Livewire intelligently "morphs" existing HTML into the newly rendered HTML
+    | after each update. To make this process more reliable, Livewire injects
+    | "markers" into the rendered Blade surrounding @if, @class & @foreach.
+    |
+    */
+
+    'inject_morph_markers' => true,
+
+    /*
+    |---------------------------------------------------------------------------
+    | Pagination Theme
+    |---------------------------------------------------------------------------
+    |
+    | When enabling Livewire's pagination feature by using the `WithPagination`
+    | trait, Livewire will use Tailwind templates to render pagination views
+    | on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
+    |
+    */
+
+    'pagination_theme' => 'tailwind',
+];
diff --git a/database/migrations/2025_07_29_122320_add_internship_id_to_applications_table.php b/database/migrations/2025_07_29_122320_add_internship_id_to_applications_table.php
new file mode 100644
index 0000000..56a05e3
--- /dev/null
+++ b/database/migrations/2025_07_29_122320_add_internship_id_to_applications_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('applications', function (Blueprint $table) {
+            $table->foreignId('internship_id')->nullable()->constrained()->onDelete('set null');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('applications', function (Blueprint $table) {
+            $table->dropConstrainedForeignId('internship_id');
+        });
+    }
+};
diff --git a/database/migrations/2025_07_29_122832_add_columns_to_internships_table.php b/database/migrations/2025_07_29_122832_add_columns_to_internships_table.php
new file mode 100644
index 0000000..c900ff4
--- /dev/null
+++ b/database/migrations/2025_07_29_122832_add_columns_to_internships_table.php
@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('internships', function (Blueprint $table) {
+            $table->string('title');
+            $table->text('title_description');
+            $table->string('salary_per_month');
+            $table->json('bullets');
+            $table->string('location');
+            $table->string('salary_currency');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('internships', function (Blueprint $table) {
+            $table->dropColumn([
+                'title',
+                'title_description',
+                'salary_per_month',
+                'bullets',
+                'location',
+                'salary_currency',
+            ]);
+        });
+    }
+};
diff --git a/database/migrations/2025_07_29_123157_create_internship_applications_table.php b/database/migrations/2025_07_29_123157_create_internship_applications_table.php
new file mode 100644
index 0000000..7e44052
--- /dev/null
+++ b/database/migrations/2025_07_29_123157_create_internship_applications_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('internship_applications', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('internship_id')->constrained()->onDelete('cascade');
+            $table->string('name');
+            $table->date('birthdate');
+            $table->string('resume_file');
+            $table->string('email');
+            $table->string('phone_number');
+            $table->text('cover_letter')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('internship_applications');
+    }
+};
diff --git a/database/migrations/2025_07_29_123220_drop_internship_id_from_applications_table.php b/database/migrations/2025_07_29_123220_drop_internship_id_from_applications_table.php
new file mode 100644
index 0000000..aadba3d
--- /dev/null
+++ b/database/migrations/2025_07_29_123220_drop_internship_id_from_applications_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('applications', function (Blueprint $table) {
+            $table->dropForeign(['internship_id']);
+            $table->dropColumn('internship_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('applications', function (Blueprint $table) {
+            $table->foreignId('internship_id')->nullable()->constrained()->onDelete('set null');
+        });
+    }
+};
diff --git a/resources/views/web/components/application_modal.blade.php b/resources/views/web/components/application_modal.blade.php
new file mode 100644
index 0000000..a87f873
--- /dev/null
+++ b/resources/views/web/components/application_modal.blade.php
@@ -0,0 +1,122 @@
+<div class="modal fade" id="applyInternshipModal" tabindex="-1" aria-labelledby="applyInternshipModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content rounded-3">
+            <div class="modal-header">
+                <h5 class="modal-title" id="applicationModalLabel">Apply for <span id="jobTitle"></span></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <h6 id="jobLocation"></h6>
+                <p id="jobSalary"></p>
+                <p id="jobDescription"></p>
+                <form id="applicationForm" enctype="multipart/form-data" action="{{ $jobType === 'internship' ? route('internship.store') : route('career.store') }}" method="POST">
+                    @csrf
+                    @if($jobType === 'internship')
+                        <input type="hidden" name="internship_id" id="jobIdInput" value="{{ $jobId }}">
+                    @else
+                        <input type="hidden" name="career_id" id="jobIdInput" value="{{ $jobId }}">
+                    @endif
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="name" class="form-label">Name <span> *</span></label>
+                            <input type="text" class="form-control" id="name" name="name" required>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="birthdate" class="form-label">Birthdate <span> *</span></label>
+                            <input type="date" class="form-control" id="birthdate" name="birthdate" required>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6 mb-3">
+                            <label for="email" class="form-label">Email <span> *</span></label>
+                            <input type="email" class="form-control" id="email" name="email" required>
+                        </div>
+                        <div class="col-md-6 mb-3">
+                            <label for="phone_number" class="form-label">Phone Number <span> *</span></label>
+                            <input type="text" class="form-control" id="phone_number" name="phone_number" required>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="resume_file" class="form-label">Resume (PDF, DOC, DOCX) <span> *</span></label>
+                        <input type="file" class="form-control" id="resume_file" name="resume_file" accept=".pdf,.doc,.docx" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="cover_letter" class="form-label">Cover Letter (Optional)</label>
+                        <textarea class="form-control" id="cover_letter" name="cover_letter" rows="5"></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Submit Application</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('scripts')
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var applicationModal = document.getElementById('applyInternshipModal'); // Changed ID here
+        if (applicationModal) { // Add a check for modal existence
+            applicationModal.addEventListener('show.bs.modal', function (event) {
+                var button = event.relatedTarget; // Button that triggered the modal
+                var jobId = button.getAttribute('data-job-id'); // Generic attribute for job ID
+                var jobType = button.getAttribute('data-job-type'); // Generic attribute for job type
+
+                var modalTitle = applicationModal.querySelector('#jobTitle');
+                var modalLocation = applicationModal.querySelector('#jobLocation');
+                var modalSalary = applicationModal.querySelector('#jobSalary');
+                var modalDescription = applicationModal.querySelector('#jobDescription');
+                var jobIdInput = applicationModal.querySelector('#jobIdInput');
+                var applicationForm = applicationModal.querySelector('#applicationForm');
+
+                // Set dynamic values
+                modalTitle.textContent = button.getAttribute('data-' + jobType + '-title');
+                modalLocation.textContent = 'Location: ' + button.getAttribute('data-' + jobType + '-location');
+                modalSalary.textContent = 'Salary: ' + button.getAttribute('data-' + jobType + '-salary') + ' / Per monthly';
+                modalDescription.textContent = button.getAttribute('data-' + jobType + '-description');
+                jobIdInput.value = jobId;
+
+                // Set form action dynamically
+                if (jobType === 'internship') {
+                    applicationForm.action = '{{ route('internship.store') }}';
+                    jobIdInput.name = 'internship_id';
+                } else if (jobType === 'career') {
+                    applicationForm.action = '{{ route('applications.store') }}'; // Assuming careers still use applications.store
+                    jobIdInput.name = 'career_id';
+                }
+            });
+
+            // Handle form submission with AJAX
+            document.getElementById('applicationForm').addEventListener('submit', function (e) {
+                e.preventDefault();
+
+                let form = e.target;
+                let formData = new FormData(form);
+
+                fetch(form.action, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.message) {
+                        alert(data.message);
+                        var modal = bootstrap.Modal.getInstance(applicationModal);
+                        modal.hide();
+                        form.reset();
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred. Please try again.');
+                });
+            });
+        }
+    });
+</script>
+@endpush 
\ No newline at end of file
diff --git a/resources/views/web/pages/careers/index.blade.php b/resources/views/web/pages/careers/index.blade.php
index c4d081c..62a5761 100644
--- a/resources/views/web/pages/careers/index.blade.php
+++ b/resources/views/web/pages/careers/index.blade.php
@@ -47,7 +47,7 @@
                             </ul>
                         </div>
                         <div class="price__area-item-btn">
-                            <button type="button" class="build_button apply-now-button" data-bs-toggle="modal" data-bs-target="#applicationModal" data-career-title="{{ $career->title }}" data-career-location="{{ $career->location }}" data-career-salary="{{ $career->salary_per_month }}" data-career-description="{{ $career->title_description }}" data-career-id="{{ $career->id }}">Apply Now<i class="flaticon-right-up"></i></button>
+                            <button type="button" class="build_button apply-now-button" data-bs-toggle="modal" data-bs-target="#applyInternshipModal" data-job-id="{{ $career->id }}" data-job-type="career" data-career-title="{{ $career->title }}" data-career-location="{{ $career->location }}" data-career-salary="{{ $career->salary_per_month }}" data-career-description="{{ $career->title_description }}">Apply Now<i class="flaticon-right-up"></i></button>
                         </div>
                     </div>
                     @empty
@@ -59,114 +59,77 @@
     </div>
     <!-- Pricing Plan Area End -->
 
-    <!-- Application Modal -->
-    <div class="modal fade" id="applicationModal" tabindex="-1" aria-labelledby="applicationModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content rounded-3">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="applicationModalLabel">Apply for <span id="jobTitle"></span></h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <h6 id="jobLocation"></h6>
-                    <p id="jobSalary"></p>
-                    <p id="jobDescription"></p>
-                    <form id="applicationForm" enctype="multipart/form-data" action="{{ route('applications.store') }}" method="POST">
-                        @csrf
-                        <input type="hidden" name="career_id" id="careerId">
-                        <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="name" class="form-label">Name <span> *</span></label>
-                                <input type="text" class="form-control" id="name" name="name" required>
-                            </div>
-                            <div class="col-md-6 mb-3">
-                                <label for="birthdate" class="form-label">Birthdate <span> *</span></label>
-                                <input type="date" class="form-control" id="birthdate" name="birthdate" required>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="email" class="form-label">Email <span> *</span></label>
-                                <input type="email" class="form-control" id="email" name="email" required>
-                            </div>
-                            <div class="col-md-6 mb-3">
-                                <label for="phone_number" class="form-label">Phone Number <span> *</span></label>
-                                <input type="text" class="form-control" id="phone_number" name="phone_number" required>
-                            </div>
-                        </div>
-                        <div class="mb-3">
-                            <label for="resume_file" class="form-label">Resume (PDF, DOC, DOCX) <span> *</span></label>
-                            <input type="file" class="form-control" id="resume_file" name="resume_file" accept=".pdf,.doc,.docx" required>
-                        </div>
-                        <div class="mb-3">
-                            <label for="cover_letter" class="form-label">Cover Letter (Optional)</label>
-                            <textarea class="form-control" id="cover_letter" name="cover_letter" rows="5"></textarea>
-                        </div>
-                        <button type="submit" class="btn btn-primary">Submit Application</button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-
 @endsection
 
+{{-- Application Modal --}}
+@include('web.components.application_modal', ['jobId' => null, 'jobType' => 'career']) {{-- jobId will be set by JS from button data attributes --}}
+
 @push('footer-js')
 <script>
     document.addEventListener('DOMContentLoaded', function () {
-        var applicationModal = document.getElementById('applicationModal');
-        applicationModal.addEventListener('show.bs.modal', function (event) {
-            var button = event.relatedTarget;
-            var careerTitle = button.getAttribute('data-career-title');
-            var careerLocation = button.getAttribute('data-career-location');
-            var careerSalary = button.getAttribute('data-career-salary');
-            var careerDescription = button.getAttribute('data-career-description');
-            var careerId = button.getAttribute('data-career-id');
+        var applicationModal = document.getElementById('applyInternshipModal');
+        if (applicationModal) {
+            applicationModal.addEventListener('show.bs.modal', function (event) {
+                var button = event.relatedTarget; // Button that triggered the modal
+                var jobId = button.getAttribute('data-job-id'); // Generic attribute for job ID
+                var jobType = button.getAttribute('data-job-type'); // Generic attribute for job type
 
-            var modalTitle = applicationModal.querySelector('#jobTitle');
-            var modalLocation = applicationModal.querySelector('#jobLocation');
-            var modalSalary = applicationModal.querySelector('#jobSalary');
-            var modalDescription = applicationModal.querySelector('#jobDescription');
-            var modalCareerId = applicationModal.querySelector('#careerId');
+                var modalTitle = applicationModal.querySelector('#jobTitle');
+                var modalLocation = applicationModal.querySelector('#jobLocation');
+                var modalSalary = applicationModal.querySelector('#jobSalary');
+                var modalDescription = applicationModal.querySelector('#jobDescription');
+                var jobIdInput = applicationModal.querySelector('#jobIdInput');
+                var applicationForm = applicationModal.querySelector('#applicationForm');
 
-            modalTitle.textContent = careerTitle;
-            modalLocation.textContent = 'Location: ' + careerLocation;
-            modalSalary.textContent = 'Salary: ' + careerSalary + ' / Per monthly';
-            modalDescription.textContent = careerDescription;
-            modalCareerId.value = careerId;
-        });
+                // Set dynamic values
+                modalTitle.textContent = button.getAttribute('data-' + jobType + '-title');
+                modalLocation.textContent = 'Location: ' + button.getAttribute('data-' + jobType + '-location');
+                modalSalary.textContent = 'Salary: ' + button.getAttribute('data-' + jobType + '-salary') + ' / Per monthly';
+                modalDescription.textContent = button.getAttribute('data-' + jobType + '-description');
+                jobIdInput.value = jobId;
 
-        // Handle form submission with AJAX
-        document.getElementById('applicationForm').addEventListener('submit', function (e) {
-            e.preventDefault();
-
-            let form = e.target;
-            let formData = new FormData(form);
-
-            fetch(form.action, {
-                method: 'POST',
-                body: formData,
-                headers: {
-                    'Accept': 'application/json',
-                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                // Set form action dynamically
+                if (jobType === 'internship') {
+                    applicationForm.action = '{{ route('internship.store') }}';
+                    jobIdInput.name = 'internship_id';
+                } else if (jobType === 'career') {
+                    applicationForm.action = '{{ route('applications.store') }}'; // Assuming careers still use applications.store
+                    jobIdInput.name = 'career_id';
                 }
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.message) {
-                    alert(data.message);
-                    var modal = bootstrap.Modal.getInstance(applicationModal);
-                    modal.hide();
-                    form.reset();
-                } else {
-                    alert('Error: ' + data.message);
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                alert('An error occurred. Please try again.');
             });
-        });
+
+            // Handle form submission with AJAX
+            document.getElementById('applicationForm').addEventListener('submit', function (e) {
+                e.preventDefault();
+
+                let form = e.target;
+                let formData = new FormData(form);
+
+                fetch(form.action, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.message) {
+                        alert(data.message);
+                        var modal = bootstrap.Modal.getInstance(applicationModal);
+                        modal.hide();
+                        form.reset();
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred. Please try again.');
+                });
+            });
+        }
     });
 </script>
 @endpush
\ No newline at end of file
diff --git a/resources/views/web/pages/careers/show.blade.php b/resources/views/web/pages/careers/show.blade.php
index e69de29..6d5120e 100644
--- a/resources/views/web/pages/careers/show.blade.php
+++ b/resources/views/web/pages/careers/show.blade.php
@@ -0,0 +1,32 @@
+@extends('web.layouts.app')
+
+@section('title', $career->title)
+
+@section('content')
+    <!-- Main Content for Single Career Page -->
+    <div class="container">
+        <h1>{{ $career->title }}</h1>
+        <p><strong>{{ __('Location:') }}</strong> {{ $career->location }}</p>
+        <p><strong>{{ __('Salary:') }}</strong> {{ $career->salary_per_month }} {{ $career->salary_currency }}</p>
+
+        <h2>{{ __('Description') }}</h2>
+        <p>{{ $career->title_description }}</p>
+
+        @if ($career->bullets)
+            <h3>{{ __('Responsibilities and Qualifications') }}</h3>
+            <ul>
+                @foreach ($career->bullets as $bullet)
+                    <li>{{ $bullet['bullet'] }}</li>
+                @endforeach
+            </ul>
+        @endif
+
+        <!-- Apply Button - Triggers Modal -->
+        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#applyInternshipModal">
+            {{ __('Apply for this Career') }}
+        </button>
+    </div>
+
+    <!-- Application Modal -->
+    @include('web.components.application_modal', ['jobId' => $career->id, 'jobType' => 'career'])
+@endsection
diff --git a/resources/views/web/pages/internships/index.blade.php b/resources/views/web/pages/internships/index.blade.php
index e69de29..2638995 100644
--- a/resources/views/web/pages/internships/index.blade.php
+++ b/resources/views/web/pages/internships/index.blade.php
@@ -0,0 +1,135 @@
+@extends('web.layouts.app')
+
+@push('header-css')
+    <style>
+        #applicationForm > label > span {
+            color: var(--gujurly-primary);
+        }
+    </style>
+@endpush
+
+@section('content')
+     <!-- Breadcrumb Area Start -->
+     <div class="breadcrumb__area" style="background-image: url('/web/assets/img/page/breadcrumb.jpg');">
+		<div class="container">
+			<div class="row">
+				<div class="col-xl-12">
+					<div class="breadcrumb__area-content">
+						<h2>Internships</h2>
+						<ul>
+							<li><a href="/">Home</a><i class="fa-regular fa-angle-right"></i></li>
+							<li>Internships</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>       
+    <!-- Breadcrumb Area End -->
+    <!-- Pricing Plan Area Start -->
+    <div class="price__area section-padding">
+        <div class="container">
+            <div class="row">
+                <div class="col-xl-4 col-md-6 xl-mb-25 wow fadeInUp" data-wow-delay=".4s">
+                    @forelse ($internships as $internship)    
+                    <div class="price__area-item">
+                        <div class="price__area-item-price">
+                            <span>{{ $internship->title }}</span>
+                            <h3>{{ $internship->location }}</h3>
+                            <h2>{{ $internship->salary_per_month }} {{ $internship->salary_currency }}</h2>
+                            <span>Per monthly</span>
+                        </div>
+                        <div class="price__area-item-list">
+                            <ul>
+                                @foreach($internship->bullets as $bullet)
+                                    <li><i class="flaticon-checked"></i>{{ $bullet['bullet'] ?? '' }}</li>
+                                @endforeach
+                            </ul>
+                        </div>
+                        <div class="price__area-item-btn">
+                            <button type="button" class="build_button apply-now-button" data-bs-toggle="modal" data-bs-target="#applyInternshipModal" data-job-id="{{ $internship->id }}" data-job-type="internship" data-internship-title="{{ $internship->title }}" data-internship-location="{{ $internship->location }}" data-internship-salary="{{ $internship->salary_per_month }}" data-internship-description="{{ $internship->title_description }}">Apply Now<i class="flaticon-right-up"></i></button>
+                        </div>
+                    </div>
+                    @empty
+                        <span>No internships found...</span>
+                    @endforelse
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Pricing Plan Area End -->
+
+{{-- Application Modal --}}
+@include('web.components.application_modal', ['jobId' => null, 'jobType' => 'internship']) {{-- jobId will be set by JS from button data attributes --}}
+
+@endsection
+
+@push('footer-js')
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var applicationModal = document.getElementById('applyInternshipModal');
+        if (applicationModal) {
+            applicationModal.addEventListener('show.bs.modal', function (event) {
+                var button = event.relatedTarget; // Button that triggered the modal
+                var jobId = button.getAttribute('data-job-id'); // Generic attribute for job ID
+                var jobType = button.getAttribute('data-job-type'); // Generic attribute for job type
+
+                var modalTitle = applicationModal.querySelector('#jobTitle');
+                var modalLocation = applicationModal.querySelector('#jobLocation');
+                var modalSalary = applicationModal.querySelector('#jobSalary');
+                var modalDescription = applicationModal.querySelector('#jobDescription');
+                var jobIdInput = applicationModal.querySelector('#jobIdInput');
+                var applicationForm = applicationModal.querySelector('#applicationForm');
+
+                // Set dynamic values
+                modalTitle.textContent = button.getAttribute('data-' + jobType + '-title');
+                modalLocation.textContent = 'Location: ' + button.getAttribute('data-' + jobType + '-location');
+                modalSalary.textContent = 'Salary: ' + button.getAttribute('data-' + jobType + '-salary') + ' / Per monthly';
+                modalDescription.textContent = button.getAttribute('data-' + jobType + '-description');
+                jobIdInput.value = jobId;
+
+                // Set form action dynamically
+                if (jobType === 'internship') {
+                    applicationForm.action = '{{ route('internship.store') }}';
+                    jobIdInput.name = 'internship_id';
+                } else if (jobType === 'career') {
+                    applicationForm.action = '{{ route('applications.store') }}'; // Assuming careers still use applications.store
+                    jobIdInput.name = 'career_id';
+                }
+            });
+
+            // Handle form submission with AJAX
+            document.getElementById('applicationForm').addEventListener('submit', function (e) {
+                e.preventDefault();
+
+                let form = e.target;
+                let formData = new FormData(form);
+
+                fetch(form.action, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.message) {
+                        alert(data.message);
+                        var modal = bootstrap.Modal.getInstance(applicationModal);
+                        modal.hide();
+                        form.reset();
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred. Please try again.');
+                });
+            });
+        }
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/web/pages/internships/show.blade.php b/resources/views/web/pages/internships/show.blade.php
index e69de29..2b5cc09 100644
--- a/resources/views/web/pages/internships/show.blade.php
+++ b/resources/views/web/pages/internships/show.blade.php
@@ -0,0 +1,32 @@
+@extends('web.layouts.app')
+
+@section('title', $internship->title)
+
+@section('content')
+    <!-- Main Content for Single Internship Page -->
+    <div class="container">
+        <h1>{{ $internship->title }}</h1>
+        <p><strong>{{ __('Location:') }}</strong> {{ $internship->location }}</p>
+        <p><strong>{{ __('Salary:') }}</strong> {{ $internship->salary_per_month }} {{ $internship->salary_currency }}</p>
+
+        <h2>{{ __('Description') }}</h2>
+        <p>{{ $internship->title_description }}</p>
+
+        @if ($internship->bullets)
+            <h3>{{ __('Responsibilities and Qualifications') }}</h3>
+            <ul>
+                @foreach ($internship->bullets as $bullet)
+                    <li>{{ $bullet['bullet'] }}</li>
+                @endforeach
+            </ul>
+        @endif
+
+        <!-- Apply Button - Triggers Modal -->
+        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#applyInternshipModal">
+            {{ __('Apply for this Internship') }}
+        </button>
+    </div>
+
+    <!-- Application Modal -->
+    @include('web.components.application_modal', ['jobId' => $internship->id, 'jobType' => 'internship'])
+@endsection