@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">
            {{-- Left: text --}}
            <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 Invoice Enhancements
                </h1>
                <p class="mt-6 text-lg text-gray-600 leading-relaxed">
                    Extends the base Agency Pulse Invoice plugin with advanced management, security, and branding tools —
                    giving agencies full control over multi-company billing, custom numbering, file security, and more.
                </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-enhancements-wordpress-plugin-384x384.png') }}"
                     alt="Agency Pulse Invoice Enhancements 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">

        {{-- Multi-Company & Branding --}}
        <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> Multi-Company &amp; Branding
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Advanced Multi-Company Management</strong>: Support for managing multiple business entities from a single installation. Each company can have its own name, address, and legal details.</li>
                <li><strong>Per-Company Logos</strong>: Ability to assign unique logos to each company. Invoices automatically display the logo corresponding to the assigned company.</li>
                <li><strong>Company Template Defaults</strong>: Assign a specific invoice template as the default for each company.</li>
                <li><strong>Policy Enforcement (Force Template)</strong>: A global setting to &ldquo;Force&rdquo; company templates. When active, invoices are locked to the company&rsquo;s assigned template, preventing manual overrides by users during creation.</li>
                <li><strong>Real-Time Builder Synchronization</strong>: The Invoice Builder UI dynamically updates and locks the template selector based on the chosen company and active policies.</li>
            </ul>
        </div>

        {{-- Pre-Configured Client Templates --}}
        <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> Pre-Configured Client Templates
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Save as Template (Invoice Builder)</strong>: Quickly save any draft invoice&rsquo;s configuration (line items, tax, currency, and visual layout) as a reusable template for that specific client.</li>
                <li><strong>Intelligent Refinement</strong>: The system automatically detects if an invoice&rsquo;s data matches an existing template and offers to update it instead of creating duplicates.</li>
                <li><strong>Full Preset Restoration</strong>: When loading a client template, the system restores not just the billing data, but also the assigned company, visual layout, and file attachments.</li>
                <li><strong>Client Management Integration</strong>: Manage, preview, and delete saved templates directly from the client profile page in the Agency Pulse Portal.</li>
                <li><strong>Rapid Invoice Generation</strong>: Launch the Invoice Builder directly from the client list with a template pre-loaded to generate recurring or standard invoices in seconds.</li>
                <li><strong>Usage Tracking</strong>: Monitor how many times each template has been used and when it was last accessed to identify common billing patterns.</li>
            </ul>
        </div>

        {{-- Custom Invoice Numbering --}}
        <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> Custom Invoice Numbering
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Flexible Numbering Formats</strong>: Complete control over how invoice numbers are generated and displayed.</li>
                <li><strong>Custom Prefixes</strong>: Define a static prefix (e.g., <code class="bg-gray-100 px-1 rounded text-xs">INV</code>, <code class="bg-gray-100 px-1 rounded text-xs">AP</code>, <code class="bg-gray-100 px-1 rounded text-xs">BILL</code>) for all invoices.</li>
                <li><strong>Multi-Separator Support</strong>: Configure multiple separators (e.g., <code class="bg-gray-100 px-1 rounded text-xs">-</code>, <code class="bg-gray-100 px-1 rounded text-xs">/</code>, <code class="bg-gray-100 px-1 rounded text-xs">.</code>) at specific character positions within the invoice string.</li>
                <li><strong>Number Padding</strong>: Control the leading zeros for invoice numbers (e.g., <code class="bg-gray-100 px-1 rounded text-xs">000001</code> vs <code class="bg-gray-100 px-1 rounded text-xs">1</code>).</li>
                <li><strong>Sequential Sequence Control</strong>: Define the starting number for the invoice sequence.</li>
                <li><strong>Dynamic Year Inclusion</strong>: Automatically include the current year in 2-digit (<code class="bg-gray-100 px-1 rounded text-xs">24</code>) or 4-digit (<code class="bg-gray-100 px-1 rounded text-xs">2024</code>) format, with positioning either before or after the prefix.</li>
                <li><strong>Real-Time Format Preview</strong>: The Invoice Numbering settings page displays a live sample number that updates instantly as configuration options are adjusted, providing immediate visual feedback before saving.</li>
            </ul>
        </div>

        {{-- File & Asset 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> File &amp; Asset Security
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Hide Files Until Paid</strong>: Capability to hide invoice attachments (PDFs, reports, etc.) from the public view until the invoice status is marked as &ldquo;Paid.&rdquo;</li>
                <li><strong>Global Access Policy</strong>: Set a system-wide default for file visibility on unpaid invoices.</li>
                <li><strong>Granular Per-Invoice Overrides</strong>: Override the global visibility policy on a per-invoice basis via a dedicated control in the files metabox.</li>
            </ul>
        </div>

        {{-- External Storage & API 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> External Storage &amp; API Integration
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li class="developer"><strong>External Upload API</strong>: Integrates with the Agency Pulse API to offload invoice attachments to external storage providers.</li>
                <li class="developer"><strong>Automated Sync</strong>: Seamlessly synchronizes metadata between local WordPress attachments and external storage objects.</li>
                <li><strong>Hybrid File Lists</strong>: Public invoice views display both locally hosted and externally stored files in a unified table.</li>
                <li><strong>Connectivity Diagnostics</strong>: Includes a &ldquo;Test Upload&rdquo; utility in the settings to verify API credentials and external storage availability.</li>
            </ul>
        </div>

        {{-- Portal & Ecosystem 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> Portal &amp; Ecosystem Integration
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li class="developer"><strong>Agency Pulse Portal Hooking</strong>: Deep integration with the Agency Pulse Portal plugin, including injected detail sections on client profiles.</li>
                <li class="developer"><strong>Template Service Layer</strong>: A dedicated backend service for managing invoice template logic independently of the core rendering engine.</li>
                <li class="developer"><strong>Admin UI Overlays</strong>: Injects secondary controls and informative notices into the core Invoice Builder to guide users through enhanced features.</li>
            </ul>
        </div>

        {{-- Plugin 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> Plugin Management
            </h2>
            <ul class="space-y-3 text-gray-700 text-sm leading-relaxed list-disc list-inside">
                <li><strong>Automatic Updates</strong>: The plugin includes a self-hosted update checker that connects to Agency Pulse licensing servers. New releases are detected automatically and can be installed directly from the standard WordPress plugins update screen.</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