<div style="font-family: Lucida Bright Demibold;">
    <?php

    ?>
    <style>
        .button-36 {
            /* background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%); */
            border-radius: 8px;
            border-style: none;
            box-sizing: border-box;
            color: #FFFFFF;
            cursor: pointer;
            flex-shrink: 0;
            font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            font-size: 16px;
            font-weight: 500;
            height: 4rem;
            padding: 0 1.6rem;
            text-align: center;
            text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
            transition: all .5s;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }

        .button-36:hover {
            box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
            transition-duration: .1s;
        }

        @media (min-width: 768px) {
            .button-36 {
                padding: 0 2.6rem;
            }
        }
    </style>
    <?php

    if ($_REQUEST['health_index_year'] == '') {
        $_REQUEST['health_index_year'] = date('Y');
    }
    $sixLevel = "Excellent health";
    $sixDescription = "Follow health related prevention and maintain health";

    $fiveLevel = "Good health";
    $fiveDescription = "Follow health related prevention";

    $fourLevel = "Average health";
    $fourDescription = "Follow up healthy lifestyle";

    $threeLevel = "Below average health";
    $threeDescription = "Needs lifestyle changes";

    $secondLevel = "Poor health";
    $secondDescription = "Need urgent improvement";

    $fisrtLevel = "Very poor health";
    $fisrtDescription = "Need very urgent modifications";

    $firstColor = '#ff0000';
    $secondColor = '#ff5733';
    $thirdColor = '#f4b183';
    $fourthColor = '#9dc3e6';
    $fifthColor = '#92d050';
    $sixthColor = '#00b050';
    include "health_index_table.php";

    ?>
    <center>

        <div>
            <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                <table width="20%" class="table table-bordered">
                    <tr>
                        <!-- <td>
