{
  "medicalBill": {
    "design": "Timeless Ticket Stub",
    "patientID": "PAT123456",
    "patientName": "John Doe",
    "serviceDates": [
      {
        "serviceDate": "2023-10-01",
        "description": "General Consultation",
        "cost": 150.00
      },
      {
        "serviceDate": "2023-10-05",
        "description": "Blood Test",
        "cost": 50.00
      },
      {
        "serviceDate": "2023-10-10",
        "description": "X-Ray",
        "cost": 100.00
      },
      {
        "serviceDate": "2023-10-15",
        "description": "Follow-up Consultation",
        "cost": 80.00
      }
    ],
    "totalCost": 380.00,
    "billingDate": "2023-10-16",
    "dueDate": "2023-11-16",
    "payableTo": "Healthcare Clinic",
    "paymentMethods": [
      "Credit Card",
      "Debit Card",
      "Bank Transfer",
      "Cash"
    ],
    "contactInformation": {
      "clinicPhone": "(123) 456-7890",
      "clinicEmail": "billing@healthcareclinic.com",
      "clinicAddress": {
        "street": "123 Health St.",
        "city": "Medtown",
        "state": "HT",
        "zip": "54321"
      }
    }
  }
}
from playwright.sync_api import sync_playwright
from PIL import Image
import io

