@extends('dashboard.layouts.app')

@section('content')
<div class="container-fluid app-bg" id="sales-target-report">
    <div class="page-shell">
        <div class="report-progress" id="report-progress"></div>
        <div class="alert alert-danger d-none" id="report-ajax-error" role="alert"></div>
        <x-page-title title="Sales / Retention Report" description="Quarterly team performance and paid sales.">
            <a href="{{ route('payrolls.index') }}" class="btn btn-sm btn-outline-secondary">Payrolls</a>
        </x-page-title>

        <div class="ui-card report-card mb-3">
            <div class="card-body">
                <form action="{{ route('reports.sales_targets') }}" method="GET" class="row g-3 align-items-end"
                    id="sales-target-report-filters">
                    <input type="hidden" name="tab" value="{{ $activeTab }}">
                    <div class="col-sm-4 col-md-3 p-3">
                        <label for="quarter" class="form-label">Quarter</label>
                        <select id="quarter" name="quarter" class="form-select">
                            @foreach ([1, 2, 3, 4] as $option)
                                <option value="{{ $option }}" @selected($quarter === $option)>Q{{ $option }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-4 col-md-3 p-3">
                        <label for="year" class="form-label">Year</label>
                        <select id="year" name="year" class="form-select">
                            @for ($option = now()->year + 1; $option >= 2010; $option--)
                                <option value="{{ $option }}" @selected($year === $option)>{{ $option }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-sm-4 col-md-3 p-3">
                        <button class="btn btn-primary" type="submit">Show report</button>
                    </div>
                </form>
            </div>
        </div>

        <ul class="nav report-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link report-tab-link {{ $activeTab === 'sales' ? 'active' : '' }}"
                    href="{{ route('reports.sales_targets', ['quarter' => $quarter, 'year' => $year, 'tab' => 'sales']) }}">Sales</a>
            </li>
            <li class="nav-item">
                <a class="nav-link report-tab-link {{ $activeTab === 'retention' ? 'active' : '' }}"
                    href="{{ route('reports.sales_targets', ['quarter' => $quarter, 'year' => $year, 'tab' => 'retention']) }}">Retention</a>
            </li>
            <li class="nav-item">
                <a class="nav-link report-tab-link {{ $activeTab === 'recommendation' ? 'active' : '' }}"
                    href="{{ route('reports.sales_targets', ['quarter' => $quarter, 'year' => $year, 'tab' => 'recommendation']) }}">Recommendation</a>
            </li>
        </ul>

        @php($teamBreakdown = $teamBreakdowns[$activeTab])
        <div class="ui-card report-card mb-3">
            <div class="report-card__header">
                <strong>Q{{ $quarter }} {{ $year }} &middot; {{ ucfirst($activeTab) }} Track Breakdown</strong>
            </div>
            <div class="table-responsive">
                <table class="table report-table table-hover align-middle mb-0 text-center">
                    <thead>
                        <tr>
                            <th>{{ $activeTab === 'sales' ? 'SALES' : ($activeTab === 'retention' ? 'RET' : 'REC') }}
                            </th>
                            <th class="text-center">Count</th>
                            <th class="text-center">Level</th>
                            <th class="text-center">Total</th>
                            <th class="text-center">Average</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($teamBreakdown['rows'] as $trackRow)
                            <tr>
                                <td>{{ $trackRow['label'] }}</td>
                                <td class="text-center">{{ number_format($trackRow['count']) }}</td>
                                <td class="text-center">{{ number_format($trackRow['level']) }}</td>
                                <td class="text-center">
                                    {{ $trackRow['total'] > 0 ? number_format($trackRow['total'], 2) : '-' }}
                                </td>
                                <td class="text-center">
                                    {{ $trackRow['average'] !== null ? number_format($trackRow['average'], 2) : '-' }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="fw-semibold">
                        <tr>
                            <td>Total</td>
                            <td class="text-center">{{ number_format($teamBreakdown['total']['count']) }}</td>
                            <td class="text-center">{{ number_format($teamBreakdown['total']['level']) }}</td>
                            <td class="text-center">{{ number_format($teamBreakdown['total']['amount'], 2) }}</td>
                            <td class="text-center">
                                {{ $teamBreakdown['total']['average'] !== null ? number_format($teamBreakdown['total']['average'], 2) : '-' }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="card-footer p-3 text-muted small">
                Paid track invoices created during the selected quarter. Average = total paid amount divided by levels.
                @if ($activeTab === 'recommendation')
                    Recommendation invoices are attributed to the Retention staff member recorded on the referral activity.
                @endif
            </div>
        </div>

        <div class="ui-card report-card mb-3">
            <div class="report-card__header">
                <strong>Q{{ $quarter }} {{ $year }} &middot; Paid Invoices by Currency</strong>
            </div>
            <div class="table-responsive">
                <table class="table report-table align-middle mb-0 text-center">
                    <thead>
                        <tr>
                            <th>DEP</th>
                            <th class="text-center">Total Students</th>
                            @foreach ($currencyBreakdown['currencies'] as $currency)
                                <th class="text-center">Paid {{ $currency }}</th>
                            @endforeach
                            @foreach ($currencyBreakdown['currencies'] as $currency)
                                <th class="text-center">Equivalent {{ $currency }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ([
                                'Sales' => ['total' => $teamBreakdowns['sales']['total'], 'amounts' => $currencyBreakdown['teams']['sales']],
                                'Retention' => ['total' => $teamBreakdowns['retention']['total'], 'amounts' => $currencyBreakdown['teams']['retention']],
                                'Recommendation' => ['total' => $teamBreakdowns['recommendation']['total'], 'amounts' => $currencyBreakdown['teams']['recommendation']],
                            ] as $departmentName => $departmentTotal)
                            <tr>
                                <th>{{ $departmentName }}</th>
                                <td class="text-center fw-semibold">{{ number_format($departmentTotal['total']['students']) }}</td>
                                @foreach ($currencyBreakdown['currencies'] as $currency)
                                    <td class="text-center">{{ number_format($departmentTotal['amounts']['native'][$currency] ?? 0, 2) }}</td>
                                @endforeach
                                @foreach ($currencyBreakdown['currencies'] as $currency)
                                    <td class="text-center fw-semibold">
                                        {{ $departmentTotal['amounts']['equivalent'][$currency] !== null
                                            ? number_format($departmentTotal['amounts']['equivalent'][$currency], 2)
                                            : '-' }}
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="card-footer p-3 text-muted small">
                Students are unique within each department. “Paid” sums net prices in invoice currency; “Equivalent” converts each invoice using its saved currency snapshot.
            </div>
        </div>

        @if ($activeTab === 'sales')
            <div class="row g-3 mb-3">
                <div class="col-sm-6 col-xl-3">
                    <div class="ui-card report-metric h-100 p-3">
                        <div class="card-body">
                            <div class="text-muted">Sales Agents</div>
                            <div class="fs-3 fw-semibold">{{ number_format($summary['employees']) }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="ui-card report-metric h-100 p-3">
                        <div class="card-body">
                            <div class="text-muted">Total Target</div>
                            <div class="fs-3 fw-semibold">{{ number_format($summary['target'], 2) }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="ui-card report-metric h-100 p-3">
                        <div class="card-body">
                            <div class="text-muted">Total Paid Sales</div>
                            <div class="fs-3 fw-semibold">{{ number_format($summary['achieved'], 2) }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                    <div class="ui-card report-metric h-100 p-3">
                        <div class="card-body">
                            <div class="text-muted">Estimated Bonuses</div>
                            <div class="fs-3 fw-semibold">{{ number_format($summary['bonuses'], 2) }}</div>
                            <small class="text-muted">{{ $summary['eligible'] }} eligible employees</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ui-card report-card">
                <div class="report-card__header">
                    <strong>Q{{ $quarter }} {{ $year }} · Sales Agents</strong>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle mb-0 text-center">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Name</th>
                                <th class="text-center">Unique Students</th>
                                <th class="text-center">Invoices</th>
                                <th class="text-center">Paid</th>
                                <th class="text-center">Unpaid</th>
                                <th class="text-center">Target</th>
                                <th class="text-center">Net (invoice amounts)</th>
                                <th class="text-center">Percentage</th>
                                <th class="text-center">Pro</th>
                                <th class="text-center">Pro percentage</th>
                                @foreach ($currencyBreakdown['currencies'] as $currency)
                                    <th class="text-center">Paid {{ $currency }}</th>
                                @endforeach
                                @foreach ($currencyBreakdown['currencies'] as $currency)
                                    <th class="text-center">Equivalent {{ $currency }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                <tr>
                                    <td class="text-center">{{ $row['staff_no'] ?: '—' }}</td>
                                    <td class="text-center">{{ $row['name'] }}</td>
                                    <td class="text-center">{{ number_format($row['unique_paid_students']) }}</td>
                                    <td class="text-center">{{ number_format($row['total_invoices']) }}</td>
                                    <td class="text-center">{{ number_format($row['paid_invoices']) }}</td>
                                    <td class="text-center">{{ number_format($row['unpaid_invoices']) }}</td>
                                    <td class="text-center">
                                        {{ $row['has_configuration'] ? number_format($row['target'], 2) : '—' }}
                                    </td>
                                    <td class="text-center">{{ $row['achieved'] > 0 ? number_format($row['achieved'], 2) : '—' }}
                                    </td>
                                    <td class="text-center">{{ number_format($row['achievement_percentage'], 2) }}%</td>
                                    <td class="text-center">
                                        {{ $row['bonus_amount'] > 0 ? number_format($row['bonus_amount'], 2) : '—' }}
                                    </td>
                                    <td class="text-center">{{ number_format($row['pro_percentage'], 2) }}%</td>
                                    @foreach ($currencyBreakdown['currencies'] as $currency)
                                        <td class="text-center">{{ number_format(data_get($row, 'currency_amounts.native.'.$currency, 0), 2) }}</td>
                                    @endforeach
                                    @foreach ($currencyBreakdown['currencies'] as $currency)
                                        <td class="text-center">
                                            {{ data_get($row, 'currency_amounts.equivalent.'.$currency) !== null
                                                ? number_format(data_get($row, 'currency_amounts.equivalent.'.$currency), 2)
                                                : '-' }}
                                        </td>
                                    @endforeach
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ 11 + (2 * count($currencyBreakdown['currencies'])) }}" class="text-center text-muted py-3">No Sales Agents found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                        @if ($rows->isNotEmpty())
                            <tfoot class="table-light fw-semibold">
                                <tr>
                                    <td colspan="2">Total</td>
                                    <td class="text-center">{{ number_format($rows->sum('unique_paid_students')) }}</td>
                                    <td class="text-center">{{ number_format($rows->sum('total_invoices')) }}</td>
                                    <td class="text-center">{{ number_format($rows->sum('paid_invoices')) }}</td>
                                    <td class="text-center">{{ number_format($rows->sum('unpaid_invoices')) }}</td>
                                    <td class="text-center">{{ number_format($summary['target'], 2) }}</td>
                                    <td class="text-center">{{ number_format($summary['achieved'], 2) }}</td>
                                    <td class="text-center">—</td>
                                    <td class="text-center">{{ number_format($summary['bonuses'], 2) }}</td>
                                    <td class="text-center">—</td>
                                    @foreach ($currencyBreakdown['currencies'] as $currency)
                                        <td class="text-center">{{ number_format($currencyBreakdown['teams']['sales']['native'][$currency] ?? 0, 2) }}</td>
                                    @endforeach
                                    @foreach ($currencyBreakdown['currencies'] as $currency)
                                        <td class="text-center">
                                            {{ $currencyBreakdown['teams']['sales']['equivalent'][$currency] !== null
                                                ? number_format($currencyBreakdown['teams']['sales']['equivalent'][$currency], 2)
                                                : '-' }}
                                        </td>
                                    @endforeach
                                </tr>
                            </tfoot>
                        @endif
                    </table>
                </div>
                <div class="card-footer p-3 text-muted small">
                    Invoice counts include all invoices created by the employee during the selected quarter. Unique Students
                    counts students on paid invoices. Net includes paid invoices only.
                    Bonus is zero below Conv% Min; above the full target, Bonus Conv% is added to Bonus%.
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('styles')
    <style>
        #sales-target-report .report-progress {
            height: 3px;
            background: transparent;
        }

        #sales-target-report[aria-busy="true"] .report-progress {
            background: linear-gradient(90deg, #f8d443 35%, #486cea 65%);
            animation: report-loading 1s ease-in-out infinite alternate;
        }

        @keyframes report-loading {
            from {
                opacity: .45;
            }

            to {
                opacity: 1;
            }
        }

        #sales-target-report .report-card {
            border: 1px solid #e8ebf0;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 2px 10px rgba(20, 30, 55, .035);
        }

        #sales-target-report .report-card__header {
            padding: .85rem 1rem;
            border-bottom: 1px solid #edf0f4;
            color: #172033;
            font-weight: 600;
        }

        #sales-target-report .report-tabs {
            gap: .35rem;
            width: fit-content;
            max-width: 100%;
            padding: .3rem;
            border: 0;
            border-radius: 11px;
            background: #f1f3f6;
        }

        #sales-target-report .report-tabs .nav-link {
            border: 0;
            border-radius: 8px;
            padding: .55rem .9rem;
            color: #596273;
            font-size: .9rem;
            font-weight: 600;
        }

        #sales-target-report .report-tabs .nav-link.active {
            color: #172033;
            background: #f8d443;
            box-shadow: 0 1px 3px rgba(20, 30, 55, .12);
        }

        #sales-target-report .report-table thead th {
            background: #f4f6f9;
            color: #475166;
            border-bottom: 1px solid #e7eaf0;
            font-size: .82rem;
            font-weight: 600;
        }

        #sales-target-report .report-table td,
        #sales-target-report .report-table th {
            padding: .68rem .85rem;
            border-color: #edf0f4;
        }

        #sales-target-report .report-table tfoot {
            background: #fff9df;
        }

        #sales-target-report .report-metric {
            border: 1px solid #e8ebf0;
            border-radius: 14px;
            box-shadow: 0 2px 10px rgba(20, 30, 55, .035);
        }

        #sales-target-report[aria-busy="true"] {
            cursor: progress;
        }

        @media (max-width: 575px) {
            #sales-target-report .report-tabs {
                width: 100%;
            }

            #sales-target-report .report-tabs .nav-link {
                padding-inline: .65rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            const report = document.getElementById('sales-target-report');
            if (!report) return;

            let currentRequest = null;

            function loadReport(url, pushHistory) {
                const errorBox = document.getElementById('report-ajax-error');
                errorBox.classList.add('d-none');

                if (currentRequest) currentRequest.abort();
                currentRequest = new AbortController();
                report.setAttribute('aria-busy', 'true');

                fetch(url, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    signal: currentRequest.signal
                })
                    .then(response => {
                        if (!response.ok) throw new Error('Could not load the report.');
                        return response.text();
                    })
                    .then(html => {
                        const parsed = new DOMParser().parseFromString(html, 'text/html');
                        const updatedReport = parsed.getElementById('sales-target-report');
                        if (!updatedReport) throw new Error('The report response was invalid.');

                        report.innerHTML = updatedReport.innerHTML;
                        report.removeAttribute('aria-busy');
                        currentRequest = null;
                        if (pushHistory) window.history.pushState({}, '', url);
                    })
                    .catch(error => {
                        if (error.name === 'AbortError') return;
                        report.removeAttribute('aria-busy');
                        errorBox.textContent = error.message;
                        errorBox.classList.remove('d-none');
                        currentRequest = null;
                    });
            }

            report.addEventListener('click', function (event) {
                const link = event.target.closest('a.report-tab-link');
                if (!link || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
                event.preventDefault();
                loadReport(link.href, true);
            });

            report.addEventListener('submit', function (event) {
                if (!event.target.matches('#sales-target-report-filters')) return;
                event.preventDefault();
                const url = new URL(event.target.action, window.location.origin);
                new FormData(event.target).forEach((value, key) => url.searchParams.set(key, value));
                loadReport(url.toString(), true);
            });

            window.addEventListener('popstate', function () {
                loadReport(window.location.href, false);
            });
        })();
    </script>
@endpush