<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Audit Certificate - {{ contract.title }}</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.6;
            color: #1f2937;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
        }
        .header {
            text-align: center;
            border-bottom: 3px solid #1e40af;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .header h1 {
            color: #1e40af;
            margin: 0 0 10px 0;
            font-size: 28px;
        }
        .header .subtitle {
            color: #6b7280;
            font-size: 14px;
        }
        .certificate-id {
            background: #f3f4f6;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 30px;
            text-align: center;
        }
        .certificate-id .label {
            font-size: 12px;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .certificate-id .value {
            font-family: monospace;
            font-size: 14px;
            color: #1f2937;
            margin-top: 5px;
        }
        .section {
            margin-bottom: 30px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #1e40af;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 8px;
            margin-bottom: 15px;
        }
        .info-grid {
            display: grid;
            grid-template-columns: 180px 1fr;
            gap: 10px;
        }
        .info-label {
            font-weight: 500;
            color: #6b7280;
        }
        .info-value {
            color: #1f2937;
        }
        .info-value.monospace {
            font-family: monospace;
            font-size: 13px;
            word-break: break-all;
        }
        .consent-box {
            background: #f0fdf4;
            border: 1px solid #86efac;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .consent-box .consent-title {
            font-weight: 600;
            color: #166534;
            margin-bottom: 8px;
        }
        .consent-box .consent-text {
            font-size: 13px;
            color: #15803d;
        }
        .integrity-section {
            background: #eff6ff;
            border: 1px solid #93c5fd;
            border-radius: 8px;
            padding: 20px;
            margin-top: 30px;
        }
        .integrity-title {
            font-weight: 600;
            color: #1e40af;
            margin-bottom: 15px;
        }
        .hash-comparison {
            margin-top: 15px;
        }
        .hash-row {
            display: flex;
            margin-bottom: 10px;
        }
        .hash-label {
            width: 150px;
            font-weight: 500;
            color: #6b7280;
        }
        .hash-value {
            font-family: monospace;
            font-size: 12px;
            color: #1f2937;
            word-break: break-all;
        }
        .verification-status {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            margin-top: 15px;
        }
        .verification-status.verified {
            background: #dcfce7;
            color: #166534;
        }
        .verification-status.mismatch {
            background: #fee2e2;
            color: #991b1b;
        }
        .legal-notice {
            margin-top: 40px;
            padding: 20px;
            background: #fefce8;
            border: 1px solid #fde047;
            border-radius: 8px;
            font-size: 12px;
            color: #713f12;
        }
        .legal-notice-title {
            font-weight: 600;
            margin-bottom: 10px;
        }
        .footer {
            margin-top: 40px;
            text-align: center;
            color: #9ca3af;
            font-size: 12px;
            border-top: 1px solid #e5e7eb;
            padding-top: 20px;
        }
        .timestamp {
            font-size: 11px;
            color: #9ca3af;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Electronic Signature Audit Certificate</h1>
        <div class="subtitle">Official Record of Electronic Contract Execution</div>
    </div>

    <div class="certificate-id">
        <div class="label">Certificate Reference Number</div>
        <div class="value">{{ contract.signing_token }}</div>
    </div>

    <div class="section">
        <div class="section-title">Contract Information</div>
        <div class="info-grid">
            <div class="info-label">Contract ID:</div>
            <div class="info-value">{{ contract.id }}</div>

            <div class="info-label">Contract Title:</div>
            <div class="info-value">{{ contract.title }}</div>

            <div class="info-label">Template Used:</div>
            <div class="info-value">{{ contract.template.name }} (Version {{ contract.template_version }})</div>

            <div class="info-label">Status:</div>
            <div class="info-value">{{ contract.status }}</div>

            <div class="info-label">Created:</div>
            <div class="info-value">{{ contract.created_at|date:"F j, Y, g:i:s A e" }}</div>

            {% if contract.sent_at %}
            <div class="info-label">Sent to Customer:</div>
            <div class="info-value">{{ contract.sent_at|date:"F j, Y, g:i:s A e" }}</div>
            {% endif %}

            {% if contract.expires_at %}
            <div class="info-label">Expiration Date:</div>
            <div class="info-value">{{ contract.expires_at|date:"F j, Y, g:i:s A e" }}</div>
            {% endif %}
        </div>
    </div>

    <div class="section">
        <div class="section-title">Parties</div>
        <div class="info-grid">
            <div class="info-label">Business:</div>
            <div class="info-value">{{ business_name }}</div>

            <div class="info-label">Customer Name:</div>
            <div class="info-value">{{ contract.customer.get_full_name|default:contract.customer.email }}</div>

            <div class="info-label">Customer Email:</div>
            <div class="info-value">{{ contract.customer.email }}</div>

            {% if contract.event %}
            <div class="info-label">Related Appointment:</div>
            <div class="info-value">
                {{ contract.event.service.name }} on {{ contract.event.start_time|date:"F j, Y" }} at {{ contract.event.start_time|date:"g:i A" }}
            </div>
            {% endif %}
        </div>
    </div>

    {% if signature %}
    <div class="section">
        <div class="section-title">Electronic Signature Record</div>
        <div class="info-grid">
            <div class="info-label">Signer Name:</div>
            <div class="info-value">{{ signature.signer_name }}</div>

            <div class="info-label">Signer Email:</div>
            <div class="info-value">{{ signature.signer_email }}</div>

            <div class="info-label">Date/Time Signed:</div>
            <div class="info-value">{{ signature.signed_at|date:"F j, Y, g:i:s A e" }}</div>

            <div class="info-label">IP Address:</div>
            <div class="info-value monospace">{{ signature.ip_address }}</div>

            <div class="info-label">User Agent:</div>
            <div class="info-value monospace" style="font-size: 11px;">{{ signature.user_agent }}</div>

            {% if signature.latitude and signature.longitude %}
            <div class="info-label">Geolocation:</div>
            <div class="info-value monospace">{{ signature.latitude }}, {{ signature.longitude }}</div>
            {% endif %}
        </div>
    </div>

    <div class="section">
        <div class="section-title">Consent Records</div>

        <div class="consent-box">
            <div class="consent-title">Terms Agreement ({{ signature.consent_checkbox_checked|yesno:"Accepted,Not Accepted" }})</div>
            <div class="consent-text">{{ signature.consent_text }}</div>
        </div>

        <div class="consent-box">
            <div class="consent-title">Electronic Consent ({{ signature.electronic_consent_given|yesno:"Accepted,Not Accepted" }})</div>
            <div class="consent-text">{{ signature.electronic_consent_text }}</div>
        </div>
    </div>

    <div class="integrity-section">
        <div class="integrity-title">Document Integrity Verification</div>
        <p>The document hash is computed using SHA-256 algorithm on the contract content at the time of signing.</p>

        <div class="hash-comparison">
            <div class="hash-row">
                <div class="hash-label">Hash at Signing:</div>
                <div class="hash-value">{{ signature.document_hash_at_signing }}</div>
            </div>
            <div class="hash-row">
                <div class="hash-label">Current Hash:</div>
                <div class="hash-value">{{ current_hash }}</div>
            </div>
        </div>

        {% if hash_verified %}
        <div class="verification-status verified">
            &#x2713; VERIFIED - Document has not been altered since signing
        </div>
        {% else %}
        <div class="verification-status mismatch">
            &#x2717; MISMATCH - Document may have been modified after signing
        </div>
        {% endif %}
    </div>
    {% endif %}

    <div class="legal-notice">
        <div class="legal-notice-title">Legal Compliance Statement</div>
        <p>
            This audit certificate documents an electronic signature transaction conducted in compliance with:
        </p>
        <ul>
            <li>The Electronic Signatures in Global and National Commerce Act (ESIGN Act, 15 U.S.C. § 7001 et seq.)</li>
            <li>The Uniform Electronic Transactions Act (UETA)</li>
        </ul>
        <p>
            The signer expressly agreed to conduct business electronically and acknowledged that their electronic
            signature carries the same legal weight as a handwritten signature. All audit trail data, including
            timestamp, IP address, and document hash, has been captured and preserved for evidentiary purposes.
        </p>
        <p>
            This certificate serves as an official record of the electronic signature event and may be used
            as evidence in legal proceedings to demonstrate the authenticity and integrity of the signed document.
        </p>
    </div>

    <div class="footer">
        <p>Generated by SmoothSchedule Contract Management System</p>
        <p class="timestamp">Certificate generated: {{ generated_at|date:"F j, Y, g:i:s A e" }}</p>
    </div>
</body>
</html>
