@extends(request()->has('_sphf_partial') ? 'theme.sphf.layouts.partial' : 'theme.sphf.layouts.app')

@section('content')
<section class="min-h-screen bg-[#FCF9F1]">

  {{-- Page Tabs --}}
<div class="flex items-center border-b px-4 gap-12"
     style="height:40px; border-color:#ddd8ce; font-family:'DM Sans',sans-serif;">
    <button data-tab="overview" class="px-4 h-full flex items-center text-[16px] font-bold whitespace-nowrap cursor-default border-b-2 cursor-pointer"
          style="color:#1c2f1c; border-color:#2d5a27; margin-bottom:-1px;">Overview</button>
    <button data-tab="site-risk" class="h-full flex items-center text-[16px] font-normal whitespace-nowrap cursor-default border-b-2 border-transparent cursor-pointer"
          style="color:#6b6b6b; margin-bottom:-1px;">Site Risk</button>
    <button data-tab="forest" class="h-full flex items-center text-[16px] font-normal whitespace-nowrap cursor-default border-b-2 border-transparent cursor-pointer"
          style="color:#6b6b6b; margin-bottom:-1px;">Forest and Environmental</button>
    <button data-tab="compliance" class="h-full flex items-center text-[16px] font-normal whitespace-nowrap cursor-default border-b-2 border-transparent cursor-pointer"
          style="color:#6b6b6b; margin-bottom:-1px;">Compliance Register</button>
</div>

<div id="sphfOverviewExportArea">
{{-- Filter Bar --}}
<div class="flex flex-wrap items-center gap-2 border-b px-4 mt-8"
     style="background:#ffffff; border-color:#e0d9cc; min-height:42px; padding-top:8px; padding-bottom:8px;">
    @php $filterLabels = ['IP Wise','Districts','Tehsils','Bank Name','Branches','Beneficiary/CNIC','UUID','Time Slots']; @endphp
    @foreach($filterLabels as $label)
    <button class="flex items-center gap-1.5 px-3 py-1 rounded text-[16px] font-normal border whitespace-nowrap"
            style="background:#ffffff; border-color:#d1d5db; color:#374151; font-family:'DM Sans',sans-serif; line-height:1.5;">
        {{ $label }}
        <svg width="11" height="11" viewBox="0 0 20 20" fill="currentColor" style="color:#9ca3af; flex-shrink:0;">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
        </svg>
    </button>
    @endforeach
    <button class="ml-auto text-[16px] font-medium whitespace-nowrap"
            style="color:#1f2937; font-family:'DM Sans',sans-serif;">Reset All Filter</button>
</div>

{{-- TAB CONTENTS --}}
<div class="p-5 space-y-4">

    <div id="tab-overview" class="tab-content">
        @include('theme.sphf.pages.monitoring.esmp.overview')
    </div>

    <div id="tab-site-risk" class="tab-content hidden">
        @include('theme.sphf.pages.monitoring.esmp.site-risk')
    </div>

     <div id="tab-forest" class="tab-content hidden">
        @include('theme.sphf.pages.monitoring.esmp.forest')
    </div>
    <div id="tab-compliance" class="tab-content hidden">
    @include('theme.sphf.pages.monitoring.esmp.compliance')
</div>

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

@section('scripts')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="{{ asset('assets/vendors/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── DATA ──────────────────────────────────────────────────────────────────
    var TABLE_DATA = [
        { district:'Badin',    floodPlain:4200, hazardous:1200, forest:280, notStarted:4126, totalRisk:5680,  riskPct:'6.7', status:'Under Review'   },
        { district:'Dadu',     floodPlain:2100, hazardous:800,  forest:180, notStarted:3533, totalRisk:3080,  riskPct:'4.3', status:'Compliant'      },
        { district:'Ghotki',   floodPlain:6800, hazardous:2100, forest:410, notStarted:4822, totalRisk:9310,  riskPct:'9.5', status:'Non-Compliant'  },
        { district:'Khairpur', floodPlain:1800, hazardous:600,  forest:240, notStarted:4341, totalRisk:2640,  riskPct:'3.0', status:'Compliant'      },
        { district:'Larkana',  floodPlain:3200, hazardous:1100, forest:520, notStarted:5018, totalRisk:4820,  riskPct:'4.7', status:'Compliant'      },
        { district:'Sujawal',  floodPlain:2400, hazardous:800,  forest:680, notStarted:3146, totalRisk:3880,  riskPct:'6.0', status:'Under Review'   },
        { district:'Thatta',   floodPlain:2100, hazardous:1080, forest:540, notStarted:3636, totalRisk:4720,  riskPct:'6.4', status:'Under Review'   },
    ];

    var DISTRICT_CHART_DATA = [
        { label:'Badin',    floodPain:55000, hazardous:28000, forest:15000 },
        { label:'Dadu',     floodPain:48000, hazardous:10000, forest:6200  },
        { label:'Ghotki',   floodPain:47000, hazardous:18000, forest:7200  },
        { label:'Khairpur', floodPain:58000, hazardous:20000, forest:7400  },
        { label:'Larkana',  floodPain:68600, hazardous:5000,  forest:2525  },
        { label:'Sujawal',  floodPain:44000, hazardous:14000, forest:6900  },
        { label:'Thatta',   floodPain:49000, hazardous:16000, forest:6000  },
        { label:'Umerkot',  floodPain:68600, hazardous:0,     forest:0     },
    ];

    // ── STATUS BADGE ──────────────────────────────────────────────────────────
    function statusBadge(status) {
        var bg, color;
        if (status === 'Compliant')        { bg='#f0fdf4'; color='#16a34a'; }
        else if (status === 'Under Review') { bg='#fffbeb'; color='#d97706'; }
        else                                { bg='#fff7ed'; color='#ea580c'; }
        return '<span style="display:inline-flex;align-items:center;font-size:14px;font-weight:600;padding:2px 10px;border-radius:9999px;background:'+bg+';color:'+color+';font-family:\'DM Sans\',sans-serif;">'+ status +'</span>';
    }

    // ── COLORED NUMBER PILL ───────────────────────────────────────────────────
    function pill(val, bg, color) {
        return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 8px;border-radius:5px;background:'+bg+';color:'+color+';font-family:\'DM Sans\',sans-serif;">'+ val +'</span>';
    }

    // ── RENDER TABLE ──────────────────────────────────────────────────────────
   // ── TABLE STATE ───────────────────────────────────────────────────────────
