<?php include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php"); ?>


<div class="card-group dashboard-display">
    <div class="card border-right">
        <div class="card-body">
            <div class="d-flex d-lg-flex d-md-block align-items-center">
                <div>
                    <div class="d-inline-flex align-items-center">
                        <?php
                        $query = mysqli_query($conn, "SELECT COUNT(*) AS TOTAL FROM staff");
                        while ($spec = mysqli_fetch_assoc($query)) {
                            $totalStaff = $spec["TOTAL"];
                        ?>
                            <h2 class="text-dark mb-1 font-weight-medium all_total_candidates"><?php echo $spec["TOTAL"]; ?></h2>
                        <?php
                        }
                        ?>

                    </div>
                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">Total Active Staff</h6>
                </div>
                <div class="ml-auto mt-md-3 mt-lg-0">
                    <span class="opacity-7 text-muted"><i data-feather="user-plus"></i></span>
                </div>
            </div>
        </div>
    </div>
    <div class="card border-right">
        <div class="card-body">
            <div class="d-flex d-lg-flex d-md-block align-items-center">
                <div>
                    <?php
                    $query = mysqli_query($conn, "SELECT COUNT(*) AS TOTAL FROM staff_attendance WHERE StatusIndicating ='Present' AND Date = '" . DATE("Y-m-d") . "'");
                    while ($spec = mysqli_fetch_assoc($query)) {
                        $present = $spec["TOTAL"];
                    ?>
                        <h2 class="text-dark mb-1 w-100 text-truncate font-weight-medium all_total_agents"><?php echo $spec["TOTAL"]; ?></h2>
                    <?php
                    }
                    ?>

                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">Total Staff Present Today
                    </h6>
                </div>
                <div class="ml-auto mt-md-3 mt-lg-0">
                    <span class="opacity-7 text-muted"><i data-feather="user-plus"></i></span>
                </div>
            </div>
        </div>
    </div>
    <div class="card border-right">
        <div class="card-body">
            <div class="d-flex d-lg-flex d-md-block align-items-center">
                <div>
                    <div class="d-inline-flex align-items-center">
                        <?php
                        $query = mysqli_query($conn, "SELECT COUNT(*) AS TOTAL FROM staff_attendance WHERE StatusIndicating ='Late' AND Date = '" . DATE("Y-m-d") . "'");
                        while ($spec = mysqli_fetch_assoc($query)) {
                            $late = $spec["TOTAL"];
                        }
                        ?>

                        <h2 class="text-dark mb-1 font-weight-medium all_total_employers">
                            <?php
                            echo $absent = $totalStaff - ($present + $late);
                            ?>
                        </h2>

                    </div>
                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">Total Staff Absent Today</h6>
                </div>
                <div class="ml-auto mt-md-3 mt-lg-0">
                    <span class="opacity-7 text-muted"><i data-feather="file-plus"></i></span>
                </div>
            </div>
        </div>
    </div>
    <div class="card" style='background: rgb(226, 81, 81) !important;'>
        <div class="card-body">
            <div class="d-flex d-lg-flex d-md-block align-items-center">
                <div>

                    <h2 class="text-dark mb-1 font-weight-medium all_total_deployed" style='color:white !important;'><?php echo $late; ?></h2>

                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate" style='color:white !important;'>Total Late</h6>
                </div>
                <div class="ml-auto mt-md-3 mt-lg-0">
                    <span class="opacity-7 text-muted"><i data-feather="globe" style='color:white !important;'></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row dashboard-display">
    <div class="col-lg-6 col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Production Processes</h4>
                <div class="row">
                    <div class="col-md-6">
                        <div id="campaign-v2" class="mt-2" style="height:283px; width:100%;"></div>
                    </div>


                    <div class="col-md-6">
                        <ul class="list-style-none mb-0">
                            <li class="mt-1">
                                <i class="fas fa-circle text-primary font-10 mr-2"></i>
                                <span class="text-muted">Tacking</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_applied_pending">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:palevioletred"></i>
                                <span class="text-muted">Wrapping</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_shortlisted">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle text-success font-10 mr-2"></i>
                                <span class="text-muted">Fiber Filling</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_interview">0</span>
                            </li>

                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:deepskyblue;"></i>
                                <span class="text-muted">Ruff Filling</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_first_payment">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle text-warning font-10 mr-2"></i>
                                <span class="text-muted">Smooth Filing</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_hired">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle text-secondary font-10 mr-2"></i>
                                <span class="text-muted">Putty / Dressing</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_police_report">0</span>
                            </li>

                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:blueviolet"></i>
                                <span class="text-muted">Sanding</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_training">0</span>
                            </li>

                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:deepskyblue;"></i>
                                <span class="text-muted">Finishing</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_second_payment">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:darkkhaki"></i>
                                <span class="text-muted">Spraying</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_travel_documents">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:darkslategrey"></i>
                                <span class="text-muted">Packaging</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_deploy">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:tomato"></i>
                                <span class="text-muted">Quality Inspection</span>
                                <span class="text-dark float-right font-weight-medium all_skilled_unskilled_deployed">0</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6 col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Stock List</h4>
                <div class="row">
                    <div class="col-md-6">
                        <div id="campaign-v3" class="mt-2" style="height:283px; width:100%;"></div>
                    </div>

                    <div class="col-md-6">
                        <ul class="list-style-none mb-0">
                            <li class="mt-1">
                                <i class="fas fa-circle text-primary font-10 mr-2"></i>
                                <span class="text-muted warehouseName1"></span>
                                <span class="text-dark float-right font-weight-medium warehouseQty1"></span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:palevioletred"></i>
                                <span class="text-muted warehouseName2"></span>
                                <span class="text-dark float-right font-weight-medium warehouseQty2"></span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle text-success font-10 mr-2"></i>
                                <span class="text-muted warehouseName3"></span>
                                <span class="text-dark float-right font-weight-medium warehouseQty3"></span>
                            </li>

                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:deepskyblue;"></i>
                                <span class="text-muted warehouseName4">Warehouse 4</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty4">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle text-warning font-10 mr-2"></i>
                                <span class="text-muted warehouseName5">Warehouse 5</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty5">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle text-secondary font-10 mr-2"></i>
                                <span class="text-muted warehouseName6">Warehouse 6</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty6">0</span>
                            </li>

                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:blueviolet"></i>
                                <span class="text-muted warehouseName7">Warehouse 7</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty7">0</span>
                            </li>

                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:deepskyblue;"></i>
                                <span class="text-muted warehouseName8">Warehouse 8</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty8">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:darkkhaki"></i>
                                <span class="text-muted warehouseName9">Warehouse 9</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty9">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:darkslategrey"></i>
                                <span class="text-muted warehouseName10">Warehouse 10</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty10">0</span>
                            </li>
                            <li class="mt-1">
                                <i class="fas fa-circle font-10 mr-2" style="color:tomato"></i>
                                <span class="text-muted warehouseName11">Warehouse 11</span>
                                <span class="text-dark float-right font-weight-medium warehouseQty11">0</span>
                            </li>
                        </ul>
                    </div>

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


    <div class="col-lg-12 col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title current_year"> </h4>
                <div class="net-income mt-4 position-relative" style="height:294px;"></div>
                <ul class="list-inline text-center mt-5 mb-2">
                    <li class="list-inline-item text-muted font-italic">Production this month</li>
                </ul>
            </div>
        </div>
    </div>

