{% extends "base.html" %}
{% block title %}Company Settings · WageWise Neo{% endblock %}
{% block content %}
<form method="post" action="{{ url_for('company_settings') }}" enctype="multipart/form-data">

<div class="page-header">
    <div>
        <div class="eyebrow">Setup</div>
        <h1>Company Settings</h1>
    </div>
    <div style="display:flex;gap:8px;align-items:center;">
        <button type="button" onclick="history.back()" class="btn btn-secondary">&larr; Back</button>
        <button type="submit" class="btn btn-primary" style="font-size:14px;padding:9px 24px;">
            &#10003; Save All Settings
        </button>
    </div>
</div>

<!-- ── Company Info ─────────────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Company Details</h2></div>
    
<div class="form-grid">
            <div class="field" style="grid-column:1/-1;">
                <label>Company Name</label>
                <input type="text" name="name" value="{{ info.name or '' }}" placeholder="e.g. MD Enterprises Pvt Ltd">
            </div>
            <div class="field" style="grid-column:1/-1;">
                <label>Company Logo</label>
                <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                    {% if has_logo %}
                    <img src="{{ url_for('company_logo_image') }}?v={{ logo_version }}" alt="Company Logo"
                         style="max-height:60px;max-width:160px;border:1px solid var(--color-rule);border-radius:4px;padding:6px;background:white;">
                    {% else %}
                    <span style="color:var(--color-ink-faint);font-size:13px;">No logo uploaded yet</span>
                    {% endif %}
                    <input type="file" name="company_logo" accept="image/png,image/jpeg,image/jpg">
                    {% if has_logo %}
                    <label style="display:flex;align-items:center;gap:4px;font-size:12px;font-weight:400;">
                        <input type="checkbox" name="remove_logo" value="1"> Remove current logo
                    </label>
                    {% endif %}
                </div>
                <span class="field-hint">Shown on the Dashboard and on every report/payslip letterhead, next to your company name. PNG or JPG, any size — it'll be resized automatically.</span>
            </div>
            <div class="field" style="grid-column:1/-1;">
                <label>Address (shown on payslips)</label>
                <input type="text" name="address" value="{{ info.address or '' }}" placeholder="e.g. #12 MG Road, Bengaluru - 560001">
            </div>
            <div class="field">
                <label>PF Registration Number</label>
                <input type="text" name="pf_reg_number" value="{{ info.pf_reg_number or '' }}" placeholder="e.g. KA/BAN/123456">
            </div>
            <div class="field">
                <label>ESI Registration Number</label>
                <input type="text" name="esi_reg_number" value="{{ info.esi_reg_number or '' }}" placeholder="e.g. 53000001234">
            </div>
            <div class="field">
                <label>Company Bank Account No. (for salary transfer letter)</label>
                <input type="text" name="bank_account_no" value="{{ info.bank_account_no or '' }}" placeholder="e.g. 922030033344236">
            </div>
            <div class="field">
                <label>Company Bank Name</label>
                <input type="text" name="bank_name" value="{{ info.bank_name or '' }}" placeholder="e.g. Axis Bank">
            </div>
            <div class="field">
                <label>Company Bank Branch</label>
                <input type="text" name="bank_branch" value="{{ info.bank_branch or '' }}" placeholder="e.g. D.Devaraj Urs Road Branch, Mysore">
            </div>
            <div class="field">
                <label>Professional Tax Reg. No.</label>
                <input type="text" name="pt_reg_number" value="{{ info.pt_reg_number or '' }}">
            </div>
            <div class="field">
                <label>GST Number</label>
                <input type="text" name="gst_number" value="{{ info.gst_number or '' }}" placeholder="e.g. 29AABCU9603R1ZX">
            </div>
            <div class="field">
                <label>CIN / Registration Number</label>
                <input type="text" name="cin_number" value="{{ info.cin_number or '' }}">
            </div>
            <div class="field">
                <label>State</label>
                <input type="text" name="state" value="{{ info.state or 'Karnataka' }}">
            </div>
            <div class="field">
                <label>Financial Year Starts</label>
                <select name="financial_year_start">
                    {% for m in ['April','January'] %}
                    <option value="{{ m }}" {{ 'selected' if info.financial_year_start == m }}>{{ m }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="actions-row">
            
        </div>
    
</div>

<!-- ── Salary Structure ──────────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Salary Structure</h2></div>
    <p style="margin-bottom:16px;">These percentages auto-split gross salary into components. <strong>They must add up to exactly 100%.</strong> If you add Travel %, reduce HRA % or Other % by the same amount. The total turns green when correct.</p>
    
<div class="form-grid">
            <div class="field">
                <label>Basic %</label>
                <input type="number" step="0.01" name="basic_pct" id="sp_basic" value="{{ (struct.basic_pct*100)|round(2) }}" onchange="checkTotal()">
            </div>
            <div class="field">
                <label>DA %</label>
                <input type="number" step="0.01" name="da_pct" id="sp_da" value="{{ (struct.da_pct*100)|round(2) }}" onchange="checkTotal()">
            </div>
            <div class="field">
                <label>HRA %</label>
                <input type="number" step="0.01" name="hra_pct" id="sp_hra" value="{{ (struct.hra_pct*100)|round(2) }}" onchange="checkTotal()">
            </div>
            <div class="field">
                <label>Travel / Conveyance %</label>
                <input type="number" step="0.01" name="travel_pct" id="sp_travel" value="{{ (struct.get('travel_pct',0)*100)|round(2) }}" onchange="checkTotal()">
            </div>
            <div class="field">
                <label>Other Allowance %</label>
                <input type="number" step="0.01" name="other_pct" id="sp_other" value="{{ (struct.get('other_pct',0)*100)|round(2) }}" onchange="checkTotal()">
            </div>
        </div>
        <p id="total-check" style="font-family:var(--font-data);font-size:13px;margin-top:4px;"></p>
        <div class="actions-row">
            
        </div>
    
</div>

<!-- ── Statutory Rates ───────────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Statutory Rates</h2></div>
    <p style="margin-bottom:16px;">Update these when government issues a fresh notification. Changes apply to all new payroll runs immediately.</p>
    
<h3>Provident Fund (PF)</h3>
        <div class="form-grid" style="margin-bottom:20px;">
            <div class="field">
                <label>Wage Ceiling (&#8377;/month)</label>
                <input type="number" name="pf_wage_ceiling" value="{{ pf.wage_ceiling or 15000 }}">
                <span class="field-hint">Currently &#8377;15,000. Government may revise this.</span>
            </div>
            <div class="field">
                <label>Employee Contribution %</label>
                <input type="number" step="0.01" name="pf_employee_rate" value="{{ ((pf.employee_rate or 0.12)*100)|round(2) }}">
            </div>
            <div class="field">
                <label>Employer EPF %</label>
                <input type="number" step="0.01" name="pf_employer_epf" id="pf_epf_input"
                       value="{{ ((pf.employer_epf_rate or 0.0367)*100)|round(2) }}" oninput="updatePfTotal()">
            </div>
            <div class="field">
                <label>Employer EPS %</label>
                <input type="number" step="0.01" name="pf_employer_eps" id="pf_eps_input"
                       value="{{ ((pf.employer_eps_rate or 0.0833)*100)|round(2) }}" oninput="updatePfTotal()">
            </div>
            <div class="field">
                <label>Employer Admin/EDLI Charges %</label>
                <input type="number" step="0.01" name="pf_employer_admin_edli" id="pf_admin_input"
                       value="{{ ((pf.employer_admin_edli_rate if pf.employer_admin_edli_rate is not none else 0.005)*100)|round(2) }}" oninput="updatePfTotal()">
                <span class="field-hint">EDLI insurance + EPFO administrative charges — commonly 0.5%, but check the current government notification.</span>
            </div>
            <div class="field">
                <label>Total Employer PF Cost %</label>
                <input type="text" id="pf_total_display" readonly disabled
                       style="background:var(--color-paper-stripe);font-weight:600;">
                <span class="field-hint">EPF + EPS + Admin/EDLI added together — this is the percentage shown on your PF reports.</span>
            </div>
        </div>
        <script>
        function updatePfTotal() {
            var epf = parseFloat(document.getElementById('pf_epf_input').value) || 0;
            var eps = parseFloat(document.getElementById('pf_eps_input').value) || 0;
            var admin = parseFloat(document.getElementById('pf_admin_input').value) || 0;
            document.getElementById('pf_total_display').value = (epf + eps + admin).toFixed(2) + '%';
        }
        updatePfTotal();
        </script>

        <h3>ESI</h3>
        <div class="form-grid" style="margin-bottom:20px;">
            <div class="field">
                <label>Wage Threshold (&#8377;/month)</label>
                <input type="number" name="esi_threshold" value="{{ esi.wage_threshold or 21000 }}">
                <span class="field-hint">ESI applies only if gross ≤ this amount.</span>
            </div>
            <div class="field">
                <label>Employee Contribution %</label>
                <input type="number" step="0.001" name="esi_employee_rate" value="{{ ((esi.employee_rate or 0.0075)*100)|round(3) }}">
            </div>
            <div class="field">
                <label>Employer Contribution %</label>
                <input type="number" step="0.001" name="esi_employer_rate" value="{{ ((esi.employer_rate or 0.0325)*100)|round(3) }}">
            </div>
        </div>

        <div class="actions-row">
            
        </div>
    
</div>

<script>
function checkTotal() {
    var total = ['sp_basic','sp_da','sp_hra','sp_travel','sp_other']
        .reduce(function(s,id){ var el=document.getElementById(id); return s + (el ? parseFloat(el.value)||0 : 0); }, 0);
    var el = document.getElementById('total-check');
    var ok = Math.abs(total - 100) < 0.1;
    el.textContent = 'Total: ' + total.toFixed(2) + '% ' + (ok ? '✓ Good' : '✗ Must be exactly 100% — adjust HRA or Other');
    el.style.color = ok ? 'var(--color-paid)' : 'var(--color-due)';
    el.style.fontWeight = '600';
    el.style.fontSize = '13px';
}
checkTotal();
</script>

<!-- ── Gratuity Settings ─────────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Gratuity Settings</h2></div>
    <p style="margin-bottom:16px;">
        Gratuity is payable under the Payment of Gratuity Act, 1972 after 5 years of service.
        Formula: <strong>(Basic + DA) × 15 ÷ 26 × Years of Service</strong>.
        The monthly provision rate is approximately 4.81% of (Basic + DA).
    </p>
    
<div class="form-grid">
            <div class="field" style="grid-column:1/-1;">
                <label style="display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;">
                    <input type="checkbox" name="process_with_salary" id="grat_toggle"
                           value="1" {{ 'checked' if grat_settings.process_with_salary }}
                           style="width:18px;height:18px;cursor:pointer;"
                           onchange="document.getElementById('grat_detail').style.display=this.checked?'block':'none'">
                    <strong>Process gratuity provision with monthly salary</strong>
                </label>
                <span class="field-hint">If checked — a monthly gratuity provision is calculated for every employee and added to the payroll sheet, similar to PF and ESI employer contributions. A separate transfer sheet is generated each month.</span>
                <span class="field-hint">If unchecked — no monthly provision. A separate Gratuity Register shows the accrued gratuity payable per employee at any time (useful at exit).</span>
            </div>
            <div class="field" id="grat_detail" style="{{ 'display:block' if grat_settings.process_with_salary else 'display:none' }}; grid-column:1/-1;">
                <label>Monthly Provision Rate (% of Basic + DA)</label>
                <input type="number" step="0.01" name="provision_rate"
                       value="{{ grat_settings.provision_rate or 4.81 }}" style="max-width:160px;">
                <span class="field-hint">Standard rate is 4.81% (= 15/26 ÷ 12 × 100). Adjust only if your accountant advises differently.</span>
            </div>
        </div>
        <div class="actions-row">
            
        </div>
    
</div>

<!-- ── Bank Upload Template Builder ──────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Bank Upload Template Builder</h2></div>
    <p style="margin-bottom:16px;">
        Every bank has its own bulk-salary upload format. Define your bank's exact column
        layout once here, and every payroll run's Bank Transfer report will generate a file
        matching it — no re-entry needed each month.
    </p>

    <div class="form-grid">
        <div class="field" style="grid-column:1/-1;">
            <label>Bank / Template Name</label>
            <input type="text" name="bank_template_name" id="bt_name"
                   value="{{ bank_template.name or '' }}" placeholder="e.g. Axis Bank, HDFC Bank, ICICI Corporate">
        </div>
    </div>

    <table id="bt_table" style="width:100%;border-collapse:collapse;margin-top:12px;">
        <thead>
            <tr style="text-align:left;font-size:12px;color:var(--color-ink-faint);">
                <th style="padding:6px 4px;width:36px;">Col</th>
                <th style="padding:6px 4px;">Column Header (exactly as the bank expects)</th>
                <th style="padding:6px 4px;">Data Source</th>
                <th style="padding:6px 4px;width:160px;">Fixed Value (if constant)</th>
                <th style="padding:6px 4px;width:40px;"></th>
            </tr>
        </thead>
        <tbody id="bt_rows">
            {% for col in bank_template.columns %}
            <tr>
                <td style="padding:4px;font-family:var(--font-data);font-size:12px;color:var(--color-ink-faint);" class="bt-col-num"></td>
                <td style="padding:4px;"><input type="text" name="bt_header" value="{{ col.header }}" style="width:100%;padding:6px 8px;"></td>
                <td style="padding:4px;">
                    <select name="bt_source" style="width:100%;padding:6px 8px;" onchange="this.closest('tr').querySelector('.bt-const').style.display = (this.value==='constant'||this.value==='payment_mode') ? 'block':'none'">
                        {% for key, label in bank_sources.items() %}
                        <option value="{{ key }}" {{ 'selected' if col.source == key }}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td style="padding:4px;">
                    <input type="text" name="bt_constant" value="{{ col.constant or '' }}" placeholder="e.g. NEFT"
                           class="bt-const" style="width:100%;padding:6px 8px;display:{{ 'block' if col.source in ('constant','payment_mode') else 'none' }};">
                </td>
                <td style="padding:4px;text-align:center;">
                    <button type="button" onclick="this.closest('tr').remove(); renumberBtRows();"
                            style="background:none;border:none;color:var(--color-due);cursor:pointer;font-size:16px;">&times;</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <div class="actions-row" style="margin-top:12px;">
        <button type="button" class="btn btn-secondary" onclick="addBtRow()">+ Add Column</button>
    </div>

    <template id="bt_row_template">
        <tr>
            <td style="padding:4px;font-family:var(--font-data);font-size:12px;color:var(--color-ink-faint);" class="bt-col-num"></td>
            <td style="padding:4px;"><input type="text" name="bt_header" value="" style="width:100%;padding:6px 8px;" placeholder="Column header"></td>
            <td style="padding:4px;">
                <select name="bt_source" style="width:100%;padding:6px 8px;" onchange="this.closest('tr').querySelector('.bt-const').style.display = (this.value==='constant'||this.value==='payment_mode') ? 'block':'none'">
                    {% for key, label in bank_sources.items() %}
                    <option value="{{ key }}">{{ label }}</option>
                    {% endfor %}
                </select>
            </td>
            <td style="padding:4px;">
                <input type="text" name="bt_constant" value="" placeholder="e.g. NEFT" class="bt-const" style="width:100%;padding:6px 8px;display:none;">
            </td>
            <td style="padding:4px;text-align:center;">
                <button type="button" onclick="this.closest('tr').remove(); renumberBtRows();"
                        style="background:none;border:none;color:var(--color-due);cursor:pointer;font-size:16px;">&times;</button>
            </td>
        </tr>
    </template>

    <script>
    function renumberBtRows() {
        document.querySelectorAll('#bt_rows tr').forEach(function(row, i) {
            row.querySelector('.bt-col-num').textContent = i + 1;
        });
    }
    function addBtRow() {
        var tpl = document.getElementById('bt_row_template');
        var clone = tpl.content.cloneNode(true);
        document.getElementById('bt_rows').appendChild(clone);
        renumberBtRows();
    }
    renumberBtRows();
    </script>
<!-- ── Employee Code Settings ─────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Employee Code Settings</h2></div>
    <p style="margin-bottom:16px;font-size:13px;">Auto-generate employee codes like <strong>{{ (code_settings.prefix or 'MD') + (code_settings.next_number|string).zfill(code_settings.digits|int) }}</strong>. Leave employee code blank when adding/importing employees and it will be assigned automatically.</p>
    
<div class="form-grid" style="grid-template-columns:repeat(4,1fr);gap:16px;max-width:700px;">
            <div class="field">
                <label>Prefix</label>
                <input type="text" name="prefix" value="{{ code_settings.prefix or 'MD' }}" maxlength="10"
                       style="text-transform:uppercase;" placeholder="e.g. MD">
                <span class="field-hint">Company short code</span>
            </div>
            <div class="field">
                <label>Next Number</label>
                <input type="number" name="next_number" value="{{ code_settings.next_number or 1 }}" min="1">
                <span class="field-hint">Start from here</span>
            </div>
            <div class="field">
                <label>Digits (padding)</label>
                <select name="digits">
                    {% for d in [2,3,4] %}
                    <option value="{{ d }}" {{ 'selected' if (code_settings.digits|int) == d }}>{{ d }} digits (e.g. {{ '1'.zfill(d) }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="field">
                <label>Auto-Generate?</label>
                <select name="auto_generate">
                    <option value="1" {{ 'selected' if code_settings.auto_generate }}>Yes — auto on save</option>
                    <option value="" {{ 'selected' if not code_settings.auto_generate }}>No — manual only</option>
                </select>
            </div>
        </div>
        <div style="margin:10px 0;padding:10px 14px;background:var(--color-paper-stripe);border-radius:4px;font-size:13px;">
            Next code preview: <strong style="font-family:var(--font-data);color:var(--color-stamp);">{{ next_code or 'Set prefix above' }}</strong>
        </div>
        <div class="actions-row">
            
        </div>
    
</div>

<!-- ── Weekly Off ──────────────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Weekly Off Day</h2></div>
    <p style="margin-bottom:16px;">Select the company's weekly off day. This day will be automatically marked as <strong>Off</strong> for all employees in the attendance sheet. Employees can still be marked Present on that day if they work.</p>
    
<div class="form-grid" style="max-width:300px;">
            <div class="field">
                <label>Weekly Off Day</label>
                <select name="day_of_week" style="font-size:14px;">
                    {% for i, dname in [('0','Monday'),('1','Tuesday'),('2','Wednesday'),('3','Thursday'),('4','Friday'),('5','Saturday'),('6','Sunday')] %}
                    <option value="{{ i }}" {{ 'selected' if weekly_off_day == i|int }}>{{ dname }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="actions-row">
            
        </div>
    
</div>

<!-- ── Attendance Pay Policy ────────────────────────────────────────── -->
<div class="panel">
    <div class="panel-title"><h2>Attendance Pay Policy</h2></div>
    <p style="margin-bottom:16px;">
        Controls how each attendance status counts toward payable days in payroll.
        For example, if Casual Leave is a paid entitlement at your company, set it to 100% —
        those days will count fully toward salary, exactly like a Present day. Set to 0% for
        any status that should not be paid at all.
    </p>
    <table class="ledger-table" style="max-width:520px;">
        <thead><tr><th>Attendance Status</th><th class="num" style="width:140px;">% of a Day Paid</th></tr></thead>
        <tbody>
            <tr>
                <td class="name-cell">P — Present</td>
                <td><input type="number" name="pay_policy_P" min="0" max="100" step="1"
                           value="{{ (pay_policy.P * 100)|round|int }}" style="width:80px;text-align:right;"> %</td>
            </tr>
            <tr>
                <td class="name-cell">A — Absent</td>
                <td><input type="number" name="pay_policy_A" min="0" max="100" step="1"
                           value="{{ (pay_policy.A * 100)|round|int }}" style="width:80px;text-align:right;"> %</td>
            </tr>
            <tr>
                <td class="name-cell">CL — Casual Leave</td>
                <td><input type="number" name="pay_policy_CL" min="0" max="100" step="1"
                           value="{{ (pay_policy.CL * 100)|round|int }}" style="width:80px;text-align:right;"> %</td>
            </tr>
            <tr>
                <td class="name-cell">SL — Sick Leave</td>
                <td><input type="number" name="pay_policy_SL" min="0" max="100" step="1"
                           value="{{ (pay_policy.SL * 100)|round|int }}" style="width:80px;text-align:right;"> %</td>
            </tr>
            <tr>
                <td class="name-cell">HD — Half Day</td>
                <td><input type="number" name="pay_policy_HD" min="0" max="100" step="1"
                           value="{{ (pay_policy.HD * 100)|round|int }}" style="width:80px;text-align:right;"> %</td>
            </tr>
            <tr>
                <td class="name-cell">H / Off — Holiday &amp; Weekly Off</td>
                <td><input type="number" name="pay_policy_H" min="0" max="100" step="1"
                           value="{{ (pay_policy.H * 100)|round|int }}" style="width:80px;text-align:right;"> %</td>
            </tr>
            <tr>
                <td class="name-cell">L — Late</td>
                <td><input type="number" name="pay_policy_L" min="0" max="100" step="1"
                           value="{{ (pay_policy.L * 100)|round|int }}" style="width:80px;text-align:right;"> %</td>
            </tr>
        </tbody>
    </table>
    <p class="field-hint" style="margin-top:10px;">
        These defaults follow standard Indian payroll practice: CL/SL/weekly-off/holidays paid
        in full, Absent unpaid, Half Day at half pay. Change any of these to match your own
        company policy — it applies the next time payroll is generated for a month.
    </p>
</div>

    <div class="actions-row">
        <button type="submit" class="btn btn-primary" style="font-size:15px;padding:12px 36px;">
            Save All Settings
        </button>
    </div>
</div>

{% endblock %}