<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booking Request</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: 20px;
        }

        .container {
            max-width: 600px;
            background-color: #fff;
            padding: 20px;
            margin: 0 auto;
            border-radius: 10px;
        }

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

        .logo img {
            max-width: 150px;
        }

        .heading {
            text-align: center;
            font-size: 20px;
            color: #333;
            margin-bottom: 10px;
        }

        .subheading {
            font-size: 14px;
            margin-bottom: 30px;
        }

        .details {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 20px;
        }

        .details img {
            width: 90px;
            border-radius: 8px;
        }

        .details-text {
            flex-grow: 1;
        }

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

        .details-text p {
            margin: 5px 0;
            color: #666;
        }

        .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: #f1f1f1;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .booking-info h4 {
            margin-top: 0;
            font-size: 18px;
            color: #333;
        }

        .booking-info table {
            width: 100%;
            border-spacing: 10px 15px;
        }

        .booking-info th, .booking-info td {
            text-align: left;
        }

        .payment-summary {
            margin-top: 20px;
            padding: 10px;
            border-radius: 8px;
        }

        .payment-summary table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .payment-summary table th,
        .payment-summary table td {
            text-align: left;
            padding: 10px;
            font-size: 14px;
            color: #333333;
        }

      
        .total {
            font-weight: bold;
            font-size: 18px;
        }

        .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;
        }


        .footer-note {
            color: #777;
            font-size: 14px;
            margin-top: 20px;
        }
        .social-icons {
            margin-block: 10px;
        }
        .social-icons img {
            width: 20px;
            margin: 0 5px;
        }
        .booking-data{
            width: 25%;
        }
        @media(max-width: 480px) {
            .booking-data{
                width: 50% !important;
            }
        }
    </style>
</head>
<body>

    <div class="container" style="background-color: #ffefe3;">
        <div style="background-color: #fff;  padding: 10px; border-radius: 10px;">

        
        <div class="logo">
            <img src="https://worker-app.s3.amazonaws.com/images/1705985271602_Flexologo.png" alt="FLEXO Logo">
        </div>
        <div class="heading fw-bold" style="text-align: center;">How was your experience?</div>
        <div class="subheading text-start">Hey <%= data.name %>,</div>
        <p>We hope you had a pleasant experience with the space you
            booked.  We’d love to hear your thoughts. </p>
            <p>Your review helps our community make informed choices.</p>
            <h6 class="fw-bold">Thanks for being awesome!</h6>
        
        <div class="booking-section mb-3">
            <img src="<%= data.images %>" alt="Podcast Studio" class="booking-image">
            <div class="booking-details">
                <h3><%= data.spaceName %></h3>
                <p>Booking ID: <%= data.bookingId %></p>
                <p>Location: alwar</p>
                <div class="meta-data">
                    <% if(data.spaceType == 'Coworking Space'){ %>
                        <p>📍 <%= data.spaceLocation %> | 👥 <%= data.howManyPeopleInYourSpace %> people | 📐 <%= data.spacesqft %> sqft</p>
                    <% }else { %>
                        <p>📍 <%= data.spaceLocation %> | 👥 <%= data.howManyPeopleInYourSpace %> people | ⏱ <%= data.minimum_hours/60 %> hrs min | 📐 <%= data.spacesqft %> sqft</p>
                    <% }%>   
                </div>
            </div>
        </div>
       

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

            <% if(data.spaceType == 'Coworking Space'){ %>
                <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>

            <% } else { %>
                <% if (Array.isArray(data.bookingPeriods)) { %>
                    <% data.bookingPeriods.forEach(element => { %>
                        <div style="display: flex; flex-wrap: wrap ; margin-bottom: 20px;">
                            <div class="booking-data">
                                <p>Date :</p>
                                <div style=" padding: 5px; box-sizing: border-box;">
                                    <div
                                        style="background-color: #ffffff; border-radius: 8px; padding: 15px; text-align: center;">
                                        <h6
                                            style="margin: 0; font-size: 16px; font-weight: 600;"><%= element.startDate %></h6>
                                    </div>
                                </div>
                            </div>
                            <div class="booking-data">
                                <p>Start Time :</p>
                                <div style="padding: 5px; box-sizing: border-box;">
                                    <div style="background-color: #ffffff; border-radius: 8px; padding: 15px; text-align: center;">
                                        <h6 style="margin: 0; font-size: 16px; font-weight: 600;">
                                            <% 
                                                function convertTo12Hour(time) {
                                                    let [hours, minutes] = time.split(':').map(Number);
                                                    let period = hours >= 12 ? 'PM' : 'AM';
                                                    hours = hours % 12 || 12; // Convert 0 to 12 for midnight and adjust hours
                                                    return `${hours}:${minutes.toString().padStart(2, '0')} ${period}`;
                                                }
                            
                                                %><%= convertTo12Hour(element.startTime) %>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="booking-data">
                                <p>End Time :</p>
                                <div style="padding: 5px; box-sizing: border-box;">
                                    <div style="background-color: #ffffff; border-radius: 8px; padding: 15px; text-align: center;">
                                        <h6 style="margin: 0; font-size: 16px; font-weight: 600;">
                                            <% 
                                                %><%= convertTo12Hour(element.endTime) %>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="booking-data">
                                <p>No. of Hours :</p>
                                <div style="padding: 5px; box-sizing: border-box;">
                                    <div style="background-color: #ffffff; border-radius: 8px; padding: 15px; text-align: center;">
                                        <h6 style="margin: 0; font-size: 16px; font-weight: 600;">
                                            <% 
                                                const [startHour, startMin] = element.startTime.split(':').map(Number);
                                                const [endHour, endMin] = element.endTime.split(':').map(Number);
                            
                                                let totalHours;
                            
                                                if (startHour === endHour && startMin === endMin) {
                                                    totalHours = 24;
                                                } else {
                                                    totalHours = (endHour + endMin / 60) - (startHour + startMin / 60);
                                                    
                                                    if (totalHours < 0) {
                                                        totalHours += 24;
                                                    }
                                                }
                            
                                                const roundedHours = Math.round(totalHours * 100) / 100;
                                            %><%= roundedHours %> hours
                                        </h6>
                                    </div>
                                </div>
                            </div>  
                        </div>
                    <% }) %>  
                <% } else { %>
                    <p>No booking periods available.</p>
                <% } %>
            <% } %>
            
        </div>
       

        <div style="text-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;">Leave A Review </a>
        </div>
    </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;">Stay connected!</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">&copy; 2024 Flexo, all rights reserved.</p>
                <p><a href="<%= data.webUrl + '/privacy-policy' %>" class="text-secondary " style="text-decoration: none;">Privacy Policy</a></p>
            </div>
            
        </div>
    
    </div>

</body>
</html>