var tableState = { search: '', sortCol: null, sortDir: 1 };

function renderTable() {
    var filtered = TABLE_DATA.filter(function(d) {
        if (!tableState.search) return true;
        return d.district.toLowerCase().indexOf(tableState.search.toLowerCase()) !== -1;
    });

    if (tableState.sortCol) {
        filtered.sort(function(a, b) {
            var av = a[tableState.sortCol];
            var bv = b[tableState.sortCol];
            if (typeof av === 'string') return av.localeCompare(bv) * tableState.sortDir;
            return (av - bv) * tableState.sortDir;
        });
    }

    var count = document.getElementById('overviewTableCount');
    if (count) count.textContent = filtered.length + ' of ' + TABLE_DATA.length + ' districts';

    var tbody = document.getElementById('overviewTableBody');
    tbody.innerHTML = filtered.map(function(d, i) {
        var isLast = i === filtered.length - 1;
        var rowBorder = isLast ? '' : 'border-bottom:1px solid #f3f4f6;';
        return '<tr style="' + rowBorder + '">' +
            '<td style="padding:12px 20px;font-size:13px;font-weight:500;color:#1f2937;font-family:\'DM Sans\',sans-serif;">' + d.district + '</td>' +
            '<td style="padding:12px 20px;">' + pill(d.floodPlain.toLocaleString(), '#fff7ed', '#ea580c') + '</td>' +
            '<td style="padding:12px 20px;">' + pill(d.hazardous.toLocaleString(), '#fffbeb', '#d97706') + '</td>' +
            '<td style="padding:12px 20px;">' + pill(d.forest.toLocaleString(), '#f0fdf4', '#16a34a') + '</td>' +
            '<td style="padding:12px 20px;font-size:13px;color:#6b7280;font-family:\'DM Sans\',sans-serif;">' + d.notStarted.toLocaleString() + '</td>' +
            '<td style="padding:12px 20px;font-size:13px;color:#6b7280;font-family:\'DM Sans\',sans-serif;">' + d.totalRisk.toLocaleString() + '</td>' +
            '<td style="padding:12px 20px;">' + pill(d.riskPct + '%', '#eff6ff', '#2563eb') + '</td>' +
            '<td style="padding:12px 20px;">' + statusBadge(d.status) + '</td>' +
            '</tr>';
    }).join('');

    // Update sort icons
    document.querySelectorAll('th[data-col] .sort-icon').forEach(function(el) {
        var col = el.closest('th').dataset.col;
        el.textContent = tableState.sortCol === col
            ? (tableState.sortDir === 1 ? ' ↑' : ' ↓')
            : ' ↕';
        el.style.color = tableState.sortCol === col ? '#6b7280' : '#d1d5db';
    });
}

// ── SEARCH ────────────────────────────────────────────────────────────────
var searchEl = document.getElementById('overviewTableSearch');
if (searchEl) {
    searchEl.addEventListener('input', function() {
        tableState.search = this.value;
        renderTable();
    });
}

// ── SORT ON TH CLICK ──────────────────────────────────────────────────────
document.querySelectorAll('th[data-col]').forEach(function(th) {
    th.addEventListener('click', function() {
        var col = this.dataset.col;
        if (tableState.sortCol === col) {
            tableState.sortDir *= -1;
        } else {
            tableState.sortCol = col;
            tableState.sortDir = 1;
        }
        renderTable();
    });
});

