<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-name="sos_dashboard.DashboardTemplate">
        <div class="dashboard-wrapper" style="background-color: #f7f1f9; min-height: 100vh;">
            <div class="container-fluid p-5" style="text-shadow: rgb(191 191 191 / 80%) 3px 4px 7px; max-height: 100vh; overflow-y: auto;">
                <!-- Loading Spinner -->
                <t t-if="state.isLoading">
                    <div class="text-center my-5">
                        <i class="fa fa-spinner fa-spin fa-3x"></i>
                        <h3>Loading Dashboard...</h3>
                    </div>
                </t>

                <!-- Main Content -->
                <t t-if="!state.isLoading">
                    <!-- Company Logo -->
                    <div class="row">
                        <div class="col-12 text-center">
                            <img t-att-src="'/sos_dashboard/static/src/img/logo.png'" 
                                 alt="Company Logo" 
                                 class="company-logo animate__animated animate__fadeIn" 
                                 style="max-height: 120px; background-color: white; border-radius: 50%; padding: 15px;"/>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="card shadow-lg border-0 dashboard-card animate__animated animate__zoomIn">
                                <div class="card-header bg-gradient-primary text-white d-flex align-items-center">
                                    <h3 class="mb-0">Order Note</h3>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-hover m-0">
                                        <tbody>
                                            <!-- Status - Open -->
                                            <tr t-on-click="openRecords" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-folder-open text-primary"></i>
                                                </td>
                                                <td><b>Status - Open</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!-- Dept Incharge Approval Pending -->
                                            <tr t-on-click="dept_incharge_pending_Records" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-user-clock text-warning"></i>
                                                </td>
                                                <td><b>Dept Incharge Approval Pending</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.dept_in_charge_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!-- Top Management Approval Pending -->
                                            <tr t-on-click="top_managment_pending_Records" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-user-tie text-danger"></i>
                                                </td>
                                                <td><b>Top Management Approval Pending</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.top_management_name_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-lg border-0 dashboard-card animate__animated animate__zoomIn">
                                <div class="card-header bg-gradient-primary text-white d-flex align-items-center">
                                    <h3 class="mb-0">Purchase Order</h3>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-hover m-0">
                                        <tbody>
                                            <!-- Status - Open -->
                                            <tr t-on-click="po_openRecords" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-folder-open text-primary"></i>
                                                </td>
                                                <td><b>Status - Open</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.po_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!-- Dept Incharge Approval Pending -->
                                            <tr t-on-click="po_dept_incharge_pending_Records" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-user-clock text-warning"></i>
                                                </td>
                                                <td><b>Dept Incharge Approval Pending</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.po_dept_in_charge_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!-- Top Management Approval Pending -->
                                            <tr t-on-click="po_top_managment_pending_Records" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-user-tie text-danger"></i>
                                                </td>
                                                <td><b>Top Management Approval Pending</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.po_top_management_name_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-lg border-0 dashboard-card animate__animated animate__zoomIn">
                                <div class="card-header bg-gradient-primary text-white d-flex align-items-center">
                                    <h3 class="mb-0">Work Order</h3>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-hover m-0">
                                        <tbody>
                                            <!-- Status - Open -->
                                            <tr t-on-click="wo_openRecords" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-folder-open text-primary"></i>
                                                </td>
                                                <td><b>Status - Open</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.wo_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!-- Dept Incharge Approval Pending -->
                                            <tr t-on-click="wo_dept_incharge_pending_Records" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-user-clock text-warning"></i>
                                                </td>
                                                <td><b>Dept Incharge Approval Pending</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.wo_dept_in_charge_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!-- Top Management Approval Pending -->
                                            <tr t-on-click="wo_top_managment_pending_Records" class="dashboard-row">
                                                <td class="icon-col">
                                                    <i class="fas fa-user-tie text-danger"></i>
                                                </td>
                                                <td><b>Top Management Approval Pending</b></td>
                                                <td class="text-right">
                                                    <div class="record-count">
                                                        <span t-esc="state.wo_top_management_name_pendingCount" style="font-size: 20px;"/>
                                                        <span class="text-muted small" style="margin-left: 10px;">Records</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <br/><br/>

                    <!-- Dashboard Cards -->
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card shadow-lg border-0 dashboard-card animate__animated animate__zoomIn">
                                <div class="card-header bg-gradient-primary text-white d-flex align-items-center">
                                    <h3 class="mb-0">Indent Status</h3>
                                </div>
                                <div class="card-body p-0">
                                    <canvas t-ref="indentChart" id="indentChart"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-lg border-0 dashboard-card animate__animated animate__zoomIn">
                                <div class="card-header bg-gradient-primary text-white d-flex align-items-center">
                                    <h3 class="mb-0">Inventory Quick View</h3>
                                </div>
                                <div class="card-body p-0">
                                    <canvas t-ref="inventoryChart" id="inventoryChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </t>
            </div>
        </div>

        <!-- Include Font Awesome and Animate.css -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    </t>
</templates>