<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="fusion_payroll.PayrollReportAction">
        <div class="o_action o_payroll_report_action">
            <!-- Loading Spinner -->
            <div t-if="state.loading" class="d-flex justify-content-center align-items-center" style="min-height: 400px;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>

            <div t-else="" class="container-fluid py-3">
                <!-- Header -->
                <div class="row mb-3">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <button class="btn btn-link p-0 me-3" t-on-click="goBack">
                                    <i class="fa fa-chevron-left"/> Back
                                </button>
                                <h2 class="mb-0">
                                    <t t-out="state.reportName"/>
                                </h2>
                            </div>
                            <div class="d-flex gap-2">
                                <!-- Export Buttons -->
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
                                        Export <i class="fa fa-caret-down ms-1"/>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a class="dropdown-item" href="#" t-on-click.prevent="exportXlsx">
                                                <i class="fa fa-file-excel-o me-2"/> Export to Excel
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#" t-on-click.prevent="exportPdf">
                                                <i class="fa fa-file-pdf-o me-2"/> Export to PDF
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filters Row -->
                <div class="row mb-3" t-if="state.filterDateRange">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body py-2">
                                <div class="row align-items-center">
                                    <!-- Date Filter Dropdown -->
                                    <div class="col-auto">
                                        <select class="form-select form-select-sm" 
                                                t-on-change="onDateFilterChange"
                                                t-att-value="state.selectedDateFilter">
                                            <t t-foreach="state.dateFilterOptions" t-as="option" t-key="option[0]">
                                                <option t-att-value="option[0]" 
                                                        t-att-selected="option[0] === state.selectedDateFilter">
                                                    <t t-out="option[1]"/>
                                                </option>
                                            </t>
                                        </select>
                                    </div>

                                    <!-- Date From -->
                                    <div class="col-auto">
                                        <input type="date" 
                                               class="form-control form-control-sm"
                                               t-att-value="state.dateFrom"
                                               t-on-change="onDateFromChange"/>
                                    </div>

                                    <!-- Date To -->
                                    <div class="col-auto">
                                        <input type="date"
                                               class="form-control form-control-sm"
                                               t-att-value="state.dateTo"
                                               t-on-change="onDateToChange"/>
                                    </div>

                                    <!-- Apply Button (for custom dates) -->
                                    <div class="col-auto" t-if="state.showCustomDate">
                                        <button class="btn btn-primary btn-sm" t-on-click="applyFilters">
                                            Apply
                                        </button>
                                    </div>

                                    <!-- Customize Button -->
                                    <div class="col-auto ms-auto">
                                        <button class="btn btn-outline-secondary btn-sm">
                                            <i class="fa fa-sliders me-1"/> Customize
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Report Table -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table table-hover table-sm mb-0 o_payroll_report_table">
                                        <thead>
                                            <tr>
                                                <t t-foreach="state.columns" t-as="column" t-key="column.field">
                                                    <th t-att-class="column.sortable ? 'cursor-pointer user-select-none' : ''"
                                                        t-on-click="() => this.sortByColumn(column)">
                                                        <t t-out="column.name"/>
                                                        <t t-if="column.sortable">
                                                            <i t-if="state.sortColumn === column.field"
                                                               t-att-class="'fa ms-1 ' + (state.sortDirection === 'asc' ? 'fa-sort-asc' : 'fa-sort-desc')"/>
                                                            <i t-else="" class="fa fa-sort ms-1 text-muted"/>
                                                        </t>
                                                    </th>
                                                </t>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <t t-if="state.lines.length === 0">
                                                <tr>
                                                    <td t-att-colspan="state.columns.length" class="text-center text-muted py-4">
                                                        There are no results matching the criteria.
                                                    </td>
                                                </tr>
                                            </t>
                                            <t t-foreach="state.lines" t-as="line" t-key="line.id">
                                                <tr t-att-class="this.getLineClass(line)"
                                                    t-on-click="() => line.model and line.res_id and this.openRecord(line)"
                                                    style="cursor: pointer;">
                                                    <t t-foreach="state.columns" t-as="column" t-key="column.field">
                                                        <td t-att-class="column.type === 'monetary' or column.type === 'float' ? 'text-end' : ''">
                                                            <!-- Unfoldable indicator -->
                                                            <t t-if="column_index === 0 and line.unfoldable">
                                                                <i t-att-class="'fa me-1 ' + (state.expandedLines[line.id] ? 'fa-caret-down' : 'fa-caret-right')"
                                                                   t-on-click.stop="() => this.toggleLine(line.id)"/>
                                                            </t>
                                                            <t t-out="this.formatValue(line.values?.[column.field], column.type)"/>
                                                        </td>
                                                    </t>
                                                </tr>
                                            </t>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>

</templates>
