@extends('emails.layouts.main')

@section('title', 'Course Update Notification')

@section('content')
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="px-50 mpx-15" style="padding-left: 50px; padding-right: 50px;">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="pb-30" style="padding-bottom: 30px;">
                            <div class="h3" style="font-family:'PT Sans', Arial, sans-serif; font-size:20px; color:#2c3e50; margin-bottom: 10px;">
                                Course Updated: {{ $course->title }}
                            </div>
                            <div class="text" style="font-family:'PT Sans', Arial, sans-serif; font-size:14px; color:#6e6e6e;">
                                A course has been updated in the system. Here are the details:
                            </div>
                        </td>
                    </tr>

                    <!-- Course Details -->
                    <tr>
                        <td class="pb-20" style="padding-bottom: 20px;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color: #f8f9fa; padding: 15px; border-radius: 5px;">
                                <tr>
                                    <td style="font-family:'PT Sans', Arial, sans-serif; font-size:14px; color:#2c3e50; padding: 5px;">
                                        <strong>Course ID:</strong> {{ $course->id }}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-family:'PT Sans', Arial, sans-serif; font-size:14px; color:#2c3e50; padding: 5px;">
                                        <strong>Course Title:</strong> {{ $course->title }}
                                    </td>
                                </tr>
                                <tr>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <!-- Changes -->
                    <tr>
                        <td class="pb-20" style="padding-bottom: 20px;">
                            <div class="h3" style="font-family:'PT Sans', Arial, sans-serif; font-size:16px; color:#2c3e50; margin-bottom: 10px;">
                                Changed Fields:
                            </div>
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #ddd;">
                                <thead>
                                    <tr style="background-color: #2c3e50;">
                                        <th style="font-family:'PT Sans', Arial, sans-serif; font-size:14px; color:#ffffff; padding: 10px; text-align: left; border-bottom: 1px solid #ddd;">
                                            Field
                                        </th>
                                        <th style="font-family:'PT Sans', Arial, sans-serif; font-size:14px; color:#ffffff; padding: 10px; text-align: left; border-bottom: 1px solid #ddd;">
                                            Old Value
                                        </th>
                                        <th style="font-family:'PT Sans', Arial, sans-serif; font-size:14px; color:#ffffff; padding: 10px; text-align: left; border-bottom: 1px solid #ddd;">
                                            New Value
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($changes as $change)
                                    <tr style="background-color: {{ $loop->iteration % 2 == 0 ? '#f8f9fa' : '#ffffff' }};">
                                        <td style="font-family:'PT Sans', Arial, sans-serif; font-size:13px; color:#2c3e50; padding: 10px; border-bottom: 1px solid #ddd;">
                                            <strong>{{ $change['field'] }}</strong>
                                        </td>
                                        <td style="font-family:'PT Sans', Arial, sans-serif; font-size:13px; color:#6e6e6e; padding: 10px; border-bottom: 1px solid #ddd;">
                                            {{ $change['old_value'] }}
                                        </td>
                                        <td style="font-family:'PT Sans', Arial, sans-serif; font-size:13px; color:#27ae60; padding: 10px; border-bottom: 1px solid #ddd;">
                                            {{ $change['new_value'] }}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </td>
                    </tr>

                    <!-- View Course Button -->
                    <tr>
                        <td class="pt-10" style="padding-top: 10px;">
                            <table border="0" cellspacing="0" cellpadding="0" style="min-width: 200px; margin:auto;margin-bottom: 20px; margin-top: 20px;">
                                <tr>
                                    <td class="btn-16 c-white l-white" bgcolor="#f36118" style="margin:auto;margin-bottom: 20px; margin-top: 20px; font-size:16px; line-height:20px; mso-padding-alt:15px 35px; font-family:'PT Sans', Arial, sans-serif; text-align:center; font-weight:bold; text-transform:uppercase; border-radius:25px; min-width:auto !important; color:#ffffff;">
                                        <a href="{{ $courseUrl }}" target="_blank" class="link c-white" style="display: block; padding: 15px 35px; text-decoration:none; color:#ffffff;">
                                            <span class="link c-white" style="text-decoration:none; color:#ffffff;">View Course</span>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
@endsection