<?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">
                <!-- Company Logo -->
                <div class="row mb-4">
                    <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="sos-quick-links mb-4">
                <h3>Quick Links</h3>
                <div class="d-flex flex-wrap justify-content-start gap-3">
                    <a t-att-href="state.quickLinkUrls.sos_material" class="quick-link-item text-center">
                        <i class="fa fa-boxes fa-2x" style="color: #163885;"></i>
                        <p>Stores</p>
                    </a>
                    <a t-att-href="state.quickLinkUrls.sos_ir" class="quick-link-item text-center">
                        <i class="fa fa-mail-reply fa-2x" style="color: brown;"></i>
                        <p>Inward Form</p>
                    </a>
                    <a t-att-href="state.quickLinkUrls.sos_grn" class="quick-link-item text-center">
                        <i class="fa fa-sticky-note fa-2x" style="color:rgb(10 97 100);"></i>
                        <p>GRN Form</p>
                    </a>
                    <a t-att-href="state.quickLinkUrls.sos_iqi" class="quick-link-item text-center">
                        <i class="fa fa-check-square fa-2x" style="color: #ff2cc8;"></i>
                        <p>IQI Form</p>
                    </a>
                    <a t-att-href="state.quickLinkUrls.sos_fir" class="quick-link-item text-center">
                        <i class="fa fa-list fa-2x" style="color:rgb(158, 0, 13);"></i>
                        <p>FIR Form</p>
                    </a>
                    <a t-att-href="state.quickLinkUrls.sos_ncmr" class="quick-link-item text-center">
                        <i class="fa fa-indent fa-2x" style="color:rgb(29, 4, 252);"></i>
                        <p>NCMR Form</p>
                    </a>
                    <a t-att-href="state.quickLinkUrls.sos_dc" class="quick-link-item text-center">
                        <i class="fa fa-truck fa-2x" style="color:rgb(5, 63, 13);"></i>
                        <p>DC Form</p>
                    </a>
                    <a t-att-href="state.quickLinkUrls.sos_dock_audit" class="quick-link-item text-center">
                        <i class="fa fa-object-group fa-2x" style="color:rgb(92, 13, 43);"></i>
                        <p>Dock Audit</p>
                    </a>
                </div>
            </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><br></br>
                <!-- Dashboard Cards -->
                <div class="row">
                   
                    
                     <!-- col-6 Ending-->
                      <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>
                    <!-- col-6 Ending-->
                </div>
            </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>