@extends('layouts.adminlte')

@section('title', 'REPORT BULANAN TUTUP BUKU')
@section('page_title', 'REPORT BULANAN TUTUP BUKU')

@push('styles')
    <style>
        .stat-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; background: #fff; }
        .stat-card .label { color: #64748b; font-size: 12px; }
        .stat-card .value { font-weight: 700; font-size: 20px; line-height: 1.2; }
        .report-table-wrap { max-height: 320px; overflow: auto; }
        .table th, .table td { white-space: nowrap; vertical-align: middle; }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Filter Report Bulanan</h3>
            <a href="{{ route('penggajian.index') }}" class="btn btn-outline-secondary btn-sm">Kembali</a>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-6">
                    <label class="form-label">Profil Bulan (Status Tutup Buku)</label>
	                    <select id="profilBulanId" class="form-select">
	                        @foreach ($profilBulans as $row)
	                            <option value="{{ (int) $row->id }}" @selected((int) $selectedProfilId === (int) $row->id)>
	                                {{ $row->code }}
	                            </option>
	                        @endforeach
	                    </select>
	                </div>
                <div class="col-md-3">
                    <label class="form-label">Ambang Sorot Lembur (jam)</label>
                    <input type="number" id="otThreshold" class="form-control" min="0" step="0.5" value="3" />
                </div>
                <div class="col-md-3 text-end">
                    <button class="btn btn-primary" id="btnLoad"><i class="fas fa-filter me-1"></i>Tampilkan Report</button>
                </div>
            </div>
            <div class="mt-2 small text-muted" id="profilInfo">-</div>
            <div class="mt-3 p-2 border rounded bg-light small">
                <div class="fw-semibold mb-1">Panduan Singkat Pemakaian</div>
                <div>1. Pilih Profil Bulan berstatus <strong>Tutup Buku</strong> untuk melihat data final.</div>
                <div>2. Atur ambang sorot lembur (jam) untuk menandai lembur tinggi di tabel lembur.</div>
                <div>3. Klik <strong>Tampilkan Report</strong> untuk memuat data dan grafik.</div>
                <div>4. Angka Hadir/Alpha dihitung dari <strong>Attendance Daily Review</strong> yang sudah Approved.</div>
                <div>5. “Karyawan Terbayar” diambil dari status pembayaran di Payroll (paid).</div>
            </div>
        </div>
    </div>

    <div class="row g-2 mb-3">
        <div class="col-md-3"><div class="stat-card"><div class="label">Hadir</div><div class="value" id="sHadir">0</div></div></div>
        <div class="col-md-3"><div class="stat-card"><div class="label">Alpha</div><div class="value" id="sAlpha">0</div></div></div>
        <div class="col-md-3"><div class="stat-card"><div class="label">Lembur Disorot</div><div class="value" id="sOtHigh">0</div></div></div>
        <div class="col-md-3"><div class="stat-card"><div class="label">Karyawan Terbayar</div><div class="value" id="sPaid">0</div></div></div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><h3 class="card-title m-0">Grafik Absensi Kehadiran</h3></div>
                <div class="card-body"><canvas id="chartAttendance" height="180"></canvas></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><h3 class="card-title m-0">Grafik Lembur Tertinggi</h3></div>
                <div class="card-body"><canvas id="chartOvertimeTop" height="180"></canvas></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><h3 class="card-title m-0">Grafik Karyawan Dibayarkan</h3></div>
                <div class="card-body"><canvas id="chartPayments" height="180"></canvas></div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header"><h3 class="card-title m-0">Grafik Status THR</h3></div>
                <div class="card-body"><canvas id="chartThrStatus" height="180"></canvas></div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title m-0">Report Absensi Kehadiran (Alpha, Izin, Cuti, Hadir, Telat)</h3></div>
        <div class="card-body report-table-wrap">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>No</th><th>Karyawan</th><th>Hadir</th><th>Telat Hadir</th><th>Alpha</th><th>Izin</th><th>Cuti</th><th>% Hadir</th>
                    </tr>
                </thead>
                <tbody id="tblAttendance"></tbody>
            </table>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title m-0">Report Lembur (Sorot Harian Jam Terbang Tinggi)</h3></div>
        <div class="card-body report-table-wrap">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>No</th><th>Tanggal</th><th>Karyawan</th><th>In</th><th>Out</th><th>Status</th><th>Jam Lembur</th><th>Sorot</th>
                    </tr>
                </thead>
                <tbody id="tblOvertime"></tbody>
            </table>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header"><h3 class="card-title m-0">Report Karyawan Dibayarkan</h3></div>
        <div class="card-body report-table-wrap">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>No</th><th>Karyawan</th><th>Status Bayar</th><th>Bruto</th><th>Netto</th><th>Tanggal Bayar</th>
                    </tr>
                </thead>
                <tbody id="tblPayments"></tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3 class="card-title m-0">Report THR Karyawan</h3></div>
        <div class="card-body report-table-wrap">
            <table class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>No</th><th>Karyawan</th><th>Status</th><th>THR</th><th>Approved</th><th>Paid</th><th>Outstanding</th>
                    </tr>
                </thead>
                <tbody id="tblThr"></tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/chartjs/chart.umd.js') }}"></script>
    <script>
        $(function () {
            let chartAttendance = null;
            let chartOvertimeTop = null;
            let chartPayments = null;
            let chartThrStatus = null;

            const fmtRp = (v) => `Rp ${Number(v || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
            const escapeHtml = (value) => String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');

            const renderChart = (ctxId, oldChart, type, labels, values, label, colors = null) => {
                if (oldChart) oldChart.destroy();
                const ctx = document.getElementById(ctxId);
                if (!ctx) return null;
                return new Chart(ctx, {
                    type,
                    data: {
                        labels: labels || [],
                        datasets: [{
                            label: label || '',
                            data: values || [],
                            backgroundColor: colors || ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444', '#8b5cf6', '#0ea5e9', '#f97316'],
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });
            };

            const loadData = () => {
                const profilId = $('#profilBulanId').val();
                if (!profilId) return;
                $.getJSON('{{ route('penggajian.report_bulanan_data') }}', {
                    profil_bulan_id: profilId,
                    ot_threshold: $('#otThreshold').val() || 3
                }).done((resp) => {
                    const meta = resp.meta || {};
                    const data = resp.data || {};
                    const att = data.attendance || { summary: {}, rows: [] };
                    const ot = data.overtime || { summary: {}, rows: [] };
                    const pay = data.payments || { summary: {}, rows: [] };
                    const thr = data.thr || { summary: {}, rows: [] };
                    const charts = data.charts || {};

                    $('#profilInfo').text(`${meta.profil?.code || '-'} - ${meta.profil?.name || '-'} | ${meta.profil?.start_date || '-'} s/d ${meta.profil?.end_date || '-'} | status: ${meta.profil?.status || '-'}`);
                    $('#sHadir').text(Number(att.summary?.hadir || 0));
                    $('#sAlpha').text(Number(att.summary?.alpha || 0));
                    $('#sOtHigh').text(Number(ot.summary?.high_rows || 0));
                    $('#sPaid').text(Number(pay.summary?.paid_count || 0));

                    $('#tblAttendance').html((att.rows || []).map((r, i) => `
                        <tr>
                            <td>${i + 1}</td>
                            <td>${escapeHtml(r.employee_code || '-')} - ${escapeHtml(r.employee_name || '-')}</td>
                            <td>${Number(r.hadir || 0)}</td>
                            <td>${Number(r.telat_hadir || 0)}</td>
                            <td>${Number(r.alpha || 0)}</td>
                            <td>${Number(r.izin || 0)}</td>
                            <td>${Number(r.cuti || 0)}</td>
                            <td>${Number(r.present_rate || 0).toFixed(2)}%</td>
                        </tr>
                    `).join('') || '<tr><td colspan="8" class="text-center text-muted">Tidak ada data</td></tr>');

                    $('#tblOvertime').html((ot.rows || []).map((r, i) => `
                        <tr>
                            <td>${i + 1}</td>
                            <td>${escapeHtml(r.work_date || '-')} (${escapeHtml(r.day_name || '-')})</td>
                            <td>${escapeHtml(r.employee_code || '-')} - ${escapeHtml(r.employee_name || '-')}</td>
                            <td>${escapeHtml(r.checkin_at || '-')}</td>
                            <td>${escapeHtml(r.checkout_at || '-')}</td>
                            <td>${escapeHtml(r.status || '-')}</td>
                            <td>${Number(r.overtime_hours || 0).toFixed(2)}</td>
                            <td>${r.is_highlight ? '<span class="badge text-bg-danger">Tinggi</span>' : '<span class="badge text-bg-secondary">Normal</span>'}</td>
                        </tr>
                    `).join('') || '<tr><td colspan="8" class="text-center text-muted">Tidak ada data</td></tr>');

                    $('#tblPayments').html((pay.rows || []).map((r, i) => `
                        <tr>
                            <td>${i + 1}</td>
                            <td>${escapeHtml(r.employee_code || '-')} - ${escapeHtml(r.employee_name || '-')}</td>
                            <td>${r.is_paid ? '<span class="badge text-bg-success">Terbayar</span>' : '<span class="badge text-bg-warning text-dark">Belum</span>'}</td>
                            <td>${fmtRp(r.gross_nominal || 0)}</td>
                            <td>${fmtRp(r.net_nominal || 0)}</td>
                            <td>${escapeHtml(r.pay_date || '-')}</td>
                        </tr>
                    `).join('') || '<tr><td colspan="6" class="text-center text-muted">Tidak ada data</td></tr>');

                    $('#tblThr').html((thr.rows || []).map((r, i) => `
                        <tr>
                            <td>${i + 1}</td>
                            <td>${escapeHtml(r.employee_code || '-')} - ${escapeHtml(r.employee_name || '-')}</td>
                            <td>${escapeHtml(r.status || '-')}</td>
                            <td>${fmtRp(r.thr_nominal || 0)}</td>
                            <td>${fmtRp(r.approved_nominal || 0)}</td>
                            <td>${fmtRp(r.paid_nominal || 0)}</td>
                            <td>${fmtRp(r.outstanding_nominal || 0)}</td>
                        </tr>
                    `).join('') || '<tr><td colspan="7" class="text-center text-muted">Tidak ada data</td></tr>');

                    chartAttendance = renderChart('chartAttendance', chartAttendance, 'bar', charts.attendance?.labels || [], charts.attendance?.values || [], 'Absensi');
                    chartOvertimeTop = renderChart('chartOvertimeTop', chartOvertimeTop, 'bar', charts.overtime_top?.labels || [], charts.overtime_top?.values || [], 'Jam Lembur');
                    chartPayments = renderChart('chartPayments', chartPayments, 'pie', charts.payments?.labels || [], charts.payments?.values || [], 'Pembayaran');
                    chartThrStatus = renderChart('chartThrStatus', chartThrStatus, 'doughnut', charts.thr_status?.labels || [], charts.thr_status?.values || [], 'Status THR');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load report bulanan', 'error'));
            };

            $('#btnLoad').on('click', loadData);
            $('#profilBulanId').on('change', loadData);
            loadData();
        });
    </script>
@endpush