<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Report</title>
</head>

<body style="font-family: Arial, sans-serif; margin: 20px;">

    <!-- Page 1 -->
    <div
        style="width: 7.5in; height: 11in; margin: 0.5in auto; background-color: #ffffff;  position: relative; box-sizing: border-box;page-break-after: always;">
        <div style="font-size: 24px; font-weight: bold;">Campaign Name: <%= campaign.campaign_name %>
        </div>
        <div style="margin-top: 10px;">Date: <%= currentDate %>
        </div>
        <!-- <div style="position: absolute; bottom: 10px; right: 10px; opacity: 0.5;">
            <img src="https://cdn.connector.cc/images/campaign/logo-black_110538704.png" alt="Watermark" style="width: 100px;">
        </div> -->
    </div>

    <!-- Page 2 -->
    <div
        style="width: 7.5in; height: 11in; margin: 0.5in auto; background-color: #ffffff;  position: relative; box-sizing: border-box;page-break-after: always;">
        <table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
            <tr>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Social Media Name</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Followers Count</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Post Link</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Platform</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Date</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">ER</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Views</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Likes</th>
                <th style="border: 1px solid black; padding: 5px; background-color: #e0f0d0;">Comments</th>
            </tr>
            <% postRows.map((postRow)=> { %>
                <tr>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= postRow.influencer.display_name %>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= postRow.influencer.total_followers %>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;"><a href="<%= postRow.post_link %>">Post Link</a>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= postRow.platform %>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= new Date(postRow.created_at).toLocaleDateString('en-GB', { day: '2-digit' , month: '2-digit'
                            , year: '2-digit' }) %>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= postRow.engagement_rate> 0 ? postRow.engagement_rate + '%' : '-' %>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= postRow.view_counts> 0 ? postRow.view_counts : '-' %>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= postRow.like_counts> 0 ? postRow.like_counts : '-' %>
                    </td>
                    <td style="border: 1px solid black; padding: 5px;">
                        <%= postRow.comment_count> 0 ? postRow.comment_count : '-' %>
                    </td>
                </tr>
                <% }) %>
        </table>

    </div>

    <!-- Page 3 -->
    <% postRows.map((postRow)=> { %>
        <div
            style="width: 7.5in; height: 11in; margin: 0.5in auto; background-color: #ffffff; position: relative; box-sizing: border-box;page-break-after: always;">
            <div style="display: flex; align-items: center;">
                <div style="display: inline-block; width:30%;">
                    <div
                        style="margin-bottom: 20px;width: 100px;overflow:hidden;height: 100px;border-radius: 100%;border: 1px solid black;margin: 0 auto 20px;display: flex;align-items: center;justify-content: center;">
                        <img src="<%= postRow.influencer.image ? postRow.influencer.image : profilePath +'placeholder.jpg' %>"
                            alt="Influencer Profile" style="width: 100%;height: 100%;object-fit: contain;">
                    </div>
                    <table style="border-collapse: collapse;width: 100%;">
                        <tr>
                            <td style="border: 1px solid black; padding: 8px;">Name</td>
                            <td style="border: 1px solid black; padding: 8px;">
                                <%= postRow.influencer.display_name %>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid black; padding: 8px;">Platform</td>
                            <td style="border: 1px solid black; padding: 8px;">
                                <%= postRow.platform %>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid black; padding: 8px;">Followers</td>
                            <td style="border: 1px solid black; padding: 8px;">
                                <%= postRow.influencer.total_followers %>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid black; padding: 8px;">ER</td>
                            <td style="border: 1px solid black; padding: 8px;">
                                <%= postRow.engagement_rate> 0 ? postRow.engagement_rate + '%' : '-' %>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid black; padding: 8px;">Views</td>
                            <td style="border: 1px solid black; padding: 8px;">
                                <%= postRow.view_counts> 0 ? postRow.view_counts : '-' %>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid black; padding: 8px;">Likes</td>
                            <td style="border: 1px solid black; padding: 8px;">
                                <%= postRow.like_counts> 0 ? postRow.like_counts : '-' %>
                            </td>
                        </tr>
                        <tr>
                            <td style="border: 1px solid black; padding: 8px;">Comments</td>
                            <td style="border: 1px solid black; padding: 8px;">
                                <%= postRow.comment_count> 0 ? postRow.comment_count : "-" %>
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="display: inline-block; width:70%;padding-left: 10px;">
                    <div
                        style="margin-bottom: 20px;width: 100%; height: 500px;background-color: gray; border: 1px solid black;">
                        <img src="<%= postRow.image_link ? postRow.image_link : profilePath +'placeholder.jpg' %>"
                            alt="Post Example" style="width: 100%;height: 100%;object-fit: contain;">
                    </div>
                    <a href="<%= postRow.post_link %>"
                        style="display: block; margin-top: 10px; text-align: center;">View Post</a>
                </div>
            </div>
            <!-- <div style="position: absolute; bottom: 10px; right: 10px; opacity: 0.5;">
            <img src="https://cdn.connector.cc/images/campaign/logo-black_110538704.png" alt="Watermark" style="width: 100px;">
        </div> -->
        </div>
        <% }) %>
</body>

</html>