// ── INITIAL RENDER ────────────────────────────────────────────────────────
renderTable();
// ── DONUT CHART ───────────────────────────────────────────────────────────
var donutEl = document.querySelector('#overviewDonutChart');
if (donutEl && typeof ApexCharts !== 'undefined') {
    donutEl.innerHTML = '';
    var donut = new ApexCharts(donutEl, {
        chart: {
            type: 'donut',
            height: 200,
            toolbar: { show: false },
            fontFamily: '\'DM Sans\', sans-serif',
        },
        series: [24810, 8340, 3120, 68600],
        labels: ['Flood Plain', 'Hazardous', 'Forest', 'Clear'],
        colors: ['#ef4444', '#9ca3af', '#1D9E75', '#1e3a5f'],
        legend: { show: false },
        dataLabels: { enabled: false },
        plotOptions: {
            pie: {
                donut: {
                    size: '68%',
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            label: 'Clear',
                            fontSize: '11px',
                            color: '#6b7280',
                            fontFamily: '\'DM Sans\', sans-serif',
                            formatter: function() { return '68,600'; }
                        }
                    }
                }
            }
        },
        stroke: { width: 0 },
        tooltip: { style: { fontFamily: '\'DM Sans\', sans-serif' } }
    });
    donut.render().then(function () {
        attachToolbar('overviewDonutToolbar', donut, 'sphfOverviewDonutCard', 'ESMP Risk Distribution');
    });
}// ── DISTRICT BAR CHART ────────────────────────────────────────────────────
var distEl = document.querySelector('#overviewDistrictChart');
if (distEl && typeof ApexCharts !== 'undefined') {
    distEl.innerHTML = '';

    var BASE = 35000;

    var distChart = new ApexCharts(distEl, {
        chart: {
            type: 'bar',
            height: 280,
            stacked: true,
            toolbar: { show: false },
            fontFamily: '\'DM Sans\', sans-serif',
        },
        series: [
            {
                name: 'Flood Pain',
                // Subtract BASE so bars visually start at 35k
                data: DISTRICT_CHART_DATA.map(function(d) { return d.floodPain - BASE; })
            },
            {
                name: 'Hazardous',
                data: DISTRICT_CHART_DATA.map(function(d) { return d.hazardous; })
            },
            {
                name: 'Forest',
                data: DISTRICT_CHART_DATA.map(function(d) { return d.forest; })
            },
        ],
        xaxis: {
            categories: DISTRICT_CHART_DATA.map(function(d) { return d.label; }),
            labels: {
                style: { fontSize: '15px', fontFamily: '\'DM Sans\', sans-serif', colors: '#676d77' }
            },
            axisBorder: { show: false },
            axisTicks: { show: false }
        },
        colors: ['#0D5C45', '#3DB890', '#A8E6CF'],
        dataLabels: { enabled: false },
        legend: {
            position: 'top',
            horizontalAlign: 'left',
            fontSize: '11px',
            fontFamily: '\'DM Sans\', sans-serif',
            markers: { width: 8, height: 8, radius: 4 },
            itemMargin: { horizontal: 8 },
        },
        grid: {
            borderColor: '#f3f4f6',
            strokeDashArray: 3,
            xaxis: { lines: { show: false } }
        },
        plotOptions: {
            bar: {
                borderRadius: 0,
                columnWidth: '40%',
            }
        },
        stroke: { width: 0 },
        yaxis: {
            min: 0,
            max: 35000, // 72000 - 35000 (offset)
            tickAmount: 4,
            labels: {
                // Add BASE back to display correct numbers
                formatter: function(v) {
                    return ((v + BASE) / 1000 * 1000).toLocaleString();
                },
                style: { fontSize: '15px', colors: '#6e7175', fontFamily: '\'DM Sans\', sans-serif' }
            },
        },
        tooltip: {
            style: { fontFamily: '\'DM Sans\', sans-serif' },
            y: {
                formatter: function(v, opts) {
                    // Add BASE back to Flood Pain tooltip value
                    if (opts.seriesIndex === 0) {
                        return (v + BASE).toLocaleString();
                    }
                    return v.toLocaleString();
                }
            }
        }
    });

    distChart.render().then(function () {
        attachToolbar('overviewDistrictToolbar', distChart, 'sphfOverviewDistrictCard', 'Risk Cases by District');
    });
}
});


document.querySelectorAll('[data-tab]').forEach(function(btn) {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.add('hidden'); });
        document.getElementById('tab-' + this.dataset.tab).classList.remove('hidden');
        document.querySelectorAll('[data-tab]').forEach(function(b) {
            b.style.color = '#6b6b6b';
            b.style.borderColor = 'transparent';
            b.style.fontWeight = '400';
        });
        this.style.color = '#1c2f1c';
        this.style.borderColor = '#2d5a27';
        this.style.fontWeight = '700';
    });
});






// ─────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────
// ── SITE RISK TABLE ───────────────────────────────────────────────────────
var SITE_RISK_DATA = [
    { district:'Ghotki',  ip:'HANDS', riskType:'Flood Plain',      cases:6800,  status:'Under Construction', clearance:'Pending',   action:'Environmental review needed'    },
    { district:'Badin',   ip:'NRSP',  riskType:'Hazardous',        cases:1200,  status:'Completed',          clearance:'Cleared',   action:'Retrospective clearance obtained'},
    { district:'Larkana', ip:'SAFCO', riskType:'Flood Plain',      cases:3200,  status:'Under Construction', clearance:'In Review',  action:'IFI waiver requested'            },
    { district:'Sujawal', ip:'SRSO',  riskType:'Forest',           cases:680,   status:'Not Started',        clearance:'Pending',   action:'Relocation being considered'     },
    { district:'Thatta',  ip:'TRDP',  riskType:'Flood+Hazardous',  cases:540,   status:'Under Construction', clearance:'Flagged',   action:'Priority HQ review'              },
    { district:'Umerkot', ip:'SRSO',  riskType:'Flood Plain',      cases:1210,  status:'Under Construction', clearance:'Pending',   action:'District clearance pending'      },
];

function riskTypePill(type) {
    var map = {
        'Flood Plain':     { bg:'#fff7ed', color:'#ea580c' },
        'Hazardous':       { bg:'#fffbeb', color:'#d97706' },
        'Forest':          { bg:'#f0fdf4', color:'#16a34a' },
        'Flood+Hazardous': { bg:'#fdf2f8', color:'#9333ea' },
    };
    var s = map[type] || { bg:'#f3f4f6', color:'#6b7280' };
    return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 9px;border-radius:5px;background:'+s.bg+';color:'+s.color+';font-family:\'DM Sans\',sans-serif;">'+type+'</span>';
}

function clearanceBadge(c) {
    var map = {
        'Pending':   { bg:'#fffbeb', color:'#d97706' },
        'Cleared':   { bg:'#f0fdf4', color:'#16a34a' },
        'In Review': { bg:'#eff6ff', color:'#2563eb' },
        'Flagged':   { bg:'#fff1f2', color:'#e11d48' },
    };
    var s = map[c] || { bg:'#f3f4f6', color:'#6b7280' };
    return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 9px;border-radius:5px;background:'+s.bg+';color:'+s.color+';font-family:\'DM Sans\',sans-serif;">'+c+'</span>';
}

var srtState = { search: '', sortCol: null, sortDir: 1 };

