{% extends "base.html" %}
{% block title %}Reports · WageWise Neo{% endblock %}
{% block content %}
<style>
.report-card {
    display:flex; align-items:flex-start; gap:14px;
    padding:14px 16px;
    border:1px solid var(--color-rule);
    border-radius:var(--radius-md);
    background:var(--color-paper-raised);
    cursor:pointer;
    transition:border-color 0.15s;
}
.report-card:hover { border-color:var(--color-stamp); }
.report-icon { font-size:26px; flex-shrink:0; }
.report-card h3 { font-size:13px; font-weight:600; margin:0 0 2px 0; }
.report-card .meta { font-size:11px; color:var(--color-ink-faint); }

/* Preview modal */
#preview-modal {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,0.55); z-index:2000;
    align-items:center; justify-content:center; flex-direction:column;
}
#preview-modal.open { display:flex; }
#preview-frame {
    width:90vw; height:85vh;
    background:white; border-radius:6px;
    border:none; box-shadow:0 8px 40px rgba(0,0,0,0.3);
}
.preview-toolbar {
    width:90vw; display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; gap:12px;
}
.preview-title {
    font-family:var(--font-display); font-size:15px;
    color:var(--color-paper); font-weight:600;
}
</style>

<!-- Preview Modal -->
<div id="preview-modal">
    <div class="preview-toolbar">
        <span class="preview-title" id="preview-label">Report Preview</span>
        <div style="display:flex;gap:10px;">
            <a id="preview-download" href="#" class="btn btn-primary">&#8659; Download PDF</a>
            <button onclick="closePreview()" class="btn btn-secondary" style="color:var(--color-paper);border-color:rgba(255,255,255,0.3);">&#10005; Close</button>
        </div>
    </div>
    <iframe id="preview-frame" src="about:blank"></iframe>
</div>

<div class="page-header">
    <div><div class="eyebrow">Workspace</div><h1>Reports</h1></div>
</div>

<div class="panel" style="margin-bottom:16px;">
    <div class="panel-title"><h2>General Reports</h2></div>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;">

        <div class="report-card" onclick="window.location='{{ url_for('payslip_generator') }}'">
            <div class="report-icon">📄</div>
            <div><h3>Payslip Generator</h3>
                <div class="meta">Search &amp; select employees + months, generate in bulk</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('employee_master_preview') }}'">
            <div class="report-icon">👥</div>
            <div><h3>Employee Master List</h3>
                <div class="meta">All active employees · full details</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('new_joiners_preview') }}'">
            <div class="report-icon">🆕</div>
            <div><h3>New Joiners Report</h3>
                <div class="meta">Joined this month</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('exits_preview') }}'">
            <div class="report-icon">🚪</div>
            <div><h3>Exits / Separations</h3>
                <div class="meta">All employee exits on record</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('attendance_summary_preview') }}'">
            <div class="report-icon">🗓️</div>
            <div><h3>Attendance Summary</h3>
                <div class="meta">P / A / CL / Half-day counts, this month</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('leave_register') }}'">
            <div class="report-icon">🏖️</div>
            <div><h3>Leave Register</h3>
                <div class="meta">CL / SL balances &amp; usage</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('gratuity_register') }}'">
            <div class="report-icon">🎁</div>
            <div><h3>Gratuity Register</h3>
                <div class="meta">Accrued gratuity per employee</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('increment_register_preview') }}'">
            <div class="report-icon">📈</div>
            <div><h3>Increment / Salary History</h3>
                <div class="meta">All salary revisions on record</div></div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('ot_report_preview', year=today.year, month=today.month) }}'">
            <div class="report-icon">⏱️</div>
            <div><h3>OT Report</h3>
                <div class="meta">This month's overtime</div></div>
        </div>

    </div>
</div>

