@extends('layout.mainlayout')

@section('content')
<div class="page-wrapper cardhead">
    <div class="content container-fluid">
        @component('components.breadcrumb')
            @slot('title')
                HR Executive Dashboard
            @endslot
        @endcomponent

        <div class="card border-0 report-shell mb-3">
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-md-2">
                        <label class="form-label mb-1">From</label>
                        <input type="date" id="from" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label mb-1">To</label>
                        <input type="date" id="to" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label mb-1">Period</label>
                        <select id="period" class="form-control">
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly" selected>Monthly</option>
                            <option value="quarterly">Quarterly</option>
                            <option value="halfyearly">Half Yearly</option>
                            <option value="yearly">Yearly</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-1">Reporting Manager</label>
                        <select id="manager_id" class="form-control select2">
                            <option value="">All Managers</option>
                            @foreach ($managers as $manager)
                                <option value="{{ $manager->id }}">{{ $manager->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-1">Team</label>
                        <select id="team_id" class="form-control select2">
                            <option value="">All Teams</option>
                            @foreach ($teams as $team)
                                <option value="{{ $team->id }}">{{ $team->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <button class="btn btn-primary w-100 mt-1" onclick="loadHrExecutiveReport()">Apply Filters</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Onboarding Done</small><h3 id="kpiOnboardingTotal" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Domestic</small><h3 id="kpiOnboardingDomestic" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Overseas</small><h3 id="kpiOnboardingOverseas" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Resignations</small><h3 id="kpiResignations" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Contracts Expiring</small><h3 id="kpiContractsExpiring" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Contracts Extended</small><h3 id="kpiContractsExtended" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Contracts On Hold</small><h3 id="kpiContractsOnHold" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Contracts Expired</small><h3 id="kpiContractsExpired" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Pending HR/Manager Decision</small><h3 id="kpiPendingAction" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Pending Exit</small><h3 id="kpiPendingExit" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Notice Period Overdue</small><h3 id="kpiOverdueNotice" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Probation Completed</small><h3 id="kpiProbationCompleted" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Probation Action Pending</small><h3 id="kpiProbationPending" class="mb-0">0</h3></div></div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card kpi-card border-0"><div class="card-body text-center"><small>Top Exit Pendency</small><h6 id="kpiTopExitDept" class="mb-0 mt-2">-</h6></div></div>
            </div>
        </div>

        <div class="card border-0 chart-card mb-3">
            <div class="card-body">
                <small class="text-muted d-block mb-1">Top Resignation Reason</small>
                <div id="topReasonSummary" class="fw-semibold">-</div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-xl-8">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">HR Trend Overview</h5>
                    </div>
                    <div class="card-body">
                        <div id="hrTrendChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Resignation Status Breakdown</h5>
                    </div>
                    <div class="card-body">
                        <div id="resignationStatusChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Exit Department Pending Clearance</h5>
                    </div>
                    <div class="card-body">
                        <div id="exitPendencyChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card border-0 chart-card">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Probation Status Overview</h5>
                    </div>
                    <div class="card-body">
                        <div id="probationChart"></div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 h-100">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Contract Extensions By HR</h5>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-striped align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>HR Person</th>
                                    <th class="text-end">Extensions</th>
                                </tr>
                            </thead>
                            <tbody id="contractRankingBody">
                                <tr><td colspan="2" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 h-100">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Resignation Approval & Exit By HR</h5>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-striped align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>HR Person</th>
                                    <th class="text-end">Approvals</th>
                                    <th class="text-end">Exits</th>
                                </tr>
                            </thead>
                            <tbody id="resignationHrRankingBody">
                                <tr><td colspan="3" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 h-100">
                    <div class="card-header bg-transparent border-0 pb-0">
                        <h5 class="mb-0">Probation Updates By HR</h5>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-striped align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>HR Person</th>
                                    <th class="text-end">Updates</th>
                                </tr>
                            </thead>
                            <tbody id="probationActionRankingBody">
                                <tr><td colspan="2" class="text-center text-muted">Loading...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
let hrTrendChart, resignationStatusChart, exitPendencyChart, contractRankingChart;

function setDefaultDates() {
    const today = new Date();
    const first = new Date(today.getFullYear(), today.getMonth(), 1);
    from.value = first.toISOString().split('T')[0];
    to.value = today.toISOString().split('T')[0];
}

function chartEmpty(selector, message) {
    const el = document.querySelector(selector);
    if (!el) return;
    el.innerHTML = `<div class="text-muted text-center py-4">${message}</div>`;
}

function loadHrExecutiveReport() {
    if (!from.value || !to.value) setDefaultDates();

    const params = new URLSearchParams({
        from: from.value,
        to: to.value,
        period: period.value,
        manager_id: manager_id.value,
        team_id: team_id.value
    });

    fetch(`{{ route('reports.hr-executive.data') }}?${params.toString()}`)
        .then(r => r.json())
        .then(data => {
            const k = data.kpis || {};
            kpiOnboardingTotal.innerText = Number(k.onboarding_total || 0);
            kpiOnboardingDomestic.innerText = Number(k.onboarding_domestic || 0);
            kpiOnboardingOverseas.innerText = Number(k.onboarding_overseas || 0);
            kpiResignations.innerText = Number(k.resignations_count || 0);
            kpiContractsExpiring.innerText = Number(k.contracts_expiring_count || 0);
            kpiContractsExtended.innerText = Number(k.contracts_extended_count || 0);
            kpiContractsOnHold.innerText = Number(k.contracts_on_hold_count || 0);
            kpiContractsExpired.innerText = Number(k.contracts_expired_count || 0);
            kpiPendingAction.innerText = Number(k.pending_action_count || 0);
            kpiPendingExit.innerText = Number(k.pending_exit_count || 0);
            kpiOverdueNotice.innerText = Number(k.overdue_notice_count || 0);
            kpiProbationCompleted.innerText = Number(k.probation_completed_count || 0);
            kpiProbationPending.innerText = Number(k.probation_pending_action_count || 0);
            kpiTopExitDept.innerText = data.exit_pendency?.top_department || '-';
            topReasonSummary.innerText = k.top_reasons_summary || '-';

            renderTrendChart(data.trend || {});
            renderResignationStatusChart(data.resignation_breakdown || {});
            renderExitPendencyChart(data.exit_pendency || {});
            renderProbationChart(data.probation_summary || {});
            renderContractRanking(data.contract_ranking || []);
            renderResignationHrRanking(data.resignation_hr_ranking || []);
            renderProbationActionRanking(data.probation_action_ranking || []);
        })
        .catch(() => {
            chartEmpty('#hrTrendChart', 'Unable to load report data.');
            chartEmpty('#resignationStatusChart', 'Unable to load report data.');
            chartEmpty('#exitPendencyChart', 'Unable to load report data.');
            chartEmpty('#probationChart', 'Unable to load report data.');
            contractRankingBody.innerHTML = '<tr><td colspan="2" class="text-center text-danger">Unable to load report data.</td></tr>';
            resignationHrRankingBody.innerHTML = '<tr><td colspan="3" class="text-center text-danger">Unable to load report data.</td></tr>';
            probationActionRankingBody.innerHTML = '<tr><td colspan="2" class="text-center text-danger">Unable to load report data.</td></tr>';
        });
}

function renderTrendChart(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#hrTrendChart', 'No trend data for selected filters.');

    document.querySelector('#hrTrendChart').innerHTML = '';
    hrTrendChart?.destroy();
    hrTrendChart = new ApexCharts(document.querySelector('#hrTrendChart'), {
        chart: { type: 'line', height: 360, toolbar: { show: true } },
        series: [
            { name: 'Onboarding', type: 'column', data: chart.onboarding_total || [] },
            { name: 'Domestic', type: 'line', data: chart.domestic || [] },
            { name: 'Overseas', type: 'line', data: chart.overseas || [] },
            { name: 'Resignations', type: 'column', data: chart.resignations || [] },
            { name: 'Extensions', type: 'line', data: chart.extensions || [] },
        ],
        stroke: { width: [0, 3, 3, 0, 3] },
        xaxis: { categories: labels },
        dataLabels: { enabled: false },
        legend: { position: 'bottom' }
    });
    hrTrendChart.render();
}

function renderResignationStatusChart(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#resignationStatusChart', 'No resignation data for selected filters.');

    document.querySelector('#resignationStatusChart').innerHTML = '';
    resignationStatusChart?.destroy();
    resignationStatusChart = new ApexCharts(document.querySelector('#resignationStatusChart'), {
        chart: { type: 'donut', height: 340 },
        series: chart.values || [],
        labels: labels,
        legend: { position: 'bottom' }
    });
    resignationStatusChart.render();
}

function renderExitPendencyChart(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#exitPendencyChart', 'No pending exit clearance in selected filters.');

    document.querySelector('#exitPendencyChart').innerHTML = '';
    exitPendencyChart?.destroy();
    exitPendencyChart = new ApexCharts(document.querySelector('#exitPendencyChart'), {
        chart: { type: 'bar', height: 340, toolbar: { show: true } },
        series: [{ name: 'Pending', data: chart.values || [] }],
        xaxis: { categories: labels },
        plotOptions: { bar: { borderRadius: 4, horizontal: true } },
        dataLabels: { enabled: false }
    });
    exitPendencyChart.render();
}

function renderProbationChart(chart) {
    const labels = chart.labels || [];
    if (!labels.length) return chartEmpty('#probationChart', 'No probation data for selected filters.');

    document.querySelector('#probationChart').innerHTML = '';
    contractRankingChart?.destroy();
    contractRankingChart = new ApexCharts(document.querySelector('#probationChart'), {
        chart: { type: 'bar', height: 340, toolbar: { show: true } },
        series: [{ name: 'Employees', data: chart.values || [] }],
        xaxis: { categories: labels },
        plotOptions: { bar: { borderRadius: 4, distributed: true } },
        dataLabels: { enabled: false },
        legend: { show: false }
    });
    contractRankingChart.render();
}

function renderContractRanking(rows) {
    if (!rows.length) {
        contractRankingBody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">No contract extension updates in selected filters.</td></tr>';
        return;
    }

    contractRankingBody.innerHTML = rows.map(row => `
        <tr>
            <td>${escapeHtml(row.updated_by || 'Unknown')}</td>
            <td class="text-end">${Number(row.extension_count || 0)}</td>
        </tr>
    `).join('');
}

function renderResignationHrRanking(rows) {
    if (!rows.length) {
        resignationHrRankingBody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">No resignation actions in selected filters.</td></tr>';
        return;
    }

    resignationHrRankingBody.innerHTML = rows.map(row => `
        <tr>
            <td>${escapeHtml(row.user_name || 'Unknown')}</td>
            <td class="text-end">${Number(row.approval_count || 0)}</td>
            <td class="text-end">${Number(row.exit_count || 0)}</td>
        </tr>
    `).join('');
}

function renderProbationActionRanking(rows) {
    if (!rows.length) {
        probationActionRankingBody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">No probation updates in selected filters.</td></tr>';
        return;
    }

    probationActionRankingBody.innerHTML = rows.map(row => `
        <tr>
            <td>${escapeHtml(row.user_name || 'Unknown')}</td>
            <td class="text-end">${Number(row.update_count || 0)}</td>
        </tr>
    `).join('');
}

function escapeHtml(value) {
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

setDefaultDates();
loadHrExecutiveReport();
</script>
@endpush