{% extends "base.html" %}
{% block title %}{{ 'Edit' if employee else 'Add' }} Employee · WageWise Neo{% endblock %}
{% block content %}
<style>
.form-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 20px; }
.span2 { grid-column: span 2; }
.span3 { grid-column: 1/-1; }
.section-hdr {
    background:var(--color-ink); color:var(--color-paper);
    font-family:var(--font-display); font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:4px; margin:24px 0 14px 0;
    letter-spacing:0.03em;
}
.family-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.family-table th { background:var(--color-ink); color:var(--color-paper); padding:7px 8px; font-size:11px; text-align:left; }
.family-table td { padding:6px 8px; border-bottom:1px solid var(--color-rule); }
.marital-field input:disabled,
.marital-field select:disabled,
.marital-input:disabled {
    background: var(--color-paper-stripe) !important;
    color: var(--color-ink-faint) !important;
    cursor: not-allowed;
    opacity: 0.55;
}
.marital-row.marital-disabled td {
    opacity: 0.45;
}
.marital-field.marital-disabled label {
    color: var(--color-ink-faint);
}

.family-table input, .family-table select {
    width:100%; padding:5px 7px; border:1px solid var(--color-rule-strong);
    border-radius:3px; font-size:12px; background:var(--color-paper-raised);
}
.tab-btn {
    padding:8px 18px; border:1px solid var(--color-rule-strong);
    background:var(--color-paper); color:var(--color-ink-soft);
    cursor:pointer; font-size:13px; font-weight:500; border-radius:4px 4px 0 0;
    border-bottom:none;
}
.tab-btn.active { background:var(--color-paper-raised); color:var(--color-ink); border-color:var(--color-rule-strong); }
.tab-pane { display:none; }
.tab-pane.active { display:block; }
</style>

<div class="page-header">
    <div>
        <div class="eyebrow">Employees</div>
        <h1>{{ 'Edit — ' + employee.full_name if employee else 'Add Employee' }}</h1>
    </div>
    <button type="button" onclick="goBack()" class="btn btn-secondary">&larr; Back</button>
</div>

<form method="post" enctype="multipart/form-data" data-autosave="{{ 'true' if employee else 'false' }}" data-employee-id="{{ employee.id if employee else '' }}" id="empForm">

<!-- Tab buttons -->
<div style="display:flex;gap:4px;border-bottom:1px solid var(--color-rule-strong);margin-bottom:0;">
    {% for tid,tlabel in [('t-personal','Personal'),('t-statutory','Statutory & Bank'),('t-salary','Salary'),('t-family','Family'),('t-contacts','Emergency'),('t-nominees','Nominees'),('t-documents','Documents'),('t-ot','OT & Commission')] %}
    <button type="button" class="tab-btn {{ 'active' if loop.first }}" onclick="showTab('{{ tid }}',this)">{{ tlabel }}</button>
    {% endfor %}
</div>

<div class="panel" style="border-radius:0 6px 6px 6px; margin-top:0;">