function renderSiteRiskTable() {
    var filtered = SITE_RISK_DATA.filter(function(d) {
        if (!srtState.search) return true;
        var q = srtState.search.toLowerCase();
        return d.district.toLowerCase().indexOf(q) !== -1 ||
               d.ip.toLowerCase().indexOf(q) !== -1 ||
               d.riskType.toLowerCase().indexOf(q) !== -1 ||
               d.status.toLowerCase().indexOf(q) !== -1;
    });

    if (srtState.sortCol) {
        filtered.sort(function(a, b) {
            var av = a[srtState.sortCol], bv = b[srtState.sortCol];
            if (typeof av === 'string') return av.localeCompare(bv) * srtState.sortDir;
            return (av - bv) * srtState.sortDir;
        });
    }

    var countEl = document.getElementById('siteRiskTableCount');
    if (countEl) countEl.textContent = filtered.length + ' of ' + SITE_RISK_DATA.length + ' rows';

    var tbody = document.getElementById('siteRiskTableBody');
    if (!tbody) return;
    tbody.innerHTML = filtered.map(function(d, i) {
        var isLast = i === filtered.length - 1;
        return '<tr style="'+(isLast ? '' : 'border-bottom:1px solid #f3f4f6;')+'">' +
            '<td style="padding:12px 20px;font-size:13px;font-weight:500;color:#1f2937;font-family:\'DM Sans\',sans-serif;">'+d.district+'</td>' +
            '<td style="padding:12px 20px;font-size:13px;color:#6b7280;font-family:\'DM Sans\',sans-serif;">'+d.ip+'</td>' +
            '<td style="padding:12px 20px;">'+riskTypePill(d.riskType)+'</td>' +
            '<td style="padding:12px 20px;font-size:13px;color:#374151;font-family:\'DM Sans\',sans-serif;">'+d.cases.toLocaleString()+'</td>' +
            '<td style="padding:12px 20px;font-size:13px;color:#6b7280;font-family:\'DM Sans\',sans-serif;">'+d.status+'</td>' +
            '<td style="padding:12px 20px;">'+clearanceBadge(d.clearance)+'</td>' +
            '<td style="padding:12px 4px 12px 20px;font-size:13px;color:#9ca3af;font-family:\'DM Sans\',sans-serif;">'+d.action+'</td>' +
            '</tr>';
    }).join('');

    // Update sort icons
    document.querySelectorAll('.srt-th .srt-icon').forEach(function(el) {
        var col = el.closest('th').dataset.srtcol;
        el.textContent = srtState.sortCol === col ? (srtState.sortDir === 1 ? ' ↑' : ' ↓') : ' ↕';
        el.style.color  = srtState.sortCol === col ? '#6b7280' : '#d1d5db';
    });
}

var srtSearch = document.getElementById('siteRiskTableSearch');
if (srtSearch) {
    srtSearch.addEventListener('input', function() {
        srtState.search = this.value;
        renderSiteRiskTable();
    });
}

document.querySelectorAll('.srt-th[data-srtcol]').forEach(function(th) {
    th.addEventListener('click', function() {
        var col = this.dataset.srtcol;
        if (srtState.sortCol === col) { srtState.sortDir *= -1; }
        else { srtState.sortCol = col; srtState.sortDir = 1; }
        renderSiteRiskTable();
    });
});

renderSiteRiskTable();

// ────────────────────────────────────────────────────────────
// ────────────────────────────────────────────────────────────
// ────────────────────────────────────────────────────────────
// ── FOREST TABLE ──────────────────────────────────────────────────────────
var FOREST_DATA = [
    { district:'Sujawal',  ip:'SRSO',  forestUuid:'FC-8482', cases:680, reviewStatus:'In Review',  decision:'Pending',  notes:'Forest dept letter sent'      },
    { district:'Thatta',   ip:'TRDP',  forestUuid:'FC-8183', cases:540, reviewStatus:'Rejected',   decision:'Relocate', notes:'Alternative plot identified'  },
    { district:'Larkana',  ip:'SAFCO', forestUuid:'FC-8291', cases:520, reviewStatus:'Completed',  decision:'Cleared',  notes:'Review passed'                },
    { district:'Khairpur', ip:'HANDS', forestUuid:'FC-8374', cases:240, reviewStatus:'In Review',  decision:'Pending',  notes:'Survey needed'                },
    { district:'Ghotki',   ip:'NRSP',  forestUuid:'FC-8192', cases:180, reviewStatus:'Completed',  decision:'Cleared',  notes:'Review passed'                },
    { district:'Umerkot',  ip:'NRSP',  forestUuid:'FC-8438', cases:270, reviewStatus:'Rejected',   decision:'Relocate', notes:'2nd plot declined'            },
];

var FOREST_PAGE_SIZE = 6;
var forestState = { search:'', sortCol:null, sortDir:1, page:1 };

function reviewStatusPill(s) {
    var map = {
        'In Review': { bg:'#eff6ff', color:'#2563eb' },
        'Completed': { bg:'#f0fdf4', color:'#16a34a' },
        'Rejected':  { bg:'#fff1f2', color:'#e11d48' },
    };
    var st = map[s] || { bg:'#f3f4f6', color:'#6b7280' };
    return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 10px;border-radius:5px;background:'+st.bg+';color:'+st.color+';font-family:\'DM Sans\',sans-serif;">'+s+'</span>';
}

function decisionPill(d) {
    var map = {
        'Pending':  { bg:'#fffbeb', color:'#d97706' },
        'Relocate': { bg:'#fff7ed', color:'#ea580c' },
        'Cleared':  { bg:'#f0fdf4', color:'#16a34a' },
    };
    var st = map[d] || { bg:'#f3f4f6', color:'#6b7280' };
    return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 10px;border-radius:5px;background:'+st.bg+';color:'+st.color+';font-family:\'DM Sans\',sans-serif;">'+d+'</span>';
}

