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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Day Pass Booking Confirmed</title>
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
            integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
            crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
            integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
            crossorigin="anonymous" referrerpolicy="no-referrer" />
        <style>
        body {
            font-family: Arial, sans-serif;

            margin: 0;
            padding: 0;
        }

        .container {
            background-color: #ffffff;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 8px;
        }

        .logo-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .logo {
            width: 100px;
        }

        .status {
            font-size: 18px;
            color: #333333;
            font-weight: bold;
            margin-bottom: 20px;
        }



        p {
            font-size: 16px;
            color: #666666;
            line-height: 1.5;
        }

        .username {
            font-weight: bold;
        }

        .booking-section {
            padding: 10px;
            border-radius: 8px;
            margin-top: 20px;
            display: flex;
            align-items: center;
        }

        .booking-image {
            width: 90px;
            border-radius: 8px;
            margin-right: 20px;
        }

        .booking-details {
            text-align: left;
        }

        .booking-details h3 {
            font-size: 18px;
            margin: 0;
            color: #333333;
        }

        .booking-details p {
            font-size: 14px;
            color: #666666;
            margin: 5px 0;
        }

        .booking-details .meta-data {
            font-size: 14px;
            color: #666666;
            margin-top: 10px;
        }

        .booking-info {
            background-color: #f9f9f9;
            padding: 10px;
            margin-top: 20px;
            border-radius: 8px;
        }

        .booking-info table {
            width: 100%;
            border-collapse: collapse;
        }

        .booking-info table th,
        .booking-info table td {
            text-align: left;
            font-size: 14px;
            color: #333333;
        }



        .footer-text {
            margin-top: 20px;
            font-size: 14px;
            color: #666666;
        }

        .check-icon {
            width: 16px;
            height: 16px;
            background-color: #00d26a;
        }

        .check-icon i {
            font-size: 12px;
        }

        .booking-detail-box {
            border: 1px solid #e4e4e4;

        }

        .cta-button {
            display: inline-block;
            background-color: #FF7300;
            color: #ffffff;
            text-decoration: none;
            padding: 4px 20px;
            border-radius: 30px;
            font-size: 16px;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

        .social-icons {
            margin-block: 10px;
        }

        .social-icons img {
            width: 20px;
            margin: 0 5px;
        }

        .cta-button:hover {
            background-color: #E06600;
        }
    </style>
    </head>

    <body>
        <div class="container"
            style=" padding: 15px; margin: 0 auto; background-color: #fff;">

            <div class
                style="background-color: #ffefe3; padding: 15px; border-radius: 10px;">
                <div
                    style="background-color: #fff;  padding: 10px; border-radius: 10px;">
                    <div class="logo-container">
                        <img
                            src="https://worker-app.s3.amazonaws.com/images/1705985271602_Flexologo.png"
                            alt="Flexo Logo"
                            class="logo">
                    </div>
                    <div class="status">
                        <h6 class="mb-0 fw-bold ps-2 "
                            style="text-align: center;">✅ Day Pass Booking
                            Confirmed</h6>
                    </div>
                    <p>Hi <span class="username">
                            <%= data.name %>
                        </span>,</p>
                    <p>Great news! A booking has been confirmed for your space,
                        <%= data.spaceName %> + <%= data.spaceLocation %> for
                        <%= data.startDate %> .
                    </p>
                    <p>Please ensure that your space is available, clean, and
                        prepared for the booking.</p>
                    <p>Here are the booking details.</p>

                    <div class="booking-section">
                        <img src="<%= data.images %>" alt="Booking Image"
                            class="booking-image">
                        <div class="booking-details">
                            <h3><%= data.spaceName %></h3>
                            <p>Booking ID: <%= data.bookingId %>
                            </p>
                            <div class="meta-data">
                                <p>📍 <%= data.spaceLocation %> | 👥 <%=
                                    data.howManyPeopleInYourSpace %> people | 📐
                                    <%= data.spacesqft %> sqft</p>
                            </div>
                        </div>
                    </div>

                    <div class="booking-info">
                        <h4>Booking Details</h4>
                        <p>Space Category : <span style="color: #000; font-weight: 700;">
                                <%= data.spaceType %>
                            </span> </p>
                        <div>
                            <div>
                                <p class="mb-3 ">Date :</p>

                            </div>
                        </div>
                        <div
                            style="display: flex; flex-wrap: wrap; align-items: center; width: 100%;">
                            <% if (Array.isArray(data.bookingPeriods)) { %>
                            <% data.bookingPeriods.forEach(element=> { %>
                            <div
                                style="width: 25%; padding: 5px; box-sizing: border-box;">
                                <% const date=new
                                Date(element).toLocaleDateString('en-US', {
                                year: 'numeric' ,
                                month: 'short' , day: 'numeric' }); %>
                                <div
                                    style="background-color: #ffffff; border-radius: 8px; padding: 15px; text-align: center;">
                                    <h6
                                        style="margin: 0; font-size: 13px; font-weight: 500;">
                                        <%= date %>
                                    </h6>
                                </div>
                            </div>
                            <% }) %>
                            <% } else { %>
                            <p>No booking periods available.</p>
                            <% } %>
                        </div>
                    </div>

                    <p class="footer-text">
                        A great user experience often leads to great reviews,
                        and great reviews mean more bookings for your space!<br>
                        Thank you for helping create a great experience for our
                        users!
                    </p>

                    <table width="100%" style="margin-top: 20px;">
                        <tr>
                            <td align="center">
                                <a
                                    href="<%= data.webUrl +'/booking-Detail/' + data.id %>"
                                    class="cta-button"
                                    style="background-color: #FF7300; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; display: inline-block;">
                                    View Booking
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="footer  mt-3"
                    style="width:100%;display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap;">
                    <div style="width: 50%;">
                        <p style="text-align: start;color: black; ">Stay
                            connected with us:</p>
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left">
                            <tr>
                                <td align="left" style="padding-right:10px">
                                <a href="https://www.instagram.com/flexospaces/" target="_blank">
                                    <img src="<%= data.flexoUrl + '/assets/instagram.png' %>" alt="Instagram" width="20" style="display:block; margin:0 5px;">
                                </a>
                            </td>
                            <td align="left"  style="padding-right:10px">
                                <a href="https://www.youtube.com/@flexospaces" target="_blank">
                                    <img src="<%= data.flexoUrl + '/assets/youtube.png' %>" alt="YouTube" width="20" style="display:block; margin:0 5px;">
                                </a>
                            </td>
                            <td align="left">
                                <a href="https://www.linkedin.com/company/flexospaces/" target="_blank">
                                    <img src="<%= data.flexoUrl + '/assets/linkedin.png' %>" alt="LinkedIn" width="20" style="display:block; margin:0 5px;">
                                </a>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div style="width: 50%;">
                        <p class="mb-2" style="color: black;">&copy; 2024 Flexo,
                            all rights reserved.</p>
                        <p>
                           <a href="<%= data.webUrl + '/privacy-policy' %>"
                                style="text-decoration: none; color: black;">Privacy
                                Policy
                            </a>
                        </p>
                    </div>

                </div>
            </div>

        </div>
    </body>

</html>