{% if runs %}
{% for run in runs %}
<div class="panel" style="margin-bottom:16px;">
    <div class="panel-title">
        <div>
            <h2>{{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][run.month-1] }} {{ run.year }}</h2>
        </div>
        <span class="stamp {{ 'active' if run.status == 'finalized' else 'neutral' }}">{{ run.status }}</span>
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;">

        <div class="report-card" onclick="previewReport('{{ url_for('report_muster_roll', run_id=run.id) }}', '{{ url_for('report_muster_roll', run_id=run.id) }}?download=1', 'Muster Roll — {{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][run.month-1] }} {{ run.year }}')">
            <div class="report-icon">📋</div>
            <div>
                <h3>Muster Roll</h3>
                <div class="meta">Attendance Register · Form 25 · A3 PDF</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then download</div>
            </div>
        </div>

        <div class="report-card" onclick="previewReport('{{ url_for('report_ot_attendance_payable', run_id=run.id) }}', '{{ url_for('report_ot_attendance_payable', run_id=run.id) }}?download=1', 'OT Attendance Calculation and Payable Amount — {{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][run.month-1] }} {{ run.year }}')">
            <div class="report-icon">⏱️</div>
            <div>
                <h3>OT Attendance Calculation and Payable Amount</h3>
                <div class="meta">OT hours + OT payable · B/C mode marker · A3 PDF</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then download</div>
            </div>
        </div>

        <div class="report-card" onclick="previewReport('{{ url_for('report_salary_register', run_id=run.id) }}', '{{ url_for('report_salary_register', run_id=run.id) }}?download=1', 'Salary Register — {{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][run.month-1] }} {{ run.year }}')">
            <div class="report-icon">📊</div>
            <div>
                <h3>Salary Register</h3>
                <div class="meta">Wage Register · Form 13 · A3 PDF</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then download</div>
            </div>
        </div>

        <div class="report-card" onclick="previewReport('{{ url_for('report_pf_statement', run_id=run.id) }}', '{{ url_for('report_pf_statement', run_id=run.id) }}?download=1', 'PF Statement — {{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][run.month-1] }} {{ run.year }}')">
            <div class="report-icon">🏦</div>
            <div>
                <h3>PF Statement</h3>
                <div class="meta">Printable record · A4 Landscape</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then download</div>
            </div>
        </div>

        <div class="report-card" onclick="previewReport('{{ url_for('report_esi_statement', run_id=run.id) }}', '{{ url_for('report_esi_statement', run_id=run.id) }}?download=1', 'ESI Statement — {{ ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][run.month-1] }} {{ run.year }}')">
            <div class="report-icon">🏥</div>
            <div>
                <h3>ESI Statement</h3>
                <div class="meta">Printable record · A4 Landscape</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then download</div>
            </div>
        </div>

        <div class="report-card" onclick="previewReport('{{ url_for('payslips_zip', run_id=run.id) }}', '{{ url_for('payslips_zip', run_id=run.id) }}', 'All Payslips ZIP')">
            <div class="report-icon">📦</div>
            <div>
                <h3>All Payslips</h3>
                <div class="meta">Individual PDFs · ZIP file</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to download ZIP directly</div>
            </div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('pf_ecr_preview', run_id=run.id) }}'">
            <div class="report-icon">⬆</div>
            <div>
                <h3>PF ECR / Calculation</h3>
                <div class="meta">EPFO portal + Excel + PDF</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then choose format</div>
            </div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('esi_return_preview', run_id=run.id) }}'">
            <div class="report-icon">⬆</div>
            <div>
                <h3>ESI Return / Calculation</h3>
                <div class="meta">ESIC portal + Excel + PDF</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then choose format</div>
            </div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('bank_transfer_preview', run_id=run.id) }}'">
            <div class="report-icon">🏧</div>
            <div>
                <h3>Bank Transfer File</h3>
                <div class="meta">Bulk salary credit + Excel + PDF letter</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to preview → then choose format</div>
            </div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('payroll_cost_summary_preview', run_id=run.id) }}'">
            <div class="report-icon">💰</div>
            <div>
                <h3>Payroll Cost Summary</h3>
                <div class="meta">Gross · PF · ESI · PT · TDS · Net</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to view</div>
            </div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('department_cost_preview', run_id=run.id) }}'">
            <div class="report-icon">🏢</div>
            <div>
                <h3>Department-wise Cost</h3>
                <div class="meta">Cost split by department</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to view</div>
            </div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('pt_register_preview', run_id=run.id) }}'">
            <div class="report-icon">📑</div>
            <div>
                <h3>PT Register</h3>
                <div class="meta">Professional Tax deducted</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to view</div>
            </div>
        </div>

        <div class="report-card" onclick="window.location='{{ url_for('tds_register_preview', run_id=run.id) }}'">
            <div class="report-icon">📑</div>
            <div>
                <h3>TDS Register</h3>
                <div class="meta">Tax deducted at source</div>
                <div class="meta" style="margin-top:4px;color:var(--color-stamp);">Click to view</div>
            </div>
        </div>

    </div>

</div>
{% endfor %}
{% else %}
<div class="panel">
    <div class="empty-state">
        <div class="glyph">&mdash;</div>
        <p>No payroll runs yet. Generate one first, then come here for reports.</p>
        <a href="{{ url_for('payroll_new') }}" class="btn btn-primary">Generate Payroll Run</a>
    </div>
</div>
{% endif %}

<script>
function previewReport(previewUrl, downloadUrl, title) {
    // ZIP files don't preview — download directly
    if (previewUrl.indexOf('.zip') !== -1 || previewUrl === downloadUrl && previewUrl.indexOf('pdf') === -1) {
        window.location = downloadUrl;
        return;
    }
    document.getElementById('preview-label').textContent = title;
    document.getElementById('preview-download').href = downloadUrl;
    document.getElementById('preview-frame').src = previewUrl;
    document.getElementById('preview-modal').classList.add('open');
}
function closePreview() {
    document.getElementById('preview-modal').classList.remove('open');
    document.getElementById('preview-frame').src = 'about:blank';
}
document.getElementById('preview-modal').addEventListener('click', function(e) {
    if (e.target === this) closePreview();
});
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePreview();
});
</script>
{% endblock %}