function renderForestTable() {
    var filtered = FOREST_DATA.filter(function(d) {
        if (!forestState.search) return true;
        var q = forestState.search.toLowerCase();
        return d.district.toLowerCase().indexOf(q) !== -1 ||
               d.ip.toLowerCase().indexOf(q) !== -1 ||
               d.forestUuid.toLowerCase().indexOf(q) !== -1 ||
               d.reviewStatus.toLowerCase().indexOf(q) !== -1 ||
               d.decision.toLowerCase().indexOf(q) !== -1;
    });

    if (forestState.sortCol) {
        filtered.sort(function(a, b) {
            var av = a[forestState.sortCol], bv = b[forestState.sortCol];
            if (typeof av === 'string') return av.localeCompare(bv) * forestState.sortDir;
            return (av - bv) * forestState.sortDir;
        });
    }

    var total = filtered.length;
    var totalPages = Math.max(1, Math.ceil(total / FOREST_PAGE_SIZE));
    forestState.page = Math.min(forestState.page, totalPages);
    var start = (forestState.page - 1) * FOREST_PAGE_SIZE;
    var paged = filtered.slice(start, start + FOREST_PAGE_SIZE);

    var footer = document.getElementById('forestTableFooter');
    if (footer) footer.textContent = 'Showing ' + paged.length + ' of ' + total + ' Forest Cases';

    var prevBtn = document.getElementById('forestPrevBtn');
    var nextBtn = document.getElementById('forestNextBtn');
    if (prevBtn) prevBtn.disabled = forestState.page <= 1;
    if (nextBtn) nextBtn.disabled = forestState.page >= totalPages;

    var tbody = document.getElementById('forestTableBody');
    if (!tbody) return;
    tbody.innerHTML = paged.map(function(d, i) {
        var isLast = i === paged.length - 1;
        return '<tr style="'+(isLast ? '' : 'border-bottom:1px solid #f3f4f6;')+'">' +
            '<td style="padding:13px 20px;font-size:14px;font-weight:600;color:#111827;font-family:\'DM Sans\',sans-serif;">'+d.district+'</td>' +
            '<td style="padding:13px 20px;font-size:14px;color:#6b7280;font-family:\'DM Sans\',sans-serif;">'+d.ip+'</td>' +
            '<td style="padding:13px 20px;font-size:13px;color:#6b7280;font-family:\'DM Sans\',sans-serif;letter-spacing:.03em;">'+d.forestUuid+'</td>' +
            '<td style="padding:13px 20px;font-size:14px;font-weight:700;color:#111827;font-family:\'DM Sans\',sans-serif;">'+d.cases.toLocaleString()+'</td>' +
            '<td style="padding:13px 20px;">'+reviewStatusPill(d.reviewStatus)+'</td>' +
            '<td style="padding:13px 20px;">'+decisionPill(d.decision)+'</td>' +
            '<td style="padding:13px 20px;font-size:13px;color:#9ca3af;font-family:\'DM Sans\',sans-serif;">'+d.notes+'</td>' +
            '</tr>';
    }).join('');

    document.querySelectorAll('.fc-th .fc-icon').forEach(function(el) {
        var col = el.closest('th').dataset.fcol;
        el.textContent = forestState.sortCol === col ? (forestState.sortDir === 1 ? ' ↑' : ' ↓') : ' ↕';
        el.style.color  = forestState.sortCol === col ? '#6b7280' : '#d1d5db';
    });
}

var forestSearch = document.getElementById('forestTableSearch');
if (forestSearch) {
    forestSearch.addEventListener('input', function() {
        forestState.search = this.value;
        forestState.page = 1;
        renderForestTable();
    });
}

document.querySelectorAll('.fc-th[data-fcol]').forEach(function(th) {
    th.addEventListener('click', function() {
        var col = this.dataset.fcol;
        if (forestState.sortCol === col) { forestState.sortDir *= -1; }
        else { forestState.sortCol = col; forestState.sortDir = 1; }
        renderForestTable();
    });
});

var fPrev = document.getElementById('forestPrevBtn');
var fNext = document.getElementById('forestNextBtn');
if (fPrev) fPrev.addEventListener('click', function() { forestState.page--; renderForestTable(); });
if (fNext) fNext.addEventListener('click', function() { forestState.page++; renderForestTable(); });

renderForestTable();


// ───────────────────────────────────────────────
// ───────────────────────────────────────────────
// ───────────────────────────────────────────────
// ── COMPLIANCE REGISTER TABLE ─────────────────────────────────────────────
var COMPLIANCE_DATA = [
    { caseId:'ER-001', district:'Ghotki',  ip:'HANDS',  ifi:'World Bank', riskType:'Flood Plain', cnic:'35202-1234567-1', constructionStatus:'Under Construction', clearance:'Pending',   actionRequired:'Obtain clearance'       },
    { caseId:'ER-002', district:'Sujawal', ip:'SRSO',   ifi:'ADB',        riskType:'Forest Area', cnic:'42101-7654321-0', constructionStatus:'Not Started',        clearance:'In Review', actionRequired:'Forest dept approval'    },
    { caseId:'ER-003', district:'Thatta',  ip:'TRDP',   ifi:'IsDB',       riskType:'Both Risk',   cnic:'43101-5556667-8', constructionStatus:'Under Construction', clearance:'Flagged',   actionRequired:'Priority HQ review'     },
    { caseId:'ER-004', district:'Badin',   ip:'NRSP',   ifi:'World Bank', riskType:'Hazardous',   cnic:'41301-9988776-5', constructionStatus:'Completed',          clearance:'Cleared',   actionRequired:'Post-completion done'    },
    { caseId:'ER-005', district:'Larkana', ip:'SAFCO',  ifi:'EIB',        riskType:'Flood Plain', cnic:'42501-4433221-2', constructionStatus:'Under Construction', clearance:'In Review', actionRequired:'IFI waiver initiated'   },
];

function caseIdPill(id) {
    return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 10px;border-radius:9999px;background:#1c4a2a;color:#ffffff;font-family:\'DM Sans\',sans-serif;letter-spacing:.03em;">'+id+'</span>';
}