</div>

<script src="<?php echo $website_name; ?>/dist/js/custom.min.js"></script>
<script src="<?php echo $website_name; ?>/dist/js/pages/dashboards/dashboard1.min.js"></script>

<script>
    $.getJSON(domain_api + "/dashboard/dashboard.php", function(data) {
        var results = data;
        $(".warehouseName1").html(results.warehouseName1);
        $(".warehouseQty1").html(results.warehouseQty1);
        $(".warehouseName2").html(results.warehouseName2);
        $(".warehouseQty2").html(results.warehouseQty2);
        $(".warehouseName3").html(results.warehouseName3);
        $(".warehouseQty3").html(results.warehouseQty3);


        // $.each(results.countries_count, function(key, value) {
        //     $(".countries_count").append(
        //         '<div class="row mb-3 align-items-center">' +
        //         '<div class="col-md-4 text-right">' +
        //         ' <span class="text-muted font-14">' + value.nationality + '</span>' +
        //         '</div>' +

        //         '<div class="col-md-5">' +
        //         '<div class="progress" style="height: 5px;">' +
        //         '<div class="progress-bar" role="progressbar" style="width: 100%; background:palevioletred;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>' +
        //         '</div>' +
        //         '</div>' +

        //         '<div class="col-md-3 text-left">' +
        //         '<span class="mb-0 font-14 text-dark font-weight-medium">' + value.TOTAL + '</span>' +
        //         '</div>' +
        //         '</div>'


        //     );
        // });
    });

</script>