<!-- ════ TAB 1: Personal ════ -->
<div id="t-personal" class="tab-pane active">
    <div class="section-hdr">Identity</div>
    <div class="form-grid-3">
        <div class="field span2">
            <label>Full Name (as per Aadhaar) *</label>
            <input type="text" name="full_name" required value="{{ employee.full_name if employee else '' }}">
        </div>
        <div class="field">
            <label>Employee Code</label>
            <div style="display:flex;gap:6px;align-items:center;">
                <input type="text" name="employee_code" id="emp_code"
                       value="{{ employee.employee_code if employee else '' }}"
                       placeholder="{{ next_code if next_code else 'Auto-generated' }}"
                       oninput="checkCode(this.value)"
                       style="flex:1;">
                {% if not employee %}
                <button type="button" onclick="useAutoCode()" class="btn btn-secondary"
                        style="font-size:11px;padding:4px 10px;white-space:nowrap;">
                    Use {{ next_code or 'Auto' }}
                </button>
                {% endif %}
            </div>
            <span id="code-feedback" class="field-hint"></span>
            <span class="field-hint">Leave blank to auto-generate on save.</span>
        </div>
        <div class="field">
            <label>Employee Type</label>
            <select name="employee_type">
                <option value="permanent" {{ 'selected' if not employee or (employee.employee_type or 'permanent') == 'permanent' }}>Permanent</option>
                <option value="fixed_term" {{ 'selected' if employee and employee.employee_type == 'fixed_term' }}>Fixed-Term / Contract</option>
            </select>
            <span class="field-hint">Affects gratuity eligibility (1 yr fixed-term, 5 yrs permanent).</span>
        </div>
        <div class="field">
            <label>Designation</label>
            <select name="designation">
                <option value="">— Select —</option>
                {% for d in designations %}
                <option value="{{ d }}" {{ 'selected' if employee and employee.designation == d }}>{{ d }}</option>
                {% endfor %}
                {% if employee and employee.designation and employee.designation not in designations %}
                <option value="{{ employee.designation }}" selected>{{ employee.designation }}</option>
                {% endif %}
            </select>
        </div>
        <div class="field">
            <label>Department</label>
            <select name="department">
                <option value="">— Select —</option>
                {% for d in departments %}
                <option value="{{ d }}" {{ 'selected' if employee and employee.department == d }}>{{ d }}</option>
                {% endfor %}
                {% if employee and employee.department and employee.department not in departments %}
                <option value="{{ employee.department }}" selected>{{ employee.department }}</option>
                {% endif %}
            </select>
        </div>
        <div class="field">
            <label>Status</label>
            <select name="status">
                <option value="active" {{ 'selected' if not employee or employee.status == 'active' }}>Active</option>
                <option value="inactive" {{ 'selected' if employee and employee.status == 'inactive' }}>Inactive</option>
            </select>
        </div>
        <div class="field">
            <label>Gender</label>
            <select name="gender">
                <option value="">— Select —</option>
                <option value="Male"   {{ 'selected' if employee and employee.gender == 'Male' }}>Male</option>
                <option value="Female" {{ 'selected' if employee and employee.gender == 'Female' }}>Female</option>
                <option value="Other"  {{ 'selected' if employee and employee.gender == 'Other' }}>Other</option>
            </select>
        </div>
        <div class="field">
            <label>Date of Birth</label>
            <input type="date" name="date_of_birth" value="{{ (employee.date_of_birth|dateonly) if employee else '' }}">
        </div>
        <div class="field">
            <label>Date of Joining</label>
            <input type="date" name="date_of_joining" value="{{ (employee.date_of_joining|dateonly) if employee else '' }}">
        </div>
        <div class="field">
            <label>Blood Group</label>
            <select name="blood_group">
                <option value="">— Select —</option>
                {% for bg in ['A+','A-','B+','B-','AB+','AB-','O+','O-'] %}
                <option value="{{ bg }}" {{ 'selected' if employee and employee.blood_group == bg }}>{{ bg }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <label>Education Qualification</label>
            <input type="text" name="education_qualification" value="{{ employee.education_qualification if employee else '' }}" placeholder="e.g. PUC, B.Com">
        </div>
        <div class="field">
            <label>Religion</label>
            <input type="text" name="religion" value="{{ employee.religion if employee else '' }}">
        </div>
        <div class="field">
            <label>Marital Status</label>
            <select name="marital_status" id="marital_status" onchange="toggleMaritalFields()">
                <option value="">— Select —</option>
                <option value="Single"  {{ 'selected' if employee and employee.marital_status == 'Single' }}>Single</option>
                <option value="Married" {{ 'selected' if employee and employee.marital_status == 'Married' }}>Married</option>
                <option value="Widowed" {{ 'selected' if employee and employee.marital_status == 'Widowed' }}>Widowed</option>
                <option value="Divorced" {{ 'selected' if employee and employee.marital_status == 'Divorced' }}>Divorced</option>
            </select>
        </div>
        <div class="field marital-field">
            <label>Spouse / Husband Name</label>
            <input type="text" name="spouse_name" id="spouse_name"
                   value="{{ employee.spouse_name if employee else '' }}"
                   placeholder="Enter spouse name">
        </div>
        <div class="field marital-field">
            <label>Anniversary Date</label>
            <input type="text" name="anniversary" id="anniversary_date"
                   value="{{ employee.anniversary if employee else '' }}"
                   placeholder="e.g. 3rd June">
        </div>
        <div class="field">
            <label>Father's Name</label>
            <input type="text" name="father_name" value="{{ employee.father_name if employee else '' }}">
        </div>
        <div class="field span2">
            <label>Languages Known</label>
            <input type="text" name="languages_known" value="{{ employee.languages_known if employee else '' }}" placeholder="e.g. Kannada, English, Hindi">
        </div>
        <div class="field">
            <label>Introducer</label>
            <input type="text" name="introducer" value="{{ employee.introducer if employee else '' }}">
        </div>
    </div>

    <div class="section-hdr">Contact</div>
    <div class="form-grid-3">
        <div class="field">
            <label>Mobile No.</label>
            <input type="text" name="mobile" value="{{ employee.mobile if employee else '' }}">
        </div>
        <div class="field">
            <label>WhatsApp?</label>
            <select name="whatsapp_yn">
                <option value="Y" {{ 'selected' if employee and employee.whatsapp_yn == 'Y' }}>Yes</option>
                <option value="N" {{ 'selected' if not employee or employee.whatsapp_yn != 'Y' }}>No</option>
            </select>
        </div>
        <div class="field">
            <label>Landline</label>
            <input type="text" name="landline" value="{{ employee.landline if employee else '' }}">
        </div>
        <div class="field span2">
            <label>Email</label>
            <input type="email" name="email" value="{{ employee.email if employee else '' }}">
        </div>
        <div class="field">
            <label>Voter ID No.</label>
            <input type="text" name="voter_id" value="{{ employee.voter_id if employee else '' }}">
        </div>
        <div class="field span3">
            <label>Address for Correspondence</label>
            <input type="text" name="address" value="{{ employee.address if employee else '' }}">
        </div>
        <div class="field span2">
            <label>City</label>
            <input type="text" name="city" value="{{ employee.city if employee else '' }}">
        </div>
        <div class="field">
            <label>Pin Code</label>
            <input type="text" name="pin_code" value="{{ employee.pin_code if employee else '' }}">
        </div>
        <div class="field span3">
            <label>Native Address</label>
            <input type="text" name="native_address" value="{{ employee.native_address if employee else '' }}">
        </div>
        <div class="field span3">
            <label>Permanent Address</label>
            <input type="text" name="permanent_address" value="{{ employee.permanent_address if employee else '' }}" placeholder="If different from correspondence address">
        </div>

    </div>

    <div class="section-hdr">Photo</div>
    <div class="form-grid-3">
        <div class="field" style="display:flex;gap:16px;align-items:flex-start;">
            {% if employee and employee.photo_path %}
            <div style="flex-shrink:0;">
                <img src="{{ '/static/uploads/photos/' + employee.id|string + '.jpg' }}"
                     id="photo-preview"
                     alt="{{ initial(employee.full_name) }}"
                     style="width:80px;height:90px;object-fit:cover;border-radius:6px;border:1.5px solid var(--color-rule);display:block;">
            </div>
            {% else %}
            <div id="photo-preview-placeholder" style="width:80px;height:90px;border-radius:6px;border:2px dashed var(--color-rule);display:flex;align-items:center;justify-content:center;color:var(--color-ink-faint);font-size:28px;flex-shrink:0;">
                👤
            </div>
            {% endif %}
            <div style="flex:1;">
                <label>Employee Photo</label>
                <input type="file" name="photo" accept="image/*" capture="environment"
                       onchange="previewPhoto(this)">
                <span class="field-hint">JPG or PNG. Passport size preferred.</span>
                {% if employee and employee.photo_path %}
                <span class="field-hint" style="color:var(--color-stamp);">Upload new to replace current photo.</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- ════ TAB 2: Statutory & Bank ════ -->
<div id="t-statutory" class="tab-pane">
    <div class="section-hdr">Statutory IDs</div>
    <div class="form-grid-3">
        <div class="field"><label>PAN Number</label><input type="text" name="pan_number" value="{{ employee.pan_number if employee else '' }}"></div>
        <div class="field"><label>Aadhaar Number</label><input type="text" name="aadhaar_number" value="{{ employee.aadhaar_number if employee else '' }}"></div>
        <div class="field"><label>Driving Licence No.</label><input type="text" name="driving_license_number" value="{{ employee.driving_license_number if employee else '' }}"></div>
        <div class="field"><label>PF Number</label><input type="text" name="pf_number" value="{{ employee.pf_number if employee else '' }}"></div>
        <div class="field"><label>ESI Number</label><input type="text" name="esi_number" value="{{ employee.esi_number if employee else '' }}"></div>
        <div class="field"><label>Voter ID</label><input type="text" name="voter_id" value="{{ employee.voter_id if employee else '' }}"></div>
        <div class="field"><label>State (for PT)</label><input type="text" name="state" value="{{ employee.state if employee and employee.state else 'Karnataka' }}"></div>
        <div class="field">
            <label>Tax Regime</label>
            <select name="tax_regime">
                <option value="new" {{ 'selected' if not employee or employee.tax_regime == 'new' }}>New Regime</option>
                <option value="old" {{ 'selected' if employee and employee.tax_regime == 'old' }}>Old Regime</option>
            </select>
        </div>
    </div>

    <div class="section-hdr">Bank Details</div>
    <div class="form-grid-3">
        <div class="field">
            <label>Payment Mode</label>
            <select name="payment_mode">
                <option value="bank" {{ 'selected' if not employee or employee.payment_mode != 'cash' }}>Bank Transfer</option>
                <option value="cash" {{ 'selected' if employee and employee.payment_mode == 'cash' }}>Cash</option>
            </select>
        </div>
        <div class="field"><label>Bank Name</label><input type="text" name="bank_name" value="{{ employee.bank_name if employee else '' }}"></div>
        <div class="field"><label>Branch</label><input type="text" name="bank_branch" value="{{ employee.bank_branch if employee else '' }}"></div>
        <div class="field">
            <label>Account Type</label>
            <select name="account_type">
                <option value="Savings" {{ 'selected' if not employee or employee.account_type == 'Savings' }}>Savings</option>
                <option value="Current" {{ 'selected' if employee and employee.account_type == 'Current' }}>Current</option>
            </select>
        </div>
        <div class="field"><label>Account Number</label><input type="text" name="account_number" value="{{ employee.account_number if employee else '' }}"></div>
        <div class="field"><label>IFSC Code</label><input type="text" name="ifsc_code" value="{{ employee.ifsc_code if employee else '' }}"></div>
    </div>
    <p style="font-size:11px;color:var(--color-ink-faint);margin-top:6px;">
        Employees marked "Cash" are automatically left out of the Bank Transfer report, slip, and export files.
    </p>
</div>


<!-- ════ TAB 3: Salary ════ -->
<div id="t-salary" class="tab-pane">
    <div class="section-hdr">Salary Structure (Monthly)</div>
    <p class="field-hint" style="margin-bottom:12px;">Enter take-home and all components auto-fill, OR enter gross and split fills automatically.</p>
    <div class="form-grid-3">
        <div class="field span3" style="background:var(--color-stamp-bg);border:1px solid var(--color-stamp);border-radius:6px;padding:12px;">
            <label style="color:var(--color-stamp);font-weight:600;">&#8377; Take-Home / In-Hand (Quick Entry)</label>
            <input type="number" step="1" id="take_home_input" name="take_home_salary"
                   placeholder="e.g. 18000"
                   value="{{ employee.take_home_salary if employee and employee.take_home_salary else '' }}">
            <span class="field-hint" id="th_preview" style="color:var(--color-stamp);"></span>
        </div>
        <div class="field span3">
            <label>— or — Gross / month (&#8377;) direct entry</label>
            <input type="number" step="0.01" id="quick_gross" placeholder="e.g. 25000">
        </div>
        <div class="field"><label>Basic</label><input type="number" step="0.01" id="basic_salary" name="basic_salary" value="{{ employee.basic_salary if employee else 0 }}"></div>
        <div class="field"><label>DA</label><input type="number" step="0.01" id="da" name="da" value="{{ employee.da if employee else 0 }}"></div>
        <div class="field"><label>HRA</label><input type="number" step="0.01" id="hra" name="hra" value="{{ employee.hra if employee else 0 }}"></div>
        <div class="field">
            <label>Travel / Conveyance Allowance</label>
            <div style="background:var(--color-paper-stripe);border:1px solid var(--color-rule-strong);border-radius:6px;padding:10px;margin-top:4px;">
                <div style="display:flex;gap:0;margin-bottom:8px;border-radius:4px;overflow:hidden;width:fit-content;border:2px solid var(--color-ink);">
                    <button type="button" id="btn_amount" onclick="setTravelMode('amount')"
                        style="padding:6px 16px;font-size:12px;font-weight:700;border:none;background:var(--color-ink);color:white;cursor:pointer;">&#8377; Fixed</button>
                    <button type="button" id="btn_pct" onclick="setTravelMode('pct')"
                        style="padding:6px 16px;font-size:12px;font-weight:700;border:none;background:white;color:var(--color-ink);cursor:pointer;">% of Gross</button>
                </div>
                <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
                    <input type="number" step="0.01" id="travel_allowance" name="travel_allowance"
                           value="{{ employee.travel_allowance if employee else 0 }}"
                           style="width:130px;padding:6px 8px;border:1.5px solid var(--color-rule-strong);border-radius:4px;font-size:13px;font-family:var(--font-data);">
                    <div id="pct_row" style="display:none;align-items:center;gap:6px;">
                        <input type="number" step="0.01" id="travel_pct_input" placeholder="%" min="0" max="100"
                               style="width:90px;padding:6px 8px;border:2px solid var(--color-stamp);border-radius:4px;font-size:13px;font-family:var(--font-data);color:var(--color-stamp);font-weight:700;">
                        <span style="font-size:11px;color:var(--color-ink-soft);">% &rarr; fills amount</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="field"><label>Other Allowance</label><input type="number" step="0.01" id="other_allowance" name="other_allowance" value="{{ employee.other_allowance if employee else 0 }}"></div>
    </div>
</div>

<!-- ════ TAB 4: Family ════ -->
<div id="t-family" class="tab-pane">
    <div class="section-hdr">Family Members</div>
    <table class="family-table">
        <thead>
            <tr><th>Relation</th><th>Full Name</th><th>Date of Birth</th><th>Aadhaar No.</th><th>Dependent?</th></tr>
        </thead>
        <tbody>
        {% for rel in ['Father','Mother','Spouse','Child 1','Child 2','Child 3','Child 4'] %}
        {% set key = rel.replace(' ','_').lower() %}
        {% set fm = family.get(rel, {}) %}
        {% set is_marital = rel in ['Spouse','Child 1','Child 2','Child 3','Child 4'] %}
        <tr class="{{ 'marital-row' if is_marital else '' }}" id="family-row-{{ key }}">
            <td style="font-weight:600;width:100px;color:var(--color-ink-soft);">{{ rel }}</td>
            <td><input type="text" name="family_{{ key }}_name" value="{{ fm.name if fm else '' }}" placeholder="Full name"
                       class="{{ 'marital-input' if is_marital else '' }}"></td>
            <td><input type="date" name="family_{{ key }}_dob" value="{{ (fm.date_of_birth|dateonly) if fm else '' }}"
                       class="{{ 'marital-input' if is_marital else '' }}"></td>
            <td><input type="text" name="family_{{ key }}_aadhaar" value="{{ fm.aadhaar_number if fm else '' }}" placeholder="Aadhaar No."
                       class="{{ 'marital-input' if is_marital else '' }}"></td>
            <td style="text-align:center;">
                <input type="checkbox" name="family_{{ key }}_dependent" value="1" {{ 'checked' if fm and fm.is_dependent }}
                       class="{{ 'marital-input' if is_marital else '' }}">
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!-- ════ TAB 5: Emergency Contacts ════ -->
<div id="t-contacts" class="tab-pane">
    <div class="section-hdr">Emergency Contacts (up to 3)</div>
    <table class="family-table">
        <thead>
            <tr><th>#</th><th>Name</th><th>Relation</th><th>Mobile No.</th><th>Address</th></tr>
        </thead>
        <tbody>
        {% for i in range(1,4) %}
        {% set ec = emergency_contacts[i-1] if emergency_contacts and emergency_contacts|length >= i else {} %}
        <tr>
            <td style="font-weight:600;text-align:center;">{{ i }}</td>
            <td><input type="text" name="ec_{{ i }}_name" value="{{ ec.name if ec else '' }}" placeholder="Contact name"></td>
            <td><input type="text" name="ec_{{ i }}_relation" value="{{ ec.relation if ec else '' }}" placeholder="e.g. Son, Sister"></td>
            <td><input type="text" name="ec_{{ i }}_mobile" value="{{ ec.mobile if ec else '' }}" placeholder="Mobile number"></td>
            <td><input type="text" name="ec_{{ i }}_address" value="{{ ec.address if ec else '' }}" placeholder="Address"></td>
            <td style="text-align:center;">
                <select name="ec_{{ i }}_residing" style="width:70px;padding:4px;font-size:12px;">
                    <option value="">—</option>
                    {% set ec_resides = (ec.residing_with_employee if ec and ec.residing_with_employee is defined else '') %}
                    <option value="Yes" {{ 'selected' if ec_resides == 'Yes' else '' }}>Yes</option>
                    <option value="No"  {{ 'selected' if ec_resides == 'No'  else '' }}>No</option>
                </select>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!-- ════ TAB 6: Nominees ════ -->
<div id="t-nominees" class="tab-pane">
    <div class="section-hdr">Nominees (up to 2)</div>
    <p class="field-hint" style="margin-bottom:12px;">Total percentage should add up to 100%.</p>
    <table class="family-table">
        <thead>
            <tr><th>#</th><th>Nominee Name</th><th>Relation</th><th>Percentage (%)</th></tr>
        </thead>
        <tbody>
        {% for i in range(1,3) %}
        {% set nm = nominees[i-1] if nominees and nominees|length >= i else {} %}
        <tr>
            <td style="font-weight:600;text-align:center;">{{ i }}</td>
            <td><input type="text" name="nom_{{ i }}_name" value="{{ nm.name if nm else '' }}" placeholder="Nominee name"></td>
            <td><input type="text" name="nom_{{ i }}_relation" value="{{ nm.relation if nm else '' }}" placeholder="e.g. Daughter"></td>
            <td><input type="number" step="0.01" name="nom_{{ i }}_pct" value="{{ nm.percentage if nm else '' }}" placeholder="e.g. 50"
                       oninput="checkNomTotal()" style="width:100px;"></td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <p id="nom-total" style="font-family:var(--font-data);font-size:13px;margin-top:8px;"></p>
</div>

<!-- ════ TAB 7: Documents ════ -->
<div id="t-documents" class="tab-pane">
    <div class="section-hdr">Upload Documents</div>
    <p class="field-hint" style="margin-bottom:12px;">Enclose: 1) Aadhaar Card Copy (Color) &nbsp; 2) PAN Card Copy &nbsp; 3) Voter ID (Optional) &nbsp; 4) Bank Pass Book Front Page &nbsp; 5) Cheque Book Page &nbsp; 6) Latest Color Photo</p>

    <div style="background:{{ 'var(--color-paid-bg)' if doc_checklist.required_done == doc_checklist.required_total else 'var(--color-stamp-bg)' }};border:1px solid {{ 'var(--color-paid)' if doc_checklist.required_done == doc_checklist.required_total else 'var(--color-stamp)' }};border-radius:6px;padding:12px 18px;margin-bottom:14px;">
        <p style="margin:0 0 8px 0;font-size:13px;font-weight:600;">
            {% if doc_checklist.required_done == doc_checklist.required_total %}
            &#9989; All {{ doc_checklist.required_total }} required documents on file
            {% else %}
            &#9888; {{ doc_checklist.required_done }} of {{ doc_checklist.required_total }} required documents on file
            {% endif %}
        </p>
        <div style="display:flex;flex-wrap:wrap;gap:6px;">
            {% for item in doc_checklist.checklist if item.required %}
            <span style="font-size:11px;padding:3px 9px;border-radius:10px;
                         background:{{ 'var(--color-paid)' if item.present else 'var(--color-paper)' }};
                         color:{{ 'white' if item.present else 'var(--color-ink-faint)' }};
                         border:1px solid {{ 'var(--color-paid)' if item.present else 'var(--color-rule)' }};">
                {{ '✓' if item.present else '—' }} {{ item.name }}
            </span>
            {% endfor %}
        </div>
    </div>

    <div style="background:var(--color-paper-stripe);border:1px solid var(--color-rule);border-radius:6px;padding:14px 18px;margin-bottom:18px;">
        <div style="display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;">
            <div class="field" style="margin:0;min-width:160px;">
                <label>Document Type</label>
                <select id="doc_type_select" style="min-width:160px;">
                    <option>Signed Application Form</option>
                    <option>Appointment Letter (Signed)</option>
                    <option>Aadhaar Card</option>
                    <option>PAN Card</option>
                    <option>Passport Photo</option>
                    <option>Bank Passbook / Cancelled Cheque</option>
                    <option>Educational Certificates</option>
                    <option>Previous Employer Relieving Letter</option>
                    <option>PF Form 11 (Declaration)</option>
                    <option>PF / ESI / Gratuity Nomination Form</option>
                    <option>Address Proof</option>
                    <option>Voter ID</option>
                    <option>Driving License</option>
                    <option>Other</option>
                </select>
            </div>
            <div class="field" style="margin:0;flex:1;min-width:200px;">
                <label>File (PDF, JPG, PNG)</label>
                <input type="file" id="doc_file_input" accept=".pdf,.jpg,.jpeg,.png,.webp">
            </div>
            <button type="button" id="doc_upload_btn" onclick="uploadDoc()" class="btn btn-primary" style="white-space:nowrap;">Upload</button>
            <span id="doc_upload_status" style="display:none;font-size:12px;color:var(--color-paid);font-weight:600;"></span>
        </div>
    </div>

    <div id="docs-list" style="min-height:60px;">
        {% if documents %}
        <div id="doc-thumbnails" style="display:flex;flex-wrap:wrap;gap:14px;">
            {% for doc in documents %}
            {% set ext = doc.file_name.rsplit('.',1)[-1].lower() %}
            {% set fp = doc.file_path | replace('\\', '/') %}
            <div class="doc-card" id="doc-{{ doc.id }}" style="width:160px;border:1px solid var(--color-rule);border-radius:6px;overflow:hidden;background:var(--color-paper-raised);">
                {% if ext in ['jpg','jpeg','png','gif','webp'] %}
                <a href="/{{ fp }}" target="_blank">
                    <img src="/{{ fp }}" alt="{{ doc.doc_type }}"
                         style="width:160px;height:110px;object-fit:cover;display:block;border-bottom:1px solid var(--color-rule);"
                         onerror="this.src='';this.alt='&#128247;'">
                </a>
                {% elif ext == 'pdf' %}
                <a href="/{{ fp }}" target="_blank"
                   style="display:flex;align-items:center;justify-content:center;height:110px;background:#fff3f3;border-bottom:1px solid var(--color-rule);font-size:40px;text-decoration:none;">
                    &#128196;
                </a>
                {% else %}
                <div style="display:flex;align-items:center;justify-content:center;height:110px;background:var(--color-paper-stripe);border-bottom:1px solid var(--color-rule);font-size:40px;">
                    &#128206;
                </div>
                {% endif %}
                <div style="padding:8px 10px;">
                    <div style="font-size:11px;font-weight:600;color:var(--color-ink);">{{ doc.doc_type }}</div>
                    <div style="font-size:10px;color:var(--color-ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="{{ doc.file_name }}">{{ doc.file_name }}</div>
                    <div style="font-size:10px;color:var(--color-ink-faint);">{{ (doc.uploaded_at or '')[:10] }}</div>
                    <button type="button" onclick="deleteDoc({{ employee.id if employee else 0 }}, {{ doc.id }})"
                            style="margin-top:6px;font-size:10px;color:var(--color-due);background:none;border:1px solid var(--color-rule);border-radius:3px;padding:2px 8px;cursor:pointer;width:100%;">
                        Remove
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="meta" id="no-docs-msg" style="padding:12px 0;color:var(--color-ink-faint);">No documents uploaded yet.</p>
        {% endif %}
    </div>