function complianceRiskPill(type) {
    var map = {
        'Flood Plain': { bg:'#fff7ed', color:'#ea580c' },
        'Forest Area': { bg:'#f0fdf4', color:'#16a34a' },
        'Both Risk':   { bg:'#faf5ff', color:'#9333ea' },
        'Hazardous':   { bg:'#fffbeb', color:'#d97706' },
    };
    var s = map[type] || { bg:'#f3f4f6', color:'#6b7280' };
    return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 10px;border-radius:5px;background:'+s.bg+';color:'+s.color+';font-family:\'DM Sans\',sans-serif;">'+type+'</span>';
}

function complianceClearancePill(c) {
    var map = {
        'Pending':   { bg:'#fffbeb', color:'#d97706' },
        'In Review': { bg:'#eff6ff', color:'#2563eb' },
        'Flagged':   { bg:'#fff1f2', color:'#e11d48' },
        'Cleared':   { bg:'#f0fdf4', color:'#16a34a' },
    };
    var s = map[c] || { bg:'#f3f4f6', color:'#6b7280' };
    return '<span style="display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 10px;border-radius:5px;background:'+s.bg+';color:'+s.color+';font-family:\'DM Sans\',sans-serif;">'+c+'</span>';
}

var ccState = { search:'', sortCol:null, sortDir:1 };

function renderComplianceTable() {
    var filtered = COMPLIANCE_DATA.filter(function(d) {
        if (!ccState.search) return true;
        var q = ccState.search.toLowerCase();
        return d.caseId.toLowerCase().indexOf(q) !== -1 ||
               d.district.toLowerCase().indexOf(q) !== -1 ||
               d.ip.toLowerCase().indexOf(q) !== -1 ||
               d.ifi.toLowerCase().indexOf(q) !== -1 ||
               d.riskType.toLowerCase().indexOf(q) !== -1 ||
               d.constructionStatus.toLowerCase().indexOf(q) !== -1 ||
               d.clearance.toLowerCase().indexOf(q) !== -1;
    });

    if (ccState.sortCol) {
        filtered.sort(function(a, b) {
            var av = a[ccState.sortCol], bv = b[ccState.sortCol];
            if (typeof av === 'string') return av.localeCompare(bv) * ccState.sortDir;
            return (av - bv) * ccState.sortDir;
        });
    }

    var countEl = document.getElementById('complianceTableCount');
    if (countEl) countEl.textContent = filtered.length + ' of ' + COMPLIANCE_DATA.length + ' records';

    var tbody = document.getElementById('complianceTableBody');
    if (!tbody) return;
    tbody.innerHTML = filtered.map(function(d, i) {
        var isLast = i === filtered.length - 1;
        return '<tr style="'+(isLast ? '' : 'border-bottom:1px solid #f3f4f6;')+'">' +
            '<td style="padding:14px 20px;">'+caseIdPill(d.caseId)+'</td>' +
            '<td style="padding:14px 20px;font-size:14px;font-weight:500;color:#111827;font-family:\'DM Sans\',sans-serif;">'+d.district+'</td>' +
            '<td style="padding:14px 20px;font-size:14px;color:#374151;font-family:\'DM Sans\',sans-serif;">'+d.ip+'</td>' +
            '<td style="padding:14px 20px;font-size:14px;color:#6b7280;font-family:\'DM Sans\',sans-serif;">'+d.ifi+'</td>' +
            '<td style="padding:14px 20px;">'+complianceRiskPill(d.riskType)+'</td>' +
            '<td style="padding:14px 20px;font-size:13px;color:#6b7280;font-family:\'DM Sans\',sans-serif;letter-spacing:.02em;">'+d.cnic+'</td>' +
            '<td style="padding:14px 20px;font-size:14px;color:#374151;font-family:\'DM Sans\',sans-serif;">'+d.constructionStatus+'</td>' +
            '<td style="padding:14px 20px;">'+complianceClearancePill(d.clearance)+'</td>' +
            '<td style="padding:14px 20px;font-size:13px;color:#374151;font-family:\'DM Sans\',sans-serif;">'+d.actionRequired+'</td>' +
            '</tr>';
    }).join('');

    document.querySelectorAll('.cc-th .cc-icon').forEach(function(el) {
        var col = el.closest('th').dataset.ccol;
        el.textContent = ccState.sortCol === col ? (ccState.sortDir === 1 ? ' ↑' : ' ↓') : ' ↕';
        el.style.color  = ccState.sortCol === col ? '#6b7280' : '#d1d5db';
    });
}

var ccSearch = document.getElementById('complianceTableSearch');
if (ccSearch) {
    ccSearch.addEventListener('input', function() {
        ccState.search = this.value;
        renderComplianceTable();
    });
}

document.querySelectorAll('.cc-th[data-ccol]').forEach(function(th) {
    th.addEventListener('click', function() {
        var col = this.dataset.ccol;
        if (ccState.sortCol === col) { ccState.sortDir *= -1; }
        else { ccState.sortCol = col; ccState.sortDir = 1; }
        renderComplianceTable();
    });
});

renderComplianceTable();
// ── COMPLIANCE MODAL ──────────────────────────────────────────────────────
// ── MODAL DATA ────────────────────────────────────────────
var MODAL_DISAGG_DATA = [
    { district:'Badin',    total:1240, completed:806, compPct:65, redAlerts:12, status:'MONITOR'  },
    { district:'Dadu',     total:980,  completed:804, compPct:82, redAlerts:0,  status:'ON TRACK' },
    { district:'Ghotki',   total:1560, completed:686, compPct:44, redAlerts:34, status:'MONITOR'  },
    { district:'Khairpur', total:870,  completed:540, compPct:62, redAlerts:5,  status:'ON TRACK' },
    { district:'Larkana',  total:1100, completed:720, compPct:65, redAlerts:8,  status:'MONITOR'  },
    { district:'Sujawal',  total:640,  completed:320, compPct:50, redAlerts:15, status:'MONITOR'  },
    { district:'Thatta',   total:950,  completed:760, compPct:80, redAlerts:2,  status:'ON TRACK' },
    { district:'Umerkot',  total:780,  completed:390, compPct:50, redAlerts:10, status:'MONITOR'  },
];

