{% extends "base.html" %}

{% block head %}
<style>
    body {
        background-color: white !important;
    }
    .print-agreement {
        max-width: 800px;
        margin: 40px auto;
        padding: 40px;
        border: 1px solid #eee;
        box-shadow: none;
    }
    .agreement-brand {
        color: #003366;
        border-bottom: 3px solid #003366;
        padding-bottom: 15px;
        margin-bottom: 30px;
    }
    .agreement-meta {
        margin-bottom: 40px;
    }
    .section-title {
        text-transform: uppercase;
        font-weight: bold;
        color: #333;
        margin-top: 25px;
        border-bottom: 1px solid #ddd;
    }
    .signature-box {
        margin-top: 60px;
    }
    @media print {
        .print-agreement {
            margin: 0;
            padding: 0;
            border: none;
        }
        .no-print {
            display: none !important;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="no-print text-center mb-4">
    <div class="alert alert-info d-inline-block">
        <p class="mb-2"><strong>Print Preview:</strong> This layout is optimized for A4 paper printing.</p>
        <button onclick="window.print()" class="btn btn-primary">Print Now</button>
        <a href="{% url 'job_detail' agreement.job.pk %}" class="btn btn-link">Back to Job</a>
    </div>
</div>

<div class="print-agreement bg-white">
    <div class="agreement-brand d-flex justify-content-between align-items-end">
        <div>
            <h1 class="h2 mb-0">Aitken Spence Industrial Solutions</h1>
            <p class="small text-muted mb-0">Tower 1, Colombo 02, Sri Lanka</p>
        </div>
        <div class="text-end">
            <h2 class="h5 text-primary mb-0">COMMERCIAL AGREEMENT</h2>
            <p class="fw-bold mb-0">REF: {{ agreement.job.job_number }}</p>
        </div>
    </div>

    <div class="agreement-meta row">
        <div class="col-6">
            <p class="small text-muted mb-0">CLIENT</p>
            <p class="fw-bold fs-5">{{ agreement.job.client_name }}</p>
        </div>
        <div class="col-6 text-end">
            <p class="small text-muted mb-0">DATE</p>
            <p class="fw-bold fs-5">{{ agreement.agreement_date }}</p>
        </div>
    </div>

    <div class="agreement-body">
        <h3 class="section-title h6">1. Scope of Work</h3>
        <p>{{ agreement.scope_of_work|linebreaksbr }}</p>

        <h3 class="section-title h6">2. Terms and Conditions</h3>
        <p>{{ agreement.terms|linebreaksbr }}</p>

        <h3 class="section-title h6">3. Commercial Value</h3>
        <p class="fs-4 fw-bold">LKR {{ agreement.total_value|floatformat:2 }}</p>
        <p class="small text-muted">Inclusive of all applicable taxes and industrial surcharges.</p>
    </div>

    <div class="signature-box row mt-5 pt-5">
        <div class="col-6">
            <div style="border-top: 1px solid #000; padding-top: 10px;">
                <p class="small mb-0">On behalf of Aitken Spence</p>
                <p class="small fw-bold">Authorized Signatory</p>
            </div>
        </div>
        <div class="col-6 text-end">
            <div style="border-top: 1px solid #000; padding-top: 10px;">
                <p class="small mb-0">On behalf of {{ agreement.job.client_name }}</p>
                <p class="small fw-bold">Authorized Signatory</p>
            </div>
        </div>
    </div>
    
    <div class="mt-5 text-center">
        <p class="small text-muted italic" style="font-size: 10px;">This is a computer-generated document. {{ agreement.job.job_number }}</p>
    </div>
</div>
{% endblock %}