</div>

<div id="t-ot" class="tab-pane">
    <div class="section-hdr">Overtime Settings</div>
    <div class="form-grid-3">
        <div class="field span3">
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:500;">
                <input type="checkbox" name="ot_opted" value="1" {{ 'checked' if employee and employee.ot_opted }}
                       style="width:18px;height:18px;">
                Employee opts for Overtime (OT) — appears in OT Attendance register
            </label>
        </div>
        <div class="field">
            <label>OT Rate (&#8377; / hour)</label>
            <input type="number" step="0.01" name="overtime_rate_per_hour" value="{{ employee.overtime_rate_per_hour if employee else 0 }}">
        </div>
        <div class="field">
            <label>OT in Gross (ESI/PF applicable)?</label>
            <select name="ot_in_gross">
                <option value="0" {{ 'selected' if not employee or not employee.ot_opted or not employee.ot_in_gross }}>No &mdash; add separately to net pay</option>
                <option value="1" {{ 'selected' if employee and employee.ot_opted and employee.ot_in_gross }}>Yes &mdash; include in gross (ESI/PF applicable)</option>
            </select>
        </div>
        <div class="field">
            <label>OT Monthly Pay to Bank?</label>
            <select name="ot_pay_to_bank">
                <option value="yes" {{ 'selected' if not employee or employee.ot_pay_to_bank != 'no' }}>Yes &mdash; add as separate entry in bank transfer file</option>
                <option value="no" {{ 'selected' if employee and employee.ot_pay_to_bank == 'no' }}>No &mdash; OT is paid in cash, exclude from bank file</option>
            </select>
        </div>
    </div>
    <p style="font-size:11px;color:var(--color-ink-faint);margin-top:6px;">
        This only controls the Bank Transfer file — the payroll run's payslip and statutory
        figures always include the full OT amount regardless of how it's physically paid out.
    </p>

    <div class="section-hdr">Commission Settings</div>
    <div class="form-grid-3">
        <div class="field">
            <label>Commission Based On</label>
            <select name="commission_basis">
                <option value="none"       {{ 'selected' if not employee or employee.commission_basis == 'none' }}>None</option>
                <option value="sale"       {{ 'selected' if employee and employee.commission_basis == 'sale' }}>% of Sales</option>
                <option value="collection" {{ 'selected' if employee and employee.commission_basis == 'collection' }}>% of Collection</option>
            </select>
        </div>
        <div class="field">
            <label>Commission %</label>
            <input type="number" step="0.01" name="commission_percentage" value="{{ employee.commission_percentage if employee else 0 }}">
        </div>
    </div>
</div>

</div><!-- end panel -->

<div class="actions-row" style="padding:0 4px;display:flex;gap:10px;align-items:center;">
    <button type="button" id="save-btn" onclick="saveEmployee()"
            class="btn btn-primary" style="font-size:14px;padding:10px 24px;">
        {{ 'Save Changes' if employee else 'Add Employee' }}
    </button>
    <a href="{{ url_for('employees') }}" class="btn btn-secondary">Cancel</a>
    <span id="save-status" style="display:none;font-size:13px;font-weight:600;
          padding:6px 14px;border-radius:4px;"></span>
</div>
</form>

<script>
// Tab switching
function showTab(id, btn) {
    document.querySelectorAll('.tab-pane').forEach(function(p){ p.classList.remove('active'); });
    document.querySelectorAll('.tab-btn').forEach(function(b){ b.classList.remove('active'); });
    document.getElementById(id).classList.add('active');
    btn.classList.add('active');
}

// Salary auto-fill
var ratios = { basic:{{ structure.basic_pct }}, da:{{ structure.da_pct }}, hra:{{ structure.hra_pct }}, travel:{{ structure.get('travel_pct',0) }}, other:{{ structure.get('other_pct',0) }} };

var thTimer = null;
document.getElementById('take_home_input').addEventListener('input', function(){
    clearTimeout(thTimer);
    var v = parseFloat(this.value);
    if (!v) { document.getElementById('th_preview').textContent=''; return; }
    thTimer = setTimeout(function(){
        fetch('/api/takehome-to-gross',{method:'POST',headers:{'Content-Type':'application/json'},
            body:JSON.stringify({takehome:v,state:'Karnataka'})})
        .then(r=>r.json()).then(d=>{
            if(d.ok){
                var r=d.result,s=r.split;
                document.getElementById('basic_salary').value=s.basic.toFixed(2);
                document.getElementById('da').value=s.da.toFixed(2);
                document.getElementById('hra').value=s.hra.toFixed(2);
                document.getElementById('travel_allowance').value=(s.travel||0).toFixed(2);
                document.getElementById('other_allowance').value=(s.other||0).toFixed(2);
                document.getElementById('th_preview').textContent='Gross: ₹'+Math.round(r.monthly_gross).toLocaleString('en-IN')+'  |  CTC: ₹'+Math.round(r.ctc_monthly).toLocaleString('en-IN');
            }
        });
    }, 600);
});

document.getElementById('quick_gross').addEventListener('input', function(){
    var g=parseFloat(this.value); if(isNaN(g)) return;
    document.getElementById('basic_salary').value=(g*ratios.basic).toFixed(2);
    document.getElementById('da').value=(g*ratios.da).toFixed(2);
    document.getElementById('hra').value=(g*ratios.hra).toFixed(2);
    document.getElementById('travel_allowance').value=(g*ratios.travel).toFixed(2);
    document.getElementById('other_allowance').value=(g*ratios.other).toFixed(2);
});

// Travel toggle
function setTravelMode(mode){
    var pr=document.getElementById('pct_row');
    var ba=document.getElementById('btn_amount'), bp=document.getElementById('btn_pct');
    if(mode==='pct'){
        pr.style.display='flex'; ba.style.background='white'; ba.style.color='var(--color-ink)';
        bp.style.background='var(--color-ink)'; bp.style.color='white';
    } else {
        pr.style.display='none'; ba.style.background='var(--color-ink)'; ba.style.color='white';
        bp.style.background='white'; bp.style.color='var(--color-ink)';
    }
}
document.getElementById('travel_pct_input') && document.getElementById('travel_pct_input').addEventListener('input',function(){
    var pct=parseFloat(this.value||0)/100;
    var g=parseFloat(document.getElementById('basic_salary').value||0)+parseFloat(document.getElementById('da').value||0)+parseFloat(document.getElementById('hra').value||0)+parseFloat(document.getElementById('other_allowance').value||0);
    document.getElementById('travel_allowance').value=(g*pct).toFixed(2);
});

// Nominee total check
function checkNomTotal(){
    var t=0;
    document.querySelectorAll('input[name^="nom_"][name$="_pct"]').forEach(function(i){ t+=parseFloat(i.value||0); });
    var el=document.getElementById('nom-total');
    el.textContent='Total: '+t.toFixed(1)+'% '+(Math.abs(t-100)<0.1?'&#10003; Good':'— should be 100%');
    el.style.color=Math.abs(t-100)<0.1?'var(--color-paid)':'var(--color-due)';
}
checkNomTotal();

    // Employee code auto-check and preview
    var codeTimer = null;
    var empId = '{{ employee.id if employee else "" }}';

    window.useAutoCode = function() {
        fetch('/api/next-employee-code')
            .then(r=>r.json()).then(d=>{
                if(d.code){
                    document.getElementById('emp_code').value = d.code;
                    document.getElementById('code-feedback').textContent = '&#10003; Code ' + d.code + ' reserved';
                    document.getElementById('code-feedback').style.color = 'var(--color-paid)';
                }
            });
    };

    window.checkCode = function(code) {
        var fb = document.getElementById('code-feedback');
        if (!code) { fb.textContent = ''; return; }
        clearTimeout(codeTimer);
        codeTimer = setTimeout(function(){
            fetch('/api/check-employee-code?code=' + encodeURIComponent(code) + (empId ? '&exclude_id='+empId : ''))
                .then(r=>r.json()).then(d=>{
                    if(d.taken){
                        fb.textContent = '&#9888; Already used by: ' + d.by + '. Next available: ' + d.next;
                        fb.style.color = 'var(--color-due)';
                    } else if(code){
                        fb.textContent = '&#10003; Available';
                        fb.style.color = 'var(--color-paid)';
                    } else {
                        fb.textContent = '';
                    }
                });
        }, 500);
    };

    // Run check on load for edit mode
    if (empId) {
        var existing = document.getElementById('emp_code').value;
        if (existing) checkCode(existing);
    }

    // Document upload via AJAX (avoids nested form bug)
    // ── Document upload ────────────────────────────────────────────
    window.uploadDoc = function() {
        var empId = document.getElementById('empForm').dataset.employeeId;
        if (!empId) { alert('Save the employee first before uploading documents.'); return; }
        var fileInput = document.getElementById('doc_file_input');
        var docType   = document.getElementById('doc_type_select').value;
        var btn       = document.getElementById('doc_upload_btn');
        var status    = document.getElementById('doc_upload_status');
        if (!fileInput.files || !fileInput.files[0]) { alert('Please select a file first.'); return; }
        btn.textContent = 'Uploading...';
        btn.disabled = true;
        status.style.display = 'none';
        var fd = new FormData();
        fd.append('document', fileInput.files[0]);
        fd.append('doc_type', docType);
        fetch('/employees/' + empId + '/documents/upload', { method: 'POST', body: fd })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                btn.textContent = 'Upload';
                btn.disabled = false;
                if (data.ok) {
                    status.textContent = '&#10003; Uploaded!';
                    status.style.display = 'inline';
                    fileInput.value = '';
                    // Reload docs from server
                    refreshDocs(empId);
                } else {
                    alert('Upload failed: ' + (data.error || 'Unknown error'));
                }
            })
            .catch(function() {
                btn.textContent = 'Upload';
                btn.disabled = false;
                alert('Upload failed. Please try again.');
            });
    };

    window.refreshDocs = function(empId) {
        fetch('/employees/' + empId + '/documents/json')
            .then(function(r) { return r.json(); })
            .then(function(docs) {
                var list = document.getElementById('docs-list');
                var noMsg = document.getElementById('no-docs-msg');
                if (noMsg) noMsg.style.display = 'none';
                var thumbs = document.getElementById('doc-thumbnails');
                if (!thumbs) {
                    thumbs = document.createElement('div');
                    thumbs.id = 'doc-thumbnails';
                    thumbs.style.cssText = 'display:flex;flex-wrap:wrap;gap:14px;';
                    list.appendChild(thumbs);
                }
                thumbs.innerHTML = '';
                if (docs.length === 0) {
                    if (noMsg) noMsg.style.display = '';
                    return;
                }
                docs.forEach(function(doc) {
                    var ext = doc.file_name.split('.').pop().toLowerCase();
                    var fp  = doc.file_path.replace(/\\/g, '/');
                    if (fp.indexOf('static/') !== 0) fp = 'static/' + fp;
                    var preview = '';
                    if (['jpg','jpeg','png','gif','webp'].indexOf(ext) >= 0) {
                        preview = '<a href="/' + fp + '" target="_blank"><img src="/' + fp + '" style="width:160px;height:110px;object-fit:cover;display:block;border-bottom:1px solid #ddd;"></a>';
                    } else if (ext === 'pdf') {
                        preview = '<a href="/' + fp + '" target="_blank" style="display:flex;align-items:center;justify-content:center;height:110px;background:#fff3f3;border-bottom:1px solid #ddd;font-size:40px;text-decoration:none;">&#128196;</a>';
                    } else {
                        preview = '<div style="display:flex;align-items:center;justify-content:center;height:110px;font-size:40px;">&#128206;</div>';
                    }
                    var card = document.createElement('div');
                    card.id = 'doc-' + doc.id;
                    card.style.cssText = 'width:160px;border:1px solid var(--color-rule);border-radius:6px;overflow:hidden;background:var(--color-paper-raised);';
                    card.innerHTML = preview +
                        '<div style="padding:8px 10px;">' +
                        '<div style="font-size:11px;font-weight:600;">' + doc.doc_type + '</div>' +
                        '<div style="font-size:10px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + doc.file_name + '">' + doc.file_name + '</div>' +
                        '<div style="font-size:10px;color:#aaa;">' + (doc.uploaded_at||'').substring(0,10) + '</div>' +
                        '<button type="button" onclick="deleteDoc(' + empId + ',' + doc.id + ')" style="margin-top:6px;font-size:10px;color:#c0392b;background:none;border:1px solid #ddd;border-radius:3px;padding:2px 8px;cursor:pointer;width:100%;">Remove</button>' +
                        '</div>';
                    thumbs.appendChild(card);
                });
            })
            .catch(function() { /* silently ignore refresh errors */ });
    };

    window.deleteDoc = function(empId, docId) {
        if (!confirm('Remove this document?')) return;
        fetch('/employees/' + empId + '/documents/' + docId + '/delete', { method: 'POST' })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.ok) {
                    var card = document.getElementById('doc-' + docId);
                    if (card) card.remove();
                    // Show "no docs" if list is empty
                    var thumbs = document.getElementById('doc-thumbnails');
                    if (thumbs && thumbs.children.length === 0) {
                        var noMsg = document.getElementById('no-docs-msg');
                        if (noMsg) noMsg.style.display = '';
                    }
                } else { alert('Delete failed.'); }
            })
            .catch(function() { alert('Delete failed.'); });
    };

    // Auto-refresh docs if employee already saved
    (function() {
        var empForm = document.getElementById('empForm');
        if (empForm && empForm.dataset.employeeId) {
            refreshDocs(empForm.dataset.employeeId);
        }
    })();

    
    // ── Save employee via AJAX (no page reload, stays on current tab) ──────────
    window.saveEmployee = function() {
        var btn    = document.getElementById('save-btn');
        var status = document.getElementById('save-status');
        var form   = document.getElementById('empForm');

        btn.textContent = 'Saving...';
        btn.disabled    = true;
        status.style.display = 'none';

        var fd = new FormData(form);

        fetch(form.action || window.location.href, {
            method: 'POST',
            body: fd
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            btn.textContent = 'Save Changes';
            btn.disabled    = false;
            if (data.ok) {
                // Update the form's employee-id if this was a new employee
                if (data.new && data.employee_id) {
                    form.dataset.employeeId = data.employee_id;
                    // Update URL without reload
                    history.replaceState(null, '', '/employees/' + data.employee_id + '/edit');
                }
                hasChanges = false;
                    status.innerHTML        = '&#10003; Saved!';
                status.style.background = '#d4edda';
                status.style.color      = '#155724';
                status.style.border     = '1px solid #c3e6cb';
                status.style.display    = 'inline-block';
                setTimeout(function() { status.style.display = 'none'; }, 3000);
            } else {
                status.innerHTML        = '&#10007; Save failed — ' + (data.error || 'try again');
                status.style.background = '#f8d7da';
                status.style.color      = '#721c24';
                status.style.border     = '1px solid #f5c6cb';
                status.style.display    = 'inline-block';
            }
        })
        .catch(function(err) {
            btn.textContent = 'Save Changes';
            btn.disabled    = false;
            status.innerHTML        = '&#10007; Network error — try again';
            status.style.background = '#f8d7da';
            status.style.color      = '#721c24';
            status.style.border     = '1px solid #f5c6cb';
            status.style.display    = 'inline-block';
        });
    };

    // Back navigation with unsaved check
    // ── Marital status toggling ─────────────────────────────────────────────
    function toggleMaritalFields() {
        var status  = document.getElementById('marital_status');
        var married = status && status.value === 'Married';

        // Personal tab: spouse name + anniversary
        document.querySelectorAll('.marital-field').forEach(function(div) {
            var inp = div.querySelector('input, select, textarea');
            if (inp) inp.disabled = !married;
            div.classList.toggle('marital-disabled', !married);
        });

        // Family tab: Spouse + Child rows
        document.querySelectorAll('.marital-row').forEach(function(tr) {
            tr.querySelectorAll('.marital-input').forEach(function(inp) {
                inp.disabled = !married;
            });
            tr.classList.toggle('marital-disabled', !married);
        });
    }

    // Run on page load
    toggleMaritalFields();

    window.goBack = function() { history.back(); };
    document.getElementById('empForm').addEventListener('change', function() { this.dataset.dirty='true'; });
    document.getElementById('empForm').addEventListener('input',  function() { this.dataset.dirty='true'; });
    document.getElementById('empForm').addEventListener('submit', function() { this.dataset.dirty='false'; });
    document.addEventListener('keydown', function(e) { if (e.key==='Escape') goBack(); });
</script>
{% endblock %}