var modalChartInstance = null;

// ── MODAL TABLE STATE ─────────────────────────────────────
var modalTableState = {
    search:  '',
    sortCol: '',
    sortDir: 1,
    page:    1,
    perPage: 5,
};

function statusModalPill(s) {
    var isMonitor = s === 'MONITOR';
    var bg    = isMonitor ? '#fffbeb' : '#f0fdf4';
    var color = isMonitor ? '#d97706' : '#16a34a';
    return '<span style="display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;border-radius:5px;background:'+bg+';color:'+color+';font-family:\'DM Sans\',sans-serif;letter-spacing:.05em;">'+s+'</span>';
}

function renderModalTable() {
    var s = modalTableState;

    // 1. Filter
    var filtered = MODAL_DISAGG_DATA.filter(function(d) {
        if (!s.search) return true;
        return d.district.toLowerCase().indexOf(s.search.toLowerCase()) !== -1;
    });

    // 2. Sort
    if (s.sortCol) {
        filtered.sort(function(a, b) {
            var av = a[s.sortCol], bv = b[s.sortCol];
            return (typeof av === 'string' ? av.localeCompare(bv) : av - bv) * s.sortDir;
        });
    }

    // 3. Paginate
    var total      = filtered.length;
    var totalPages = Math.max(1, Math.ceil(total / s.perPage));
    if (s.page > totalPages) s.page = totalPages;
    var start = (s.page - 1) * s.perPage;
    var paged = filtered.slice(start, start + s.perPage);

    // 4. Render rows
    var tbody = document.getElementById('modalDisaggTable');
    if (!tbody) return;

    if (paged.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" style="padding:24px 20px;text-align:center;font-size:13px;color:#9ca3af;font-family:\'DM Sans\',sans-serif;">No districts found.</td></tr>';
    } else {
        tbody.innerHTML = paged.map(function(d, i) {
            var isLast   = i === paged.length - 1;
            var pctColor = d.compPct >= 75 ? '#16a34a' : d.compPct >= 50 ? '#d97706' : '#ef4444';
            var alertCell = d.redAlerts > 0
                ? '<span style="color:#ef4444;font-weight:700;font-size:13px;font-family:\'DM Sans\',sans-serif;">&#9650; '+d.redAlerts+'</span>'
                : '<span style="color:#9ca3af;font-size:13px;font-family:\'DM Sans\',sans-serif;">0</span>';
            return '<tr style="'+(isLast?'':'border-bottom:1px solid #f3f4f6;')+'">' +
                '<td style="padding:13px 20px;font-size:14px;font-weight:500;color:#111827;font-family:\'DM Sans\',sans-serif;">'+d.district+'</td>' +
                '<td style="padding:13px 20px;font-size:14px;color:#374151;font-family:\'DM Sans\',sans-serif;">'+d.total.toLocaleString()+'</td>' +
                '<td style="padding:13px 20px;font-size:14px;color:#374151;font-family:\'DM Sans\',sans-serif;">'+d.completed.toLocaleString()+'</td>' +
                '<td style="padding:13px 20px;font-size:14px;font-weight:600;font-family:\'DM Sans\',sans-serif;color:'+pctColor+';">'+d.compPct+'%</td>' +
                '<td style="padding:13px 20px;">'+alertCell+'</td>' +
                '<td style="padding:13px 20px;">'+statusModalPill(d.status)+'</td>' +
            '</tr>';
        }).join('');
    }

    // 5. Info text
    var infoEl = document.getElementById('modalTableInfo');
    if (infoEl) {
        var from = total === 0 ? 0 : start + 1;
        var to   = Math.min(start + s.perPage, total);
        infoEl.textContent = 'Showing ' + from + '–' + to + ' of ' + total + ' districts';
    }

    // 6. Pagination buttons
    var pagEl = document.getElementById('modalTablePagination');
    if (pagEl) {
        var btns = '';
        var btnBase = 'display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;font-size:12px;font-family:\'DM Sans\',sans-serif;cursor:pointer;margin:0 1px;';

        btns += '<button onclick="modalGoPage('+(s.page-1)+')" '+(s.page===1?'disabled':'')+
            ' style="'+btnBase+'color:'+(s.page===1?'#d1d5db':'#374151')+';background:#fff;">&#8592;</button>';

        for (var p = 1; p <= totalPages; p++) {
            var active = p === s.page;
            btns += '<button onclick="modalGoPage('+p+')" style="'+btnBase+
                'background:'+(active?'#1D6B5E':'#fff')+';color:'+(active?'#fff':'#374151')+
                ';border-color:'+(active?'#1D6B5E':'#e5e7eb')+';">'+p+'</button>';
        }

        btns += '<button onclick="modalGoPage('+(s.page+1)+')" '+(s.page===totalPages?'disabled':'')+
            ' style="'+btnBase+'color:'+(s.page===totalPages?'#d1d5db':'#374151')+';background:#fff;">&#8594;</button>';

        pagEl.innerHTML = btns;
    }

    // 7. Update sort icons
    document.querySelectorAll('.sort-icon').forEach(function(el) {
        var col = el.getAttribute('data-col');
        el.textContent = (col === s.sortCol) ? (s.sortDir === 1 ? '↑' : '↓') : '⇅';
        el.style.color = (col === s.sortCol) ? '#1D6B5E' : '#9ca3af';
    });
}

function modalGoPage(p) {
    var totalPages = Math.max(1, Math.ceil(
        MODAL_DISAGG_DATA.filter(function(d) {
            return !modalTableState.search || d.district.toLowerCase().indexOf(modalTableState.search.toLowerCase()) !== -1;
        }).length / modalTableState.perPage
    ));
    if (p < 1 || p > totalPages) return;
    modalTableState.page = p;
    renderModalTable();
}

