@extends('layouts.app')

@section('content')

{{-- Hero --}}
<section class="bg-white">
    <div class="max-w-7xl mx-auto px-6 pt-14 pb-16">
        <div class="grid lg:grid-cols-2 gap-12 items-start">
            <div>
                <span class="inline-block mb-4 text-sm font-semibold text-indigo-600 uppercase tracking-wide">Add-On Plugin</span>
                <h1 class="text-4xl md:text-5xl font-semibold tracking-tight leading-tight text-gray-900">
                    Agency Pulse Secure-Sign
                </h1>
                <p class="mt-6 text-lg text-gray-600 leading-relaxed">
                    Add legally-defensible client signature capture directly to your invoices —
                    generating tamper-evident signed PDFs stored securely in the cloud with a full audit trail.
                </p>
                <div class="mt-8">
                    <a href="/products" class="px-6 py-3 bg-gray-100 text-gray-800 rounded-lg font-medium hover:bg-gray-200 transition">
                        ← All Add-Ons
                    </a>
                </div>
            </div>
            <div class="flex items-center justify-center">
                <img src="{{ asset('images/boxes/invoice-secure-signing-plugin-384x384.png') }}"
                     alt="Agency Pulse Secure-Sign Plugin"
                     class="w-full max-w-sm rounded-xl shadow-sm">
            </div>
        </div>
    </div>
</section>

