@extends('layouts.app')

@section('title', 'Software Products')
@section('page-title', 'Software Products')
@section('page-subtitle', 'Sell and refer all company software products from one merchant portal')

@section('content')
@php
    $currentLevel = $agent->incentiveLevelFor($agent->activeTenantCount());
@endphp

<div class="card border-0 shadow-sm mb-4 overflow-hidden">
    <div class="card-body p-4 p-lg-5" style="background: linear-gradient(135deg, #0f766e, #1d4ed8);">
        <div class="row g-4 align-items-center text-white">
            <div class="col-lg-8">
                <span class="badge text-bg-light text-dark mb-3">Central merchant marketplace</span>
                <h2 class="display-6 fw-bold mb-2">One portal for every software you sell.</h2>
                <p class="lead mb-0 opacity-75">Use these links for microfinance, POS, hotel, HR, hospital, school, and other products. Each link carries your merchant code so leads can be traced back to you.</p>
            </div>
            <div class="col-lg-4">
                <div class="bg-white bg-opacity-10 rounded p-3">
                    <div class="small opacity-75">Current level</div>
                    <div class="h3 mb-1">{{ $currentLevel['name'] }}</div>
                    <div>{{ $products->count() }} active product{{ $products->count() === 1 ? '' : 's' }} available</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    @foreach([
        ['Products', $products->count(), 'bi-grid-1x2', 'text-primary'],
        ['Self-recruited max', \App\Models\Agent::MAX_COMMISSION_RATE.'%', 'bi-graph-up-arrow', 'text-success'],
        ['Assigned onboarding', \App\Models\Agent::ASSIGNED_ONBOARDING_COMMISSION_RATE.'%', 'bi-person-check', 'text-warning'],
        ['Referral only', \App\Models\Agent::REFERRAL_COMMISSION_RATE.'%', 'bi-link-45deg', 'text-info'],
    ] as [$label, $value, $icon, $color])
        <div class="col-md-6 col-xl-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body d-flex justify-content-between gap-3">
                    <div>
                        <div class="text-muted small">{{ $label }}</div>
                        <div class="h4 mb-0">{{ $value }}</div>
                    </div>
                    <i class="bi {{ $icon }} fs-3 {{ $color }}"></i>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-4">
    @forelse($products as $product)
        @php
            $onboardingUrl = $product->trackingUrlFor($agent, $onboardingType);
            $referralUrl = $product->trackingUrlFor($agent, $referralType);
        @endphp
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between gap-3 mb-3">
                        <div class="d-flex gap-3">
                            <div class="rounded d-grid place-items-center text-white flex-shrink-0" style="width:52px;height:52px;background:{{ $product->color }};">
                                <i class="bi {{ $product->displayIcon() }} fs-3"></i>
                            </div>
                            <div>
                                <div class="d-flex flex-wrap gap-2 align-items-center mb-1">
                                    <h2 class="h5 mb-0">{{ $product->name }}</h2>
                                    @if($product->is_featured)
                                        <span class="badge text-bg-warning">Featured</span>
                                    @endif
                                </div>
                                <div class="text-muted small">{{ $product->categoryLabel() }}</div>
                            </div>
                        </div>
                        @if($product->website_url)
                            <a class="btn btn-sm btn-outline-secondary align-self-start" href="{{ $product->website_url }}" target="_blank" rel="noopener">
                                <i class="bi bi-box-arrow-up-right"></i>
                            </a>
                        @endif
                    </div>

                    <p class="text-muted">{{ $product->short_description }}</p>

                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <div class="border rounded p-3 h-100">
                                <div class="text-muted small">Onboarding</div>
                                <strong>{{ $product->onboarding_commission_rate }}%</strong>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-3 h-100">
                                <div class="text-muted small">Referral</div>
                                <strong>{{ $product->referral_commission_rate }}%</strong>
                            </div>
                        </div>
                    </div>

                    @if($product->description)
                        <div class="small text-muted mb-3">{{ $product->description }}</div>
                    @endif

                    <label class="form-label small text-muted">Onboarding link</label>
                    <div class="input-group mb-2">
                        <input class="form-control" value="{{ $onboardingUrl }}" readonly onclick="this.select()">
                        <button class="btn btn-outline-primary" type="button" data-copy-link="{{ $onboardingUrl }}"><i class="bi bi-copy"></i></button>
                        <a class="btn btn-primary" href="{{ $onboardingUrl }}" target="_blank" rel="noopener"><i class="bi bi-send"></i></a>
                    </div>

                    <label class="form-label small text-muted">Referral-only link</label>
                    <div class="input-group">
                        <input class="form-control" value="{{ $referralUrl }}" readonly onclick="this.select()">
                        <button class="btn btn-outline-primary" type="button" data-copy-link="{{ $referralUrl }}"><i class="bi bi-copy"></i></button>
                        <a class="btn btn-dark" href="{{ $referralUrl }}" target="_blank" rel="noopener"><i class="bi bi-send"></i></a>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center text-muted py-5">
                    <i class="bi bi-grid-1x2 fs-1 d-block mb-3"></i>
                    No software products are active yet. Please check back after super admin adds products.
                </div>
            </div>
        </div>
    @endforelse
</div>

<div class="alert alert-info border-0 shadow-sm mt-4">
    <div class="fw-semibold">For external software sites</div>
    <div>Ask each product website to store the URL parameters <code>merchant</code>, <code>merchant_code</code>, <code>merchant_type</code>, and <code>product</code> during signup. That is what connects the lead back to your merchant account.</div>
</div>

<script>
document.querySelectorAll('[data-copy-link]').forEach((button) => {
    button.addEventListener('click', async () => {
        await navigator.clipboard.writeText(button.dataset.copyLink);
        const original = button.innerHTML;
        button.innerHTML = '<i class="bi bi-check2"></i>';
        setTimeout(() => button.innerHTML = original, 1200);
    });
});
</script>
@endsection