function openComplianceModal(row) {
    // Reset table state every time modal opens
    modalTableState.search  = '';
    modalTableState.sortCol = '';
    modalTableState.sortDir = 1;
    modalTableState.page    = 1;

    // Populate header fields
    document.getElementById('modalCaseTitle').textContent = 'FSMP Case — ' + row.caseId;
    document.getElementById('modalCaseId').textContent    = row.caseId;
    document.getElementById('modalRiskType').innerHTML    =
        '<svg width="13" height="13" viewBox="0 0 20 20" fill="#3b82f6"><circle cx="10" cy="10" r="8"/></svg> ' + row.riskType;
    document.getElementById('modalIfi').textContent = row.ifi;

    // Clearance pill
    var cMap = {
        'Pending':   { bg:'#fffbeb', color:'#d97706' },
        'In Review': { bg:'#eff6ff', color:'#2563eb' },
        'Flagged':   { bg:'#fff1f2', color:'#e11d48' },
        'Cleared':   { bg:'#f0fdf4', color:'#16a34a' },
    };
    var cs = cMap[row.clearance] || { bg:'#f3f4f6', color:'#6b7280' };
    document.getElementById('modalClearance').innerHTML =
        '<span style="display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:5px;background:'+cs.bg+';color:'+cs.color+';font-family:\'DM Sans\',sans-serif;">' +
        '<span style="width:6px;height:6px;border-radius:50%;background:'+cs.color+';display:inline-block;"></span>' +
        row.clearance.toUpperCase() + '</span>';

    // Clear search input
    var searchEl = document.getElementById('modalTableSearch');
    if (searchEl) searchEl.value = '';

    // Render table
    renderModalTable();

    // Destroy old chart
    if (modalChartInstance) { modalChartInstance.destroy(); modalChartInstance = null; }

    // Render bar chart
    var chartEl = document.getElementById('modalDistrictChart');
    if (chartEl && typeof ApexCharts !== 'undefined') {
        chartEl.innerHTML = '';
        modalChartInstance = new ApexCharts(chartEl, {
            chart: { type:'bar', height:240, toolbar:{ show:false }, fontFamily:'\'DM Sans\', sans-serif' },
            series: [{ name:'Completion %', data: MODAL_DISAGG_DATA.map(function(d){ return d.compPct; }) }],
            xaxis: {
                categories: MODAL_DISAGG_DATA.map(function(d){ return d.district; }),
                labels: { style:{ fontSize:'12px', colors:'#9ca3af', fontFamily:'\'DM Sans\',sans-serif' } },
                axisBorder:{ show:false }, axisTicks:{ show:false },
            },
            yaxis: {
                min: 0, max: 100, tickAmount: 4,
                labels: { formatter: function(v){ return v+'%'; }, style:{ fontSize:'12px', colors:'#9ca3af', fontFamily:'\'DM Sans\',sans-serif' } }
            },
            colors: ['#1D6B5E'],
            dataLabels: { enabled:false },
            plotOptions: { bar:{ columnWidth:'45%', borderRadius:3 } },
            grid: { borderColor:'#f3f4f6', strokeDashArray:3, xaxis:{ lines:{ show:false } } },
            stroke: { width:0 },
            tooltip: { style:{ fontFamily:'\'DM Sans\', sans-serif' }, y:{ formatter: function(v){ return v+'%'; } } }
        });
        modalChartInstance.render();
    }

    // Attach sort listeners (re-attach each open since innerHTML may have reset)
    document.querySelectorAll('.modal-th').forEach(function(th) {
        th.onclick = function() {
            var col = this.getAttribute('data-col');
            if (modalTableState.sortCol === col) {
                modalTableState.sortDir *= -1;
            } else {
                modalTableState.sortCol = col;
                modalTableState.sortDir = 1;
            }
            modalTableState.page = 1;
            renderModalTable();
        };
    });

    // Attach search listener
    var srch = document.getElementById('modalTableSearch');
    if (srch) {
        srch.oninput = function() {
            modalTableState.search = this.value;
            modalTableState.page   = 1;
            renderModalTable();
        };
    }

    // Show modal
    document.getElementById('complianceModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

// ── ROW CLICK → open modal ────────────────────────────────
document.getElementById('complianceTableBody').addEventListener('click', function(e) {
    var tr = e.target.closest('tr');
    if (!tr) return;
    var idx = Array.from(this.children).indexOf(tr);
    var filtered = COMPLIANCE_DATA.filter(function(d) {
        if (!ccState.search) return true;
        var q = ccState.search.toLowerCase();
        return d.caseId.toLowerCase().indexOf(q) !== -1 ||
               d.district.toLowerCase().indexOf(q) !== -1 ||
               d.ip.toLowerCase().indexOf(q) !== -1;
    });
    if (ccState.sortCol) {
        filtered.sort(function(a, b) {
            var av = a[ccState.sortCol], bv = b[ccState.sortCol];
            return typeof av === 'string' ? av.localeCompare(bv) * ccState.sortDir : (av - bv) * ccState.sortDir;
        });
    }
    if (filtered[idx]) openComplianceModal(filtered[idx]);
});

document.getElementById('complianceTableBody').style.cursor = 'pointer';

// ── CLOSE MODAL ───────────────────────────────────────────
document.getElementById('closeComplianceModal').addEventListener('click', function() {
    document.getElementById('complianceModal').classList.add('hidden');
    document.body.style.overflow = '';
    if (modalChartInstance) { modalChartInstance.destroy(); modalChartInstance = null; }
});

document.getElementById('complianceModal').addEventListener('click', function(e) {
    if (e.target === this) {
        this.classList.add('hidden');
        document.body.style.overflow = '';
        if (modalChartInstance) { modalChartInstance.destroy(); modalChartInstance = null; }
    }
});
</script>
@endsection