

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: black;
            margin: 0;
            padding: 0;
            border: 1px solid black;
        }

        .appoint-content {
            color: black;
            width: 100%;
            position: relative;
        }

        .appoint-total {
            padding-top: 6px;
            padding-bottom: 6px;
            color: black;
            position: relative;
            width: 100%;
        }

        .appoint-title {
            font-size: 1rem;
            color: black;
        }

        .appoint-prof {
            color: gray;
            border-bottom: 1px solid gray;
            padding-bottom: 10px;
            margin-bottom: 12px;
        }

        .header-text {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 6px;
            color: black;
        }

        .amount {
            font-size: 0.9rem;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .container {
            max-width: 650px;
            margin: 20px auto;
            background: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border: 1px solid gray;
        }

        .footer {
            text-align: center;
            font-size: 12px;
            color: #777;
            margin-top: 20px;
        }

        .date-time {
            margin-bottom: 20px;
        }

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

        .location a {
            color: blue;
            text-decoration: underline;
        }

        hr {
            border: none;
            border-top: 1px solid #ddd;
            margin: 15px 0;
        }
    </style>
</head>

<body>
<div class="container">

    <!-- Image -->
    <div class="image-container">
        <img src="https://finesseoasis.com.ng/assets/IMG_7531-D9Z6T0fw.jpg"
             alt="Beauty Parlor"
             style="width: 100%; border-radius: 10px;">
    </div>

    <!-- Greeting -->
    <div class="header-text">
        Hi {{fullname}}, thank you for booking with us!
    </div>

    {{#if bookings}}
    <div class="date-time">
        {{#with (lookup bookings 0)}}
            {{date}} at {{time}} with F.A Finesse Oasis
        {{/with}}
    </div>
    {{/if}}

    <!-- Customer Info -->
    <div class="appointment">
        <p><strong>Customer Information</strong></p>

        <div class="appoint-content">
            <div class="appoint-title"><strong>Name:</strong> {{fullname}}</div>
            <div class="appoint-title"><strong>Email:</strong> {{email}}</div>
            <div class="appoint-title"><strong>Address:</strong> {{address}}</div>
        </div>

        <hr />

        <!-- Appointment Details -->
        <p><strong>Appointment Details</strong></p>

        {{#each bookings}}
        <div class="appoint-content">
            <div class="appoint-title">{{title}}</div>
            <div class="amount">{{formatPrice currentprice}}</div>
        </div>

        <div class="appoint-prof">
            {{duration}} with {{professional}}
        </div>
        {{/each}}

        <!-- Total -->
        <div class="appoint-total">
            <div class="appoint-title"><strong>Total</strong></div>
            <div class="amount">{{formatPrice total}}</div>
        </div>

        <p><strong>Booking ID:</strong> {{trackid}}</p>
    </div>

    <!-- Location -->
    <div class="location">
        <p><strong>Location:</strong></p>
        <p>F.A Finesse Oasis Beauty Parlor</p>
        <a href="https://www.google.com/maps/search/?api=1&query=Grande+mall+opposite+Buena+Vista+Estates+orchid+road+Lekki,+Lagos,+Nigeria"
           target="_blank">
            Grande Mall opposite Buena Vista Estates, Orchid Road, Lekki, Lagos
        </a>
    </div>

    <!-- Info -->
    <div class="info">
        <p><strong>Important Information:</strong></p>
        <p>Call/WhatsApp <strong>0705 082 1589</strong> if you have any issue with your booking.</p>
        <p>This email confirms your booking with F.A Finesse Oasis.</p>
    </div>

    <p>
        Questions? Email us at
        <a href="mailto:f.afinnesseoasis@gmail.com">f.afinnesseoasis@gmail.com</a>
    </p>

    <!-- Footer -->
    <div class="footer">
        &copy; {{year}} F.A Finesse Oasis. All rights reserved.
    </div>

</div>
</body>
</html>
