<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f6f9; color: #333;">
    
    <div style="max-width: 600px; margin: 20px auto; background-color: #ffffff; border-radius: 8px; border: 1px solid #e0e6ed; overflow: hidden;">
        
        <!-- Header -->
        <div style="background-color: #2a5298; color: white; padding: 30px; text-align: center;">
            <h1 style="margin: 0; font-size: 24px; font-weight: 600; letter-spacing: 0.5px; color: white;">AUTOHUB GROUP</h1>
            <p style="margin: 8px 0 0 0; font-size: 14px; color: #e8f0ff;">Human Resources Information System</p>
        </div>
        
        <!-- Content -->
        <div style="padding: 40px 30px;">
            
            <div style="font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 20px;">
                Hi {{ $notifiable->first_name }},
            </div>
            
            <!-- Status Badge -->
            <div style="display: inline-block; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 20px; background-color: {{ $statusColor }}; color: white;">
                {{ $statusBadge }}
            </div>
            
            <!-- Message Box -->
            <div style="background-color: #f8f9fa; border-left: 4px solid #007bff; padding: 25px; margin: 25px 0; border-radius: 6px; border: 1px solid #e9ecef;">
                <p style="margin: 0; font-size: 16px; color: #495057; line-height: 1.6;">{{ $msg }}</p>
            </div>
            
            <!-- Overtime Details -->
            <div style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 20px; margin: 20px 0;">
                <h4 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 16px;">Overtime Application Details</h4>
                
                <table style="width: 100%; border-collapse: collapse;">
                    <tr>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; font-weight: 600; color: #495057;">Employee:</td>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; color: #6c757d; text-align: right;">{{ $overtime->employee->firstname }} {{ $overtime->employee->lastname }}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; font-weight: 600; color: #495057;">Overtime Date:</td>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; color: #6c757d; text-align: right;">{{ \Carbon\Carbon::parse($overtime->date_from ?? $overtime->date_from)->format('F j, Y') }}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; font-weight: 600; color: #495057;">Hours:</td>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; color: #6c757d; text-align: right;">{{ $overtime->hours }} hours</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; font-weight: 600; color: #495057;">From Time:</td>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; color: #6c757d; text-align: right;">{{ \Carbon\Carbon::parse($overtime->from_time)->format('h:i A') }}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; font-weight: 600; color: #495057;">To Time:</td>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; color: #6c757d; text-align: right;">{{ \Carbon\Carbon::parse($overtime->to_time)->format('h:i A') }}</td>
                    </tr>
                    <tr>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; font-weight: 600; color: #495057;">Status:</td>
                        <td style="padding: 8px 0; border-bottom: 1px solid #e9ecef; color: #6c757d; text-align: right;">{{ $statusText }}</td>
                    </tr>
                </table>
            </div>
            
            <!-- Purpose Section -->
            @if($overtime->description)
            <div style="background-color: #fff9e6; border: 1px solid #ffe082; border-left: 4px solid #ffc107; border-radius: 6px; padding: 20px; margin: 20px 0;">
                <h4 style="margin: 0 0 10px 0; color: #856404; font-size: 14px; font-weight: 600;">PURPOSE OF OVERTIME</h4>
                <p style="margin: 0; color: #856404; font-size: 14px; line-height: 1.6;">
                    @if($overtime->description)
                        {{ $overtime->description }}
                    @endif
                </p>
            </div>
            @endif
            
            <!-- Attachment Section -->
            @if($hasAttachment)
            <div style="background-color: #e7f3ff; border: 1px solid #b3d9ff; border-left: 4px solid #007bff; border-radius: 6px; padding: 20px; margin: 20px 0;">
                <h4 style="margin: 0 0 10px 0; color: #004085; font-size: 14px; font-weight: 600;">📎 ATTACHMENT</h4>
                <p style="margin: 0; color: #004085; font-size: 13px; line-height: 1.6;">
                    A supporting document has been attached to this email. Please check your email attachments to view or download the file.
                </p>
            </div>
            @endif
            
            <!-- Action Buttons -->
            @if($showActionButtons)
            <div style="text-align: center; margin: 30px 0;">
                <table role="presentation" style="margin: 0 auto;">
                    <tr>
                        <td style="padding: 0 5px;">
                            <table role="presentation" style="border-collapse: collapse;">
                                <tr>
                                    <td style="background-color: #28a745; border-radius: 6px; padding: 0;">
                                        <a href="{{ $approveUrl ?? '#' }}" style="display: inline-block; padding: 12px 24px; background-color: #28a745; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px;">
                                            ✓ APPROVE
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td style="padding: 0 5px;">
                            <table role="presentation" style="border-collapse: collapse;">
                                <tr>
                                    <td style="background-color: #dc3545; border-radius: 6px; padding: 0;">
                                        <a href="{{ $denyUrl ?? '#' }}" style="display: inline-block; padding: 12px 24px; background-color: #dc3545; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px;">
                                            ✗ DENY
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td style="padding: 0 5px;">
                            <table role="presentation" style="border-collapse: collapse;">
                                <tr>
                                    <td style="background-color: #007bff; border-radius: 6px; padding: 0;">
                                        <a href="{{ $viewUrl ?? '#' }}" style="display: inline-block; padding: 12px 24px; background-color: #007bff; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px;">
                                            👁 VIEW
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            @endif
            
            <!-- Divider -->
            <div style="height: 1px; background-color: #dee2e6; margin: 30px 0;"></div>
            
            <div style="font-size: 16px; color: #6c757d; line-height: 1.6; margin: 25px 0;">
                Thank you for using our HRIS application. If you have any questions regarding this overtime application, please contact the HR department or your immediate supervisor.
            </div>
            
            <!-- Signature -->
            <div style="margin-top: 30px; padding-top: 25px; border-top: 1px solid #e9ecef;">
                <div style="font-weight: 600; color: #2c3e50; margin-bottom: 5px; font-size: 16px;">Best regards,</div>
                <div style="color: #6c757d; font-size: 14px;">Human Resources Information System<br>AUTOHUB GROUP</div>
            </div>
        </div>
        
        <!-- Footer -->
        <div style="background-color: #2c3e50; color: #ffffff; padding: 25px 30px; text-align: center;">
            <div style="font-size: 13px; margin-bottom: 8px;">
                &copy; {{ date('Y') }} AUTOHUB GROUP. All rights reserved.
            </div>
            <div style="font-size: 12px; color: #95a5a6;">
                BGC, Taguig City, Philippines
            </div>
        </div>
    </div>
</body>
</html>