<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_leave.LeaveBalance">
        <div class="o_xeno_hr_page o_xeno_balance_page">
            <div class="o_xeno_hr_header">
                <div>
                    <h1>Leaves Balances</h1>
                </div>
                <div class="o_xeno_hr_header_actions">
                    <select class="form-select o_xeno_year_filter" t-on-change="onYearChange">
                        <t t-foreach="years" t-as="y" t-key="y">
                            <option t-att-value="y" t-att-selected="y === state.year" t-esc="y"/>
                        </t>
                    </select>
                    <select class="form-select o_xeno_employee_filter" t-on-change="onEmployeeChange">
                        <option value="">All Employees</option>
                        <t t-foreach="state.employees" t-as="emp" t-key="emp.id">
                            <option t-att-value="emp.id" t-esc="emp.name"/>
                        </t>
                    </select>
                    <div class="o_xeno_view_toggle">
                        <button t-attf-class="o_xeno_toggle_btn {{ state.view === 'list' ? 'active' : '' }}"
                                t-on-click="() => this.setView('list')">List</button>
                        <button t-attf-class="o_xeno_toggle_btn {{ state.view === 'grid' ? 'active' : '' }}"
                                t-on-click="() => this.setView('grid')">Grid</button>
                    </div>
                    <button class="btn btn-outline-secondary" t-on-click="onTemplate">
                        <i class="fa fa-file-o me-1"/>Template
                    </button>
                    <button class="btn btn-outline-secondary" t-on-click="onImport">
                        <i class="fa fa-upload me-1"/>Import
                    </button>
                    <input type="file" t-ref="importFile" accept=".xlsx"
                           class="d-none" t-on-change="onImportFileChange"/>
                    <button class="btn btn-outline-secondary" t-on-click="onExport">
                        <i class="fa fa-download me-1"/>Export
                    </button>
                    <button class="btn btn-outline-secondary" t-on-click="onPayrollExport">
                        <i class="fa fa-money me-1"/>Leave Remaining Export for Payroll
                    </button>
                    <button class="btn btn-primary" t-on-click="onAllocate">
                        <i class="fa fa-plus me-1"/>Allocate Balance
                    </button>
                </div>
            </div>

            <div class="o_xeno_hr_card o_xeno_pending_allocations_card" t-if="state.pendingAllocations.length">
                <div class="o_xeno_hr_toolbar">
                    <h2 class="o_xeno_pending_allocations_title">Pending Allocation Requests</h2>
                </div>
                <table class="o_xeno_hr_table">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Leave Type</th>
                            <th>Requested Days</th>
                            <th>Requested On</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <t t-foreach="state.pendingAllocations" t-as="prow" t-key="prow.allocationId">
                            <tr>
                                <td>
                                    <div class="o_xeno_employee_cell">
                                        <img t-if="prow.hasPhoto" class="o_xeno_avatar_photo" t-att-src="prow.photoUrl" alt=""/>
                                        <span t-else="" class="o_xeno_avatar" t-attf-style="background-color: {{prow.avatarColor}}"
                                              t-esc="prow.avatarInitial"/>
                                        <div>
                                            <div class="fw-bold" t-esc="prow.employeeName"/>
                                            <div class="text-muted small" t-esc="prow.employeeCode"/>
                                        </div>
                                    </div>
                                </td>
                                <td t-esc="prow.leaveTypeName"/>
                                <td t-esc="prow.daysStr"/>
                                <td t-esc="prow.dateFromStr"/>
                                <td><span class="badge o_xeno_pending_status_badge" t-esc="prow.stateLabel"/></td>
                                <td>
                                    <div class="o_xeno_balance_icons">
                                        <a t-if="prow.canAct" href="#" class="o_xeno_balance_icon" title="Approve"
                                           t-on-click.prevent="() => this.onApproveAllocation(prow.allocationId)">
                                            <i class="fa fa-check"/>
                                        </a>
                                        <a t-if="prow.canRefuse" href="#" class="o_xeno_balance_icon o_xeno_balance_icon_danger" title="Reject"
                                           t-on-click.prevent="() => this.onRejectAllocation(prow.allocationId)">
                                            <i class="fa fa-times"/>
                                        </a>
                                        <span t-if="!prow.canAct and !prow.canRefuse" class="text-muted small">—</span>
                                    </div>
                                </td>
                            </tr>
                        </t>
                    </tbody>
                </table>
            </div>

            <div class="o_xeno_hr_card">
                <div class="o_xeno_hr_toolbar" t-if="state.view === 'grid'">
                    <button class="btn btn-outline-secondary btn-sm" t-on-click="toggleEditMode">
                        <i class="fa fa-pencil me-1"/><t t-esc="state.editMode ? 'Done' : 'Edit Mode'"/>
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" t-on-click="onGridExport">
                        <i class="fa fa-download me-1"/>Grid Export
                    </button>
                </div>

                <!-- LIST VIEW -->
                <table class="o_xeno_hr_table" t-if="state.view === 'list'">
                    <thead>
                        <tr>
                            <th>Employee</th>
                            <th>Leave Type</th>
                            <th>Allocated</th>
                            <th>Used</th>
                            <th>Pending</th>
                            <th>Remaining</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr t-if="!state.loading and !hasData">
                            <td colspan="7" class="text-center text-muted py-4">No leave balances found.</td>
                        </tr>
                        <t t-foreach="state.rows" t-as="row" t-key="row.allocationId">
                            <tr>
                                <td>
                                    <div class="o_xeno_employee_cell">
                                        <img t-if="row.hasPhoto" class="o_xeno_avatar_photo" t-att-src="row.photoUrl" alt=""/>
                                        <span t-else="" class="o_xeno_avatar" t-attf-style="background-color: {{row.avatarColor}}"
                                              t-esc="row.avatarInitial"/>
                                        <div>
                                            <div class="fw-bold" t-esc="row.employeeName"/>
                                            <div class="text-muted small" t-esc="row.employeeCode"/>
                                        </div>
                                    </div>
                                </td>
                                <td t-esc="row.leaveTypeName"/>
                                <td t-esc="row.allocatedStr"/>
                                <td class="o_xeno_balance_used" t-esc="row.usedStr"/>
                                <td class="o_xeno_balance_pending" t-esc="row.pendingStr"/>
                                <td>
                                    <div class="o_xeno_balance_remaining">
                                        <span class="o_xeno_balance_remaining_value" t-esc="row.remainingStr"/>
                                        <div class="o_xeno_balance_bar">
                                            <div class="o_xeno_balance_bar_fill" t-attf-style="width: {{row.remainingPct}}%"/>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="o_xeno_balance_icons">
                                        <a href="#" class="o_xeno_balance_icon" title="Edit"
                                           t-on-click.prevent="() => this.onEdit(row.allocationId)">
                                            <i class="fa fa-pencil"/>
                                        </a>
                                        <a href="#" class="o_xeno_balance_icon o_xeno_balance_icon_danger" title="Delete"
                                           t-on-click.prevent="() => this.onDelete(row.allocationId)">
                                            <i class="fa fa-trash"/>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </t>
                    </tbody>
                </table>

                <!-- GRID VIEW -->
                <div class="o_xeno_balance_grid_wrap" t-if="state.view === 'grid'">
                    <table class="o_xeno_hr_table o_xeno_balance_grid">
                        <thead>
                            <tr>
                                <th rowspan="2" class="o_xeno_grid_employee_col">Employee</th>
                                <t t-foreach="state.leaveTypes" t-as="ltype" t-key="ltype.id">
                                    <th colspan="3" class="text-center" t-esc="ltype.name"/>
                                </t>
                            </tr>
                            <tr>
                                <t t-foreach="state.leaveTypes" t-as="ltype" t-key="ltype.id">
                                    <th class="text-center">Allocated</th>
                                    <th class="text-center">Used</th>
                                    <th class="text-center">Remaining</th>
                                </t>
                            </tr>
                        </thead>
                        <tbody>
                            <tr t-if="!state.loading and !state.gridRows.length">
                                <td t-att-colspan="gridColspan" class="text-center text-muted py-4">
                                    No leave balances found.
                                </td>
                            </tr>
                            <t t-foreach="state.gridRows" t-as="grow" t-key="grow.employeeId">
                                <tr>
                                    <td class="o_xeno_grid_employee_col">
                                        <div class="o_xeno_employee_cell">
                                            <div>
                                                <div class="fw-bold" t-esc="grow.employeeName"/>
                                                <div class="text-muted small" t-esc="grow.employeeCode"/>
                                            </div>
                                        </div>
                                    </td>
                                    <t t-foreach="grow.cells" t-as="cell" t-key="cell.leaveTypeId">
                                        <td class="text-center">
                                            <input t-if="state.editMode and cell.hasAllocation" type="number" step="0.5" min="0"
                                                   class="o_xeno_grid_input"
                                                   t-att-value="cell.allocatedStr"
                                                   t-on-change="(ev) => this.onGridCellChange(cell.allocationId, ev)"/>
                                            <span t-else="" t-esc="cell.allocatedStr"/>
                                        </td>
                                        <td class="text-center o_xeno_balance_used" t-esc="cell.usedStr"/>
                                        <td class="text-center o_xeno_balance_remaining_value" t-esc="cell.remainingStr"/>
                                    </t>
                                </tr>
                            </t>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </t>
</templates>