{{-- Feature Groups --}}
<section class="bg-gray-50 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-6 py-16 space-y-8">

        {{-- Signature Collection --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>✍️</span> Signature Collection &amp; Client Signing Page
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Dedicated Client Signing Page</strong>: A purpose-built, fully self-contained signing page delivered to clients via a secure tokenized URL, requiring no login and no WordPress theme.</li>
                <li><strong>Signature Canvas</strong>: An interactive drawing canvas powered by Signature Pad v4.2.0, allowing clients to draw their signature with mouse or touch input, with a one-click clear button.</li>
                <li><strong>Agreement Checkpoint</strong>: A mandatory &ldquo;I agree to the terms of this invoice&rdquo; checkbox must be checked before submission, creating an explicit client acknowledgement on record.</li>
                <li><strong>Frozen Invoice Preview</strong>: The invoice displayed on the signing page is a point-in-time snapshot captured when the admin sends the request, ensuring the client signs exactly what was presented &mdash; not a live-editable copy.</li>
                <li><strong>State-Aware Page Rendering</strong>: The signing page intelligently adapts to the token&rsquo;s state &mdash; showing the signing form if pending, a confirmation screen if already signed, and a descriptive error page for invalid or expired tokens.</li>
                <li><strong>Search Engine Protection</strong>: Signing pages include <code class="bg-gray-100 px-1 rounded text-xs">noindex, nofollow</code> meta tags to prevent indexing of sensitive client documents.</li>
            </ul>
        </div>

        {{-- Token Security --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🔐</span> Token Security &amp; Access Control
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li class="developer"><strong>Cryptographically Secure Tokens</strong>: Each signing request generates a 64-character hex token using <code class="bg-gray-100 px-1 rounded text-xs">random_bytes(32)</code>, making tokens computationally infeasible to guess or brute-force.</li>
                <li><strong>Configurable Token Expiry</strong>: Signing links expire after a configurable number of days (default 7), preventing stale links from being used. Expiry is visible to the admin in the signing panel.</li>
                <li><strong>Single-Use Tokens</strong>: Tokens are permanently deleted after the client successfully submits their signature and cannot be reused.</li>
                <li class="developer"><strong>Server-Side Signature Verification</strong>: Beyond client-side canvas checks, the server independently validates that the submitted image is a valid base64 PNG or JPEG and uses PHP GD image analysis to confirm the signature contains actual pen marks (non-white pixels), rejecting blank or near-blank submissions.</li>
                <li><strong>Client IP Capture</strong>: The client&rsquo;s real IP address is captured at signing time, supporting Cloudflare, X-Forwarded-For, and X-Real-IP headers, and stored as part of the audit record.</li>
                <li><strong>PDF Integrity Hashing</strong>: A SHA-256 hash of the generated signed PDF is stored at signing time and re-verified on every download request, ensuring the cloud-stored document has not been tampered with.</li>
            </ul>
        </div>

        {{-- Signature Requirement Management --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>📋</span> Signature Requirement Management
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Per-Invoice Requirement Toggle</strong>: A checkbox in the invoice editor lets administrators enable or disable the signature requirement on a per-invoice basis, with full admin override capability.</li>
                <li><strong>Global &ldquo;Always Require&rdquo; Mode</strong>: A global setting forces signature collection on every invoice, removing the per-invoice checkbox entirely and ensuring no invoice can be issued without a signature.</li>
                <li><strong>Require by Default</strong>: An optional global setting pre-checks the per-invoice signature toggle for all new invoices, while still allowing administrators to override on a case-by-case basis.</li>
                <li><strong>Master Feature Switch</strong>: A top-level enable/disable toggle controls the entire plugin. When disabled, all signing UI is hidden, issuance is never blocked, and the <code class="bg-gray-100 px-1 rounded text-xs">{SIGNATURE}</code> placeholder is cleanly stripped from templates.</li>
            </ul>
        </div>

        {{-- Admin Signing Workflow --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>📤</span> Admin Signing Workflow
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Send for Signing Panel</strong>: A dedicated signing panel is injected directly above the Issue button in the invoice metabox, providing a clear workflow from within the standard invoice editor.</li>
                <li><strong>One-Click Send</strong>: A &ldquo;Send for Signing&rdquo; button generates the token, freezes the invoice snapshot, and dispatches the signing request email to the client &mdash; all in a single AJAX action.</li>
                <li><strong>Signing URL Copy Button</strong>: A clipboard copy button in the admin panel lets administrators manually share the signing link outside of email if needed.</li>
                <li><strong>Resend Capability</strong>: If a signing request has already been sent, a &ldquo;Resend&rdquo; button is available to resend the email to the client without generating a new token.</li>
                <li><strong>Live Status Display</strong>: The signing panel shows the current state of each invoice &mdash; no request sent, awaiting client signature (with expiry date), or signed (with date and IP address).</li>
                <li><strong>Connector Status Indicator</strong>: The panel shows a real-time green/red indicator for whether the Agency Pulse Pro Connector is active and authenticated, with a direct link to the connector settings if configuration is needed.</li>
                <li><strong>Edit Invalidation</strong>: If an invoice is edited after a signing request has been sent but before the client signs, the pending token and snapshot are automatically cleared to prevent the client from signing a stale document.</li>
                <li><strong>Revocation Cleanup</strong>: When an invoice is revoked (reopened), all signing state &mdash; tokens, snapshots, completion flags, and PDF paths &mdash; is fully cleared, while the requirement toggle is preserved for the next request.</li>
            </ul>
        </div>

        {{-- External Signing Service --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🌐</span> External Signing Service Integration
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Server-to-Server Architecture</strong>: All communication with the external signing service is server-side only &mdash; the client&rsquo;s browser never interacts with the service directly, preventing credential exposure.</li>
                <li><strong>Signed PDF Generation</strong>: On signature submission, the complete invoice HTML (with embedded images and a CSS reset for consistent rendering) plus the client&rsquo;s signature image are posted to the external service, which produces a tamper-evident signed PDF.</li>
                <li><strong>Cloud PDF Storage</strong>: Signed PDFs are stored in S3-compatible cloud storage by the external service. Only the S3 path and integrity hash are stored locally &mdash; the PDF itself is never stored in WordPress.</li>
                <li><strong>Pre-Signed Download URLs</strong>: When a signed PDF is downloaded, a time-limited pre-signed URL is requested from the service on demand. URL validity is configurable (1&ndash;365 days).</li>
                <li><strong>Subscription Health Monitoring</strong>: If the signing service returns a 403 Forbidden response, the plugin sets a flag that triggers a persistent admin notice and clears it automatically on the next successful request.</li>
            </ul>
        </div>

        {{-- Invoice Lifecycle Integration --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>📊</span> Invoice Lifecycle Integration
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Pro-Forma Status Enforcement</strong>: Before generating the client-facing snapshot, the plugin forces the invoice to &ldquo;Pro-Forma&rdquo; status, ensuring the document the client sees and signs accurately reflects the pre-issuance state.</li>
                <li><strong>Invoice Number Assignment at Signing</strong>: The formal invoice number is not assigned until the client successfully submits their signature, ensuring only signed invoices receive official numbers and maintaining an accurate audit trail.</li>
                <li class="developer"><strong>Automatic Issuance</strong>: Upon successful signature submission and PDF generation, the invoice is automatically transitioned from Pro-Forma to Unpaid status via the core issuance hook &mdash; no manual admin action required.</li>
                <li><strong>Version History Integration</strong>: Each signed PDF is appended to the core invoice version history with its S3 path, integrity hash, and timestamp. A custom download button replaces the standard PDF link for S3-backed entries.</li>
                <li><strong>Local PDF Suppression</strong>: When a signed PDF exists for an invoice, the plugin suppresses local PDF generation to prevent duplicate, unsigned copies from being created.</li>
            </ul>
        </div>

        {{-- Email Notifications --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>📧</span> Email Notifications
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Signing Request Email</strong>: A fully customizable HTML email is sent to the client when the admin dispatches a signing request. Supports dynamic placeholders: <code class="bg-gray-100 px-1 rounded text-xs">{customer_name}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{invoice_amount}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{signing_link}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{signing_expires}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{company_name}</code>.</li>
                <li><strong>Client Signed Confirmation</strong>: Upon successful signature submission, a customizable confirmation email is sent to the client with their invoice details, signing date, and a link to the payment portal. Supports placeholders: <code class="bg-gray-100 px-1 rounded text-xs">{customer_name}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{invoice_number}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{invoice_amount}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{signed_date}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{payment_url}</code>, <code class="bg-gray-100 px-1 rounded text-xs">{company_name}</code>.</li>
                <li><strong>Admin Signed Notification</strong>: Simultaneously, a notification is sent to the site admin email with full signing details including the client IP address for audit purposes via the <code class="bg-gray-100 px-1 rounded text-xs">{signed_ip}</code> placeholder.</li>
                <li><strong>Email Settings Integration</strong>: All three email templates (subject and body) are configurable via dedicated tabs in the Agency Pulse Invoice Email Settings page, using the same TinyMCE editor interface as other system emails.</li>
            </ul>
        </div>

        {{-- Settings & Configuration --}}
        <div class="bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>⚙️</span> Settings &amp; Configuration
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Dedicated Settings Tab</strong>: A &ldquo;Secure Sign&rdquo; tab is added to the Agency Pulse Invoice settings page for all plugin configuration, with a live Pro Connector status indicator at the top.</li>
                <li><strong>Requirement Behaviour Controls</strong>: Settings for the master switch, always-require mode, and require-by-default mode, with the require-by-default option automatically disabled (visually and functionally) when always-require is active.</li>
                <li><strong>Download URL TTL</strong>: Administrators can set the number of days (1&ndash;365) that pre-signed S3 download links remain valid, balancing convenience with security.</li>
            </ul>
        </div>

        {{-- Extensibility & Hook Integration --}}
        <div class="developer bg-white border border-gray-200 rounded-xl p-8 hover:shadow-md transition">
            <h2 class="text-xl font-semibold text-gray-900 mb-5 flex items-center gap-2">
                <span>🔗</span> Extensibility &amp; Hook Integration
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong><code class="bg-gray-100 px-1 rounded text-xs">{SIGNATURE}</code> Template Tag</strong>: Registers the <code class="bg-gray-100 px-1 rounded text-xs">{SIGNATURE}</code> placeholder with the core template replacement system. On standard renders the tag resolves to an empty string; on the signing page it is replaced with the full interactive signing block at the exact position in the document.</li>
                <li><strong><code class="bg-gray-100 px-1 rounded text-xs">apss_invoice_signed</code> Action</strong>: Fires immediately after a successful signature is recorded, allowing downstream integrations such as webhooks, CRM updates, and workflow automation to react to the signing event.</li>
                <li><strong>Issuance Gate Filter</strong>: Hooks into <code class="bg-gray-100 px-1 rounded text-xs">agency_pulse_invoice_can_be_issued</code> to block invoice issuance when a signature is required but not yet collected, returning a descriptive error with context-appropriate messaging.</li>
                <li><strong>PDF Generation Filter</strong>: Hooks into <code class="bg-gray-100 px-1 rounded text-xs">agency_pulse_invoice_should_generate_pdf</code> to suppress redundant local PDF creation when a cloud-signed PDF already exists.</li>
                <li><strong>Admin Notice Integration</strong>: Hooks into the <code class="bg-gray-100 px-1 rounded text-xs">agency_pulse_admin_notices</code> system to surface subscription warnings across all admin pages without directly touching the WordPress <code class="bg-gray-100 px-1 rounded text-xs">admin_notices</code> hook.</li>
            </ul>
        </div>

    </div>
</section>

{{-- Bottom CTA --}}
@if($product ?? null)
<section class="bg-white border-t border-gray-200">
    <div class="max-w-lg mx-auto px-6 py-16">
        <div class="bg-white border border-gray-200 rounded-xl p-8 shadow-sm flex flex-col gap-5">
            <div class="text-center">
                <h2 class="text-2xl font-semibold text-gray-900">Get {{ $product->name }}</h2>
                <p class="mt-2 text-gray-500 text-sm">Unlock all the features above for your agency.</p>
            </div>
            <div class="flex justify-between items-center">
                <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                    ${{ number_format($product->price, 2) }} / monthly
                </span>
                <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">
                    ${{ number_format($product->price * 10, 2) }} / yearly
                </span>
            </div>
            <form method="POST" action="{{ route('cart.add') }}" class="js-add-to-cart">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-4 rounded-lg transition text-base">
                    Add to Cart
                </button>
            </form>
        </div>
    </div>
</section>
@endif

@endsection