<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="xeno_orr.Dashboard">
        <div class="o_xeno_orr_dashboard p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0">Outside Request &amp; Reimbursement</h2>
                <div class="d-flex align-items-center gap-2">
                    <label class="mb-0 small text-muted">From</label>
                    <input type="date" class="form-control form-control-sm"
                           t-att-value="state.dateFrom" t-on-change="onDateFromChange"/>
                    <label class="mb-0 small text-muted">To</label>
                    <input type="date" class="form-control form-control-sm"
                           t-att-value="state.dateTo" t-on-change="onDateToChange"/>
                </div>
            </div>

            <div t-if="state.loading" class="text-muted">Loading…</div>
            <t t-else="">
                <div class="o_xeno_orr_panels">
                    <div class="o_xeno_orr_panel">
                        <h5>My Own</h5>
                        <t t-call="xeno_orr.DashboardStats"><t t-set="stats" t-value="state.data.own"/></t>
                    </div>
                    <div t-if="state.data.team" class="o_xeno_orr_panel">
                        <h5>My Team</h5>
                        <t t-call="xeno_orr.DashboardStats"><t t-set="stats" t-value="state.data.team"/></t>
                    </div>
                    <div t-if="state.data.all" class="o_xeno_orr_panel">
                        <h5>All Employees</h5>
                        <t t-call="xeno_orr.DashboardStats"><t t-set="stats" t-value="state.data.all"/></t>
                    </div>
                </div>

                <div class="o_xeno_orr_trend mt-4">
                    <h5>Requests Trend (Last 6 Months)</h5>
                    <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="o_xeno_orr_trend_svg">
                        <polyline t-att-points="trendPoints" fill="none" stroke="#142933" stroke-width="1.5"/>
                    </svg>
                    <div class="o_xeno_orr_trend_labels">
                        <t t-foreach="trendLabels" t-as="point" t-key="point.label">
                            <span><t t-esc="point.label"/>: <strong t-esc="point.total"/></span>
                        </t>
                    </div>
                </div>
            </t>
        </div>
    </t>

    <t t-name="xeno_orr.DashboardStats">
        <div class="o_xeno_orr_stats_grid">
            <div class="o_xeno_orr_stat">
                <div class="o_xeno_orr_stat_value" t-esc="stats.total_requests"/>
                <div class="o_xeno_orr_stat_label">Total Requests</div>
            </div>
            <div class="o_xeno_orr_stat">
                <div class="o_xeno_orr_stat_value" t-esc="stats.outside_only"/>
                <div class="o_xeno_orr_stat_label">Outside Only</div>
            </div>
            <div class="o_xeno_orr_stat">
                <div class="o_xeno_orr_stat_value" t-esc="stats.reimburse_requests"/>
                <div class="o_xeno_orr_stat_label">Reimburse Requests</div>
            </div>
            <div class="o_xeno_orr_stat">
                <div class="o_xeno_orr_stat_value" t-esc="stats.reimburse_amount.toFixed(2)"/>
                <div class="o_xeno_orr_stat_label">Reimburse Amount</div>
            </div>
        </div>
    </t>
</templates>
