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

    <t t-name="fusion_clock.Dashboard">
        <div class="o_action">
            <div class="container-fluid py-3">

                <!-- Header -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="mb-0">Fusion Clock Dashboard</h2>
                    <button class="btn btn-outline-primary" t-on-click="onRefresh">
                        <i class="fa fa-refresh"/> Refresh
                    </button>
                </div>

                <t t-if="state.loading">
                    <div class="text-center py-5">
                        <i class="fa fa-spinner fa-spin fa-2x"/>
                        <p class="mt-2">Loading dashboard...</p>
                    </div>
                </t>

                <t t-if="state.error">
                    <div class="alert alert-danger">
                        <t t-esc="state.error"/>
                    </div>
                </t>

                <t t-if="!state.loading and !state.error">
                    <!-- Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3 mb-3">
                            <div class="fclk-dash-card fclk-dash-card--total">
                                <div class="fclk-dash-card-icon">
                                    <i class="fa fa-users"/>
                                </div>
                                <div class="fclk-dash-card-value"><t t-esc="state.total_employees"/></div>
                                <div class="fclk-dash-card-label">Total Employees</div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="fclk-dash-card fclk-dash-card--present">
                                <div class="fclk-dash-card-icon">
                                    <i class="fa fa-check-circle"/>
                                </div>
                                <div class="fclk-dash-card-value"><t t-esc="state.present_count"/></div>
                                <div class="fclk-dash-card-label">Present Today</div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="fclk-dash-card fclk-dash-card--absent">
                                <div class="fclk-dash-card-icon">
                                    <i class="fa fa-times-circle"/>
                                </div>
                                <div class="fclk-dash-card-value"><t t-esc="state.absent_count"/></div>
                                <div class="fclk-dash-card-label">Absent Today</div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="fclk-dash-card fclk-dash-card--late">
                                <div class="fclk-dash-card-icon">
                                    <i class="fa fa-clock-o"/>
                                </div>
                                <div class="fclk-dash-card-value"><t t-esc="state.late_count"/></div>
                                <div class="fclk-dash-card-label">Late Today</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Currently Clocked In -->
                        <div class="col-md-8 mb-4">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">Currently Clocked In</h5>
                                    <span class="badge bg-success"><t t-esc="state.clocked_in.length"/> active</span>
                                </div>
                                <div class="card-body p-0">
                                    <t t-if="state.clocked_in.length === 0">
                                        <div class="text-center py-4 text-muted">
                                            No employees currently clocked in
                                        </div>
                                    </t>
                                    <t t-else="">
                                        <table class="table table-sm mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Employee</th>
                                                    <th>Clock-In</th>
                                                    <th>Location</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <t t-foreach="state.clocked_in" t-as="emp" t-key="emp_index">
                                                    <tr>
                                                        <td><t t-esc="emp.employee"/></td>
                                                        <td><t t-esc="emp.check_in"/></td>
                                                        <td><t t-esc="emp.location"/></td>
                                                    </tr>
                                                </t>
                                            </tbody>
                                        </table>
                                    </t>
                                </div>
                            </div>
                        </div>

                        <!-- Alerts Panel -->
                        <div class="col-md-4 mb-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="mb-0">Alerts</h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3 cursor-pointer"
                                         t-on-click="onViewActivityLogs">
                                        <span><i class="fa fa-exclamation-circle text-warning me-2"/>Pending Reasons</span>
                                        <span class="badge bg-warning"><t t-esc="state.pending_reasons"/></span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-3 cursor-pointer"
                                         t-on-click="onViewCorrections">
                                        <span><i class="fa fa-edit text-info me-2"/>Pending Corrections</span>
                                        <span class="badge bg-info"><t t-esc="state.pending_corrections"/></span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center cursor-pointer"
                                         t-on-click="onViewPenalties">
                                        <span><i class="fa fa-clock-o text-danger me-2"/>Late Today</span>
                                        <span class="badge bg-danger"><t t-esc="state.late_count"/></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Quick Actions -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5 class="mb-0">Quick Actions</h5>
                                </div>
                                <div class="card-body">
                                    <button class="btn btn-outline-primary w-100 mb-2" t-on-click="onViewAttendances">
                                        <i class="fa fa-list me-1"/> View All Attendances
                                    </button>
                                    <button class="btn btn-outline-secondary w-100" t-on-click="onViewActivityLogs">
                                        <i class="fa fa-history me-1"/> Activity Logs
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </t>

            </div>
        </div>
    </t>

</templates>
