{% extends 'auth/dashboard.html' %}
{% load static contract_tags %}

{% block title %}Sign Group Contract #{{ contract.id }} - Bomabest Agriservices{% endblock %}

{% block content %}
<div class="w-full max-w-6xl mx-auto px-2 sm:px-4 lg:px-8 py-4 sm:py-6 overflow-x-hidden">
    <div class="bg-white shadow-xl rounded-2xl p-4 sm:p-6 md:p-8 transition hover:shadow-2xl">

        <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-tea-green-800 mb-5 sm:mb-8 flex items-center gap-3">
            <svg class="w-8 h-8 sm:w-10 sm:h-10 text-tea-green-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
            <span class="min-w-0 break-words">Sign Group Contract - ID: {{ contract.id }}</span>
        </h1>

        {% if messages %}
        <div class="mb-6 space-y-2">
            {% for message in messages %}
            <div class="p-3 sm:p-4 rounded-xl bg-{% if message.tags == 'error' %}red{% else %}green{% endif %}-100 border-l-4 border-{% if message.tags == 'error' %}red{% else %}green{% endif %}-500 text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-800 flex items-start gap-3">
                <svg class="w-5 h-5 sm:w-6 sm:h-6 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    {% if message.tags == 'error' %}
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                    {% else %}
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    {% endif %}
                </svg>
                <div class="min-w-0 break-words">{{ message }}</div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Contract Summary Card -->
        <div class="bg-gradient-to-br from-tea-green-50 to-white rounded-2xl p-4 sm:p-6 md:p-8 mb-6 sm:mb-8 shadow-md border border-tea-green-200">
            <h2 class="text-lg sm:text-xl md:text-2xl font-bold text-tea-green-900 mb-4 sm:mb-6">Group Contract Summary</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                <div class="space-y-3 sm:space-y-4 min-w-0">
                    <div class="break-words"><span class="font-semibold text-gray-700">Group:</span> <span class="ml-2">{{ contract.group.name }}</span></div>
                    <div class="break-words"><span class="font-semibold text-gray-700">Input Package:</span> <span class="ml-2">{{ contract_inputs.first.input.variety }} × {{ contract_inputs.first.quantity }}</span></div>
                    <div class="break-words"><span class="font-semibold text-gray-700">Payment Term:</span> <span class="ml-2">{{ contract.get_payment_term_display }}</span></div>
                    <div class="break-words"><span class="font-semibold text-gray-700">Installments:</span> <span class="ml-2">{{ contract.months_for_payment }} month{{ contract.months_for_payment|pluralize }}</span></div>
                    {% if contract.grace_period > 0 %}
                    <div class="break-words"><span class="font-semibold text-gray-700">Grace Period:</span> <span class="ml-2">{{ contract.grace_period }} day{{ contract.grace_period|pluralize }}</span></div>
                    {% endif %}
                </div>
                <div class="space-y-2 sm:space-y-4 md:text-right">
                    <div class="text-2xl sm:text-3xl font-black text-tea-green-700 break-words">KES {{ contract.total_amount|floatformat:2 }}</div>
                    <div class="text-sm sm:text-lg text-orange-600 font-bold break-words">Deposit Required: KES {{ contract.deposit_amount|floatformat:2 }}</div>
                </div>
            </div>
        </div>

        <!-- Signatories Status -->
        <div class="bg-blue-50 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 border-2 border-blue-200">
            <h3 class="text-base sm:text-xl font-bold text-blue-900 mb-4">Signature Status ({{ contract.signatures_count }}/3)</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- Chairperson -->
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="flex items-center justify-between mb-2">
                        <span class="font-semibold text-gray-700">Chairperson</span>
                        {% if contract.chair_signed %}
                        <svg class="w-6 h-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        {% else %}
                        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        {% endif %}
                    </div>
                    <div class="text-sm text-gray-600 break-words">{{ contract.chairperson.get_full_name }}</div>
                    {% if contract.chair_signed %}
                    <div class="text-xs text-green-600 mt-1">Signed {{ contract.chair_signed_at|date:"M d, Y" }}</div>
                    {% else %}
                    <div class="text-xs text-gray-500 mt-1">Pending signature</div>
                    {% endif %}
                </div>

                <!-- Secretary -->
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="flex items-center justify-between mb-2">
                        <span class="font-semibold text-gray-700">Secretary</span>
                        {% if contract.secretary_signed %}
                        <svg class="w-6 h-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        {% else %}
                        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        {% endif %}
                    </div>
                    <div class="text-sm text-gray-600 break-words">{{ contract.secretary.get_full_name }}</div>
                    {% if contract.secretary_signed %}
                    <div class="text-xs text-green-600 mt-1">Signed {{ contract.secretary_signed_at|date:"M d, Y" }}</div>
                    {% else %}
                    <div class="text-xs text-gray-500 mt-1">Pending signature</div>
                    {% endif %}
                </div>

                <!-- Treasurer -->
                <div class="bg-white rounded-lg p-4 shadow-sm">
                    <div class="flex items-center justify-between mb-2">
                        <span class="font-semibold text-gray-700">Treasurer</span>
                        {% if contract.treasurer_signed %}
                        <svg class="w-6 h-6 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        {% else %}
                        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        {% endif %}
                    </div>
                    <div class="text-sm text-gray-600 break-words">{{ contract.treasurer.get_full_name }}</div>
                    {% if contract.treasurer_signed %}
                    <div class="text-xs text-green-600 mt-1">Signed {{ contract.treasurer_signed_at|date:"M d, Y" }}</div>
                    {% else %}
                    <div class="text-xs text-gray-500 mt-1">Pending signature</div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Contract Items Table -->
        <div class="bg-white rounded-2xl shadow-md border border-gray-200 p-4 sm:p-6 mb-6 sm:mb-8 overflow-hidden">
            <h3 class="text-base sm:text-xl font-bold text-gray-800 mb-4">Contract Items</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="px-4 py-3 text-left font-medium">Item</th>
                            <th class="px-4 py-3 text-right font-medium">Quantity</th>
                            <th class="px-4 py-3 text-right font-medium">Unit Price</th>
                            <th class="px-4 py-3 text-right font-medium">Total</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {% for ci in contract_inputs %}
                        <tr>
                            <td class="px-4 py-3 break-words">{{ ci.input.variety }}</td>
                            <td class="px-4 py-3 text-right whitespace-nowrap">{{ ci.quantity }}</td>
                            <td class="px-4 py-3 text-right whitespace-nowrap">KES {{ ci.unit_price|floatformat:2 }}</td>
                            <td class="px-4 py-3 text-right font-bold text-tea-green-700 whitespace-nowrap">
                                KES {{ ci.total_price|floatformat:2 }}
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center py-8 text-gray-500">No items in this contract</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Terms & Conditions -->
        <div class="bg-white rounded-2xl shadow-md border-2 border-tea-green-300 p-4 sm:p-6 md:p-8 mb-6 sm:mb-8">
            <h3 class="text-lg sm:text-2xl font-bold text-tea-green-900 mb-4 sm:mb-6">Terms & Conditions</h3>

            <div class="bg-tea-green-50 rounded-xl p-4 sm:p-6 md:p-8 max-h-96 overflow-y-auto prose prose-lg max-w-none text-gray-800 leading-relaxed">
                {% if contract.terms_snapshot %}
                    {{ contract.terms_snapshot|safe|linebreaksbr }}
                {% else %}
                    <p class="italic text-gray-600">No terms available.</p>
                {% endif %}
            </div>

            <!-- Agreement Checkbox -->
            <div class="mt-6 sm:mt-8 flex items-start">
                <input type="checkbox" id="agree-terms" class="mt-1 mr-3 sm:mr-4 h-5 w-5 sm:h-6 sm:w-6 text-tea-green-600 rounded focus:ring-tea-green-500 border-gray-300">
                <label for="agree-terms" class="text-sm sm:text-lg text-gray-700 leading-relaxed">
                    I have read and agree to the Terms & Conditions on behalf of {{ contract.group.name }}.
                </label>
            </div>

            <p class="mt-4 sm:mt-6 text-center text-xs sm:text-sm text-gray-600 font-medium">
                👆 Please scroll and read the terms carefully before signing.
            </p>
        </div>

        <!-- Signature Form -->
        <form method="post" id="signForm">
            {% csrf_token %}
            <input type="hidden" name="signature_svg" id="signature_svg">

            <div class="bg-white rounded-2xl shadow-lg border-2 border-dashed border-tea-green-400 p-4 sm:p-6 md:p-8 mb-6 sm:mb-8">
                <h3 class="text-lg sm:text-2xl font-bold text-tea-green-900 mb-3 sm:mb-4 text-center">Your Signature</h3>
                <p class="text-center text-gray-600 mb-4 sm:mb-8 text-sm sm:text-lg">Draw your signature below using your mouse or touch</p>

                <div class="bg-gray-50 rounded-xl overflow-hidden border-4 border-gray-300 shadow-inner">
                    <!-- IMPORTANT: give the canvas a responsive height so offsetHeight is valid -->
                    <canvas id="signature-pad" class="w-full h-56 sm:h-64 md:h-72"></canvas>
                </div>

                <div class="mt-5 sm:mt-8 flex justify-center">
                    <button type="button" id="clear-btn" class="px-6 sm:px-8 py-3 bg-gray-600 text-white rounded-xl hover:bg-gray-700 transition font-medium">
                        Clear Signature
                    </button>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-6">
                <a href="{% url 'contract_market_place:group_contract_detail' contract.pk %}"
                   class="w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-4 bg-gray-600 text-white rounded-xl hover:bg-gray-700 transition flex items-center justify-center text-sm sm:text-lg font-medium">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                    Cancel
                </a>

                <button type="submit" id="sign-btn" disabled
                        class="w-full sm:w-auto px-8 sm:px-12 py-3 sm:py-4 bg-tea-green-600 text-white rounded-xl hover:bg-tea-green-700 transition flex items-center justify-center text-sm sm:text-lg font-bold disabled:opacity-50 disabled:cursor-not-allowed shadow-lg">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    Sign & Submit Contract
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Signature Pad Library -->
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
    const canvas = document.getElementById('signature-pad');
    const signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgb(249, 250, 251)',
        penColor: 'rgb(0, 0, 0)',
        minWidth: 1.5,
        maxWidth: 3.5,
        throttle: 16,
        velocityFilterWeight: 0.7
    });

    const clearBtn = document.getElementById('clear-btn');
    const signBtn = document.getElementById('sign-btn');
    const agreeCheckbox = document.getElementById('agree-terms');
    const signatureInput = document.getElementById('signature_svg');

    function resizeCanvas() {
        const ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);
        signaturePad.clear();
    }

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    function updateSignButton() {
        const hasSignature = !signaturePad.isEmpty();
        const hasAgreed = agreeCheckbox.checked;
        signBtn.disabled = !(hasSignature && hasAgreed);
    }

    clearBtn.addEventListener('click', () => {
        signaturePad.clear();
        updateSignButton();
    });

    agreeCheckbox.addEventListener('change', updateSignButton);
    signaturePad.addEventListener('endStroke', updateSignButton);

    updateSignButton();

    document.getElementById('signForm').addEventListener('submit', (e) => {
        if (signaturePad.isEmpty()) {
            e.preventDefault();
            alert('Please draw your signature before submitting.');
            return;
        }
        if (!agreeCheckbox.checked) {
            e.preventDefault();
            alert('You must agree to the Terms & Conditions.');
            return;
        }

        const dataUrl = signaturePad.toDataURL('image/png');
        signatureInput.value = dataUrl;
    });
</script>

{% endblock %}