<!-- bookingEmail.ejs -->
<%- include('partials/header', {
    title: 'Booking Receipt - Gear',
    heading: 'Thank you for your booking!',
    baseUrl: baseUrl
}) %>
<style type="text/css">
        .order-table, .info-table{
            width: 100%;
            text-align: left;
            font-size: 12px;
        }
        tr{
            border-bottom: 1px solid gray !important;
        }
        .total-row > td{
            font-weight: 600;
        }
      
</style>

<div class="order-number">Booking #<%= data.booking_code %></div>
<div class="status"><%= data.status %></div>

<p>Your booking has been received and is being processed. Here's what you booked:</p>

<hr>

<h3>Booking Details</h3>
<table class="order-table">
    <thead>
        <tr>
            <th>Car</th>
            <th>Dates</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <% if(data.car && data.car.images && data.car.images.length > 0) { %>
                    <img src="<%= `${baseUrl}/uploads/${data.car.images[0]}` %>" alt="car" width="60px"> <br>
                <% } %>
                <%= data.car.title %>
            </td>
            <td>
                From: <%= new Date(data.start_date).toLocaleDateString() %> <%= data.start_time %><br>
                To: <%= new Date(data.end_date).toLocaleDateString() %> <%= data.end_time %>
            </td>
            <td>AED <%= data.day_price_with_fee.toFixed(2) %> / day</td>
        </tr>
        
        <tr class="total-row">
            <td colspan="2">Day Price (inc. fees)</td>
            <td>AED <%= data.day_price_with_fee.toFixed(2) %></td>
        </tr>
        
        <% if(data.booking_fee > 0) { %>
        <tr>
            <td colspan="2">Booking Fee</td>
            <td>AED <%= data.booking_fee.toFixed(2) %></td>
        </tr>
        <% } %>
        <% if(data.vat_amount > 0) { %>
        <tr>
            <td colspan="2">VAT</td>
            <td>AED <%= data.vat_amount.toFixed(2) %></td>
        </tr>
        <% } %>
        <% if(data.promo_discount > 0) { %>
        <tr>
            <td colspan="2">Promo Discount</td>
            <td>- AED <%= data.promo_discount.toFixed(2) %></td>
        </tr>
        <% } %>
        
        <tr class="total-row">
            <td colspan="2">Total</td>
            <td>AED <%= data.grand_total.toFixed(2) %></td>
        </tr>
    </tbody>
</table>

<hr>

<h3>Customer Information</h3>
<table class="info-table">
    <tr>
        <th>Name:</th>
        <td><%= data.user.name %></td>
    </tr>
    <tr>
        <th>Email:</th>
        <td><a href="mailto:<%= data.user.email %>"><%= data.user.email %></a></td>
    </tr>
    <tr>
        <th>Phone:</th>
        <td><%= data.user.phone %></td>
    </tr>
    <% if(data.pickup_location) { %>
    <tr>
        <th>Pickup Location:</th>
        <td>
            <%= data.pickup_location[0].address || '--' %>
        </td>
    </tr>
    <% } %>
    <% if(data.delivery_location) { %>
    <tr>
        <th>Delivery Location:</th>
        <td>
            <%= data.delivery_location[0].address || '--' %>
        </td>
    </tr>
    <% } %>
    <tr>
        <th>Order Date:</th>
        <td><%= new Date(data.createdAt).toLocaleString() %></td>
    </tr>
    <tr>
        <th>Payment Method:</th>
        <td><%= data.payment_method ? data.payment_method : 'Pending' %></td>
    </tr>
</table>
<%- include('partials/footer') %>
