@php
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    );
@endphp
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="container-fluid">

    {{-- Page title + export buttons --}}
    <div class="main_title d-flex justify-content-between align-items-center">
        <h2>Sales Performance Report</h2>
        <div class="d-flex gap-2">
            <a href="{{ route('reports.sales-performance.export.csv', ['from_date' => $from_date, 'to_date' => $to_date]) }}"
               class="{{ \Config::get('view.buttons.secondary') }}">
                <i class="bx bx-download"></i> Export CSV
            </a>
            <a href="{{ route('reports.sales-performance.export.pdf', ['from_date' => $from_date, 'to_date' => $to_date]) }}"
               class="{{ \Config::get('view.buttons.secondary') }}">
                <i class="bx bx-file-pdf"></i> Export PDF
            </a>
        </div>
    </div>

    {{-- Date range filter --}}
    <div class="project-box mb-4">
        <form method="GET" action="{{ route('reports.sales-performance') }}" class="row g-2 align-items-end">
            <div class="col-md-3 col-sm-6 col-12">
                <label class="form-label small mb-1">From Date</label>
                <input type="date" name="from_date" class="form-control form-control-sm" value="{{ $from_date }}">
            </div>
            <div class="col-md-3 col-sm-6 col-12">
                <label class="form-label small mb-1">To Date</label>
                <input type="date" name="to_date" class="form-control form-control-sm" value="{{ $to_date }}">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-sm btn-primary">Apply Filter</button>
            </div>
        </form>
    </div>

    {{-- Row 1: Chart + KPI Summary Cards --}}
    <div class="row mb-4">
        {{-- ApexCharts bar chart --}}
        <div class="col-lg-8 col-12 mb-3">
            <div class="project-box h-100">
                <h5 class="mb-3">Leads by Sales Rep</h5>
                <div id="salesRepChart"></div>
            </div>
        </div>

        {{-- KPI Summary Cards --}}
        <div class="col-lg-4 col-12 mb-3">
            <div class="row h-100">
                <div class="col-6 mb-3">
                    <div class="project-box text-center h-100">
                        <h2 class="text-primary mb-1">{{ number_format($totals['total_leads']) }}</h2>
                        <p class="mb-0 text-muted small">Total Leads</p>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="project-box text-center h-100">
                        <h2 class="text-success mb-1">{{ number_format($totals['converted_leads']) }}</h2>
                        <p class="mb-0 text-muted small">Converted</p>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="project-box text-center h-100">
                        <h2 class="text-warning mb-1">{{ $totals['conversion_pct'] }}%</h2>
                        <p class="mb-0 text-muted small">Avg Conversion %</p>
                    </div>
                </div>
                <div class="col-6 mb-3">
                    <div class="project-box text-center h-100">
                        <h2 class="text-info mb-1">{{ number_format($totals['pipeline_leads']) }}</h2>
                        <p class="mb-0 text-muted small">Pipeline</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Row 2: Data table --}}
    <div class="row">
        <div class="col-12 mb-4">
            <div class="project-box">
                <h5 class="mb-3">Sales Rep Performance</h5>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>Sales Rep</th>
                                <th>Rep #</th>
                                <th class="text-end">Total Leads</th>
                                <th class="text-end">Converted</th>
                                <th class="text-center">Conversion %</th>
                                <th class="text-end">Pipeline</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($rows as $row)
                            <tr>
                                <td>{{ $row->sales_rep_name }}</td>
                                <td>{{ $row->sales_rep_number ?? '—' }}</td>
                                <td class="text-end">{{ number_format($row->total_leads) }}</td>
                                <td class="text-end">{{ number_format($row->converted_leads) }}</td>
                                <td class="text-center">
                                    @php $pct = (float) $row->conversion_pct; @endphp
                                    <span class="badge {{ $pct >= 20 ? 'bg-success' : ($pct >= 10 ? 'bg-warning' : 'bg-danger') }}">
                                        {{ $pct }}%
                                    </span>
                                </td>
                                <td class="text-end">{{ number_format($row->pipeline_leads) }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    No sales reps found for this date range.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                        @if(count($rows))
                        <tfoot class="table-secondary fw-bold">
                            <tr>
                                <td colspan="2">Totals</td>
                                <td class="text-end">{{ number_format($totals['total_leads']) }}</td>
                                <td class="text-end">{{ number_format($totals['converted_leads']) }}</td>
                                <td class="text-center">{{ $totals['conversion_pct'] }}%</td>
                                <td class="text-end">{{ number_format($totals['pipeline_leads']) }}</td>
                            </tr>
                        </tfoot>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
@push('page_script')
<script>
(function () {
    var repData = @json($rows);

    if (!repData || repData.length === 0) {
        var el = document.getElementById('salesRepChart');
        if (el) {
            el.innerHTML = '<p class="text-muted text-center py-4">No data available for this date range.</p>';
        }
        return;
    }

    var categories   = repData.map(function (r) { return r.sales_rep_name || 'Unknown'; });
    var totalLeads   = repData.map(function (r) { return parseInt(r.total_leads)    || 0; });
    var converted    = repData.map(function (r) { return parseInt(r.converted_leads) || 0; });

    var options = {
        chart: {
            type: 'bar',
            height: 320,
            stacked: false,
            toolbar: { show: false },
        },
        series: [
            { name: 'Total Leads', data: totalLeads },
            { name: 'Converted',   data: converted },
        ],
        xaxis: {
            categories: categories,
            labels: { rotate: -30 },
        },
        colors: ['#556ee6', '#34c38f'],
        dataLabels: { enabled: false },
        tooltip: { shared: true, intersect: false },
        legend: { position: 'top' },
        plotOptions: {
            bar: { borderRadius: 3 },
        },
    };

    var chart = new ApexCharts(document.querySelector('#salesRepChart'), options);
    chart.render();
})();
</script>
@endpush