<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ get_phrase('Instructor Application Approved') }}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
        }
        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .email-header {
            background-color: #2f57ef;
            color: #ffffff;
            text-align: center;
            padding: 20px;
            font-size: 24px;
            font-weight: bold;
        }
        .email-body {
            padding: 20px;
            color: #333333;
            font-size: 16px;
            line-height: 1.6;
        }
        .email-body .button-container {
            text-align: center;
            margin: 20px 0;
        }
        .email-body a.button {
            display: inline-block;
            background-color: #2f57ef;
            color: white;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .email-body a.button:hover {
            background-color: #1e46d0;
        }
        .email-footer {
            background-color: #f0f3ff;
            color: #2f57ef;
            text-align: center;
            padding: 10px;
            font-size: 14px;
            border-top: 1px solid #dddddd;
        }
        .application-details {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            border-left: 4px solid #2f57ef;
        }
        .thank-you {
            color: #2f57ef;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .status-approved {
            display: inline-block;
            background-color: #d4edda;
            color: #155724;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
        }
        .notification-info {
            background-color: #e7f3ff;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            border-left: 4px solid #2f57ef;
        }
        ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        li {
            margin-bottom: 8px;
        }
        .success-icon {
            color: #28a745;
            font-size: 20px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="email-container">
        <div class="email-header">
            {{ get_phrase('Instructor Application Approved') }}
        </div>
        <div class="email-body">
            <div class="thank-you">
                {{ get_phrase('Congratulations') }}, {{ $user->name }}! 🎉
            </div>

            <p>{{ get_phrase('We are pleased to inform you that your instructor application has been approved.') }}</p>

            <div class="application-details">
                <p><strong>{{ get_phrase('Application Details') }}:</strong></p>
                <p><strong>{{ get_phrase('Application ID') }}:</strong> 
                    @php
                        $applicationId = is_array($application) ? ($application['id'] ?? 'N/A') : ($application->id ?? 'N/A');
                        echo $applicationId;
                    @endphp
                </p>
                <p><strong>{{ get_phrase('Approval Date') }}:</strong>
                    @php
                        echo date('F d, Y');
                    @endphp
                </p>
                <p><strong>{{ get_phrase('Current Status') }}:</strong>
                    <span class="status-approved">{{ get_phrase('Approved') }}</span>
                </p>
            </div>

            <div class="notification-info">
                <p><strong>{{ get_phrase('Welcome to Our Instructor Community!') }}</strong></p>
                <p>{{ get_phrase('As an approved instructor, you now have access to all instructor features and tools.') }}</p>
            </div>

            <p><strong>{{ get_phrase('You now have access to') }}:</strong></p>
            <ul>
                <li><span class="success-icon">✓</span> {{ get_phrase('Instructor Dashboard') }}</li>
                <li><span class="success-icon">✓</span> {{ get_phrase('Course Creation Tools') }}</li>
                <li><span class="success-icon">✓</span> {{ get_phrase('Bootcamp Creation Tools') }}</li>
                <li><span class="success-icon">✓</span> {{ get_phrase('Blog Creation Tools') }}</li>
                <li><span class="success-icon">✓</span> {{ get_phrase('Revenue Tracking and Analytics') }}</li>
                <li><span class="success-icon">✓</span> {{ get_phrase('Student Management') }}</li>
                <li><span class="success-icon">✓</span> {{ get_phrase('Certificate Generation') }}</li>
            </ul>

            <div class="button-container">
                <a href="{{ url('/instructor/dashboard') }}" class="button">
                    {{ get_phrase('Access Instructor Dashboard') }}
                </a>
            </div>

            <p><strong>{{ get_phrase('Getting Started') }}:</strong></p>
            <ol>
                <li>{{ get_phrase('Log in to your account') }}</li>
                <li>{{ get_phrase('Access the instructor dashboard') }}</li>
                <li>{{ get_phrase('Create your first course or bootcamp') }}</li>
                <li>{{ get_phrase('Set up your instructor profile') }}</li>
                <li>{{ get_phrase('Start engaging with students') }}</li>
            </ol>

            <div class="notification-info">
                <p><strong>{{ get_phrase('Important Information') }}:</strong></p>
                <p>{{ get_phrase('Make sure to complete your instructor profile to increase student trust.') }}</p>
                <p>{{ get_phrase('Review our instructor guidelines and best practices.') }}</p>
                <p>{{ get_phrase('Check our revenue sharing model and payment schedule.') }}</p>
            </div>

            <p>{{ get_phrase('We are excited to have you as part of our instructor team and look forward to seeing the amazing content you will create!') }}</p>

            <p>{{ get_phrase('If you have any questions or need assistance, please contact our instructor support team.') }}</p>

            <p>{{ get_phrase('Once again, welcome aboard!') }}</p>
        </div>
        <div class="email-footer">
            <p><strong>{{ config('app.name') }}</strong></p>
            <p>{{ get_phrase('Grownesa Support Team') }}</p>
            <p><small>{{ get_phrase('This is an automated message. Please do not reply to this email.') }}</small></p>
        </div>
    </div>
</body>
</html>