@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="container-fluid">
    <div class="main_title d-flex justify-content-between align-items-center">
        <h2>Sales Metrics</h2>
        <a href="{{ route('leads.index') }}" class="{{ \Config::get('view.buttons.secondary') }}">
            <i class="{{ \Config::get('settings.icon_back') }}"></i> Back to My Leads
        </a>
    </div>

    {{-- T01: KPI Cards --}}
    <div class="row mt-3 mb-4 d-none">
        <div class="col-lg-3 col-md-6 col-12 mb-3">
            <div class="project-box text-center">
                <h2 class="text-primary mb-1">{{ number_format($kpis['total_leads']) }}</h2>
                <p class="mb-0 text-muted">Total Leads</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 mb-3">
            <div class="project-box text-center">
                <h2 class="text-success mb-1">{{ $kpis['conversion_rate'] }}%</h2>
                <p class="mb-0 text-muted">Conversion Rate %</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 mb-3">
            <div class="project-box text-center">
                <h2 class="text-warning mb-1">{{ $kpis['avg_deal_cycle_days'] }}</h2>
                <p class="mb-0 text-muted">Avg Deal Cycle (days)</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 col-12 mb-3">
            <div class="project-box text-center">
                <h2 class="text-info mb-1">{{ number_format($kpis['activities_this_month']) }}</h2>
                <p class="mb-0 text-muted">Activities This Month</p>
            </div>
        </div>
    </div>

    <div class="row d-none">
        {{-- T02: Pipeline Funnel --}}
        <div class="col-lg-7 col-12 mb-4">
            <div class="project-box h-100">
                <h5 class="mb-3">Pipeline by Stage</h5>
                <div id="pipelineChart"></div>
                @if(count($pipeline))
                <div class="table-responsive mt-3">
                    <table class="table custom-table mb-0">
                        <thead style="background-color:#16C4C0; color:#fff;">
                            <tr>
                                <th>Stage</th>
                                <th class="text-end">Leads</th>
                                <th class="text-end">Conversion %</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pipeline as $stage)
                            <tr>
                                <td>{{ $stage->stage }}</td>
                                <td class="text-end">{{ number_format($stage->cnt) }}</td>
                                <td class="text-end">{{ $stage->conversion_pct }}%</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>

        {{-- T04: Activity Metrics --}}
        <div class="col-lg-5 col-12 mb-4">
            <div class="project-box h-100">
                <h5 class="mb-3">Activity Summary</h5>

                {{-- Date range filter --}}
                <form method="GET" action="{{ route('leads.sales-metrics') }}" class="mb-3">
                    <div class="row g-2 align-items-end">
                        <div class="col">
                            <label class="form-label small mb-1">From</label>
                            <input type="date" name="from_date" class="form-control form-control-sm"
                                   value="{{ $from_date }}">
                        </div>
                        <div class="col">
                            <label class="form-label small mb-1">To</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="green-btn-inner waves-effect btn-sm">Filter</button>
                        </div>
                    </div>
                </form>

                {{-- Activity totals --}}
                <div class="table-responsive mb-3">
                    <table class="table custom-table mb-0">
                        <tbody>
                            <tr>
                                <td><i class="bx bx-calendar-check text-primary"></i> Appointments</td>
                                <td class="text-end fw-bold">{{ number_format($activity_summary['appointments']) }}</td>
                            </tr>
                            <tr>
                                <td><i class="bx bx-task text-success"></i> Tasks</td>
                                <td class="text-end fw-bold">{{ number_format($activity_summary['tasks']) }}</td>
                            </tr>
                            <tr>
                                <td><i class="bx bx-envelope text-info"></i> Emails Sent</td>
                                <td class="text-end fw-bold">{{ number_format($activity_summary['emails_sent']) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {{-- Per-user breakdown (managers only) --}}
                @if($is_manager && count($activity_breakdown))
                <h6 class="mb-2">Per-User Breakdown</h6>
                <div class="table-responsive">
                    <table class="table custom-table mb-0">
                        <thead style="background-color:#16C4C0; color:#fff;">
                            <tr>
                                <th>User</th>
                                <th class="text-end">Appointments</th>
                                <th class="text-end">Tasks</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($activity_breakdown as $row)
                            <tr>
                                <td>{{ $row->user_name }}</td>
                                <td class="text-end">{{ number_format($row->appointments) }}</td>
                                <td class="text-end">{{ number_format($row->tasks) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- T03: Lead Aging Table --}}
    <div class="row d-none">
        <div class="col-12 mb-4">
            <div class="project-box">
                <h5 class="mb-1">Lead Aging by Status</h5>
                <p class="text-muted small mb-3">&#9888; &gt;30 days avg considered overdue</p>
                <div class="table-responsive">
                    <table class="table custom-table mb-0">
                        <thead style="background-color:#16C4C0; color:#fff;">
                            <tr>
                                <th>Status</th>
                                <th class="text-end">Leads</th>
                                <th class="text-end">Min Days</th>
                                <th class="text-end">Avg Days</th>
                                <th class="text-end">Max Days</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($aging as $row)
                            <tr class="{{ $row->overdue ? 'table-danger' : '' }}">
                                <td>{{ $row->status_name }}</td>
                                <td class="text-end">{{ number_format($row->lead_count) }}</td>
                                <td class="text-end">{{ $row->min_days }}</td>
                                <td class="text-end">{{ $row->avg_days }}</td>
                                <td class="text-end">{{ $row->max_days }}</td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted">No leads found.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- G-51, G-52, G-53: Multi-select filters --}}
    <div class="project-box mt-4">
        <form method="GET" action="{{ route('leads.sales-metrics') }}" id="metricsFilterForm">
            <div class="row g-2 mb-3 px-2 py-2 align-items-end">
                <div class="col-md-3 project-form mb-0">
                    <label class="form-label small">Group</label>
                    <select class="form-select select2" name="group_ids[]" multiple data-placeholder="All Groups">
                        @foreach($companyGroups ?? [] as $g)
                            <option value="{{ $g->id }}" {{ in_array($g->id, request('group_ids',[])) ? 'selected' : '' }}>{{ $g->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 project-form mb-0">
                    <label class="form-label small">User Class</label>
                    <select class="form-select select2" name="user_class_ids[]" multiple data-placeholder="All User Classes">
                        @foreach($userClasses ?? [] as $r)
                            <option value="{{ $r->id }}" {{ in_array($r->id, request('user_class_ids',[])) ? 'selected' : '' }}>{{ $r->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 project-form mb-0">
                    <label class="form-label small">User</label>
                    <select class="form-select select2" name="user_ids[]" multiple data-placeholder="All Users">
                        @foreach($usersByRole ?? [] as $roleTitle => $roleUsers)
                            <optgroup label="{{ $roleTitle }}">
                                @foreach($roleUsers as $u)
                                    <option value="{{ $u->id }}" {{ in_array($u->id, request('user_ids',[])) ? 'selected' : '' }}>{{ trim($u->first_name.' '.$u->last_name) }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 project-form mb-0">
                    <label class="form-label small">From</label>
                    <input type="date" name="from_date" class="form-control form-control-sm" value="{{ $from_date ?? '' }}">
                </div>
                <div class="col-md-2 project-form mb-0">
                    <label class="form-label small">To</label>
                    <input type="date" name="to_date" class="form-control form-control-sm" value="{{ $to_date ?? '' }}">
                </div>
                <div class="col-auto d-flex align-items-end">
                    <button type="submit" class="green-btn-inner waves-effect btn-sm"><i class="bx bx-search me-1"></i> Search</button>
                </div>
            </div>
        </form>

        {{-- G-54: Activity Metrics Table --}}
        <div class="table-responsive">
            <table class="table custom-table mb-0">
                <thead class="hw-thead-theme text-center">
                    <tr>
                        <th class="text-start">Users</th>
                        <th>Talk Time</th>
                        <th>Notes Added</th>
                        <th>Lead Updates</th>
                        <th>Status Updates</th>
                        <th>Tasks Set</th>
                        <th>SMS Sent</th>
                        <th>SMS Received</th>
                        <th>Emails Sent</th>
                        <th>Emails Read</th>
                        <th>Emails Received</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($usersMetrics ?? [] as $m)
                        <tr class="text-center">
                            <td class="text-start">
                                @if(\Route::has('manages.users.edit'))
                                    <a href="{{ route('manages.users.edit', $m['user_id']) }}" class="text-decoration-none">{{ $m['user_name'] }}</a>
                                @else
                                    {{ $m['user_name'] }}
                                @endif
                            </td>
                            <td>{{ $m['talk_time'] }}</td>
                            <td>{{ $m['notes_added'] }}</td>
                            <td>{{ $m['lead_updates'] }}</td>
                            <td>{{ $m['status_updates'] }}</td>
                            <td>{{ $m['tasks_set'] }}</td>
                            <td>{{ $m['sms_sent'] }}</td>
                            <td>{{ $m['sms_received'] }}</td>
                            <td>{{ $m['emails_sent'] }}</td>
                            <td>{{ $m['emails_read'] }}</td>
                            <td>{{ $m['emails_received'] }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="11" class="text-center text-muted">No users found for the selected filters.</td></tr>
                    @endforelse
                </tbody>
                {{-- G-55: Totals row --}}
                @if(!empty($usersMetrics))
                <tfoot>
                    <tr style="background-color:#313131; color:#fff;" class="fw-bold text-center">
                        <td class="text-start">Totals</td>
                        <td>{{ $metricsTotals['talk_time'] ?? '—' }}</td>
                        <td>{{ $metricsTotals['notes_added'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['lead_updates'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['status_updates'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['tasks_set'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['sms_sent'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['sms_received'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['emails_sent'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['emails_read'] ?? 0 }}</td>
                        <td>{{ $metricsTotals['emails_received'] ?? 0 }}</td>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>
@endsection
@push('page_script')
<script>
$(document).ready(function(){
    // Initialize Select2 multi-selects for the filter form
    $('#metricsFilterForm select.select2[multiple]').each(function(){
        $(this).select2({
            placeholder: $(this).data('placeholder') || 'Select...',
            allowClear: true,
            width: '100%'
        });
    });
});
</script>
<script>
(function () {
    var pipelineData = @json($pipeline);
    var categories = pipelineData.map(function(r){ return r.stage || 'No Stage'; });
    var values = pipelineData.map(function(r){ return parseInt(r.cnt) || 0; });

    if (categories.length === 0) {
        document.getElementById('pipelineChart').innerHTML = '<p class="text-muted text-center py-4">No pipeline data available.</p>';
        return;
    }

    var options = {
        chart: { type: 'bar', height: 260, toolbar: { show: false } },
        plotOptions: { bar: { horizontal: true, borderRadius: 4 } },
        series: [{ name: 'Leads', data: values }],
        xaxis: { categories: categories },
        colors: ['#34c38f'],
        dataLabels: { enabled: true },
    };
    var chart = new ApexCharts(document.querySelector('#pipelineChart'), options);
    chart.render();
})();
</script>
@endpush