{% extends "emails/base_email.html" %}

{% block content %}
<div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; line-height: 1.6;">
    <div style="background-color: #f8f9fa; padding: 20px; text-align: center; border-bottom: 1px solid #e9ecef;">
        <h1 style="color: #333; margin: 0;">New Booking Received</h1>
        <p style="color: #6c757d; margin: 5px 0 0 0;">Action required: Review and confirm</p>
    </div>
    
    <div style="padding: 30px 20px;">
        <div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin-bottom: 20px;">
            <h2 style="margin: 0 0 10px 0; color: #856404;">Booking #{{ booking.booking_number }}</h2>
            <p style="margin: 5px 0;"><strong>Customer:</strong> {{ booking.customer_email }}</p>
            <p style="margin: 5px 0;"><strong>Equipment:</strong> {{ equipment.name }}</p>
            <p style="margin: 5px 0;"><strong>Total Amount:</strong> KSh {{ booking.total_amount|floatformat:2 }}</p>
        </div>
        
        <div style="margin-bottom: 25px; border-bottom: 1px solid #e9ecef; padding-bottom: 20px;">
            <h3 style="color: #495057; margin-top: 0;">Rental Period</h3>
            <p><strong>From:</strong> {{ booking.start_date|date:"F j, Y" }}{% if booking.pickup_time %} at {{ booking.pickup_time|time:"g:i A" }}{% endif %}</p>
            <p><strong>To:</strong> {{ booking.end_date|date:"F j, Y" }}{% if booking.return_time %} at {{ booking.return_time|time:"g:i A" }}{% endif %}</p>
            <p><strong>Duration:</strong> {{ booking.total_days }} day{{ booking.total_days|pluralize }}</p>
            
            {% if booking.delivery_required %}
            <div style="background-color: #e2f3f5; padding: 10px; margin-top: 15px; border-radius: 4px;">
                <h4 style="margin: 0 0 10px 0; color: #0c5460;">Delivery Required</h4>
                <p style="margin: 5px 0;"><strong>Address:</strong> {{ booking.delivery_address }}</p>
                <p style="margin: 5px 0;"><strong>Delivery Fee:</strong> KSh {{ booking.delivery_fee|floatformat:2 }}</p>
            </div>
            {% endif %}
        </div>
        
        <div style="margin-bottom: 25px;">
            <h3 style="color: #495057; margin-top: 0;">Customer Information</h3>
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6; width: 120px;"><strong>Name:</strong></td>
                    <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6;">{{ booking.user.get_full_name|default:"N/A" }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6;"><strong>Email:</strong></td>
                    <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6;">{{ booking.customer_email }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6;"><strong>Phone:</strong></td>
                    <td style="padding: 8px 0; border-bottom: 1px solid #dee2e6;">{{ booking.customer_phone }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0;"><strong>Member Since:</strong></td>
                    <td style="padding: 8px 0;">{{ booking.user.date_joined|date:"F j, Y" }}</td>
                </tr>
            </table>
        </div>
        
        <div style="background-color: #e8f5e9; padding: 15px; border-radius: 4px; margin-bottom: 25px;">
            <h3 style="margin-top: 0; color: #2e7d32;">Action Required</h3>
            <p>Please review this booking and update its status in the admin panel:</p>
            <ol style="margin: 10px 0 0 20px; padding: 0;">
                <li style="margin-bottom: 8px;">Verify equipment availability for the requested dates</li>
                <li style="margin-bottom: 8px;">Contact the customer if any clarifications are needed</li>
                <li>Update the booking status to 'Confirmed' once verified</li>
            </ol>
        </div>
        
        <div style="text-align: center; margin-top: 30px;">
            <a href="{{ site_url }}{% url 'admin:bookings_booking_change' booking.id %}" 
               style="display: inline-block; background-color: #28a745; color: white; 
                      padding: 12px 25px; text-decoration: none; border-radius: 4px; 
                      font-weight: bold; margin: 10px 5px;">
                View in Admin
            </a>
            <a href="{{ site_url }}/admin/bookings/booking/" 
               style="display: inline-block; background-color: #6c757d; color: white; 
                      padding: 12px 25px; text-decoration: none; border-radius: 4px; 
                      font-weight: bold; margin: 10px 5px;">
                All Bookings
            </a>
        </div>
    </div>
    
    <div style="background-color: #f8f9fa; padding: 20px; text-align: center; border-top: 1px solid #e9ecef; font-size: 0.9em; color: #6c757d;">
        <p>This is an automated notification. Please do not reply to this email.</p>
    </div>
</div>
{% endblock %}