@php ($headerOption = [
    'title' => 'Welcome to Dashboard',
    'noCardView' => true
])
@extends('admin.layouts.layout', $headerOption)
@push('page_css')
<link href="{{ asset('assets/css/dashboard.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
<div class="main_contentarea mt-2">
    <div class="container">

        {{-- Page Title + Tenant Selector (Super Admin) --}}
        <div class="dashboard_title d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h2>Welcome {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}</h2>
            </div>
            @if($show_tenant_dropdown)
            <div class="compliance_tenant_wrap">
                <label class="form-label mb-1 fw-semibold small text-muted">Select Tenant</label>
                <select id="tenantSelector" class="form-select form-select-sm" style="min-width:220px;">
                    <option value="">-- Select Tenant --</option>
                    @foreach($tenants as $tenant)
                        <option value="{{ $tenant->id }}">{{ $tenant->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif
        </div>

        {{-- No-tenant placeholder (Super Admin before selection) --}}
        @if($show_tenant_dropdown)
        <div id="noTenantPlaceholder" class="text-center py-5 text-muted">
            <i class="fa fa-building fa-2x mb-2 d-block"></i>
            <p class="mb-0">Select a tenant above to view compliance insights.</p>
        </div>
        @endif

        {{-- Compliance Dashboard (hidden for Super Admin until tenant selected) --}}
        <div id="complianceDashboard" @if($show_tenant_dropdown) style="display:none;" @endif>

            {{-- Section Header --}}
            <div class="compliance_section_header mt-3 mb-3">
                <h3>Compliance Insights</h3>
                <p class="text-muted mb-0 small">Aggregated from completed evaluations</p>
            </div>

            {{-- KPI Stat Cards --}}
            <div class="dashboard_boxlist compliance_stats mb-4" id="complianceStatsRow">
                <div class="dashboard_box compliance_kpi_card">
                    <div class="compliance_kpi_icon compliance_icon_blue">
                        <i class="fa fa-clipboard-check"></i>
                    </div>
                    <div class="compliance_kpi_body">
                        <div class="compliance_kpi_value" id="kpi_completed_evals">
                            <span class="compliance_spinner"></span>
                        </div>
                        <div class="compliance_kpi_label">Completed Evaluations</div>
                    </div>
                </div>
                <div class="dashboard_box compliance_kpi_card">
                    <div class="compliance_kpi_icon compliance_icon_green">
                        <i class="fa fa-check-circle"></i>
                    </div>
                    <div class="compliance_kpi_body">
                        <div class="compliance_kpi_value" id="kpi_compliance_rate">
                            <span class="compliance_spinner"></span>
                        </div>
                        <div class="compliance_kpi_label">Overall Compliance Rate</div>
                    </div>
                </div>
                <div class="dashboard_box compliance_kpi_card">
                    <div class="compliance_kpi_icon compliance_icon_red">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <div class="compliance_kpi_body">
                        <div class="compliance_kpi_value" id="kpi_total_violations">
                            <span class="compliance_spinner"></span>
                        </div>
                        <div class="compliance_kpi_label">Total Violations Found</div>
                    </div>
                </div>
                <div class="dashboard_box compliance_kpi_card">
                    <div class="compliance_kpi_icon compliance_icon_orange">
                        <i class="fa fa-tools"></i>
                    </div>
                    <div class="compliance_kpi_body">
                        <div class="compliance_kpi_value" id="kpi_repair_rate">
                            <span class="compliance_spinner"></span>
                        </div>
                        <div class="compliance_kpi_label">Avg Repair Rate</div>
                    </div>
                </div>
            </div>

            {{-- Charts Row --}}
            <div class="row g-3 mb-4">
                <div class="col-lg-7">
                    <div class="white_box h-100">
                        <div class="compliance_chart_header">
                            <h6 class="mb-0">Compliance by Section</h6>
                            <span class="text-muted small">Pass rate per inspection section</span>
                        </div>
                        <div id="sectionChartLoader" class="compliance_chart_loader">
                            <span class="compliance_spinner"></span> Loading…
                        </div>
                        <div id="sectionChartEmpty" class="compliance_chart_empty" style="display:none;">
                            No section data available
                        </div>
                        <div id="sectionChart" style="min-height:320px;"></div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="white_box h-100">
                        <div class="compliance_chart_header">
                            <h6 class="mb-0">Top Violations</h6>
                            <span class="text-muted small">Most frequent non-compliant answers</span>
                        </div>
                        <div id="violationChartLoader" class="compliance_chart_loader">
                            <span class="compliance_spinner"></span> Loading…
                        </div>
                        <div id="violationChartEmpty" class="compliance_chart_empty" style="display:none;">
                            No violations recorded
                        </div>
                        <div id="violationChart" style="min-height:320px;"></div>
                    </div>
                </div>
            </div>

            {{-- Risk Indicators Table --}}
            <div class="white_box mb-4">
                <div class="compliance_chart_header mb-3">
                    <div>
                        <h6 class="mb-0">High-Risk Inspections</h6>
                        <span class="text-muted small">Heuristic risk score based on repair-needed items</span>
                    </div>
                </div>
                <div id="riskTableLoader" class="compliance_chart_loader">
                    <span class="compliance_spinner"></span> Loading…
                </div>
                <div id="riskTableEmpty" class="compliance_chart_empty" style="display:none;">
                    No high-risk inspections found
                </div>
                <div id="riskTableWrap" style="display:none;">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Property</th>
                                    <th>Inspector</th>
                                    <th>Date</th>
                                    <th class="text-center">Repairs</th>
                                    <th class="text-center">Risk Score</th>
                                </tr>
                            </thead>
                            <tbody id="riskTableBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>{{-- /complianceDashboard --}}

    </div>
</div>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script>
(function() {
    'use strict';

    var sectionChart    = null;
    var violationChart  = null;
    var currentTenantId = @if($show_tenant_dropdown) null @else {{ (int) session('tenant_id') ?: 'null' }} @endif;

    // ── Tenant selector (Super Admin) ──────────────────────────────────────
    @if($show_tenant_dropdown)
    document.getElementById('tenantSelector').addEventListener('change', function() {
        currentTenantId = this.value || null;
        if (currentTenantId) {
            document.getElementById('noTenantPlaceholder').style.display  = 'none';
            document.getElementById('complianceDashboard').style.display  = 'block';
            loadAll();
        } else {
            document.getElementById('noTenantPlaceholder').style.display  = '';
            document.getElementById('complianceDashboard').style.display  = 'none';
        }
    });
    @endif

    // ── Bootstrap load (script runs after body — DOM is already ready) ────
    @if(!$show_tenant_dropdown)
    loadAll();
    @endif

    function loadAll() {
        loadComplianceStats();
        loadTopViolations();
        loadComplianceBySectionChart();
        loadRiskIndicators();
    }

    function tenantParam() {
        return currentTenantId ? '?tenant_id=' + currentTenantId : '';
    }

    // ── KPI Stats ─────────────────────────────────────────────────────────
    function loadComplianceStats() {
        setKpiLoading(true);
        fetch('/dashboard-compliance-stats' + tenantParam())
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (res.success) {
                    var d = res.data;
                    setText('kpi_completed_evals',  d.completed_evaluations.toLocaleString());
                    setText('kpi_compliance_rate',   d.compliance_rate + '%');
                    setText('kpi_total_violations',  d.total_violations.toLocaleString());
                    setText('kpi_repair_rate',       d.repair_rate + '%');
                } else {
                    setKpiError();
                }
            })
            .catch(setKpiError);
    }

    function setKpiLoading(on) {
        ['kpi_completed_evals','kpi_compliance_rate','kpi_total_violations','kpi_repair_rate'].forEach(function(id) {
            if (on) document.getElementById(id).innerHTML = '<span class="compliance_spinner"></span>';
        });
    }

    function setKpiError() {
        ['kpi_completed_evals','kpi_compliance_rate','kpi_total_violations','kpi_repair_rate'].forEach(function(id) {
            document.getElementById(id).textContent = '—';
        });
    }

    // ── Compliance by Section Chart ────────────────────────────────────────
    function loadComplianceBySectionChart() {
        showLoader('sectionChartLoader', true);
        showLoader('sectionChartEmpty', false);
        fetch('/dashboard-compliance-by-section' + tenantParam())
            .then(function(r) { return r.json(); })
            .then(function(res) {
                showLoader('sectionChartLoader', false);
                if (!res.success || !res.data.sections.length) {
                    showLoader('sectionChartEmpty', true);
                    return;
                }
                renderSectionChart(res.data);
            })
            .catch(function() {
                showLoader('sectionChartLoader', false);
                showLoader('sectionChartEmpty', true);
            });
    }

    function renderSectionChart(data) {
        if (sectionChart) { sectionChart.destroy(); sectionChart = null; }
        var options = {
            chart:  { type: 'bar', height: 320, toolbar: { show: false } },
            plotOptions: {
                bar: { horizontal: true, borderRadius: 4, dataLabels: { position: 'top' } }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) { return val + '%'; },
                offsetX: 6,
                style: { fontSize: '11px', colors: ['#555'] }
            },
            series: [{ name: 'Compliance %', data: data.percentages }],
            xaxis:  {
                categories: data.sections,
                min: 0, max: 100,
                labels: { formatter: function(val) { return val + '%'; } }
            },
            colors: ['#c96a2a'],
            tooltip: { y: { formatter: function(val) { return val + '%'; } } },
            grid:   { borderColor: '#f0f0f0' },
        };
        sectionChart = new ApexCharts(document.getElementById('sectionChart'), options);
        sectionChart.render();
    }

    // ── Top Violations Chart ───────────────────────────────────────────────
    function loadTopViolations() {
        showLoader('violationChartLoader', true);
        showLoader('violationChartEmpty', false);
        fetch('/dashboard-top-violations' + tenantParam())
            .then(function(r) { return r.json(); })
            .then(function(res) {
                showLoader('violationChartLoader', false);
                if (!res.success || !res.data.labels.length) {
                    showLoader('violationChartEmpty', true);
                    return;
                }
                renderViolationChart(res.data);
            })
            .catch(function() {
                showLoader('violationChartLoader', false);
                showLoader('violationChartEmpty', true);
            });
    }

    function renderViolationChart(data) {
        if (violationChart) { violationChart.destroy(); violationChart = null; }
        var options = {
            chart:  { type: 'bar', height: 320, toolbar: { show: false } },
            plotOptions: {
                bar: { horizontal: true, borderRadius: 4 }
            },
            dataLabels: { enabled: true, style: { fontSize: '11px', colors: ['#555'] } },
            series: [{ name: 'Violations', data: data.series }],
            xaxis:  { categories: data.labels },
            colors: ['#DC2626'],
            tooltip: {
                y: { formatter: function(val) { return val + ' occurrences'; } },
                custom: function(opts) {
                    var idx = opts.dataPointIndex;
                    var section = data.sections[idx] || '';
                    return '<div class="apexcharts-tooltip-title" style="font-size:12px;padding:4px 8px;">' +
                           (section ? '[' + section + '] ' : '') + data.labels[idx] + '</div>' +
                           '<div style="padding:4px 8px;font-size:12px;">' + data.series[idx] + ' occurrences</div>';
                }
            },
            grid:   { borderColor: '#f0f0f0' },
        };
        violationChart = new ApexCharts(document.getElementById('violationChart'), options);
        violationChart.render();
    }

    // ── Risk Indicators Table ─────────────────────────────────────────────
    function loadRiskIndicators() {
        showLoader('riskTableLoader', true);
        showLoader('riskTableEmpty', false);
        document.getElementById('riskTableWrap').style.display = 'none';

        fetch('/dashboard-risk-indicators' + tenantParam())
            .then(function(r) { return r.json(); })
            .then(function(res) {
                showLoader('riskTableLoader', false);
                if (!res.success || !res.data.length) {
                    showLoader('riskTableEmpty', true);
                    return;
                }
                renderRiskTable(res.data);
            })
            .catch(function() {
                showLoader('riskTableLoader', false);
                showLoader('riskTableEmpty', true);
            });
    }

    function renderRiskTable(rows) {
        var html = '';
        rows.forEach(function(row) {
            var score = row.risk_score;
            var badgeClass = score >= 50 ? 'risk_badge risk_high'
                           : score >= 20 ? 'risk_badge risk_medium'
                           :               'risk_badge risk_low';
            var property = row.property.length > 50 ? row.property.substring(0, 50) + '…' : row.property;
            html += '<tr>' +
                '<td title="' + escHtml(row.property) + '">' + escHtml(property) + '</td>' +
                '<td>' + escHtml(row.inspector) + '</td>' +
                '<td>' + escHtml(row.date) + '</td>' +
                '<td class="text-center">' + row.repair_count + ' / ' + row.total_items + '</td>' +
                '<td class="text-center"><span class="' + badgeClass + '">' + score + '%</span></td>' +
                '</tr>';
        });
        document.getElementById('riskTableBody').innerHTML = html;
        document.getElementById('riskTableWrap').style.display = '';
    }

    // ── Helpers ───────────────────────────────────────────────────────────
    function setText(id, val) {
        document.getElementById(id).textContent = val;
    }

    function showLoader(id, show) {
        document.getElementById(id).style.display = show ? '' : 'none';
    }

    function escHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

})();
</script>
@endpush