@extends('dashboard.layouts.app')

@section('content')
    <div class="">
        <div class="">
            <div class="">
                <div class="">
                    <div class="card-body p-3">
                        @if (isset($recruitmentAnalytics))
                            @php
                                $reportSections = [
                                    'summary' => 'Hiring Summary',
                                    'vacancies' => 'Open Positions',
                                    'funnel' => 'Hiring Funnel',
                                    'source_offer' => 'Source & Offers',
                                    'time_recruiter' => 'Time & Recruiters',
                                    'tracker_turnover' => 'Tracker & Turnover',
                                    // 'builder' => 'Unified Report Builder',
                                ];
                                $currentSectionKey = $activeReportSection ?? 'summary';
                                $vacancyChartRows = $recruitmentAnalytics['vacancies']
                                    ->sortByDesc('remaining_openings')
                                    ->take(6)
                                    ->map(fn ($vacancy) => [
                                        'job_title' => \Illuminate\Support\Str::limit($vacancy['job_title'], 24),
                                        'open' => (int) $vacancy['remaining_openings'],
                                        'hired' => (int) $vacancy['hired_count'],
                                    ])
                                    ->values()
                                    ->all();
                                $sourceChartRows = $recruitmentAnalytics['source_of_hire']
                                    ->take(6)
                                    ->map(fn ($source) => [
                                        'source' => $source['source'],
                                        'count' => (int) $source['count'],
                                    ])
                                    ->values()
                                    ->all();
                                $stageChartRows = collect($recruitmentAnalytics['time_to_hire']['stage_averages'] ?? [])
                                    ->map(fn ($value, $stage) => [
                                        'stage' => \Illuminate\Support\Str::headline(str_replace('_', ' ', $stage)),
                                        'days' => $value !== null ? (float) $value : 0,
                                    ])
                                    ->values()
                                    ->all();
                                $recruiterChartRows = $recruitmentAnalytics['recruiters']
                                    ->sortByDesc('hires_closed')
                                    ->take(6)
                                    ->map(fn ($recruiter) => [
                                        'name' => \Illuminate\Support\Str::limit($recruiter['recruiter'], 18),
                                        'hires' => (int) $recruiter['hires_closed'],
                                        'interviews' => (int) $recruiter['interviews_arranged'],
                                    ])
                                    ->values()
                                    ->all();
                                $trackerStatusRows = $recruitmentAnalytics['tracker']
                                    ->groupBy('final_status')
                                    ->map(fn ($group, $status) => [
                                        'status' => $status,
                                        'count' => $group->count(),
                                    ])
                                    ->sortByDesc('count')
                                    ->values()
                                    ->all();
                                $turnoverDepartmentRows = collect($recruitmentAnalytics['turnover']['departments'] ?? [])
                                    ->take(6)
                                    ->map(fn ($department) => [
                                        'department' => \Illuminate\Support\Str::limit($department['department'], 18),
                                        'count' => (int) $department['count'],
                                    ])
                                    ->values()
                                    ->all();
                                $turnoverQuarterRows = collect($recruitmentAnalytics['turnover']['quarterly'] ?? [])
                                    ->sortBy('quarter')
                                    ->map(fn ($quarter) => [
                                        'quarter' => $quarter['quarter'],
                                        'count' => (int) $quarter['count'],
                                    ])
                                    ->values()
                                    ->all();
                                $funnelWeeklyRows = $recruitmentAnalytics['funnel_weekly']
                                    ->take(8)
                                    ->values()
                                    ->all();
                                $funnelMonthlyRows = $recruitmentAnalytics['funnel_monthly']
                                    ->take(6)
                                    ->values()
                                    ->all();
                                $pendingOffers = max(
                                    (int) ($recruitmentAnalytics['offers']['sent'] ?? 0)
                                        - (int) ($recruitmentAnalytics['offers']['accepted'] ?? 0)
                                        - (int) ($recruitmentAnalytics['offers']['declined'] ?? 0),
                                    0
                                );
                                $trackerExportParams = [
                                    'section' => 'tracker_turnover',
                                    'scope' => 'tracker',
                                ];
                                if (!empty($analyticsFilter['start_date']) && !empty($analyticsFilter['end_date'])) {
                                    $trackerExportParams['from_date'] = $analyticsFilter['start_date']->format('Y-m-d');
                                    $trackerExportParams['to_date'] = $analyticsFilter['end_date']->format('Y-m-d');
                                } else {
                                    $trackerExportParams['range'] = $analyticsFilter['range'] ?? 'last_30_days';
                                }
                                $reportChartData = [
                                    'summary' => [
                                        'metric_labels' => ['Open Positions', 'Closed', 'New Hires', 'Offers Sent', 'Offers Accepted'],
                                        'metric_series' => [
                                            (int) ($recruitmentAnalytics['board_summary']['open_positions'] ?? 0),
                                            (int) ($recruitmentAnalytics['board_summary']['positions_closed'] ?? 0),
                                            (int) ($recruitmentAnalytics['board_summary']['new_hires'] ?? 0),
                                            (int) ($recruitmentAnalytics['board_summary']['offers_sent'] ?? 0),
                                            (int) ($recruitmentAnalytics['board_summary']['offers_accepted'] ?? 0),
                                        ],
                                        'funnel_labels' => ['CVs', 'Contacted', 'Interviews', 'Hired', 'Demo Attended', 'No-show'],
                                        'funnel_series' => [
                                            (int) ($recruitmentAnalytics['funnel_totals']['cvs'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['contacted'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['interviews'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['hired'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['demos_attended'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['demos_no_show'] ?? 0),
                                        ],
                                    ],
                                    'funnel' => [
                                        'overview_labels' => ['CVs', 'Contacted', 'Interviews', 'Hired', 'Demo Attended', 'No-show'],
                                        'overview_series' => [
                                            (int) ($recruitmentAnalytics['funnel_totals']['cvs'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['contacted'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['interviews'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['hired'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['demos_attended'] ?? 0),
                                            (int) ($recruitmentAnalytics['funnel_totals']['demos_no_show'] ?? 0),
                                        ],
                                        'weekly_labels' => array_column($funnelWeeklyRows, 'label'),
                                        'weekly_cvs' => array_column($funnelWeeklyRows, 'cvs'),
                                        'weekly_hired' => array_column($funnelWeeklyRows, 'hired'),
                                        'monthly_labels' => array_column($funnelMonthlyRows, 'label'),
                                        'monthly_cvs' => array_column($funnelMonthlyRows, 'cvs'),
                                        'monthly_hired' => array_column($funnelMonthlyRows, 'hired'),
                                    ],
                                    'vacancies' => [
                                        'labels' => array_column($vacancyChartRows, 'job_title'),
                                        'open_series' => array_column($vacancyChartRows, 'open'),
                                        'hired_series' => array_column($vacancyChartRows, 'hired'),
                                    ],
                                    'source_offer' => [
                                        'source_labels' => array_column($sourceChartRows, 'source'),
                                        'source_series' => array_column($sourceChartRows, 'count'),
                                        'offer_labels' => ['Accepted', 'Declined', 'Pending'],
                                        'offer_series' => [
                                            (int) ($recruitmentAnalytics['offers']['accepted'] ?? 0),
                                            (int) ($recruitmentAnalytics['offers']['declined'] ?? 0),
                                            $pendingOffers,
                                        ],
                                    ],
                                    'time_recruiter' => [
                                        'stage_labels' => array_column($stageChartRows, 'stage'),
                                        'stage_series' => array_column($stageChartRows, 'days'),
                                        'recruiter_labels' => array_column($recruiterChartRows, 'name'),
                                        'hire_series' => array_column($recruiterChartRows, 'hires'),
                                        'interview_series' => array_column($recruiterChartRows, 'interviews'),
                                    ],
                                    'tracker_turnover' => [
                                        'status_labels' => array_column($trackerStatusRows, 'status'),
                                        'status_series' => array_column($trackerStatusRows, 'count'),
                                        'turnover_labels' => ['Approved', 'Rejected', 'Pending / In Progress'],
                                        'turnover_series' => [
                                            (int) ($recruitmentAnalytics['turnover']['approved_count'] ?? 0),
                                            (int) ($recruitmentAnalytics['turnover']['rejected_count'] ?? 0),
                                            (int) ($recruitmentAnalytics['turnover']['pending_count'] ?? 0),
                                        ],
                                        'department_labels' => array_column($turnoverDepartmentRows, 'department'),
                                        'department_series' => array_column($turnoverDepartmentRows, 'count'),
                                        'quarter_labels' => array_column($turnoverQuarterRows, 'quarter'),
                                        'quarter_series' => array_column($turnoverQuarterRows, 'count'),
                                    ],
                                ];
                            @endphp
                            <div class="reports-shell mb-3">
                                <div class="reports-hero mb-3">
                                    <div class="row g-4 align-items-center">
                                        <div class="col-lg-7">
                                            <div class="reports-hero-kicker">HR CONTROL CENTER</div>
                                            <div class="reports-hero-title" id="reports-current-title">HR Reports Dashboard</div>
                                            <div class="reports-hero-subtitle">{{ $recruitmentAnalytics['date_label'] }}</div>
                                        </div>
                                        <div class="col-lg-5 report-toolbar">
                                            <form action="{{ route('reports.index') }}" method="GET" class="">
                                                <input type="hidden" name="section" value="{{ $currentSectionKey }}" id="analytics-section-input">
                                                <div class="row g-2 align-items-end">
                                                    <div class="col-md-5">
                                                        <label class="table-controls-label">From</label>
                                                        <input type="date" name="from_date" class="form-control"
                                                            value="{{ $analyticsFilter['start_date']?->format('Y-m-d') }}">
                                                    </div>
                                                    <div class="col-md-5">
                                                        <label class="table-controls-label">To</label>
                                                        <input type="date" name="to_date" class="form-control"
                                                            value="{{ $analyticsFilter['end_date']?->format('Y-m-d') }}">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button type="submit" class="btn btn-dark">Apply</button>
                                                    </div>
                                                </div>
                                                <div class="quick-filters mt-3">
                                                    <a href="{{ route('reports.index', ['section' => $currentSectionKey, 'range' => 'today']) }}"
                                                        class="btn btn-outline-secondary btn-sm analytics-range-link {{ $analyticsFilter['range'] === 'today' ? 'active-range' : '' }}"
                                                        data-range="today">
                                                        Today
                                                    </a>
                                                    <a href="{{ route('reports.index', ['section' => $currentSectionKey, 'range' => 'last_7_days']) }}"
                                                        class="btn btn-outline-secondary btn-sm analytics-range-link {{ $analyticsFilter['range'] === 'last_7_days' ? 'active-range' : '' }}"
                                                        data-range="last_7_days">
                                                        Last 7 Days
                                                    </a>
                                                    <a href="{{ route('reports.index', ['section' => $currentSectionKey, 'range' => 'last_30_days']) }}"
                                                        class="btn btn-outline-secondary btn-sm analytics-range-link {{ $analyticsFilter['range'] === 'last_30_days' ? 'active-range' : '' }}"
                                                        data-range="last_30_days">
                                                        Last 30 Days
                                                    </a>
                                                    <a href="{{ route('reports.index', ['section' => $currentSectionKey]) }}"
                                                        class="btn btn-outline-secondary btn-sm analytics-range-link"
                                                        data-range="reset">
                                                        Reset
                                                    </a>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-4">
                                    <div class="col-lg-3">
                                        <div class="reports-side-nav">
                                            @foreach ($reportSections as $sectionKey => $sectionLabel)
                                                <button type="button"
                                                    class="report-nav-button {{ ($activeReportSection ?? 'summary') === $sectionKey ? 'active' : '' }}"
                                                    data-section="{{ $sectionKey }}"
                                                    data-label="{{ $sectionLabel }}">
                                                    {{ $sectionLabel }}
                                                </button>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                <div class="row g-3 mb-3 report-section report-view {{ ($activeReportSection ?? 'summary') === 'summary' ? 'is-visible' : '' }}" data-section="summary">
                                    <div class="col-md-4 col-xl-4"><div class="report-kpi"><span>Open Positions</span><strong>{{ $recruitmentAnalytics['board_summary']['open_positions'] }}</strong></div></div>
                                    <div class="col-md-4 col-xl-4"><div class="report-kpi"><span>Positions Closed</span><strong>{{ $recruitmentAnalytics['board_summary']['positions_closed'] }}</strong></div></div>
                                    <div class="col-md-4 col-xl-4"><div class="report-kpi"><span>New Hires</span><strong>{{ $recruitmentAnalytics['board_summary']['new_hires'] }}</strong></div></div>
                                    <div class="col-md-4 col-xl-4"><div class="report-kpi"><span>Avg. Time to Hire</span><strong>{{ $recruitmentAnalytics['board_summary']['avg_time_to_hire'] !== null ? $recruitmentAnalytics['board_summary']['avg_time_to_hire'] . ' d' : 'N/A' }}</strong></div></div>
                                    <div class="col-md-4 col-xl-4"><div class="report-kpi"><span>Offers Sent</span><strong>{{ $recruitmentAnalytics['board_summary']['offers_sent'] }}</strong></div></div>
                                    <div class="col-md-4 col-xl-4"><div class="report-kpi"><span>Offers Accepted</span><strong>{{ $recruitmentAnalytics['board_summary']['offers_accepted'] }}</strong></div></div>
                                    <div class="col-12">
                                        <div class="row g-3">
                                            <div class="col-lg-7">
                                                <div class="report-panel h-100">
                                                    <div class="report-panel-title">Summary Snapshot</div>
                                                    <div id="summary-overview-chart" class="report-chart"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-5">
                                                <div class="report-panel h-100">
                                                    <div class="report-panel-title">Pipeline Mix</div>
                                                    <div id="summary-funnel-chart" class="report-chart report-chart-sm"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 report-section report-view {{ ($activeReportSection ?? 'summary') === 'vacancies' ? 'is-visible' : '' }}" data-section="vacancies">
                                    <div class="report-panel mb-3">
                                        <div class="report-panel-title">Vacancy Coverage</div>
                                        <div id="vacancies-distribution-chart" class="report-chart"></div>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">Job Title</th>
                                                    <th class="text-center">Department</th>
                                                    <th class="text-center">Hiring Manager</th>
                                                    <th class="text-center">Date Opened</th>
                                                    <th class="text-center">Openings</th>
                                                    <th class="text-center">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($recruitmentAnalytics['vacancies'] as $vacancy)
                                                    <tr>
                                                        <td>{{ $vacancy['job_title'] }}</td>
                                                        <td>{{ $vacancy['department'] }}</td>
                                                        <td>
                                                            @if (!empty($vacancy['hiring_manager_id']))
                                                                <a href="{{ route('staffs.show', $vacancy['hiring_manager_id']) }}" class="report-link">
                                                                    {{ $vacancy['hiring_manager'] }}
                                                                </a>
                                                            @else
                                                                {{ $vacancy['hiring_manager'] }}
                                                            @endif
                                                        </td>
                                                        <td>{{ $vacancy['date_opened'] ?? '-' }}</td>
                                                        <td>{{ $vacancy['remaining_openings'] }} / {{ $vacancy['vacancy_count'] }}</td>
                                                        <td>{{ \Illuminate\Support\Str::headline($vacancy['status']) }}</td>
                                                    </tr>
                                                @empty
                                                    <tr><td colspan="6" class="text-muted">No vacancies found.</td></tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="row g-3 mb-3 report-section report-view {{ ($activeReportSection ?? 'summary') === 'funnel' ? 'is-visible' : '' }}" data-section="funnel">
                                    <div class="col-lg-4">
                                        <div class="report-panel h-100">
                                            <div class="fw-bold mb-2">Hiring Funnel</div>
                                            <div id="funnel-overview-chart" class="report-chart report-chart-sm"></div>
                                            <div class="small mb-1">CVs: <strong>{{ $recruitmentAnalytics['funnel_totals']['cvs'] }}</strong></div>
                                            <div class="small mb-1">Contacted: <strong>{{ $recruitmentAnalytics['funnel_totals']['contacted'] }}</strong></div>
                                            <div class="small mb-1">Interviews: <strong>{{ $recruitmentAnalytics['funnel_totals']['interviews'] }}</strong></div>
                                            <div class="small mb-1">Hired: <strong>{{ $recruitmentAnalytics['funnel_totals']['hired'] }}</strong></div>
                                            <div class="small mb-1">Demos Attended: <strong>{{ $recruitmentAnalytics['funnel_totals']['demos_attended'] }}</strong></div>
                                            <div class="small">Demos No-show: <strong>{{ $recruitmentAnalytics['funnel_totals']['demos_no_show'] }}</strong></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="report-panel h-100">
                                            <div class="fw-bold mb-2">Weekly Funnel</div>
                                            <div id="funnel-weekly-chart" class="report-chart report-chart-sm"></div>
                                            @forelse ($recruitmentAnalytics['funnel_weekly']->take(8) as $row)
                                                <div class="small mb-1">{{ $row['label'] }}: <strong>{{ $row['cvs'] }}</strong> CVs, <strong>{{ $row['hired'] }}</strong> Hired</div>
                                            @empty
                                                <div class="small text-muted">No weekly data.</div>
                                            @endforelse
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="report-panel h-100">
                                            <div class="fw-bold mb-2">Monthly Funnel</div>
                                            <div id="funnel-monthly-chart" class="report-chart report-chart-sm"></div>
                                            @forelse ($recruitmentAnalytics['funnel_monthly']->take(6) as $row)
                                                <div class="small mb-1">{{ $row['label'] }}: <strong>{{ $row['cvs'] }}</strong> CVs, <strong>{{ $row['hired'] }}</strong> Hired</div>
                                            @empty
                                                <div class="small text-muted">No monthly data.</div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3 mb-3 report-section report-view {{ ($activeReportSection ?? 'summary') === 'source_offer' ? 'is-visible' : '' }}" data-section="source_offer">
                                    <div class="col-lg-6">
                                        <div class="report-panel h-100">
                                            <div class="fw-bold mb-2">Source of Hire</div>
                                            <div id="source-of-hire-chart" class="report-chart report-chart-sm"></div>
                                            @forelse ($recruitmentAnalytics['source_of_hire'] as $source)
                                                <div class="small mb-1">{{ $source['source'] }}: <strong>{{ $source['count'] }}</strong> candidates, <strong>{{ $source['hired'] }}</strong> hired</div>
                                            @empty
                                                <div class="small text-muted">No source data.</div>
                                            @endforelse
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="report-panel h-100">
                                            <div class="fw-bold mb-2">Offer Report</div>
                                            <div id="offer-status-chart" class="report-chart report-chart-sm"></div>
                                            <div class="small mb-1">Sent: <strong>{{ $recruitmentAnalytics['offers']['sent'] }}</strong></div>
                                            <div class="small mb-1">Accepted: <strong>{{ $recruitmentAnalytics['offers']['accepted'] }}</strong></div>
                                            <div class="small mb-2">Declined: <strong>{{ $recruitmentAnalytics['offers']['declined'] }}</strong></div>
                                            <div class="small text-muted mt-2 mb-1">Rejection Reasons Summary</div>
                                            @forelse ($recruitmentAnalytics['offers']['reasons'] as $reason)
                                                <div class="small mb-1">{{ $reason['reason'] }}: <strong>{{ $reason['count'] }}</strong></div>
                                            @empty
                                                <div class="small text-muted">No declined offer reasons yet.</div>
                                            @endforelse
                                            <div class="small text-muted mt-3 mb-1">Rejected Candidates</div>
                                            <div class="table-responsive">
                                                <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">Candidate</th>
                                                            <th class="text-center">Position</th>
                                                            <th class="text-center">Reason</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @forelse ($recruitmentAnalytics['offers']['declined_candidates']->take(6) as $declinedOffer)
                                                            <tr>
                                                                <td>{{ $declinedOffer['candidate'] }}</td>
                                                                <td>{{ $declinedOffer['position'] }}</td>
                                                                <td>{{ $declinedOffer['reason'] }}</td>
                                                            </tr>
                                                        @empty
                                                            <tr><td colspan="3" class="text-muted">No rejected offers yet.</td></tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3 mb-3 report-section report-view {{ ($activeReportSection ?? 'summary') === 'time_recruiter' ? 'is-visible' : '' }}" data-section="time_recruiter">
                                    <div class="col-lg-6">
                                        <div class="report-panel h-100">
                                            <div class="fw-bold mb-2">Time to Hire</div>
                                            <div id="time-to-hire-chart" class="report-chart report-chart-sm"></div>
                                            <div class="small mb-1">Longest Hiring Period: <strong>{{ $recruitmentAnalytics['time_to_hire']['overall_longest'] !== null ? $recruitmentAnalytics['time_to_hire']['overall_longest'] . ' d' : 'N/A' }}</strong></div>
                                            <div class="small mb-1">Shortest Hiring Period: <strong>{{ $recruitmentAnalytics['time_to_hire']['overall_shortest'] !== null ? $recruitmentAnalytics['time_to_hire']['overall_shortest'] . ' d' : 'N/A' }}</strong></div>
                                            <div class="small mb-1">Screening: <strong>{{ $recruitmentAnalytics['time_to_hire']['stage_averages']['screening'] !== null ? $recruitmentAnalytics['time_to_hire']['stage_averages']['screening'] . ' d' : 'N/A' }}</strong></div>
                                            <div class="small mb-1">First Interview: <strong>{{ $recruitmentAnalytics['time_to_hire']['stage_averages']['first_interview'] !== null ? $recruitmentAnalytics['time_to_hire']['stage_averages']['first_interview'] . ' d' : 'N/A' }}</strong></div>
                                            <div class="small mb-1">Second Interview: <strong>{{ $recruitmentAnalytics['time_to_hire']['stage_averages']['second_interview'] !== null ? $recruitmentAnalytics['time_to_hire']['stage_averages']['second_interview'] . ' d' : 'N/A' }}</strong></div>
                                            <div class="small mb-1">Offer to Onboarding: <strong>{{ $recruitmentAnalytics['time_to_hire']['stage_averages']['offer_to_onboarding'] !== null ? $recruitmentAnalytics['time_to_hire']['stage_averages']['offer_to_onboarding'] . ' d' : 'N/A' }}</strong></div>
                                            <div class="small mb-2">Interviewing Average: <strong>{{ $recruitmentAnalytics['time_to_hire']['stage_averages']['interviewing'] !== null ? $recruitmentAnalytics['time_to_hire']['stage_averages']['interviewing'] . ' d' : 'N/A' }}</strong></div>
                                            @foreach ($recruitmentAnalytics['time_to_hire']['per_role']->take(6) as $role)
                                                <div class="small mb-1">{{ $role['role'] }}: <strong>{{ $role['average'] !== null ? $role['average'] . ' d' : 'N/A' }}</strong></div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                            <div class="report-panel h-100">
                                                <div class="fw-bold mb-2">Recruiter Summary</div>
                                                <div id="recruiter-performance-chart" class="report-chart report-chart-sm"></div>
                                                @forelse ($recruitmentAnalytics['recruiters'] as $recruiter)
                                                    <div class="small mb-2">
                                                    @if (!empty($recruiter['staff_id']))
                                                        <a href="{{ route('staffs.show', $recruiter['staff_id']) }}" class="report-link fw-bold">
                                                            {{ $recruiter['recruiter'] }}
                                                        </a>
                                                    @else
                                                        <strong>{{ $recruiter['recruiter'] }}</strong>
                                                    @endif
                                                    :
                                                    {{ $recruiter['cvs_sourced'] }} CVs,
                                                    {{ $recruiter['interviews_arranged'] }} Interviews,
                                                    {{ $recruiter['hires_closed'] }} Hires,
                                                    {{ $recruiter['offer_acceptance_rate'] !== null ? $recruiter['offer_acceptance_rate'] . '%' : 'N/A' }} Offer Acceptance
                                                    @if (!empty($recruiter['roles_assigned']))
                                                        <br><span class="text-muted">Roles: {{ $recruiter['roles_assigned'] }}</span>
                                                    @endif
                                                </div>
                                            @empty
                                                <div class="small text-muted">No recruiter data.</div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-3 mb-3 report-section report-view {{ ($activeReportSection ?? 'summary') === 'tracker_turnover' ? 'is-visible' : '' }}" data-section="tracker_turnover">
                                    <div class="col-lg-6">
                                        <div class="report-panel h-100">
                                            <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap mb-2">
                                                <div class="fw-bold mb-0">Recruitment Tracker</div>
                                                @can('hr_reports_generate')
                                                    <div class="d-flex gap-2 flex-wrap">
                                                        <a href="{{ route('reports.analytics.export', array_merge($trackerExportParams, ['format' => 'csv'])) }}"
                                                            class="btn btn-outline-success btn-sm">
                                                            <i class="fas fa-download me-1"></i> Export CSV
                                                        </a>
                                                        <a href="{{ route('reports.analytics.export', array_merge($trackerExportParams, ['format' => 'pdf'])) }}"
                                                            class="btn btn-outline-danger btn-sm">
                                                            <i class="fas fa-file-pdf me-1"></i> Export PDF
                                                        </a>
                                                    </div>
                                                @endcan
                                            </div>
                                            <div>
                                                <div id="tracker-status-chart" class="report-chart report-chart-sm"></div>
                                                <div class="table-responsive">
                                                    <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                                                        <thead>
                                                            <tr>
                                                                <th class="text-center">Name</th>
                                                                <th class="text-center">Phone Number</th>
                                                                <th class="text-center">Position</th>
                                                                <th class="text-center">Department</th>
                                                                <th class="text-center">Qualifications</th>
                                                                <th class="text-center">Years</th>
                                                                <th class="text-center">Interview</th>
                                                                <th class="text-center">Source</th>
                                                                <th class="text-center">Final Status</th>
                                                                <th class="text-center">Rejection Reason</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @forelse ($recruitmentAnalytics['tracker']->take(12) as $candidate)
                                                                <tr>
                                                                    <td>
                                                                        @if (!empty($candidate['staff_id']))
                                                                            <a href="{{ route('staffs.show', $candidate['staff_id']) }}" class="report-link">
                                                                                {{ $candidate['name'] }}
                                                                            </a>
                                                                        @elseif (!empty($candidate['applicant_id']))
                                                                            <a href="{{ route('applicants.edit', $candidate['applicant_id']) }}" class="report-link">
                                                                                {{ $candidate['name'] }}
                                                                            </a>
                                                                        @else
                                                                            {{ $candidate['name'] }}
                                                                        @endif
                                                                    </td>
                                                                    <td>{{ $candidate['number'] }}</td>
                                                                    <td>{{ $candidate['position'] }}</td>
                                                                    <td>{{ $candidate['department'] }}</td>
                                                                    <td>{{ $candidate['qualifications'] }}</td>
                                                                    <td>{{ $candidate['years_of_experience'] }}</td>
                                                                    <td>{{ $candidate['interview_date'] }}</td>
                                                                    <td>{{ $candidate['source'] }}</td>
                                                                    <td>{{ $candidate['final_status'] }}</td>
                                                                    <td>{{ $candidate['rejection_reason'] }}</td>
                                                                </tr>
                                                            @empty
                                                                <tr><td colspan="10" class="text-muted">No candidates found.</td></tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="report-panel h-100">
                                            <div class="fw-bold mb-2">Turnover Report</div>
                                            <div id="turnover-quarterly-chart" class="report-chart report-chart-sm"></div>
                                            <div id="turnover-department-chart" class="report-chart report-chart-sm"></div>
                                            <div class="small mb-1">Resignation Requests: <strong>{{ $recruitmentAnalytics['turnover']['count'] }}</strong></div>
                                            <div class="small mb-1">Approved: <strong>{{ $recruitmentAnalytics['turnover']['approved_count'] }}</strong></div>
                                            <div class="small mb-1">Rejected: <strong>{{ $recruitmentAnalytics['turnover']['rejected_count'] }}</strong></div>
                                            <div class="small mb-1">Pending / In Progress: <strong>{{ $recruitmentAnalytics['turnover']['pending_count'] }}</strong></div>
                                            <div class="small mb-1">Turnover % (Approved): <strong>{{ $recruitmentAnalytics['turnover']['percentage'] !== null ? $recruitmentAnalytics['turnover']['percentage'] . '%' : 'N/A' }}</strong></div>
                                            <div class="small mb-1">Passed Probation: <strong>{{ $recruitmentAnalytics['hiring_quality']['passed_probation'] ?? 'N/A' }}</strong></div>
                                            <div class="small mb-1">Early Turnover (Approved): <strong>{{ $recruitmentAnalytics['hiring_quality']['early_turnover'] }}</strong></div>
                                            @if ($recruitmentAnalytics['turnover']['reason_type_available'] && $recruitmentAnalytics['turnover']['reasons']->isNotEmpty())
                                                <hr>
                                                <div class="small fw-bold mb-1">Reasons of Resignation:</div>
                                                @foreach ($recruitmentAnalytics['turnover']['reasons'] as $reason)
                                                    <div class="small mb-1">{{ $reason['type'] }}: <strong>{{ $reason['count'] }}</strong></div>
                                                @endforeach
                                            @elseif (!$recruitmentAnalytics['turnover']['reason_type_available'])
                                                <hr>
                                                <div class="small fw-bold mb-1">Reasons of Resignation:</div>
                                                <div class="small text-muted">Voluntary / Non-Voluntary classification not available yet.</div>
                                            @endif
                                            @forelse ($recruitmentAnalytics['turnover']['quarterly'] as $quarter)
                                                <div class="small mb-1">Approved {{ $quarter['quarter'] }}: <strong>{{ $quarter['count'] }}</strong></div>
                                            @empty
                                                <div class="small text-muted">No approved resignation data.</div>
                                            @endforelse
                                            <hr>
                                            @foreach ($recruitmentAnalytics['turnover']['departments'] as $department)
                                                <div class="small mb-1">{{ $department['department'] }}: <strong>{{ $department['count'] }}</strong></div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                            

                                <div class="report-section report-view {{ ($activeReportSection ?? 'summary') === 'builder' ? 'is-visible' : '' }}" data-section="builder">
                                    <div class="builder-stack">
                                        <div class="report-panel">
                                            <div class="builder-kicker">CUSTOM REPORTING</div>
                                            <div class="builder-title">Unified Report Builder</div>
                                            <div class="small text-muted">
                                                Build a custom report by choosing a module, selecting the required columns,
                                                applying filters, and previewing the result before export.
                                            </div>
                                        </div>

                                        <form action="{{ route('reports.index') }}" method="GET" id="moduleForm">
                                            <input type="hidden" name="section" value="builder">
                                            <input type="hidden" name="range" value="{{ $analyticsFilter['range'] }}">
                                            @if ($analyticsFilter['range'] === 'custom')
                                                <input type="hidden" name="from_date" value="{{ $analyticsFilter['start_date']?->format('Y-m-d') }}">
                                                <input type="hidden" name="to_date" value="{{ $analyticsFilter['end_date']?->format('Y-m-d') }}">
                                            @endif

                                            <div class="report-panel">
                                                <div class="builder-section-title">1. Select Module</div>
                                                <div class="row g-3 align-items-end">
                                                    <div class="col-lg-5">
                                                        <label class="form-label small fw-bold">Module</label>
                                                        <select name="module" class="form-select select2"
                                                            onchange="document.getElementById('moduleForm').submit()">
                                                            <option value="">-- Select Module --</option>
                                                            @foreach ($modules as $key => $config)
                                                                <option value="{{ $key }}"
                                                                    {{ $activeModule == $key ? 'selected' : '' }}>
                                                                    {{ $config['label'] }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-7">
                                                        <div class="builder-hint">
                                                            Choose any available module to load its fields, filters, grouping, and export options.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>

                                        @if ($activeModule && $moduleConfig)
                                            <form action="{{ route('reports.generate') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="section" value="builder">
                                                <input type="hidden" name="range" value="{{ $analyticsFilter['range'] }}">
                                                @if ($analyticsFilter['range'] === 'custom')
                                                    <input type="hidden" name="from_date" value="{{ $analyticsFilter['start_date']?->format('Y-m-d') }}">
                                                    <input type="hidden" name="to_date" value="{{ $analyticsFilter['end_date']?->format('Y-m-d') }}">
                                                @endif
                                                <input type="hidden" name="module" value="{{ $activeModule }}">

                                                <div class="report-panel mb-3">
                                                    <div class="builder-section-title">2. Select Fields</div>
                                                    <div class="row g-2">
                                                        @foreach ($moduleConfig['fields'] as $key => $label)
                                                            <div class="col-md-4 col-xl-3">
                                                                <label class="builder-field-option">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="fields[]" value="{{ $key }}"
                                                                        {{ isset($selectedFields) && in_array($key, $selectedFields) ? 'checked' : '' }}>
                                                                    <span>{{ $label }}</span>
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>

                                                <div class="report-panel mb-3">
                                                    <div class="builder-section-title">3. Apply Filters</div>
                                                    <div class="row g-3">
                                                        @foreach ($moduleConfig['filters'] as $field => $fConfig)
                                                            <div class="col-md-4">
                                                                <label class="form-label small fw-bold">{{ $fConfig['label'] }}</label>
                                                                @if ($fConfig['type'] === 'select')
                                                                    <select name="filter_{{ str_replace('.', '_', $field) }}"
                                                                        class="form-select form-select-sm select2">
                                                                        <option value="">All</option>
                                                                        @foreach ($filterOptions[$field] as $option)
                                                                            <option value="{{ $option->id }}"
                                                                                {{ request('filter_' . str_replace('.', '_', $field)) == $option->id ? 'selected' : '' }}>
                                                                                {{ $option->name ?? ($option->type ?? ($option->first_name . ' ' . $option->last_name ?? ($option->title ?? $option->id))) }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                @elseif($fConfig['type'] === 'select_static')
                                                                    <select name="filter_{{ str_replace('.', '_', $field) }}"
                                                                        class="form-select form-select-sm select2">
                                                                        <option value="">All</option>
                                                                        @foreach ($fConfig['options'] as $val => $lbl)
                                                                            <option value="{{ $val }}"
                                                                                {{ request('filter_' . str_replace('.', '_', $field)) == $val ? 'selected' : '' }}>
                                                                                {{ $lbl }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                @elseif($fConfig['type'] === 'date_range')
                                                                    <input type="text"
                                                                        name="filter_{{ str_replace('.', '_', $field) }}"
                                                                        class="form-control form-control-sm flatpickr-range"
                                                                        value="{{ request('filter_' . str_replace('.', '_', $field)) }}"
                                                                        placeholder="Select range">
                                                                @else
                                                                    <input type="text"
                                                                        name="filter_{{ str_replace('.', '_', $field) }}"
                                                                        class="form-control form-control-sm"
                                                                        value="{{ request('filter_' . str_replace('.', '_', $field)) }}">
                                                                @endif
                                                            </div>
                                                        @endforeach
                                                        <div class="col-md-4">
                                                            <label class="form-label small fw-bold">Group By (Optional)</label>
                                                            <select name="group_by" class="form-select form-select-sm select2">
                                                                <option value="">No Grouping</option>
                                                                @foreach ($moduleConfig['fields'] as $key => $label)
                                                                    <option value="{{ $key }}"
                                                                        {{ request('group_by') == $key ? 'selected' : '' }}>
                                                                        {{ $label }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="report-panel">
                                                    <div class="builder-section-title">4. Generate Or Export</div>
                                                    <div class="d-flex flex-wrap gap-2">
                                                        <button type="submit" name="export" value="preview"
                                                            class="btn btn-dark px-3">
                                                            <i class="fas fa-sync me-1"></i> Preview
                                                        </button>
                                                        <button type="submit" name="export" value="excel"
                                                            class="btn btn-outline-success px-3">
                                                            <i class="fas fa-file-excel me-1"></i> Excel
                                                        </button>
                                                        <button type="submit" name="export" value="pdf"
                                                            class="btn btn-outline-danger px-3">
                                                            <i class="fas fa-file-pdf me-1"></i> PDF
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        @endif

                                        @if (isset($results))
                                            <div class="report-panel">
                                                <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                                                    <div class="builder-section-title mb-0">Report Preview</div>
                                                    <div class="small text-muted">{{ $results->count() }} records</div>
                                                </div>
                                                <div class="table-responsive">
                                                    <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                                                        <thead>
                                                            <tr>
                                                                @foreach ($selectedFields as $field)
                                                                    <th class="py-3 px-3">{{ $moduleConfig['fields'][$field] }}</th>
                                                                @endforeach
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @php $lastGroupValue = null; @endphp
                                                            @forelse($results as $row)
                                                                @php
                                                                    $currentGroupValue = $row;
                                                                    if ($groupBy) {
                                                                        foreach (explode('.', $groupBy) as $part) {
                                                                            $currentGroupValue = $currentGroupValue->$part ?? 'N/A';
                                                                            if ($currentGroupValue === 'N/A') {
                                                                                break;
                                                                            }
                                                                        }
                                                                    }
                                                                @endphp

                                                                @if ($groupBy && $currentGroupValue !== $lastGroupValue)
                                                                    <tr class="table-secondary">
                                                                        <td colspan="{{ count($selectedFields) }}" class="fw-bold py-2">
                                                                            <i class="fas fa-layer-group me-2"></i>{{ $moduleConfig['fields'][$groupBy] }}:
                                                                            {{ $currentGroupValue }}
                                                                        </td>
                                                                    </tr>
                                                                    @php $lastGroupValue = $currentGroupValue; @endphp
                                                                @endif

                                                                <tr>
                                                                    @foreach ($selectedFields as $field)
                                                                        <td class="px-3">
                                                                            @php
                                                                                $value = $row;
                                                                                $cellLink = null;
                                                                                foreach (explode('.', $field) as $part) {
                                                                                    $value = $value->$part ?? 'N/A';
                                                                                    if ($value === 'N/A') {
                                                                                        break;
                                                                                    }
                                                                                }

                                                                                if (
                                                                                    $activeModule === 'staff'
                                                                                    && $row instanceof \App\Models\Staff
                                                                                    && in_array($field, ['first_name', 'last_name', 'full_name', 'staff_no'], true)
                                                                                ) {
                                                                                    $cellLink = route('staffs.show', $row->id);
                                                                                } elseif (
                                                                                    $activeModule === 'applicant'
                                                                                    && $row instanceof \App\Models\Applicant
                                                                                    && in_array($field, ['full_name', 'email', 'contact_number'], true)
                                                                                ) {
                                                                                    $cellLink = route('applicants.edit', $row->id);
                                                                                } elseif ($field === 'staff_id' && !empty($row->staff_id)) {
                                                                                    $cellLink = route('staffs.show', $row->staff_id);
                                                                                }
                                                                            @endphp
                                                                            @if ($cellLink && $value !== 'N/A')
                                                                                <a href="{{ $cellLink }}" class="report-link">{{ $value }}</a>
                                                                            @else
                                                                                {{ $value }}
                                                                            @endif
                                                                        </td>
                                                                    @endforeach
                                                                </tr>
                                                            @empty
                                                                <tr>
                                                                    <td colspan="{{ count($selectedFields) }}" class="text-center py-3">
                                                                        No records found for the selected filters.
                                                                    </td>
                                                                </tr>
                                                            @endforelse
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .select2-container--bootstrap-5 .select2-selection {
            min-height: 44px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: none;
        }

        .reports-shell {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #f8f9fb;
            padding: 18px;
        }

        .reports-hero {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
            padding: 18px;
        }

        .reports-hero-kicker {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6b7280;
            margin-bottom: 8px;
        }

        .reports-hero-title {
            font-size: clamp(1.75rem, 2.5vw, 2.4rem);
            line-height: 1.15;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .reports-hero-subtitle {
            font-size: 0.95rem;
            color: #4b5563;
        }

        .report-toolbar {
            width: 100%;
            max-width: 560px;
            margin-left: auto;
        }

        .table-controls-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 600;
            color: #6b7280;
            margin-bottom: 4px;
        }

        .reports-hero .form-control,
        .reports-hero .form-select,
        .report-panel .form-control,
        .report-panel .form-select {
            min-height: 44px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: none;
        }

        .reports-hero .form-control:focus,
        .reports-hero .form-select:focus,
        .report-panel .form-control:focus,
        .report-panel .form-select:focus {
            border-color: #cbd5e1;
            box-shadow: 0 0 0 0.15rem rgba(17, 24, 39, 0.08);
        }


        .quick-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }


        .active-range {
            background: #111827 !important;
            border-color: #111827 !important;
            color: #ffffff !important;
        }

        .report-kpi,
        .report-panel {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
            padding: 18px;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }

        .report-kpi:hover,
        .report-panel:hover {
            border-color: #cbd5e1;
        }

        .report-kpi span {
            display: block;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #6b7280;
            margin-bottom: 10px;
        }

        .report-kpi strong {
            font-size: clamp(1.9rem, 2.8vw, 2.6rem);
            line-height: 1;
            font-weight: 700;
            color: #111827;
        }

        .report-panel>.fw-bold:first-child,
        .report-panel-title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 4px;
        }

        .report-panel-subtitle {
            font-size: 0.85rem;
            color: #64748b;
            margin-bottom: 12px;
        }

        .report-panel .small,
        .report-panel div:not(.apexcharts-canvas)>.small {
            color: #475569;
        }

        .report-chart {
            position: relative;
            width: 100%;
            min-height: 260px;
        }

        .report-chart-sm {
            min-height: 230px;
        }

        .report-chart-empty {
            min-height: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #d1d5db;
            border-radius: 16px;
            background: #f8fafc;
            color: #64748b;
            font-size: 0.88rem;
            text-align: center;
            padding: 20px;
        }

        .report-link {
            color: #111827;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .report-link:hover {
            color: #334155;
        }

        .reports-side-nav {
            position: sticky;
            top: 90px;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
            padding: 14px;
        }

        .reports-side-nav-title {
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #6b7280;
            margin-bottom: 10px;
        }

        .reports-side-nav .report-nav-button {
            display: block;
            width: 100%;
            text-align: left;
            appearance: none;
            outline: none;
            color: #1f2937;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 12px 14px;
            border-radius: 10px;
            margin-bottom: 10px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            transition: 0.2s ease;
        }

        .reports-side-nav .report-nav-button:hover {
            background: #ffffff;
            border-color: #cbd5e1;
            color: #111827;
        }

        .reports-side-nav .report-nav-button.active {
            background: #111827;
            color: #ffffff;
            border-color: #111827;
            font-weight: 600;
        }

        .report-view {
            display: none !important;
        }

        .report-view.is-visible {
            display: block !important;
        }

        .row.report-view.is-visible {
            display: flex !important;
        }

        .report-section {
            scroll-margin-top: 100px;
        }

        .builder-stack {
            display: grid;
            gap: 16px;
        }

        .builder-kicker {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #6b7280;
            margin-bottom: 6px;
        }

        .builder-title {
            font-size: 1.75rem;
            line-height: 1.15;
            font-weight: 700;
            color: #111827;
            margin-bottom: 10px;
        }

        .builder-section-title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 12px;
        }

        .builder-hint {
            border: 1px dashed #d1d5db;
            border-radius: 10px;
            background: #f8fafc;
            padding: 12px 14px;
            font-size: 0.9rem;
            color: #475569;
        }

        .builder-field-option {
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #ffffff;
            padding: 10px 12px;
            min-height: 48px;
            cursor: pointer;
            transition: 0.2s ease;
        }

        .builder-field-option:hover {
            border-color: #cbd5e1;
            background: #f8fafc;
        }

        .builder-field-option span {
            font-size: 0.88rem;
            color: #1f2937;
            line-height: 1.3;
        }

        .x-small {
            font-size: 0.75rem;
        }

        .table-responsive {
            max-height: 600px;
            border: 1px solid #eef2f7;
            border-radius: 10px;
            background: #ffffff;
        }

        .report-panel .table {
            margin-bottom: 0;
        }

        .report-panel .table>:not(caption)>*>* {
            border-color: #eef2f7;
            vertical-align: middle;
        }

        .report-panel .table thead th {
            background: #f8fafc;
            color: #6b7280;
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .report-panel .table tbody td {
            color: #111827;
            padding-block: 0.85rem;
        }

        .report-panel hr {
            border-color: #eef2f7;
            opacity: 1;
        }

        @media (max-width: 991px) {
            .reports-side-nav {
                position: static;
            }

            .report-toolbar {
                max-width: 100%;
            }

            .report-chart,
            .report-chart-sm {
                min-height: 220px;
            }
        }

        @media (max-width: 767px) {
            .reports-shell,
            .reports-hero,
            .report-kpi,
            .report-panel {
                padding: 14px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            });

            flatpickr(".flatpickr-range", {
                mode: "range",
                dateFormat: "Y-m-d",
                allowInput: true
            });

            const sectionInput = document.getElementById('analytics-section-input');
            const navButtons = document.querySelectorAll('.report-nav-button');
            const reportViews = document.querySelectorAll('.report-view');
            const rangeLinks = document.querySelectorAll('.analytics-range-link');
            const initialSection = @json($activeReportSection ?? 'summary');
            const storedSection = window.localStorage.getItem('reports_active_section');
            const reportChartData = @json($reportChartData);
            const chartInstances = {};
            const chartPalette = ['#111827', '#374151', '#6b7280', '#9ca3af', '#475569', '#cbd5e1'];

            function hasValues(values) {
                return Array.isArray(values) && values.some((value) => Number(value) > 0);
            }

            function renderEmptyState(containerId, message) {
                const container = document.getElementById(containerId);

                if (!container) {
                    return;
                }

                container.innerHTML = `<div class="report-chart-empty">${message}</div>`;
                chartInstances[containerId] = 'empty';
            }

            function renderChart(containerId, builder, emptyMessage) {
                if (chartInstances[containerId]) {
                    return;
                }

                const container = document.getElementById(containerId);

                if (!container || typeof ApexCharts === 'undefined') {
                    return;
                }

                const options = builder();

                if (!options) {
                    renderEmptyState(containerId, emptyMessage);
                    return;
                }

                const chart = new ApexCharts(container, options);
                chart.render();
                chartInstances[containerId] = chart;
            }

            function buildDonut(labels, series, options = {}) {
                if (!labels.length || !hasValues(series)) {
                    return null;
                }

                return {
                    chart: {
                        type: 'donut',
                        height: options.height || 240
                    },
                    series,
                    labels,
                    colors: options.colors || chartPalette,
                    legend: {
                        position: 'bottom'
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        width: 2,
                        colors: ['#ffffff']
                    }
                };
            }

            function buildBar(categories, series, options = {}) {
                const activeSeries = series.filter((item) => hasValues(item.data));

                if (!categories.length || !activeSeries.length) {
                    return null;
                }

                return {
                    chart: {
                        type: 'bar',
                        height: options.height || 240,
                        stacked: Boolean(options.stacked),
                        toolbar: {
                            show: false
                        }
                    },
                    series: activeSeries,
                    colors: options.colors || [chartPalette[1]],
                    plotOptions: {
                        bar: {
                            horizontal: Boolean(options.horizontal),
                            borderRadius: 8,
                            columnWidth: options.columnWidth || '44%',
                            distributed: Boolean(options.distributed)
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    legend: activeSeries.length > 1 ? {
                        position: 'top',
                        horizontalAlign: 'left'
                    } : {
                        show: false
                    },
                    xaxis: {
                        categories,
                        labels: options.xLabels || {}
                    },
                    yaxis: options.yaxis || {},
                    tooltip: options.tooltip || {},
                    grid: {
                        borderColor: '#e5e7eb'
                    }
                };
            }

            function buildLine(categories, series, options = {}) {
                if (!categories.length || !hasValues(series)) {
                    return null;
                }

                return {
                    chart: {
                        type: 'line',
                        height: options.height || 220,
                        toolbar: {
                            show: false
                        }
                    },
                    series: [{
                        name: options.name || 'Value',
                        data: series
                    }],
                    colors: options.colors || [chartPalette[4]],
                    stroke: {
                        width: 3,
                        curve: 'smooth'
                    },
                    markers: {
                        size: 4
                    },
                    dataLabels: {
                        enabled: false
                    },
                    xaxis: {
                        categories
                    },
                    yaxis: options.yaxis || {},
                    grid: {
                        borderColor: '#e5e7eb'
                    }
                };
            }

            function renderSectionCharts(section) {
                if (section === 'summary') {
                    renderChart('summary-overview-chart', () => buildBar(
                        reportChartData.summary.metric_labels,
                        [{
                            name: 'Count',
                            data: reportChartData.summary.metric_series
                        }],
                        {
                            height: 280,
                            distributed: true,
                            columnWidth: '42%',
                            colors: chartPalette,
                            xLabels: {
                                rotate: -30
                            },
                            yaxis: {
                                labels: {
                                    formatter: (value) => Math.round(value)
                                }
                            }
                        }
                    ), 'No summary metrics for the selected range.');

                    renderChart('summary-funnel-chart', () => buildDonut(
                        reportChartData.summary.funnel_labels,
                        reportChartData.summary.funnel_series
                    ), 'No funnel activity for the selected range.');
                }

                if (section === 'funnel') {
                    renderChart('funnel-overview-chart', () => buildBar(
                        reportChartData.funnel.overview_labels,
                        [{
                            name: 'Candidates',
                            data: reportChartData.funnel.overview_series
                        }],
                        {
                            horizontal: true,
                            colors: [chartPalette[0]]
                        }
                    ), 'No funnel totals available.');

                    renderChart('funnel-weekly-chart', () => buildBar(
                        reportChartData.funnel.weekly_labels,
                        [{
                            name: 'CVs',
                            data: reportChartData.funnel.weekly_cvs
                        }, {
                            name: 'Hired',
                            data: reportChartData.funnel.weekly_hired
                        }],
                        {
                            colors: [chartPalette[1], chartPalette[2]],
                            xLabels: {
                                rotate: -35
                            }
                        }
                    ), 'No weekly funnel data available.');

                    renderChart('funnel-monthly-chart', () => buildBar(
                        reportChartData.funnel.monthly_labels,
                        [{
                            name: 'CVs',
                            data: reportChartData.funnel.monthly_cvs
                        }, {
                            name: 'Hired',
                            data: reportChartData.funnel.monthly_hired
                        }],
                        {
                            colors: [chartPalette[3], chartPalette[2]]
                        }
                    ), 'No monthly funnel data available.');
                }

                if (section === 'vacancies') {
                    renderChart('vacancies-distribution-chart', () => buildBar(
                        reportChartData.vacancies.labels,
                        [{
                            name: 'Remaining Openings',
                            data: reportChartData.vacancies.open_series
                        }, {
                            name: 'Hires',
                            data: reportChartData.vacancies.hired_series
                        }],
                        {
                            height: 280,
                            stacked: true,
                            horizontal: true,
                            colors: [chartPalette[3], chartPalette[2]]
                        }
                    ), 'No vacancy data to visualize.');
                }

                if (section === 'source_offer') {
                    renderChart('source-of-hire-chart', () => buildDonut(
                        reportChartData.source_offer.source_labels,
                        reportChartData.source_offer.source_series
                    ), 'No source distribution available.');

                    renderChart('offer-status-chart', () => buildDonut(
                        reportChartData.source_offer.offer_labels,
                        reportChartData.source_offer.offer_series,
                        {
                            colors: [chartPalette[2], chartPalette[4], chartPalette[5]]
                        }
                    ), 'No offer activity for the selected range.');
                }

                if (section === 'time_recruiter') {
                    renderChart('time-to-hire-chart', () => buildBar(
                        reportChartData.time_recruiter.stage_labels,
                        [{
                            name: 'Days',
                            data: reportChartData.time_recruiter.stage_series
                        }],
                        {
                            horizontal: true,
                            colors: [chartPalette[0]],
                            tooltip: {
                                y: {
                                    formatter: (value) => `${Number(value).toFixed(2)} d`
                                }
                            }
                        }
                    ), 'No time-to-hire data available.');

                    renderChart('recruiter-performance-chart', () => buildBar(
                        reportChartData.time_recruiter.recruiter_labels,
                        [{
                            name: 'Hires',
                            data: reportChartData.time_recruiter.hire_series
                        }, {
                            name: 'Interviews',
                            data: reportChartData.time_recruiter.interview_series
                        }],
                        {
                            colors: [chartPalette[1], chartPalette[3]],
                            xLabels: {
                                rotate: -25
                            }
                        }
                    ), 'No recruiter activity to visualize.');
                }

                if (section === 'tracker_turnover') {
                    renderChart('tracker-status-chart', () => buildDonut(
                        reportChartData.tracker_turnover.status_labels,
                        reportChartData.tracker_turnover.status_series
                    ), 'No candidate status breakdown available.');

                    renderChart('turnover-quarterly-chart', () => buildDonut(
                        reportChartData.tracker_turnover.turnover_labels,
                        reportChartData.tracker_turnover.turnover_series,
                        {
                            colors: [chartPalette[2], chartPalette[4], chartPalette[5]]
                        }
                    ), 'No resignation requests data available.');

                    renderChart('turnover-department-chart', () => buildBar(
                        reportChartData.tracker_turnover.department_labels,
                        [{
                            name: 'Resignation Requests',
                            data: reportChartData.tracker_turnover.department_series
                        }],
                        {
                            horizontal: true,
                            colors: [chartPalette[5]]
                        }
                    ), 'No resignation requests by department available.');
                }
            }

            function setActiveSection(section, updateUrl = true) {
                navButtons.forEach((button) => {
                    button.classList.toggle('active', button.dataset.section === section);
                });

                reportViews.forEach((view) => {
                    view.classList.toggle('is-visible', view.dataset.section === section);
                });

                if (sectionInput) {
                    sectionInput.value = section;
                }

                window.localStorage.setItem('reports_active_section', section);

                rangeLinks.forEach((link) => {
                    const range = link.dataset.range;
                    const url = new URL(window.location.href);
                    url.searchParams.set('section', section);

                    if (range === 'reset') {
                        url.searchParams.delete('range');
                        url.searchParams.delete('from_date');
                        url.searchParams.delete('to_date');
                    } else {
                        url.searchParams.set('range', range);
                        url.searchParams.delete('from_date');
                        url.searchParams.delete('to_date');
                    }

                    link.href = url.toString();
                });

                if (updateUrl) {
                    const url = new URL(window.location.href);
                    url.searchParams.set('section', section);
                    window.history.replaceState({}, '', url);
                }

                renderSectionCharts(section);
            }

            navButtons.forEach((button) => {
                button.addEventListener('click', function() {
                    const section = this.dataset.section;
                    setActiveSection(section);
                });
            });

            const hasInitialButton = document.querySelector(`.report-nav-button[data-section="${initialSection}"]`);
            const fallbackSection = !hasInitialButton && initialSection !== 'builder' ? storedSection : initialSection;
            const initialButton = fallbackSection ?
                document.querySelector(`.report-nav-button[data-section="${fallbackSection}"]`) :
                null;

            if (initialButton) {
                setActiveSection(fallbackSection, false);
            }
        });
    </script>
@endpush