def generate_document(data):
    html_content = f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Medical Bill</title>
        <style>
            body {{
                font-family: 'Courier New', Courier, monospace;
                background-color: #f8f9fa;
                margin: 0;
                padding: 20px;
                color: #333;
            }}
            .ticket-stub {{
                width: 600px;
                margin: 0 auto;
                background-color: #fff;
                border: 2px solid #333;
                padding: 20px;
                box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
            }}
            .header, .footer {{
                text-align: center;
                font-size: 1.5em;
                margin-bottom: 20px;
            }}
            .details, .services {{
                width: 100%;
                margin-bottom: 20px;
            }}
            .details td, .services td {{
                border-bottom: 1px solid #333;
                padding: 10px;
                font-size: 1em;
            }}
            .services th {{
                border-bottom: 2px solid #333;
                padding: 10px;
                font-size: 1.1em;
            }}
            .total {{
                text-align: right;
                font-size: 1.3em;
                font-weight: bold;
                margin-top: 20px;
            }}
        </style>
    </head>
    <body>
        <div class="ticket-stub">
            <div class="header">Medical Bill - {data['medicalBill']['design']}</div>
            <table class="details">
                <tr>
                    <td>Patient ID:</td>
                    <td>{data['medicalBill']['patientID']}</td>
                </tr>
                <tr>
                    <td>Patient Name:</td>
                    <td>{data['medicalBill']['patientName']}</td>
                </tr>
                <tr>
                    <td>Billing Date:</td>
                    <td>{data['medicalBill']['billingDate']}</td>
                </tr>
                <tr>
                    <td>Due Date:</td>
                    <td>{data['medicalBill']['dueDate']}</td>
                </tr>
            </table>
            <table class="services">
                <thead>
                    <tr>
                        <th>Service Date</th>
                        <th>Description</th>
                        <th>Cost ($)</th>
                    </tr>
                </thead>
                <tbody>
                    {''.join(f"<tr><td>{item['serviceDate']}</td><td>{item['description']}</td><td>{item['cost']}</td></tr>" for item in data['medicalBill']['serviceDates'])}
                </tbody>
            </table>
            <div class="total">Total Cost: ${data['medicalBill']['totalCost']:.2f}</div>
            <div class="footer">
                Payable to: {data['medicalBill']['payableTo']}<br>
                Payment Methods: {", ".join(data['medicalBill']['paymentMethods'])}<br>
                Contact: {data['medicalBill']['contactInformation']['clinicPhone']} | {data['medicalBill']['contactInformation']['clinicEmail']}<br>
                Address: {data['medicalBill']['contactInformation']['clinicAddress']['street']}, {data['medicalBill']['contactInformation']['clinicAddress']['city']}, {data['medicalBill']['contactInformation']['clinicAddress']['state']} {data['medicalBill']['contactInformation']['clinicAddress']['zip']}
            </div>
        </div>
    </body>
    </html>
    """

    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        page.set_content(html_content)
        screenshot_bytes = page.screenshot(full_page=True)
        browser.close()

    screenshot_image = Image.open(io.BytesIO(screenshot_bytes))
    return screenshot_image
The Medical Bill web page is designed with a clean, modern aesthetic using a "Timeless Ticket Stub" theme. The background color is a light gray (#f8f9fa), while the main billing information is displayed on a white sheet centered on the page. This white sheet has a narrow black border, resembling a ticket, and includes a subtle shadow effect to add depth.

At the very top of the page, the header reads "Medical Bill - Timeless Ticket Stub" in a bold, larger font and is centered. Below the header, a table displays key patient and billing details. The left column of this table labels the data, while the right column shows the actual information:
- Patient ID: PAT123456
- Patient Name: John Doe
- Billing Date: 2023-10-16
- Due Date: 2023-11-16

Further down, a table lists the services provided, including their dates, descriptions, and associated costs. The table is divided into three columns:
- Service Date
- Description
- Cost ($)

Each row contains detailed information about a service:
- On October 1st, 2023, a "General Consultation" was billed at $150.00.
- On October 5th, 2023, a "Blood Test" was billed at $50.00.
- On October 10th, 2023, an "X-Ray" was billed at $100.00.
- On October 15th, 2023, a "Follow-up Consultation" was billed at $80.00.

At the bottom of the services table, the total cost of all services is displayed in a bold and slightly larger font: "Total Cost: $380.00." This amount appears right-aligned within the white sheet.

The footer section contains additional important information, centered and in a slightly larger font. It states:
- "Payable to: Healthcare Clinic"
- Lists the available payment methods in a single line: Credit Card, Debit Card, Bank Transfer, and Cash.
- Provides contact details: the clinic's phone number '(123) 456-7890' and email address 'billing@healthcareclinic.com'.
- Specifies the clinic’s address: "123 Health St., Medtown, HT 54321"

This layout ensures that all essential elements of the medical bill are easily identifiable and visually accessible, following a logical sequence from patient details to service breakdown and payment instructions.
[
    {
        "question": "What is the patient's name on the medical bill?",
        "answer": "John Doe",
        "explanation": "The patient's name is listed in the details section of the rendered bill."
    },
    {
        "question": "What is the total cost of the medical services?",
        "answer": "$380.00",
        "explanation": "The total cost is clearly stated in the 'Total Cost' section at the bottom of the rendered bill."
    },
    {
        "question": "How many service dates are listed, and what are their descriptions?",
        "answer": "Four service dates: General Consultation, Blood Test, X-Ray, Follow-up Consultation",
        "explanation": "The services table lists four service dates with their descriptions: General Consultation, Blood Test, X-Ray, and Follow-up Consultation."
    },
    {
        "question": "When is the bill due?",
        "answer": "November 16, 2023",
        "explanation": "The due date is listed in the details section of the rendered bill."
    },
    {
        "question": "Which clinic is the bill payable to?",
        "answer": "Healthcare Clinic",
        "explanation": "The footer section of the rendered bill states that the bill is payable to 'Healthcare Clinic'."
    },
    {
        "question": "How much did the Blood Test cost?",
        "answer": "$50.00",
        "explanation": "The cost of the Blood Test is listed in the services table as $50.00."
    },
    {
        "question": "What are the available payment methods?",
        "answer": "Credit Card, Debit Card, Bank Transfer, Cash",
        "explanation": "The payment methods are listed in the footer section of the rendered bill."
    },
    {
        "question": "What is the contact phone number for the clinic?",
        "answer": "(123) 456-7890",
        "explanation": "The clinic's contact phone number is listed in the footer section."
    },
    {
        "question": "On what date was the general consultation provided?",
        "answer": "October 1, 2023",
        "explanation": "The service date for the general consultation is listed as October 1, 2023, in the services table."
    },
    {
        "question": "What is the address of the Healthcare Clinic?",
        "answer": "123 Health St., Medtown, HT 54321",
        "explanation": "The clinic's address is listed in the footer section of the rendered bill."
    }
]