<label for="health_index_date_from">From:</label>
<input type="date" class="form-control" id="health_index_date_from" name="health_index_date_from" value="<?php echo $_REQUEST['health_index_date_from'] ?>">
</td>
<td>
<label for="health_index_date_to">To:</label>
<input type="date" class="form-control" id="health_index_date_to" name="health_index_date_to" value="<?php echo $_REQUEST['health_index_date_to'] ?>">
</td> -->

                        <td>
                            <label for="health_index_year">Year Wise</label>
                            <input type="number" class="form-control" id="health_index_year" name="health_index_year" min="1900" max="2100" step="1" value="<?php echo $_REQUEST['health_index_year'] ?>">
                            <script>
                                document.getElementById('health_index_year').addEventListener('input', function() {
                                    let value = this.value;
                                    if (value.length > 4) {
                                        this.value = value.slice(0, 4);
                                    }
                                });
                            </script>
                        </td>
                        <td>
                            <button type="submit" class="btn btn-primary">GO</button>
                        </td>
                    </tr>
                </table>
            </form>




    </center>


    <div sy class="row">

        <center>

            <form method="post" name="show_data_form" id="show_data_form">
                <input type="hidden" name="color_ids" id="color_ids">

            </form>
            <h3 style="color: blue; font-size: 25px; font-family: 'Times New Roman', Times, serif">What type of data do you want to see? Please choose one of the following options</h3>
            <button style="background-color: <?php echo $firstColor ?>;" onclick="colorStore(this.value)" value="1" id="1_Health_id" class="button-36"><?php echo $fisrtLevel; ?></button>
            <button style="background-color: <?php echo $secondColor ?>;" onclick="colorStore(this.value)" value="2" id="2_Health_id" class="button-36"><?php echo $secondLevel; ?></button>
            <button style="background-color: <?php echo $thirdColor ?>;" onclick="colorStore(this.value)" value="3" id="3_Health_id" class="button-36"><?php echo $threeLevel; ?></button>
            <button style="background-color: <?php echo $fourthColor ?>;" onclick="colorStore(this.value)" value="4" id="4_Health_id" class="button-36"><?php echo $fourLevel; ?></button>
            <button style="background-color: <?php echo $fifthColor ?>;" onclick="colorStore(this.value)" value="5" id="5_Health_id" class="button-36"><?php echo $fiveLevel; ?></button>
            <button style="background-color: <?php echo  $sixthColor ?>;" onclick="colorStore(this.value)" value="6" id="6_Health_id" class="button-36"><?php echo $sixLevel; ?></button>
            <br>
            <br>
            <br>
            <center>
                <!-- Button trigger modal -->
                <button type="button" class="button-36" style="background-color: #6495ED;" data-toggle="modal" data-target="#health_index_model">
                    Click To View Health Index Data
                </button>
            </center>


        </center>
        <br>
        <br>
        <?php
        $year = $_REQUEST['health_index_year'];
        ?>
        <div class="col-lg-6">
            <h2 style="padding-top: 20px; padding-bottom: 20px; background-color: black; color: white; text-align: center; font-family: Lucida Bright Demibold;">Health Index of Overall Organization - <?php echo $year ?></h2>
            <?php
            include "health_index_totalcount.php";

            // echo implode(",", $ThirdCheckupId);
            ?>


            <script>
                function colorStore(color) {
                    // console.log(color + "  COLOR");
                    var FirstCheckupId = '<?php echo implode(",", $FirstCheckupId) ?>';
                    var SecondCheckupId = '<?php echo implode(",", $SecondCheckupId) ?>';
                    var ThirdCheckupId = '<?php echo implode(",", $ThirdCheckupId) ?>';
                    var FourthCheckupId = '<?php echo implode(",", $FourthCheckupId) ?>';
                    var FiveCheckupId = '<?php echo implode(",", $FiveCheckupId) ?>';
                    var SixCheckupId = '<?php echo implode(",", $SixCheckupId) ?>';

                    console.log(FourthCheckupId);

                    if (color == 1) {

                        $("#color_ids").val(FirstCheckupId);

                    }
                    if (color == 2) {
                        $("#color_ids").val(SecondCheckupId);
                    }
                    if (color == 3) {
                        $("#color_ids").val(ThirdCheckupId);
                    }
                    if (color == 4) {
                        $("#color_ids").val(FourthCheckupId);
                    }
                    if (color == 5) {
                        $("#color_ids").val(FiveCheckupId);
                    }
                    if (color == 6) {
                        $("#color_ids").val(SixCheckupId);
                    }

                    // $("#color_ids").val(color);
                    if ($("#color_ids").val() != "") {
                        $("#show_data_form").attr('target', '_blank');
                        $("#show_data_form").attr('method', 'POST');
                        $("#show_data_form").attr('action', 'approved_medical_examination.php');
                        $("#show_data_form").submit();
                    }

                }
            </script>
        </div>
        
        <div class="col-lg-6">

            <?php
            // echo print_r($Gender_Array);
            ?>

            <h2 style="padding-top: 20px; padding-bottom: 20px; background-color: black; color: white; text-align: center;font-family: Lucida Bright Demibold;">Health Index Trend </h2>
            <?php

            include("health_index_trend.php");

            ?>
        </div>
    </div>

    <div class="row">
        <center>

        </center>

        <div class="col-lg-6" style="font-family: Lucida Bright Demibold;">
           
            <?php

            include("health_index_trend_count.php");

            ?>
        </div>

        <div class="col-lg-6" style="font-family: Lucida Bright Demibold; background-color: white;"  >
        <?php
        include "health_index_totalcount_data.php";
        ?>
        </div>

    </div>

    <div class="row">
        <center>
            <br>
            <h2 style="padding-top: 20px; padding-bottom: 20px; background-color: black; color: white; font-family: Lucida Bright Demibold;">Health Index Trend - <?php echo $year ?></h2>
            <br>
        </center>



        <div class="col-lg-12">
            <?php
            include("age_wise_health_index_trend.php");
            ?>
        </div>


    </div>

    <?php
    include("gender_age_department_distribution.php");
    ?>