<?PHP
//set_time_limit(300);
include 'connection.php';
error_reporting(0);



$member_get = "
   SELECT MEM_NAME, a.MEM_MOBILE_NO, COLL_ROLL_NO, YR_OF_PASS, LM_NO,substr(a.mem_mobile_no,1,3)||'****'||substr(a.mem_mobile_no,8,4) mem_mobile_hide ,nvl(reg_Status,'N') reg_Status
    FROM NAA_MEMBERS a, (select mem_mobile_no, 'Y' reg_Status from naa_events_reg where event_code='05' and payment_status='P') b
    WHERE MEM_TYPE = 'L'
    and a.mem_mobile_no=b.mem_mobile_no(+)
";
// echo "$member_get";

// Parse the SQL query
$parse = ociparse($conn, $member_get);
// echo "$parse";

// Execute the query
oci_execute($parse);



// Initialize an array to store the fetched data
$members_data = [];

// Fetch the rows and store them in the $members_data array
while ($row = oci_fetch_assoc($parse)) {
    $members_data[] = $row; // Add each row to the array
}





// $sql4 = "SELECT count(*) as TOT_MEM FROM NAA_EVENTS_REG WHERE EVENT_CODE = '02' AND PAYMENT_STATUS = 'P'";
$sql4 = "SELECT SUM(NO_OF_MEM + NO_OF_SPOUSE + NO_OF_CHILD) AS TOTAL_MEMBERS, SUM(NO_OF_MEM) AS TOTAL_ALUMNI FROM NAA_EVENTS_REG a, naa_members b
WHERE a.EVENT_CODE = '05' AND a.PAYMENT_STATUS = 'P'
and a.mem_id=b.mem_id
--and b.yr_of_pass<'2026'";
$parse = ociparse($conn, $sql4);
oci_execute($parse);

while ($row = oci_fetch_assoc($parse)) {
    $TOT_MEM[] = $row;
}

// var_dump($cadre);
oci_free_statement($parse);


$sql5 = "SELECT to_char(UPDATE_DATE,'DD/MM/RRRR  HH:MI:SS') LD
FROM NAA_EVENTS_REG
WHERE EVENT_CODE = '05' AND PAYMENT_STATUS = 'P' AND UPDATE_DATE IS NOT NULL
ORDER BY UPDATE_DATE ASC";

$parse = ociparse($conn, $sql5);
oci_execute($parse);


while ($row = oci_fetch_assoc($parse)) {
    $tr_time = $row['LD'];
}



$sql5 = "SELECT NAA_EVENTS_REG.UPDATE_DATE,NAA_EVENTS_REG.NO_OF_MEM, NAA_EVENTS_REG.REG_NO, NAA_EVENTS_REG.NO_OF_SPOUSE, NAA_EVENTS_REG.NO_OF_CHILD,  NAA_EVENTS_REG.PAYMENT_STATUS, NAA_EVENTS_REG.EVENT_CODE, NAA_MEMBERS.MEM_NAME,NAA_MEMBERS.YR_OF_PASS, NAA_MEMBERS.COLL_ROLL_NO 
FROM NAA_EVENTS_REG, NAA_MEMBERS WHERE NAA_EVENTS_REG.EVENT_CODE = '05' AND NAA_EVENTS_REG.PAYMENT_STATUS = 'P' AND NAA_EVENTS_REG.MEM_ID = NAA_MEMBERS.MEM_ID   AND NAA_EVENTS_REG.UPDATE_DATE IS NOT NULL
ORDER BY UPDATE_DATE DESC
FETCH FIRST 10 ROWS ONLY";

$parse = ociparse($conn, $sql5);
oci_execute($parse);


while ($row = oci_fetch_assoc($parse)) {
    $table[] = $row;
}



/* Retrive batch */
$curs = oci_new_cursor($conn);

$stid = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_ADM_batch(:cur_data); end;");

oci_bind_by_name($stid, ":cur_data", $curs, -1, OCI_B_CURSOR);

oci_execute($stid);
oci_execute($curs);

while (($row = oci_fetch_array($curs, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $adm_batch[] = $row;
}





// var_dump($cadre);
oci_free_statement($parse);

$report = "";


$bool = false;
/* Data Filter Start */


// $CAT_CODE = $_POST['CAT_CODE'];
$DGR_CODE = 'P';
// $CHANNEL = $_POST['CHANNEL'];
$REPORT_LEVEL_CODE = 1;



/* Start Procedure for GRAPH */
$curs_sql_graph = oci_new_cursor($conn);

$sql_graph = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DF_GRAPH(:cur_data,:CAT_CODE,:DGR_CODE,:CHANNEL,:REPORT_LEVEL_CODE); end;");

oci_bind_by_name($sql_graph, ":cur_data", $curs_sql_graph, -1, OCI_B_CURSOR);
oci_bind_by_name($sql_graph, ":CAT_CODE", $CAT_CODE, -1, SQLT_CHR);
oci_bind_by_name($sql_graph, ":DGR_CODE", $DGR_CODE, -1, SQLT_CHR);
oci_bind_by_name($sql_graph, ":CHANNEL", $CHANNEL, -1, SQLT_CHR);
oci_bind_by_name($sql_graph, ":REPORT_LEVEL_CODE", $REPORT_LEVEL_CODE, -1, SQLT_CHR);


oci_execute($sql_graph);
oci_execute($curs_sql_graph);

while (($row_curs_sql_graph = oci_fetch_array($curs_sql_graph, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $graph_output[] = $row_curs_sql_graph;
}
/* End Procedure for GRAPH */


/* Total Donation for GRAPH */
$curs_don = oci_new_cursor($conn);

$sql_donation = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Total_Donation_DATA(:cur_data); end;");

oci_bind_by_name($sql_donation, ":cur_data", $curs_don, -1, OCI_B_CURSOR);



oci_execute($sql_donation);
oci_execute($curs_don);

while (($row_curs_don = oci_fetch_array($curs_don, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $tot_donation[] = $row_curs_don;
}
/* Total Donation for GRAPH */



/*  Donation List for GRAPH */
$curs = oci_new_cursor($conn);

$stid = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Doantion_list(:cur_data); end;");


oci_bind_by_name($stid, ":cur_data", $curs, -1, OCI_B_CURSOR);


oci_execute($stid);
oci_execute($curs);


while (($row = oci_fetch_array($curs, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {


    $donation_list[] = $row;
}
/* Donation List for GRAPH */
// $acb = $donation_list[0]['YR_OF_PASS'];
// echo "$acb";






/* Start Procedure for GRAPH Table */
$curs11 = oci_new_cursor($conn);

$stid11 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DF_GRAPH_DATA(:cur_data,:CAT_CODE,:DGR_CODE,:CHANNEL,:REPORT_LEVEL_CODE); end;");

oci_bind_by_name($stid11, ":cur_data", $curs11, -1, OCI_B_CURSOR);
oci_bind_by_name($stid11, ":CAT_CODE", $CAT_CODE, -1, SQLT_CHR);
oci_bind_by_name($stid11, ":DGR_CODE", $DGR_CODE, -1, SQLT_CHR);
oci_bind_by_name($stid11, ":CHANNEL", $CHANNEL, -1, SQLT_CHR);
oci_bind_by_name($stid11, ":REPORT_LEVEL_CODE", $REPORT_LEVEL_CODE, -1, SQLT_CHR);


oci_execute($stid11);
oci_execute($curs11);

while (($row11 = oci_fetch_array($curs11, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $graph_table_output[] = $row11;
    $graph_table_output_2 = $row11;
}
/* End Procedure for GRAPH Table */
$mobileSearch = $_POST['mobile_search'] ?? '';

if (!empty($mobileSearch)) {
    // Prepare and execute the main query
    $sqlmobilesrc = "SELECT * FROM NAA_MEMBERS WHERE MEM_MOBILE_NO = :mobileSearch AND MEM_TYPE = 'L'";
    $parse = oci_parse($conn, $sqlmobilesrc);
    oci_bind_by_name($parse, ':mobileSearch', $mobileSearch);

    if (oci_execute($parse)) {
        if (oci_fetch($parse)) {
            // Check for registration status
            $memberGetQuery = "
                SELECT MEM_NAME, a.MEM_MOBILE_NO, COLL_ROLL_NO, YR_OF_PASS, LM_NO, 
                       substr(a.mem_mobile_no,1,3)||'*'||substr(a.mem_mobile_no,8,4) AS mem_mobile_hide,
                       NVL(reg_Status, 'N') AS reg_Status
                FROM NAA_MEMBERS a
                LEFT JOIN (SELECT mem_mobile_no, 'Y' AS reg_Status
                           FROM naa_events_reg
                           WHERE event_code='05' AND payment_status='P') b
                ON a.mem_mobile_no = b.mem_mobile_no
                WHERE MEM_TYPE = 'L' AND a.mem_mobile_no = :mobileSearch
            ";
            $memberParse = oci_parse($conn, $memberGetQuery);
            oci_bind_by_name($memberParse, ':mobileSearch', $mobileSearch);

            if (oci_execute($memberParse) && oci_fetch($memberParse)) {
                $regStatus = oci_result($memberParse, 'REG_STATUS');

                if ($regStatus === 'Y') {
                    // Already registered message
                    echo "
                        <!DOCTYPE html>
                        <html lang='en'>
                        <head>
                            <meta charset='UTF-8'>
                            <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                            <title>Already Registered</title>
                            <script src='https://cdn.jsdelivr.net/npm/sweetalert2@11'></script>
                        </head>
                        <body>
                            <script>
                                document.addEventListener('DOMContentLoaded', function () {
                                    Swal.fire({
                                        icon: 'info',
                                        title: 'Already Registered',
                                        text: 'You are already registered for this event.',
                                        confirmButtonText: 'Go to Main Page',
                                        confirmButtonColor: '#3085d6',
                                        iconColor: '#3085d6',
                                    }).then(() => {
                                        window.location.href = 'https://ndcaa.mcampusbd.com/';
                                    });
                                });
                            </script>
                        </body>
                        </html>
                    ";
                    exit;
                } else {
                    // Redirect if not already registered
                    $redirectUrl = "https://ndcaa.mcampusbd.com/ndc_75_year_alumni_server/?mobile=" . urlencode($mobileSearch);
                    header("Location: $redirectUrl");
                    exit;
                }
            }
        }  else {
            // Store the phone number in the database if no matching record is found
            $insertSql = "INSERT INTO NAA_MEMBERS (MEM_MOBILE_NO) VALUES (:mobileSearch)";
            $insertParse = oci_parse($conn, $insertSql);
            oci_bind_by_name($insertParse, ':mobileSearch', $mobileSearch);
        
            if (oci_execute($insertParse)) {
                // Redirect to the URL with the phone number as a query parameter
                $redirectUrl = "https://ndcaa.mcampusbd.com/ndc_75_year_alumni_server/index.php?mobile=" . urlencode($mobileSearch);
                header("Location: $redirectUrl");
                exit;
            } else {
                // Handle error in database insertion
                $error = oci_error($insertParse);
                echo '<p>Error inserting phone number: ' . htmlspecialchars($error['message']) . '</p>';
            }
        }
    } else {
        // Handle query execution error
        $error = oci_error($parse);
        echo '<p>Error executing query: ' . htmlspecialchars($error['message']) . '</p>';
    }
    oci_free_statement($parse);
}




// batch wise registration 
$sql4 = "SELECT * FROM NAA_YEAR_MST ORDER BY YEAR_CODE DESC";
$parse = ociparse($conn, $sql4);
oci_execute($parse);

while ($row = oci_fetch_assoc($parse)) {
    $batch[] = $row;
}

// var_dump($cadre);
oci_free_statement($parse);


if (isset($_POST['submit'])) {

    $MEM_MOBILE_NO = $_POST['MEM_MOBILE_NO'];
    $EVENT_CODE = '05';



    /* Start Procedure for Report */
    $curs = oci_new_cursor($conn);
    $curs1 = oci_new_cursor($conn);

    $stid = oci_parse($conn, "begin PKG_event_reg.DPD_naa_event_reg_Friends(:cur_data,:cur_dataF,:MEM_MOBILE_NO,:EVENT_CODE); end;");


    oci_bind_by_name($stid, ":cur_data", $curs, -1, OCI_B_CURSOR);
    oci_bind_by_name($stid, ":cur_dataF", $curs1, -1, OCI_B_CURSOR);
    oci_bind_by_name($stid, ":MEM_MOBILE_NO", $MEM_MOBILE_NO, -1, SQLT_CHR);
    oci_bind_by_name($stid, ":EVENT_CODE", $EVENT_CODE, -1, SQLT_CHR);



    oci_execute($stid);
    oci_execute($curs);
    oci_execute($curs1);


    while (($row = oci_fetch_array($curs, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

        $user_friend[] = $row;
    }


    while (($row = oci_fetch_array($curs1, OCI_ASSOC + OCI_RETURN_NULLS)) !== false) {
        $output1[] = $row;
    }


    echo '<script>window.location.href = "http://ndcaa.mcampusbd.com/#batch";</script>';


    // $MEM_ID = $user_friend[0]['NO_OF_MEM'];
    // echo "$MEM_ID";
}



if (isset($_POST['submit1'])) {
    /* START Procedure for GRAPH 2*/
    // $CAT_CODE = $_POST['CAT_CODE'];
    $BATCH = $_POST['CAT_CODE'];




    /* Start Procedure for GRAPH */
    $curs_sql_graph2 = oci_new_cursor($conn);

    $sql_graph2 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DAy_wise_Reg_GRAPH_DATA(:cur_data,:p_batch); end;");

    oci_bind_by_name($sql_graph2, ":cur_data", $curs_sql_graph2, -1, OCI_B_CURSOR);
    oci_bind_by_name($sql_graph2, ":p_batch", $BATCH, -1, SQLT_CHR);



    oci_execute($sql_graph2);
    oci_execute($curs_sql_graph2);

    while (($row_curs_sql_graph2 = oci_fetch_array($curs_sql_graph2, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

        $graph_output2[] = $row_curs_sql_graph2;
    }

    echo '<script>window.location.href = "http://ndcaa.mcampusbd.com/#graph5";</script>';

    /* End Procedure for GRAPH 2*/
}











$bool = true;

/* Data Filter End */

?>

<!DOCTYPE html>


<html lang="en">

<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-GQPGJ4YN30"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'G-GQPGJ4YN30');
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>75 th Foundation Of Holy Cross Girls High School</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


    <!-- pdf and excel data css starts  -->
    <!-- datatable  -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
    <link
        href="https://nightly.datatables.net/buttons/css/buttons.dataTables.css?_=c6b24f8a56e04fcee6105a02f4027462.css"
        rel="stylesheet" type="text/css" />
    <!-- pdf and excel data css ends  -->
    <link rel="stylesheet" href="timer.css">
    <!-- Add Font Awesome CSS (you can customize the link according to your needs) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>
</head>

<style>
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .queen {
        margin-top: 0px;
    }

    @media only screen and (max-width: 900px) {
        @media only screen and (max-width: 900px) {
            .queen {
                margin-top: 70px;
            }

            .img {
                order: -1;
            }

            .main {
                order: 0;
            }
        }
    }

    /* for excel button design start */
    /* .dt-buttons {
            visibility: hidden;
        }

        .dt-buttons button:after {

            content: 'Download Excel';
            visibility: visible;
            background-color: #11c7e0;
            margin-left: 200px;
            padding: 10px;
            color: white;
            border-radius: 11px;
            font-size: 15px;
        }

        .btn .btn-info {
            margin-bottom: -35px !important;
            margin-left: 385px !important;
        } */


    .pdf-header {
        background-color: #007bff;
        color: #fff;
    }

    /* Add this style for the Excel button image */
    .excel-button::after {
        content: url('./images/xls.png');
        /* Replace with the path to your Excel icon */
        float: right;
        margin-top: 3px;
        margin-left: 10px;
        width: 20px;
        /* Adjust the width as needed */
        height: 20px;
    }



    .pdf-button::after {
        content: url('./images/pdf.png');
        /* Replace with the path to your Excel icon */
        float: right;
        margin-top: 3px;
        margin-left: 10px;
        width: 20px;
        /* Adjust the width as needed */
        height: 20px;
    }

    /* for excel button design start */


    .header img {
        float: left;
        width: 105px;
        height: 105px;
        /* background: #555; */
    }

    .header h2,
    h5 {
        position: relative;
    }

    @media only screen and (max-width: 600px) {




        .header img {
            float: left;
            width: 80px;
            height: 80px;
            /* background: #555; */
        }

        .header h1,
        h2,
        h3,
        h4,
        h5 {
            position: relative;
            font-size: 15px;
            text-align: center;
            font-weight: bold;
        }

    }
</style>

<body >
    <!-- all validation starts  -->
    <script>
        function myfun() {

            var massage_mobile = document.getElementById("MEM_MOBILE_NO").value;




            var mobile = /^[0-9]{11}$/;






            if (mobile.test(massage_mobile)) {
                document.getElementById("e_massage_mobile").innerHTML = " ";
            } else {
                document.getElementById("e_massage_mobile").innerHTML = "Mobile Number should be 11 digit";
                return false;
            }

        }
    </script>
    <!-- all validation ends  -->

    <style>
        body {
            margin: 20px auto;
            height: 100%;
            /*color:rgb(235, 0, 0);*/
            background-image:url(images/Holy_Cross.png);
            opacity: 0.9;
            background-color: #e3ebdf;
            background-size: 600px;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
        }
    </style>

    <div class="container-fluid">
        <div class="card" style="height: auto;background-color: #FFF;">
            <div class="card-body ">
                <div class="row back">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <header class="col-lg-12 col-md-12 col-sm-12 text-center">

                            <div class="header">
                                <img src="images/Holy_Cross.png" alt="logo" width="100px" height="100px" style=" border: 3px solid black"  />
                                <!-- <h4 style="text-align: center; color: #0c0a8a; font-weight: bold;">NOTRE DAME COLLEGE,
                                    DHAKA </h4> -->
                                <h3 style="color: #ddbe4d; font-style: oblique;">
                                75<sup style="font-size: 0.6em; vertical-align: super;">th</sup> Foundation Of Holy Cross Girls High School
                               </h3>

                            </div>

                        </header>

                    </div>
                    <div class="col-md-2"></div>

                </div>
                <hr>







                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 queen">
                        <div class="col-md-12 col-lg-12 col-sm-12 img">
                            <div>
                                <img src="images/Holy_Cross.png" width="200" height="200" alt="">
                            </div>
                        </div>

                        <div id="countdown">
        
            <div class="countdown-blocks"></div>
        </div>
                    </div>

                    



                  <!-- <div class="col-md-5 col-lg-5 col-sm-12">
                        <div class="col-md-3 col-lg-3 col-sm-12">
                            <div class="col-md-12 col-lg-12 col-sm-12" style="margin-top: 70px;">
                                <a href="http://ndcaa.mcampusbd.com/Profile_Update/" target="_blank"
                                    class="btn btn-success"
                                    style="width: 220px; margin-top: 15px;background-color:green; color: white; font-weight: bold;text-align:center;">
                                    Profile Update</a>
                            </div>

                        </div>


                    </div>  -->

                    <div class="col-md-6 col-lg-6 col-sm-12" style="margin-top: 20px;">

                        <!-- <a href="http://localhost:8080/ndc_75_main_page/ndc_75_year_alumni_server/" target="_blank"
                                    class="btn btn-success"
                                    style="width: 220px; margin-top: 15px;background-color:green; color: white; font-weight: bold;text-align:center;">
                                    Registration</a> -->




                        <h6  style="text-align: justify; color: black;font-size: 20px">Dear Alumni,
                          With immense joy and gratitude,we are delighted to announce that the 75th Foundation Anniversary of Holy 
                         Cross Girls High School going to be celebrated on January 08 to 10, 2026 at the school premise. </h6>


                        <!-- <form action="" method="POST" class="mt-4">
                            <div class="input-group">
                                 <input type="text" name="mobile_search" class="form-control" 
                                    placeholder="Enter mobile number" aria-describedby="basic-addon2" required>
                               
                                   <button class="btn btn-success" type="submit" style="margin-left: 170px">Registration</button> 
                                   <a class="btn btn-success" href="event.php" role="button" style="margin-left: 170px">Registration</a>
                                
                            </div>

                            <div class="input-group m-5" >
                                <input type="text" name="mobile_search" class="form-control"
                                    placeholder="Enter mobile number" aria-describedby="basic-addon2" required>
                               
                                   <button class="btn btn-success" type="submit" style="margin-left: 170px">Registration</button>
                                   <a class="btn btn-success" href="profile_update" role="button" style="margin-left: 170px">profile update</a>
                                
                            </div>
                        </form> -->


                        <form action="" method="POST" class="mt-4">
                            <div class="d-flex justify-content-center">
                                <a class="btn btn-success me-3" href="event.php" role="button">Registration</a>
                                <a class="btn btn-success ml-4" href="profile_update" role="button" >Profile Update</a>
                            </div>
                        </form>




                        <div style="margin-top: 30px" >
                        <!-- <h3 class="" style="margin-top: 10px;color: blue">Registration Fees:3000 Tk</h3> -->
                        <!-- <h6 class="text-center" style="margin-top: 10px;color: blue">সহধর্মিণী- ১০০০ টাকা</h6>
                        <h6 class="text-center" style="margin-top: 10px;color: blue">সন্তান-৫০০ টাকা</h6> -->
                         </div>
                         <!-- <h6 class="text-align: center" style="margin-top: 10px;color:red">রেজিস্ট্রেশন তথ্য সংক্রান্ত জটিলতার সমাধানের জন্য যোগাযোগ করুনঃ০১৭১৮৯২৯২৯৭</h6> -->
                         
                          <h3 class="text-align: center" style="margin-top: 80px;color:red; font-size: 20px"></h3> 
                          <h2> &diams;&diams;&diams;Registration Fees:3000 Tk &diams;&diams;&diams;</h2>


                         </div>



                   


                    

                <!-- div class="col-sm-12 col-md-12" style="margin-top: 40px;">
                        <div class="card shadow mb-4">



                            <div class="card-body">
                                <div class="d-flex justify-content-center p-1" style="background-color: #e8b742;">
                                    <h5 class="">All Valid Life Member List</h5>



                                </div>




                                <div class="table-responsive" style="margin-top: 30px; height: 325px;">
    <table class="table table-bordered" id="example">
        <thead>
            <tr>
                <th scope="col" style="text-align: center; color:#BF4196;">SL No.</th>
                <th scope="col" style="text-align: center; color:#BF4196;">Member Name</th>
                <th scope="col" style="text-align: center; color:#BF4196;">Mobile No</th>
                <th scope="col" style="text-align: center; color:#BF4196;">College Roll No</th>
                <th scope="col" style="text-align: center; color:#BF4196;">Passing Year</th>
                <th scope="col" style="text-align: center; color:#BF4196;">LM NO</th>
                
            </tr>
        </thead>
        <tbody>
            <?php
            // Initialize serial number
            $serialNumber = 1;

            // Loop through the fetched data and display it in the table
            foreach ($members_data as $member) {
                ?>
                <tr>
                    <td style="text-align: center; color:#66aa00; font-weight: bold;">
                        <?php echo $serialNumber; ?>
                    </td>
        
                    <td scope="row" style="text-align: center; color:#C1AD1F; font-weight: bold;">
                        <?php echo $member['MEM_NAME']; ?>
                    </td>

                    <td scope="row" style="text-align: center; color:#5ef23d ; font-weight: bold;">
                        <?php echo $member['MEM_MOBILE_NO']; ?>
                    </td>


                    <td scope="row" style="text-align: center; color:#3ddff2; font-weight: bold;">
                        <?php echo $member['COLL_ROLL_NO']; ?>
                    </td>
                    
                    <td style="text-align: center; color:brown; font-weight: bold;">
                        <?php echo $member['YR_OF_PASS']; ?>
                    </td>

                    <td scope="row" style="text-align: center; color:#66aa00; font-weight: bold;">
                        <?php echo $member['LM_NO']; ?>
                    </td>
                </tr>
                <?php
                $serialNumber++;
            }
            ?>
        </tbody>
    </table>
</div>


                            </div>

                        </div>
                    </div> -->


                




                  <!-- <div class="col-sm-12 col-md-6" style="margin-top: 40px;"> -->
                        <!-- <div class="card shadow mb-4"> -->



                            <!-- <div class="card-body"> -->
                                <!-- <div class="d-flex justify-content-center p-1" style="background-color: #e8b742;"> -->
                                    <!-- <h4 class="">Batch Wise Donation summary</h4> -->
                                    <!-- <h5 style="text-align: center;">
                                        <?php
                                        if (!empty($tot_donation[0]['PER_CONT'])) {
                                            if ($bool) {
                                                echo '<span class="your-span-class"> Batch Wise Donation Summary </span> <br> (Total Donation: <span style="color: #4257BF;">' . $tot_donation[0]['PER_CONT'] . ' TK</span>, Total Donar: <span style="color: #362E3B;">' . $tot_donation[0]['NO_OF_CONTR'] . ')</span>';
                                            }
                                        }
                                        ?>
                                    </h5> -->




                                <!-- </div> -->




                                <!-- <div id="" style="margin-top: 30px;">


                                    <canvas id="myChart3" style="width:100%;height: 300px;"></canvas>


                                  <div id="piechart" style="width: 900px; height: 300px; margin-left: 20px;"></div> -->
                                <!-- </div>  -->



                            <!-- </div> -->

                        <!-- </div> -->
                  <!-- </div>   -->


                   <!--  <div class="col-sm-12 col-md-6" style="margin-top: 40px;">
                        <div class="card shadow mb-4">



                            <div class="card-body">
                                <div class="d-flex justify-content-center p-1" style="background-color: #e8b742;">
                                    <h5 class="">Batch Wise Donar List(More Than 5000TK)</h5>



                                </div>




                                <div class="table-responsive " style="margin-top: 30px;height: 325px;">
                                    <table class="table table-bordered" id="example">
                                        <thead>
                                            <tr>
                                                <th scope="col" style="text-align: center;color:#BF4196;">SL No.</th>
                                                <th scope="col" style="text-align: center;color:#BF4196;">Batch</th>
                                                <th scope="col" style="text-align: center;color:#BF4196;">Member Name
                                                </th>
                                                <th scope="col" style="text-align: center;color:#BF4196;">College Roll
                                                    No </th>
                                                <th scope="col" style="text-align: center;color:#BF4196;">Donation
                                                    Amount</th>
                                            </tr>
                                        </thead>


                                        <tbody>
                                            <?php

                                            $serialNumber = 1;

                                            for ($i = 0; $i < count($donation_list); $i++) {

                                                ?>

                                                <tr>
                                                    <td style="text-align: center;color:#66aa00;font-weight: bold;">
                                                        <?php echo $serialNumber; ?>
                                                    </td>
                                                    <td style="text-align: center;color:brown;font-weight: bold;">
                                                        <?php echo $donation_list[$i]['YR_OF_PASS'] ?>
                                                    </td>

                                                    <td scope="row"
                                                        style="text-align: center;color:#C1AD1F ;font-weight: bold;">
                                                        <?php echo $donation_list[$i]['MEM_NAME'] ?>
                                                    </td>
                                                    <td scope="row"
                                                        style="text-align: center;color:#B70F3B;font-weight: bold;">
                                                        <?php echo $donation_list[$i]['COLL_ROLL_NO'] ?>
                                                    </td>
                                                    <td scope="row"
                                                        style="text-align: center;color:#66aa00;font-weight: bold;">
                                                        <?php echo $donation_list[$i]['PER_CONT'] ?>
                                                    </td>

                                                </tr>




                                                <?php
                                                $serialNumber++;
                                            }
                                            ?>





                                        </tbody>



                                    </table>
                                </div>



                            </div>

                        </div>
                    </div> -->






                    <div class="col-sm-12 col-md-12" id="graph">
                        <div class="card shadow mb-4">



                            <div class="card-body">
                                <div class="d-flex justify-content-center p-1" style="background-color: #e8b742;">


                                    <h4 class="text-center text-weight-bolder" style="color: #212121;">
                                        <?php
                                        if (!empty($graph_output[0]['REPORT_HDR'])) {
                                            if ($bool) {

                                                echo '<span class="your-span-class">' . $graph_output[0]['REPORT_HDR'] . " Wise Registered Alumni </span> (Total Alumni : <span style='color: #4257BF;'>   " . $TOT_MEM[0]['TOTAL_ALUMNI'] . ",</span> Total Participants : <span style='color: #362E3B;'>   " . $TOT_MEM[0]['TOTAL_MEMBERS'] . ",</span>  <br> Last Transaction Time: <span style='color: red;'>  " . $tr_time . ") </span>";
                                            }
                                        }
                                        ?>
                                    </h4>



                                </div>


                                <div id="" style="margin-top: 30px;">


                                    <canvas id="myChart" style="width:100%;height: 300px;"></canvas>


                                    <!-- <div id="piechart" style="width: 900px; height: 300px; margin-left: 20px;"></div> -->
                                </div>



                            </div>

                        </div>
                    </div>


                    <style>
                        /* Set a fixed height for the table */
                        .tableFixHead1 {
                            overflow: auto;
                            height: 300px;
                        }

                        .tableFixHead1 thead th {
                            position: sticky;
                            top: 0;
                            z-index: 1;
                        }

                        /* Just common table stuff. Really. */
                        table {
                            border-collapse: collapse;
                            width: 100%;
                        }

                        th,
                        td {
                            padding: 8px 16px;
                        }

                        th {
                            background: #D2E7F5;
                        }
                    </style>





                    <div class="col-md-12 col-12">
                        <div class="d-flex justify-content-center p-1"
                            style="background-color: #e8b742;margin-bottom: 20px;">
                            <h4 class="">Last 10 Registration History</h4>

                        </div>
                    </div>

                    <div class="col-md-2"></div>

                    <div class="col-md-8 col-12">
                        <div class="table-responsive tableFixHead1">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th scope="col" style="text-align: center;color:#BF4196;">SL No</th>
                                        <th scope="col" style="text-align: center;color:#BF4196;">Member Name </th>
                                        <th scope="col" style="text-align: center;color:#BF4196;">Batch</th>
                                        <th scope="col" style="text-align: center;color:#BF4196;">Roll No</th>
                                        <th scope="col" style="text-align: center;color:#BF4196;">Total Participants
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php

                                    for ($i = 0; $i < count($table); $i++) {




                                        ?>

                                        <tr>
                                            <td style="text-align: center;color:#66aa00;font-weight: bold;">
                                                <?php echo $table[$i]['REG_NO'] ?>
                                            </td>
                                            <td scope="row" style="text-align: center;color:#41BDBF;font-weight: bold;">
                                                <?php echo $table[$i]['MEM_NAME'] ?>
                                            </td>
                                            <td style="text-align: center;color:#66aa00;font-weight: bold;">
                                                <?php echo $table[$i]['YR_OF_PASS'] ?>
                                            </td>
                                            <td style="text-align: center;color:#B70F3B;font-weight: bold;">
                                                <?php echo $table[$i]['COLL_ROLL_NO'] ?>
                                            </td>
                                            <td scope="row" style="text-align: center;color:#BF6741;font-weight: bold;">
                                                <?php
                                                $NO_OF_MEM = $table[$i]['NO_OF_MEM'];
                                                $NO_OF_SPOUSE = $table[$i]['NO_OF_SPOUSE'];
                                                $NO_OF_CHILD = $table[$i]['NO_OF_CHILD'];
                                                $TOT_MEM = $NO_OF_MEM + $NO_OF_SPOUSE + $NO_OF_CHILD;
                                                echo $TOT_MEM
                                                    ?>
                                            </td>



                                        </tr>

                                        <?php
                                    }
                                    ?>





                                </tbody>
                            </table>

                        </div>
                    </div>

                    <div class="col-md-2"></div>



                    <div class="col-sm-12 col-md-6" id="graph5" style="margin-top: 50px;">
                        <div class="card shadow mb-4">



                            <div class="card-body">
                                <div class="d-flex justify-content-center p-1" style="background-color: #e8b742;">
                                    <h4 class="">Last 10 Days Registration summary</h4>



                                </div>


                                <!-- form start -->
                                <form action="" method="post">
                                    <div class="row">

                                        <div class="col-lg-8 col-md-8 col-8" style="margin-top: 30px;">
                                            <div class="row">
                                                <div class="col-lg-5 col-md-5 col-12">
                                                    <label for="text" class="text-center font-weight-bold"
                                                        style="margin-left: 40px;">Batch :</label>
                                                </div>
                                                <div class="col-lg-7 col-md-7 col-12">
                                                    <input style="width: 150px;" type="text"
                                                        onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))"
                                                        class="form-control" name="CAT_CODE" id="CAT_CODE"
                                                        placeholder="Batch" value="<?php if (isset($_POST['CAT_CODE']))
                                                            echo $_POST['CAT_CODE']; ?>">



                                                </div>
                                            </div>


                                        </div>



                                        <div class="col-lg-4 col-md-4  col-12 " style="margin-top: 18px;">
                                            <button type="submit" class="btn btn-success m-3" name='submit1'>
                                                Load
                                            </button>


                                        </div>



                                    </div>







                                </form>
                                <!-- form end -->


                                <div id="" style="margin-top: 30px;">


                                    <canvas id="myChart1" style="width:100%;height: 300px;"></canvas>


                                    <!-- <div id="piechart" style="width: 900px; height: 300px; margin-left: 20px;"></div> -->
                                </div>



                            </div>

                        </div>
                    </div>



                    <div class="col-sm-12 col-md-6" id="graph5" style="margin-top: 50px;">
                        <div class="card shadow mb-4">



                            <div class="card-body">
                                <div class="d-flex justify-content-center p-1" style="background-color: #e8b742;">
                                    <h4 class="">Top 10 Registered Batch</h4>



                                </div>




                                <div id="" style="margin-top: 30px;">


                                    <canvas id="myChart2" style="width:100%;height: 388px;"></canvas>


                                    <!-- <div id="piechart" style="width: 900px; height: 300px; margin-left: 20px;"></div> -->
                                </div>



                            </div>

                        </div>
                    </div>


                  <!--   <div class="col-md-12 col-12" style="margin-top: 70px;">
                        <div class="d-flex justify-content-center p-1"
                            style="background-color: #e8b742;margin-bottom: 20px;">
                            <h5 style="text-align: center;">If you are registered then you can find your friends who are
                                registered for the NDC 75 years celebration program</h5>

                        </div>
                    </div> -->


                    <!-- <div class="col-md-12 col-12">
                        <div class="form-body">
                            <form action="" method="POST" onsubmit="return myfun()">
                                <div class="row m-3">
                                    <div class="col-lg-6 col-md-6 col-8" style="margin-top: 30px;">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 col-12">
                                                <label for="text" class="text-center font-weight-bold"
                                                    style="margin-left: 40px;">Give Your Mobile No <label
                                                        style="color:red; font-weight:bold">*</label> :</label>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-12">
                                                <input type="text"
                                                    onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))"
                                                    class="form-control" name="MEM_MOBILE_NO" id="MEM_MOBILE_NO"
                                                    placeholder="Give Your Mobile No" value="<?php if (isset($_POST['MEM_MOBILE_NO']))
                                                        echo $_POST['MEM_MOBILE_NO']; ?>" required>
                                                <span id="e_massage_mobile"
                                                    style="color:red; font-weight:bold;font-size: 14px;"></span>


                                            </div>
                                        </div>


                                    </div>



                                    <div class="col-lg-6 col-md-6  col-12 " style="margin-top: 18px;">
                                        <button type="submit" class="btn btn-success m-3" name='submit' id='submit'>
                                            Find
                                        </button>

                                        <a href="Batch_Leader.php" class="btn btn-primary m-3">
                                            Login
                                        </a>



                                    </div>
                                </div>


                            </form>



                        </div>
                    </div> -->







                </div>

                <?php
                if (isset($_POST['submit'])) {
                    ?>

                    <style>
                        #searchInput {
                            margin-bottom: 10px;
                        }

                        #searchInput {
                            padding: 8px;
                            margin-right: 5px;
                            border: 1px solid #ccc;
                            border-radius: 4px;
                            box-sizing: border-box;
                        }

                        #searchButton {
                            padding: 8px 12px;
                            border: 1px solid #007BFF;
                            border-radius: 4px;
                            background-color: #007BFF;
                            color: #fff;
                            cursor: pointer;
                        }

                        #searchButton:hover {
                            background-color: #0056b3;
                        }
                    </style>







                    <div class="row" id="batch">

                        <div class="col-md-1"></div>


                        <div class="col-md-10 col-12">
                            <div class="row">
                                <div class="col-md-6 col-6">
                                    <button id="download" class="btn btn-primary">Download <i
                                            class="fas fa-file-pdf"></i></button>
                                    <button onclick="exportToExcel('table_id', 'table_data')"
                                        class="btn btn-primary">Download <i class="fas fa-file-excel"></i> </button>
                                </div>
                                <div class="col-md-6 col-6">
                                    <input type="text" id="searchInput" placeholder="Search Your Friend"
                                        style="float: right;" onkeyup="filterTable()">
                                </div>
                            </div>







                            <div class="table-responsive " id="invoice">

                                <div class="row" style="font-weight: bold;margin-top:50px;">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-8">
                                        <div class="header">
                                            <img src="images/ndc_75.png" alt="logo" width="80px" height="100px" />
                                            <h4 class=" text-center"
                                                style="color: #212121; font-weight: bold;font-size: 20px;">75 Years
                                                Celebration Registration List </h4>
                                            <h4 class=" text-center"
                                                style="color: #212121; font-weight: bold;font-size: 20px;margin-top: 30px;">
                                                Batch: <?php echo $user_friend[0]['YR_OF_PASS'] ?>
                                            </h4>

                                        </div>
                                    </div>
                                    <div class="col-md-2"></div>
                                </div>


                                <table class="table table-bordered table-striped" id="table_id" style="margin-top:30px;">
                                    <thead>
                                        <tr>
                                            <th scope="col" style="text-align: center;color:#BF4196;height:80px;">SL No.
                                            </th>
                                            <th scope="col" style="text-align: center;color:#BF4196;">Reg No.</th>
                                            <th scope="col" style="text-align: center;color:#BF4196;">Member Name</th>
                                            <th scope="col" style="text-align: center;color:#BF4196;">Member Photo</th>
                                            <th scope="col" style="text-align: center;color:#BF4196;">Mobile No.</th>
                                            <th scope="col" style="text-align: center;color:#BF4196;">Roll No </th>
                                            <!-- <th scope="col" style="text-align: center;color:#BF4196;">Batch</th> -->
                                            <th scope="col" style="text-align: center;color:#BF4196;">Channel</th>
                                            <th scope="col" style="text-align: center;color:#BF4196;">Total Person</th>

                                        </tr>
                                    </thead>


                                    <tbody>
                                        <?php

                                        $serialNumber = 1;

                                        for ($i = 0; $i < count($user_friend); $i++) {
                                            if ($user_friend[$i]['TP'] == '1' || $user_friend[$i]['TP'] == '2') {
                                                $abc = array(); // Initialize $abc for each row
                                    
                                                foreach ($user_friend[$i] as $key => $data) {
                                                    if ($key === 'MEM_PHOTO') {
                                                        if (is_object($data) && get_class($data) === 'OCI-Lob') {
                                                            // Read binary data from CLOB
                                                            $lob = oci_new_descriptor($conn, OCI_D_LOB);
                                                            oci_lob_read($data, $lob);
                                                            $abc[$key] = base64_encode($lob->load());
                                                            $lob->free();
                                                        } else {
                                                            // Handle other types or strings here
                                                            $abc[$key] = is_object($data) ? $data->load() : $data;
                                                        }
                                                    } else {
                                                        $abc[$key] = $data;
                                                    }
                                                }




                                                ?>

                                                <tr <?php if ($user_friend[$i]['TP'] == '1') { ?> style="background-color: #e8b742;" <?php
                                                } ?>>
                                                    <td style="text-align: center;color:#66aa00;font-weight: bold;">
                                                        <?php echo $serialNumber; ?>
                                                    </td>
                                                    <td style="text-align: center;color:brown;font-weight: bold;">
                                                        <?php echo $user_friend[$i]['REG_NO'] ?>
                                                    </td>
                                                    <td scope="row" <?php if ($user_friend[$i]['TP'] == '1') { ?>
                                                            style="text-align: center;color:#fff;font-weight: bold;" <?php } else if ($user_friend[$i]['TP'] == '2') { ?>style="color:#41BDBF;font-weight: bold;"
                                                        <?php } ?>><?php echo $user_friend[$i]['MEM_NAME'] ?></td>
                                                    <td style="text-align: center;">
                                                        <?php if (isset($abc['MEM_PHOTO'])): ?>
                                                            <img src="data:image/jpeg;base64,<?php echo $abc['MEM_PHOTO']; ?>"
                                                                id="output_image" width="60px" height="60px" />
                                                        <?php endif; ?>
                                                    </td>
                                                    <td scope="row" style="text-align: center;color:#C1AD1F ;font-weight: bold;">
                                                        <?php echo $user_friend[$i]['MEM_MOBILE_NO'] ?>
                                                    </td>
                                                    <td scope="row" style="text-align: center;color:#B70F3B;font-weight: bold;">
                                                        <?php echo $user_friend[$i]['COLL_ROLL_NO'] ?>
                                                    </td>
                                                    <!-- <td scope="row" style="text-align: center;color:#66aa00;font-weight: bold;"><?php echo $user_friend[$i]['YR_OF_PASS'] ?></td> -->

                                                    <?php if ($user_friend[$i]['CHANNEL'] == 'Online') {
                                                        ?>
                                                        <td scope="row" style="text-align: center;color:#66aa00;font-weight: bold;">
                                                            <?php echo $user_friend[$i]['CHANNEL'] ?>
                                                        </td>


                                                        <?php
                                                    } else {
                                                        ?>
                                                        <td scope="row" style="text-align: center;color:red;font-weight: bold;">
                                                            <?php echo $user_friend[$i]['CHANNEL'] ?>
                                                        </td>

                                                        <?php
                                                    } ?>




                                                    <td scope="row" style="text-align: center;color:#BF6741;font-weight: bold;">
                                                        <?php
                                                        $NO_OF_MEM = $user_friend[$i]['NO_OF_MEM'];
                                                        $NO_OF_SPOUSE = $user_friend[$i]['NO_OF_SPOUSE'];
                                                        $NO_OF_CHILD = $user_friend[$i]['NO_OF_CHILD'];
                                                        $TOT_MEM = $NO_OF_MEM + $NO_OF_SPOUSE + $NO_OF_CHILD;
                                                        echo $TOT_MEM
                                                            ?>
                                                    </td>


                                                </tr>




                                                <?php
                                                $serialNumber++;
                                            }
                                        }

                                        for ($i = 0; $i < count($output1); $i++) {
                                            ?>

                                            <tr style="background-color: #51B563;">
                                                <td style="text-align: center;color:white;font-weight: bold;">
                                                    <?php echo $output1[$i]['REG_NO'] ?>
                                                </td>
                                                <td style="text-align: center;color:white;font-weight: bold;"></td>
                                                <td scope="row" style="text-align: center;color:white;font-weight: bold;">
                                                    <?php echo $output1[$i]['MEM_NAME'] ?>
                                                </td>
                                                <td scope="row" style="text-align: center;color:white;font-weight: bold;">
                                                    <?php echo $output1[$i]['MEM_MOBILE_NO'] ?>
                                                </td>
                                                <td scope="row" style="text-align: center;color:#C1AD1F ;font-weight: bold;">
                                                    <?php echo $output1[$i]['MEM_MOBILE_NO'] ?>
                                                </td>
                                                <td scope="row" style="text-align: center;color:white;font-weight: bold;">
                                                    <?php echo $output1[$i]['MEM_MOBILE_NO'] ?>
                                                </td>
                                                <!-- <td scope="row" style="text-align: center;color:white;font-weight: bold;"><?php echo $output1[$i]['YR_OF_PASS'] ?></td> -->
                                                <td scope="row" style="text-align: center;color:white;font-weight: bold;">
                                                    <?php echo $output1[$i]['MEM_MOBILE_NO'] ?>
                                                </td>
                                                <td scope="row" style="text-align: center;color:white;font-weight: bold;">
                                                    <?php
                                                    $NO_OF_MEM = $output1[$i]['NO_OF_MEM'];
                                                    $NO_OF_SPOUSE = $output1[$i]['NO_OF_SPOUSE'];
                                                    $NO_OF_CHILD = $output1[$i]['NO_OF_CHILD'];
                                                    $TOT_MEM = $NO_OF_MEM + $NO_OF_SPOUSE + $NO_OF_CHILD;
                                                    echo $TOT_MEM
                                                        ?>
                                                </td>


                                            </tr>






                                            <?php


                                        }
                                        ?>





                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-md-1"></div>
                    </div>
                    <?php
                }
                ?>
            </div>
        </div>
    </div>





    <!-- chart and others script starts  -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <!-- chart and others script ends  -->


    <!-- excel and pdf script starts  -->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

    <!-- DataTables Buttons CSS -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css">

    <!-- DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

    <!-- DataTables Buttons JS -->
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
    <!-- excel and pdf script ends  -->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.3/xlsx.full.min.js"></script>



    <style>
        @page {
            size: A4;
            margin: 0;
        }

        /* tr:nth-child(11n) {
        page-break-before: always;
    } */


        tbody tr.page-break {
            page-break-before: always;
        }




        thead {
            display: table-header-group;
        }

        @media print {
            thead {
                display: table-header-group;
                position: fixed;
                top: 0;
            }
        }
    </style>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var rowsPerPage = 12; // Adjust this value as needed
            var tableRows = document.querySelectorAll('tbody tr');

            for (var i = rowsPerPage; i < tableRows.length; i += rowsPerPage) {
                tableRows[i - 1].classList.add('page-break');
            }
        });
    </script>


    <script>
        window.onload = function () {
            document.getElementById("download").addEventListener("click", () => {
                const invoice = this.document.getElementById("invoice");
                var opt = {
                    margin: [10, 2, -3, 2],
                    filename: 'member_details_batch_<?php echo $user_friend[0]['YR_OF_PASS'] ?>.pdf',
                    image: {
                        type: 'jpeg',
                        quality: 1
                    },
                    html2canvas: {
                        dpi: 192,
                        scale: 1,
                        letterRendering: true,
                        useCORS: true
                    },
                    jsPDF: {
                        unit: 'mm',
                        format: 'a4',
                        orientation: 'portrait'
                    }
                };
                html2pdf().from(invoice).set(opt).save();
            });
        }
    </script>





    <!-- <script>
        $(document).ready(function() {
            $('#myTable').DataTable({
                dom: 'lBfrtip',
                buttons: [
                    'excel'
                ]
            });
        });
    </script> -->

    <!-- <script>
        $(document).ready(function() {
            var dataTable = $('#myTable').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'pdfHtml5',
                        text: 'Download',
                        className: 'pdf-button',
                        customize: function(doc) {
                            // Center the content of the table in the PDF
                            var colCount = new Array(doc.content[1].table.body[0].length + 1).join('*').split('').map(function() {
                                return 'auto';
                            });

                            doc.styles.tableBody = {
                                valign: 'middle',
                                halign: 'center'
                            };
                            doc.content[1].table.widths = colCount;

                            // Check the number of rows
                            var rowCount = dataTable.rows().count();

                            // Set orientation based on the number of rows
                            doc.pageOrientation = (rowCount < 10) ? 'landscape' : 'portrait';

                            // Apply custom styles to the header
                            doc.content[1].table.headerRows = 1; // Ensure the header is included in the first row
                            doc.styles.tableHeader = {
                                fillColor: '#ECF0EC',
                                textColor: '#fff',
                                fontSize: 12,
                                bold: true
                            };

                            // Center the entire table on the page
                            doc.content[1].layout = {
                                hLineWidth: function(i, node) {
                                    return 1; // Set horizontal line width
                                },
                                vLineWidth: function(i, node) {
                                    return 1; // Set vertical line width
                                },
                                hLineColor: function(i, node) {
                                    return [0, 0, 0]; // Set black color for horizontal lines
                                },
                                vLineColor: function(i, node) {
                                    return [0, 0, 0]; // Set black color for vertical lines
                                },
                                paddingLeft: function(i, node) {
                                    return 4;
                                },
                                paddingRight: function(i, node) {
                                    return 4;
                                },
                                paddingTop: function(i, node) {
                                    return 4;
                                },

                                halign: 'center',
                                valign: 'middle' // Added to center content vertically
                            };
                        }
                    },
                    {
                        extend: 'excelHtml5', // Add Excel button
                        text: 'Download',
                        titleAttr: 'Export to Excel',
                        className: 'excel-button', // Add a class to the Excel button
                        exportOptions: {
                            modifier: {
                                page: 'all'
                            }
                        }
                    }
                ]
            });
        });
    </script> -->




    <!-- bar chart start -->
    <script>
        <?php
        // Initialize arrays
        $xValues = [];
        $yValues = [];
        $barColors = [];

        // Your PHP code here to retrieve dynamic data
        $curs_sql_graph = oci_new_cursor($conn);

        $sql_graph = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DF_GRAPH(:cur_data,:CAT_CODE,:DGR_CODE,:CHANNEL,:REPORT_LEVEL_CODE); end;");

        oci_bind_by_name($sql_graph, ":cur_data", $curs_sql_graph, -1, OCI_B_CURSOR);
        oci_bind_by_name($sql_graph, ":CAT_CODE", $CAT_CODE, -1, SQLT_CHR);
        oci_bind_by_name($sql_graph, ":DGR_CODE", $DGR_CODE, -1, SQLT_CHR);
        oci_bind_by_name($sql_graph, ":CHANNEL", $CHANNEL, -1, SQLT_CHR);
        oci_bind_by_name($sql_graph, ":REPORT_LEVEL_CODE", $REPORT_LEVEL_CODE, -1, SQLT_CHR);

        oci_execute($sql_graph);
        oci_execute($curs_sql_graph);

        while (($row_curs_sql_graph = oci_fetch_array($curs_sql_graph, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues[] = $row_curs_sql_graph['REPORT_X'];
            $yValues[] = $row_curs_sql_graph['NO_OF_MEM'];
            $barColors = ["green", "yellow", "blue", "orange", "brown", "#329262", "#5574a6", "#3b3eac", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1", "#8690C2", "#dc3912", "#ffb23f", "#0D153C "];
        }
        ?>
        const xValues = <?php echo json_encode($xValues); ?>;
        const yValues = <?php echo json_encode($yValues); ?>;
        const barColors = <?php echo json_encode($barColors); ?>;

        // Create the chart
        const ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx = chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "#000";
                        ctx.textAlign = "center";
                        ctx.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx.fillText(dataset.data[i], model.x, yPos);
                            }
                        });
                    }
                }
            }
        });
    </script>


    <!-- bar chart end -->



    <!-- bar chart start -->
    <script>
        <?php
        // Initialize arrays
        $xValues1 = [];
        $yValues1 = [];
        $barColors1 = [];

        // Your PHP code here to retrieve dynamic data
        $curs_sql_graph2 = oci_new_cursor($conn);

        $sql_graph2 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DAy_wise_Reg_GRAPH_DATA(:cur_data,:p_batch); end;");

        oci_bind_by_name($sql_graph2, ":cur_data", $curs_sql_graph2, -1, OCI_B_CURSOR);
        oci_bind_by_name($sql_graph2, ":p_batch", $BATCH, -1, SQLT_CHR);


        oci_execute($sql_graph2);
        oci_execute($curs_sql_graph2);

        while (($row_curs_sql_graph2 = oci_fetch_array($curs_sql_graph2, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues1[] = $row_curs_sql_graph2['DD'];
            $yValues1[] = $row_curs_sql_graph2['NO_OF_REG'];
            $barColors1 = ["green", "yellow", "blue", "orange", "brown", "#329262", "#5574a6", "#3b3eac", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1"];
        }
        ?>
        const xValues1 = <?php echo json_encode($xValues1); ?>;
        const yValues1 = <?php echo json_encode($yValues1); ?>;
        const barColors1 = <?php echo json_encode($barColors1); ?>;

        // Create the chart
        const ctx1 = document.getElementById('myChart1').getContext('2d');
        new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: xValues1,
                datasets: [{
                    backgroundColor: barColors1,
                    data: yValues1
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx1 = chart.ctx;
                        ctx1.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx1.fillStyle = "#000";
                        ctx1.textAlign = "center";
                        ctx1.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx1.fillText(dataset.data[i], model.x, yPos);
                            }
                        });
                    }
                }
            }
        });
    </script>


    <!-- bar chart end -->



    <!-- bar chart start -->
    <script>
        <?php
        // Initialize arrays
        $xValues2 = [];
        $yValues2 = [];
        $barColors2 = [];

        // Your PHP code here to retrieve dynamic data
        $curs_sql_graph3 = oci_new_cursor($conn);

        $sql_graph3 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Batch_wise_Reg_top_GRAPH_DATA(:cur_data); end;");

        oci_bind_by_name($sql_graph3, ":cur_data", $curs_sql_graph3, -1, OCI_B_CURSOR);


        oci_execute($sql_graph3);
        oci_execute($curs_sql_graph3);

        while (($row_curs_sql_graph3 = oci_fetch_array($curs_sql_graph3, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues2[] = $row_curs_sql_graph3['BATCH'];
            $yValues2[] = $row_curs_sql_graph3['NO_OF_REG'];
            $barColors2 = ["#dd4477", "#b82e2e", "#0F0F0F", "#232022", "#dc3912", "#dd4477", "#109618", "#3b3eac", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1"];
        }
        ?>
        const xValues2 = <?php echo json_encode($xValues2); ?>;
        const yValues2 = <?php echo json_encode($yValues2); ?>;
        const barColors2 = <?php echo json_encode($barColors2); ?>;

        // Create the chart
        const ctx2 = document.getElementById('myChart2').getContext('2d');
        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: xValues2,
                datasets: [{
                    backgroundColor: barColors2,
                    data: yValues2
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx2 = chart.ctx;
                        ctx2.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx2.fillStyle = "#000";
                        ctx2.textAlign = "center";
                        ctx2.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx2.fillText(dataset.data[i], model.x, yPos);
                            }
                        });
                    }
                }
            }
        });
    </script>


    <!-- bar chart end -->





    <!-- Donation Bar chart start -->
    <script>
        <?php
        // Your PHP code to fetch dynamic data
        $xValues3 = [];
        $yValues3 = [];
        $barColors3 = [];
        $noOfContrValues = [];

        $curs_sql_graph4 = oci_new_cursor($conn);

        $sql_graph4 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Batch_wise_Donation_GRAPH_DATA(:cur_data); end;");

        oci_bind_by_name($sql_graph4, ":cur_data", $curs_sql_graph4, -1, OCI_B_CURSOR);

        oci_execute($sql_graph4);
        oci_execute($curs_sql_graph4);

        while (($row_curs_sql_graph4 = oci_fetch_array($curs_sql_graph4, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues3[] = $row_curs_sql_graph4['YR_OF_PASS'];
            $yValues3[] = $row_curs_sql_graph4['PER_CONT'];
            $noOfContrValues[] = $row_curs_sql_graph4['NO_OF_CONTR'];
            $barColors3 = ["#232022", "#A2A2AB", "#232022", "#232022", "#990099", "#9ad7e8", "#396ace", "#0c5922", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1"];
        }
        ?>
        const xValues3 = <?php echo json_encode($xValues3); ?>;
        const yValues3 = <?php echo json_encode($yValues3); ?>;
        const noOfContrValues = <?php echo json_encode($noOfContrValues); ?>;
        const barColors3 = <?php echo json_encode($barColors3); ?>;

        const ctx3 = document.getElementById('myChart3').getContext('2d');
        new Chart(ctx3, {
            type: 'bar',
            data: {
                labels: xValues3,
                datasets: [{
                    label: 'Total Donation',
                    backgroundColor: barColors3,
                    data: yValues3
                },
                {
                    label: 'Total Donor',
                    backgroundColor: "green",
                    data: noOfContrValues
                }
                ]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx2 = chart.ctx;
                        ctx2.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx2.fillStyle = "#000";
                        ctx2.textAlign = "center";
                        ctx2.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx2.save();
                                ctx2.translate(model.x, model.y);
                                ctx2.rotate(-Math.PI / 6); // Rotate text 90 degrees
                                ctx2.fillText(dataset.data[i], 0, 0);
                                ctx2.restore();
                            }
                        });
                    }
                }
            }
        });
    </script>





    <!-- Donation Bar chart end -->


    <!-- Donation data table  -->
    <script>
        $(document).ready(function () {
            $('#example').DataTable();
        });
    </script>


    <script>
        function exportToExcel(tableId, filename) {
            const table = document.getElementById(tableId);
            const ws = XLSX.utils.table_to_sheet(table);

            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

            // Write to binary string
            const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' });

            // Create a Blob object
            const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });

            // Create a download link
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', `${filename}.xlsx`);
            document.body.appendChild(link);

            // Trigger the download
            link.click();

            // Clean up
            document.body.removeChild(link);
        }

        function s2ab(s) {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
    </script>



    <!-- search table buttuon starts  -->
    <script>
        function filterTable() {
            // Get input value and convert to lowercase for case-insensitive search
            var input = document.getElementById('searchInput').value.toLowerCase();

            // Get all table rows
            var rows = document.getElementById('table_id').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

            // Iterate through rows and hide/show based on search input
            for (var i = 0; i < rows.length; i++) {
                var rowVisible = false;

                // Iterate through all columns (td elements) in the current row
                for (var j = 0; j < rows[i].cells.length; j++) {
                    var cell = rows[i].cells[j];
                    var cellValue = cell.textContent || cell.innerText;

                    // Check if the cell value contains the search input
                    if (cellValue.toLowerCase().indexOf(input) > -1) {
                        rowVisible = true;
                        break; // Break out of the loop if a match is found in any column
                    }
                }

                // Set the display property based on whether the row should be visible
                rows[i].style.display = rowVisible ? '' : 'none';
            }
        }
    </script>

    <!-- search table buttuon ends  -->


<script>
    // Using the existing launch date from your code
const launchDate = new Date(2026, 00, 09, 0, 0, 0); // YYYY, MM (0-based), DD, HH, MM, SS
const countdownElement = document.querySelector(".countdown-blocks");

// Your existing createBlock function
const createBlock = (label, value) => {
	const block = document.createElement("div");
	block.className = "time-block";

	const valueEl = document.createElement("span");
	valueEl.className = "time-value";
	// Add leading zeros for single-digit values
	valueEl.textContent = value < 10 ? `0${value}` : value;

	const labelEl = document.createElement("p");
	labelEl.className = "time-label";
	labelEl.textContent = label;

	// Add pulsing animation to seconds block
	if (label === "Seconds") {
		valueEl.style.animation = "pulse 1s infinite";
	}

	block.appendChild(valueEl);
	block.appendChild(labelEl);
	return block;
};

// Modified updateCountdown function
const updateCountdown = () => {
	const now = new Date();
	const difference = launchDate - now;

	if (difference > 0) {
		const timeLeft = {
			Days: Math.floor(difference / (1000 * 60 * 60 * 24)),
			Hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
			Minutes: Math.floor((difference / 1000 / 60) % 60),
			Seconds: Math.floor((difference / 1000) % 60)
		};

		countdownElement.innerHTML = "";
		for (const [label, value] of Object.entries(timeLeft)) {
			countdownElement.appendChild(createBlock(label, value));
		}
	} else {
		// Handle countdown expiration
		countdownElement.innerHTML = "";
		document.querySelector(".countdown-title").textContent = "Launch Day!";
		document.querySelector(".countdown-description").textContent =
			"The day has arrived!";

		const messageBlock = document.createElement("div");
		messageBlock.className = "time-block expired-message";
		messageBlock.style.gridColumn = "1 / -1";
		messageBlock.style.padding = "2rem";
		messageBlock.textContent = "We're live now!";

		countdownElement.appendChild(messageBlock);
		clearInterval(timer);
	}
};

// Initialize and set the interval
updateCountdown();
const timer = setInterval(updateCountdown, 1000);

</script>

</body>

</html><?PHP
//set_time_limit(300);
include 'connection.php';
error_reporting(0);



$member_get = "
   SELECT MEM_NAME, a.MEM_MOBILE_NO, COLL_ROLL_NO, YR_OF_PASS, LM_NO,substr(a.mem_mobile_no,1,3)||'****'||substr(a.mem_mobile_no,8,4) mem_mobile_hide ,nvl(reg_Status,'N') reg_Status
    FROM NAA_MEMBERS a, (select mem_mobile_no, 'Y' reg_Status from naa_events_reg where event_code='05' and payment_status='P') b
    WHERE MEM_TYPE = 'L'
    and a.mem_mobile_no=b.mem_mobile_no(+)
";
// echo "$member_get";

// Parse the SQL query
$parse = ociparse($conn, $member_get);
// echo "$parse";

// Execute the query
oci_execute($parse);



// Initialize an array to store the fetched data
$members_data = [];

// Fetch the rows and store them in the $members_data array
while ($row = oci_fetch_assoc($parse)) {
    $members_data[] = $row; // Add each row to the array
}





// $sql4 = "SELECT count(*) as TOT_MEM FROM NAA_EVENTS_REG WHERE EVENT_CODE = '02' AND PAYMENT_STATUS = 'P'";
$sql4 = "SELECT SUM(NO_OF_MEM + NO_OF_SPOUSE + NO_OF_CHILD) AS TOTAL_MEMBERS, SUM(NO_OF_MEM) AS TOTAL_ALUMNI FROM NAA_EVENTS_REG a, naa_members b
WHERE a.EVENT_CODE = '05' AND a.PAYMENT_STATUS = 'P'
and a.mem_id=b.mem_id
--and b.yr_of_pass<'2026'";
$parse = ociparse($conn, $sql4);
oci_execute($parse);

while ($row = oci_fetch_assoc($parse)) {
    $TOT_MEM[] = $row;
}

// var_dump($cadre);
oci_free_statement($parse);


$sql5 = "SELECT to_char(UPDATE_DATE,'DD/MM/RRRR  HH:MI:SS') LD
FROM NAA_EVENTS_REG
WHERE EVENT_CODE = '05' AND PAYMENT_STATUS = 'P' AND UPDATE_DATE IS NOT NULL
ORDER BY UPDATE_DATE ASC";

$parse = ociparse($conn, $sql5);
oci_execute($parse);


while ($row = oci_fetch_assoc($parse)) {
    $tr_time = $row['LD'];
}



$sql5 = "SELECT NAA_EVENTS_REG.UPDATE_DATE,NAA_EVENTS_REG.NO_OF_MEM, NAA_EVENTS_REG.REG_NO, NAA_EVENTS_REG.NO_OF_SPOUSE, NAA_EVENTS_REG.NO_OF_CHILD,  NAA_EVENTS_REG.PAYMENT_STATUS, NAA_EVENTS_REG.EVENT_CODE, NAA_MEMBERS.MEM_NAME,NAA_MEMBERS.YR_OF_PASS, NAA_MEMBERS.COLL_ROLL_NO 
FROM NAA_EVENTS_REG, NAA_MEMBERS WHERE NAA_EVENTS_REG.EVENT_CODE = '05' AND NAA_EVENTS_REG.PAYMENT_STATUS = 'P' AND NAA_EVENTS_REG.MEM_ID = NAA_MEMBERS.MEM_ID   AND NAA_EVENTS_REG.UPDATE_DATE IS NOT NULL
ORDER BY UPDATE_DATE DESC
FETCH FIRST 10 ROWS ONLY";

$parse = ociparse($conn, $sql5);
oci_execute($parse);


while ($row = oci_fetch_assoc($parse)) {
    $table[] = $row;
}



/* Retrive batch */
$curs = oci_new_cursor($conn);

$stid = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_ADM_batch(:cur_data); end;");

oci_bind_by_name($stid, ":cur_data", $curs, -1, OCI_B_CURSOR);

oci_execute($stid);
oci_execute($curs);

while (($row = oci_fetch_array($curs, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $adm_batch[] = $row;
}





// var_dump($cadre);
oci_free_statement($parse);

$report = "";


$bool = false;
/* Data Filter Start */


// $CAT_CODE = $_POST['CAT_CODE'];
$DGR_CODE = 'P';
// $CHANNEL = $_POST['CHANNEL'];
$REPORT_LEVEL_CODE = 1;



/* Start Procedure for GRAPH */
$curs_sql_graph = oci_new_cursor($conn);

$sql_graph = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DF_GRAPH(:cur_data,:CAT_CODE,:DGR_CODE,:CHANNEL,:REPORT_LEVEL_CODE); end;");

oci_bind_by_name($sql_graph, ":cur_data", $curs_sql_graph, -1, OCI_B_CURSOR);
oci_bind_by_name($sql_graph, ":CAT_CODE", $CAT_CODE, -1, SQLT_CHR);
oci_bind_by_name($sql_graph, ":DGR_CODE", $DGR_CODE, -1, SQLT_CHR);
oci_bind_by_name($sql_graph, ":CHANNEL", $CHANNEL, -1, SQLT_CHR);
oci_bind_by_name($sql_graph, ":REPORT_LEVEL_CODE", $REPORT_LEVEL_CODE, -1, SQLT_CHR);


oci_execute($sql_graph);
oci_execute($curs_sql_graph);

while (($row_curs_sql_graph = oci_fetch_array($curs_sql_graph, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $graph_output[] = $row_curs_sql_graph;
}
/* End Procedure for GRAPH */


/* Total Donation for GRAPH */
$curs_don = oci_new_cursor($conn);

$sql_donation = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Total_Donation_DATA(:cur_data); end;");

oci_bind_by_name($sql_donation, ":cur_data", $curs_don, -1, OCI_B_CURSOR);



oci_execute($sql_donation);
oci_execute($curs_don);

while (($row_curs_don = oci_fetch_array($curs_don, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $tot_donation[] = $row_curs_don;
}
/* Total Donation for GRAPH */



/*  Donation List for GRAPH */
$curs = oci_new_cursor($conn);

$stid = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Doantion_list(:cur_data); end;");


oci_bind_by_name($stid, ":cur_data", $curs, -1, OCI_B_CURSOR);


oci_execute($stid);
oci_execute($curs);


while (($row = oci_fetch_array($curs, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {


    $donation_list[] = $row;
}
/* Donation List for GRAPH */
// $acb = $donation_list[0]['YR_OF_PASS'];
// echo "$acb";






/* Start Procedure for GRAPH Table */
$curs11 = oci_new_cursor($conn);

$stid11 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DF_GRAPH_DATA(:cur_data,:CAT_CODE,:DGR_CODE,:CHANNEL,:REPORT_LEVEL_CODE); end;");

oci_bind_by_name($stid11, ":cur_data", $curs11, -1, OCI_B_CURSOR);
oci_bind_by_name($stid11, ":CAT_CODE", $CAT_CODE, -1, SQLT_CHR);
oci_bind_by_name($stid11, ":DGR_CODE", $DGR_CODE, -1, SQLT_CHR);
oci_bind_by_name($stid11, ":CHANNEL", $CHANNEL, -1, SQLT_CHR);
oci_bind_by_name($stid11, ":REPORT_LEVEL_CODE", $REPORT_LEVEL_CODE, -1, SQLT_CHR);


oci_execute($stid11);
oci_execute($curs11);

while (($row11 = oci_fetch_array($curs11, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

    $graph_table_output[] = $row11;
    $graph_table_output_2 = $row11;
}
/* End Procedure for GRAPH Table */
$mobileSearch = $_POST['mobile_search'] ?? '';

if (!empty($mobileSearch)) {
    // Prepare and execute the main query
    $sqlmobilesrc = "SELECT * FROM NAA_MEMBERS WHERE MEM_MOBILE_NO = :mobileSearch AND MEM_TYPE = 'L'";
    $parse = oci_parse($conn, $sqlmobilesrc);
    oci_bind_by_name($parse, ':mobileSearch', $mobileSearch);

    if (oci_execute($parse)) {
        if (oci_fetch($parse)) {
            // Check for registration status
            $memberGetQuery = "
                SELECT MEM_NAME, a.MEM_MOBILE_NO, COLL_ROLL_NO, YR_OF_PASS, LM_NO, 
                       substr(a.mem_mobile_no,1,3)||'*'||substr(a.mem_mobile_no,8,4) AS mem_mobile_hide,
                       NVL(reg_Status, 'N') AS reg_Status
                FROM NAA_MEMBERS a
                LEFT JOIN (SELECT mem_mobile_no, 'Y' AS reg_Status
                           FROM naa_events_reg
                           WHERE event_code='05' AND payment_status='P') b
                ON a.mem_mobile_no = b.mem_mobile_no
                WHERE MEM_TYPE = 'L' AND a.mem_mobile_no = :mobileSearch
            ";
            $memberParse = oci_parse($conn, $memberGetQuery);
            oci_bind_by_name($memberParse, ':mobileSearch', $mobileSearch);

            if (oci_execute($memberParse) && oci_fetch($memberParse)) {
                $regStatus = oci_result($memberParse, 'REG_STATUS');

                if ($regStatus === 'Y') {
                    // Already registered message
                    echo "
                        <!DOCTYPE html>
                        <html lang='en'>
                        <head>
                            <meta charset='UTF-8'>
                            <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                            <title>Already Registered</title>
                            <script src='https://cdn.jsdelivr.net/npm/sweetalert2@11'></script>
                        </head>
                        <body>
                            <script>
                                document.addEventListener('DOMContentLoaded', function () {
                                    Swal.fire({
                                        icon: 'info',
                                        title: 'Already Registered',
                                        text: 'You are already registered for this event.',
                                        confirmButtonText: 'Go to Main Page',
                                        confirmButtonColor: '#3085d6',
                                        iconColor: '#3085d6',
                                    }).then(() => {
                                        window.location.href = 'https://ndcaa.mcampusbd.com/';
                                    });
                                });
                            </script>
                        </body>
                        </html>
                    ";
                    exit;
                } else {
                    // Redirect if not already registered
                    $redirectUrl = "https://ndcaa.mcampusbd.com/ndc_75_year_alumni_server/?mobile=" . urlencode($mobileSearch);
                    header("Location: $redirectUrl");
                    exit;
                }
            }
        }  else {
            // Store the phone number in the database if no matching record is found
            $insertSql = "INSERT INTO NAA_MEMBERS (MEM_MOBILE_NO) VALUES (:mobileSearch)";
            $insertParse = oci_parse($conn, $insertSql);
            oci_bind_by_name($insertParse, ':mobileSearch', $mobileSearch);
        
            if (oci_execute($insertParse)) {
                // Redirect to the URL with the phone number as a query parameter
                $redirectUrl = "https://ndcaa.mcampusbd.com/ndc_75_year_alumni_server/index.php?mobile=" . urlencode($mobileSearch);
                header("Location: $redirectUrl");
                exit;
            } else {
                // Handle error in database insertion
                $error = oci_error($insertParse);
                echo '<p>Error inserting phone number: ' . htmlspecialchars($error['message']) . '</p>';
            }
        }
    } else {
        // Handle query execution error
        $error = oci_error($parse);
        echo '<p>Error executing query: ' . htmlspecialchars($error['message']) . '</p>';
    }
    oci_free_statement($parse);
}




// batch wise registration 
$sql4 = "SELECT * FROM NAA_YEAR_MST ORDER BY YEAR_CODE DESC";
$parse = ociparse($conn, $sql4);
oci_execute($parse);

while ($row = oci_fetch_assoc($parse)) {
    $batch[] = $row;
}

// var_dump($cadre);
oci_free_statement($parse);


if (isset($_POST['submit'])) {

    $MEM_MOBILE_NO = $_POST['MEM_MOBILE_NO'];
    $EVENT_CODE = '05';



    /* Start Procedure for Report */
    $curs = oci_new_cursor($conn);
    $curs1 = oci_new_cursor($conn);

    $stid = oci_parse($conn, "begin PKG_event_reg.DPD_naa_event_reg_Friends(:cur_data,:cur_dataF,:MEM_MOBILE_NO,:EVENT_CODE); end;");


    oci_bind_by_name($stid, ":cur_data", $curs, -1, OCI_B_CURSOR);
    oci_bind_by_name($stid, ":cur_dataF", $curs1, -1, OCI_B_CURSOR);
    oci_bind_by_name($stid, ":MEM_MOBILE_NO", $MEM_MOBILE_NO, -1, SQLT_CHR);
    oci_bind_by_name($stid, ":EVENT_CODE", $EVENT_CODE, -1, SQLT_CHR);



    oci_execute($stid);
    oci_execute($curs);
    oci_execute($curs1);


    while (($row = oci_fetch_array($curs, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

        $user_friend[] = $row;
    }


    while (($row = oci_fetch_array($curs1, OCI_ASSOC + OCI_RETURN_NULLS)) !== false) {
        $output1[] = $row;
    }


    echo '<script>window.location.href = "http://ndcaa.mcampusbd.com/#batch";</script>';


    // $MEM_ID = $user_friend[0]['NO_OF_MEM'];
    // echo "$MEM_ID";
}



if (isset($_POST['submit1'])) {
    /* START Procedure for GRAPH 2*/
    // $CAT_CODE = $_POST['CAT_CODE'];
    $BATCH = $_POST['CAT_CODE'];




    /* Start Procedure for GRAPH */
    $curs_sql_graph2 = oci_new_cursor($conn);

    $sql_graph2 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DAy_wise_Reg_GRAPH_DATA(:cur_data,:p_batch); end;");

    oci_bind_by_name($sql_graph2, ":cur_data", $curs_sql_graph2, -1, OCI_B_CURSOR);
    oci_bind_by_name($sql_graph2, ":p_batch", $BATCH, -1, SQLT_CHR);



    oci_execute($sql_graph2);
    oci_execute($curs_sql_graph2);

    while (($row_curs_sql_graph2 = oci_fetch_array($curs_sql_graph2, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {

        $graph_output2[] = $row_curs_sql_graph2;
    }

    echo '<script>window.location.href = "http://ndcaa.mcampusbd.com/#graph5";</script>';

    /* End Procedure for GRAPH 2*/
}











$bool = true;

/* Data Filter End */

?>

<!DOCTYPE html>


<html lang="en">

<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-GQPGJ4YN30"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'G-GQPGJ4YN30');
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>75 th Foundation Of Holy Cross Girls High School</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">


    <!-- pdf and excel data css starts  -->
    <!-- datatable  -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
    <link
        href="https://nightly.datatables.net/buttons/css/buttons.dataTables.css?_=c6b24f8a56e04fcee6105a02f4027462.css"
        rel="stylesheet" type="text/css" />
    <!-- pdf and excel data css ends  -->
    <link rel="stylesheet" href="timer.css">
    <!-- Add Font Awesome CSS (you can customize the link according to your needs) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>
</head>

<style>
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .queen {
        margin-top: 0px;
    }

    @media only screen and (max-width: 900px) {
        @media only screen and (max-width: 900px) {
            .queen {
                margin-top: 70px;
            }

            .img {
                order: -1;
            }

            .main {
                order: 0;
            }
        }
    }

    /* for excel button design start */
    /* .dt-buttons {
            visibility: hidden;
        }

        .dt-buttons button:after {

            content: 'Download Excel';
            visibility: visible;
            background-color: #11c7e0;
            margin-left: 200px;
            padding: 10px;
            color: white;
            border-radius: 11px;
            font-size: 15px;
        }

        .btn .btn-info {
            margin-bottom: -35px !important;
            margin-left: 385px !important;
        } */


    .pdf-header {
        background-color: #007bff;
        color: #fff;
    }

    /* Add this style for the Excel button image */
    .excel-button::after {
        content: url('./images/xls.png');
        /* Replace with the path to your Excel icon */
        float: right;
        margin-top: 3px;
        margin-left: 10px;
        width: 20px;
        /* Adjust the width as needed */
        height: 20px;
    }



    .pdf-button::after {
        content: url('./images/pdf.png');
        /* Replace with the path to your Excel icon */
        float: right;
        margin-top: 3px;
        margin-left: 10px;
        width: 20px;
        /* Adjust the width as needed */
        height: 20px;
    }

    /* for excel button design start */


    .header img {
        float: left;
        width: 105px;
        height: 105px;
        /* background: #555; */
    }

    .header h2,
    h5 {
        position: relative;
    }

    @media only screen and (max-width: 600px) {




        .header img {
            float: left;
            width: 80px;
            height: 80px;
            /* background: #555; */
        }

        .header h1,
        h2,
        h3,
        h4,
        h5 {
            position: relative;
            font-size: 15px;
            text-align: center;
            font-weight: bold;
        }

    }
</style>

<body >
    <!-- all validation starts  -->
    <script>
        function myfun() {

            var massage_mobile = document.getElementById("MEM_MOBILE_NO").value;




            var mobile = /^[0-9]{11}$/;






            if (mobile.test(massage_mobile)) {
                document.getElementById("e_massage_mobile").innerHTML = " ";
            } else {
                document.getElementById("e_massage_mobile").innerHTML = "Mobile Number should be 11 digit";
                return false;
            }

        }
    </script>
    <!-- all validation ends  -->

    <style>
        body {
            margin: 20px auto;
            height: 100%;
            /*color:rgb(235, 0, 0);*/
            background-image:url(images/Holy_Cross.png);
            opacity: 0.9;
            background-color: #e3ebdf;
            background-size: 600px;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
        }
    </style>

    <div class="container-fluid">
        <div class="card" style="height: auto;background-color: #FFF;">
            <div class="card-body ">
                <div class="row back">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <header class="col-lg-12 col-md-12 col-sm-12 text-center">

                            <div class="header">
                                <img src="images/Holy_Cross.png" alt="logo" width="100px" height="100px" style=" border: 3px solid black"  />
                                <!-- <h4 style="text-align: center; color: #0c0a8a; font-weight: bold;">NOTRE DAME COLLEGE,
                                    DHAKA </h4> -->
                                <h3 style="color: #ddbe4d; font-style: oblique;">
                                75<sup style="font-size: 0.6em; vertical-align: super;">th</sup> Foundation Of Holy Cross Girls High School
                               </h3>

                            </div>

                        </header>

                    </div>
                    <div class="col-md-2"></div>

                </div>
                <hr>







                <div class="row">
                    <div class="col-md-6 col-lg-6 col-sm-12 queen">
                        <div class="col-md-12 col-lg-12 col-sm-12 img">
                            <div>
                                <img src="images/Holy_Cross.png" width="200" height="200" alt="">
                            </div>
                        </div>

                        <div id="countdown">
        
            <div class="countdown-blocks"></div>
        </div>
                    </div>

                    




                    <div class="col-md-6 col-lg-6 col-sm-12" style="margin-top: 20px;">

                        <!-- <a href="http://localhost:8080/ndc_75_main_page/ndc_75_year_alumni_server/" target="_blank"
                                    class="btn btn-success"
                                    style="width: 220px; margin-top: 15px;background-color:green; color: white; font-weight: bold;text-align:center;">
                                    Registration</a> -->




                        <h6  style="text-align: justify; color: black;font-size: 20px">Dear Alumni,
                          With immense joy and gratitude,we are delighted to announce that the 75th Foundation Anniversary of Holy 
                         Cross Girls High School going to be celebrated on January 08 to 10, 2026 at the school premise. </h6>


                      


                        <form action="" method="POST" class="mt-4">
                            <div class="d-flex justify-content-center">
                                <a class="btn btn-success me-3" href="event.php" role="button">Registration</a>
                                <a class="btn btn-success ml-4" href="profile_update" role="button" >Profile Update</a>
                            </div>
                        </form>




                        <div style="margin-top: 30px" >
                        <!-- <h3 class="" style="margin-top: 10px;color: blue">Registration Fees:3000 Tk</h3> -->
                        <!-- <h6 class="text-center" style="margin-top: 10px;color: blue">সহধর্মিণী- ১০০০ টাকা</h6>
                        <h6 class="text-center" style="margin-top: 10px;color: blue">সন্তান-৫০০ টাকা</h6> -->
                         </div>
                         <!-- <h6 class="text-align: center" style="margin-top: 10px;color:red">রেজিস্ট্রেশন তথ্য সংক্রান্ত জটিলতার সমাধানের জন্য যোগাযোগ করুনঃ০১৭১৮৯২৯২৯৭</h6> -->
                         
                          <h3 class="text-align: center" style="margin-top: 80px;color:red; font-size: 20px"></h3> 
                          <h2> &diams;&diams;&diams;Registration Fees:3000 Tk &diams;&diams;&diams;</h2>


                         </div>



                   


                    

                    




                    

                </div>

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





    <!-- chart and others script starts  -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <!-- chart and others script ends  -->


    <!-- excel and pdf script starts  -->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

    <!-- DataTables Buttons CSS -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css">

    <!-- DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

    <!-- DataTables Buttons JS -->
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
    <script type="text/javascript" charset="utf8"
        src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
    <!-- excel and pdf script ends  -->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.3/xlsx.full.min.js"></script>



    <style>
        @page {
            size: A4;
            margin: 0;
        }

        /* tr:nth-child(11n) {
        page-break-before: always;
    } */


        tbody tr.page-break {
            page-break-before: always;
        }




        thead {
            display: table-header-group;
        }

        @media print {
            thead {
                display: table-header-group;
                position: fixed;
                top: 0;
            }
        }
    </style>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var rowsPerPage = 12; // Adjust this value as needed
            var tableRows = document.querySelectorAll('tbody tr');

            for (var i = rowsPerPage; i < tableRows.length; i += rowsPerPage) {
                tableRows[i - 1].classList.add('page-break');
            }
        });
    </script>


    <script>
        window.onload = function () {
            document.getElementById("download").addEventListener("click", () => {
                const invoice = this.document.getElementById("invoice");
                var opt = {
                    margin: [10, 2, -3, 2],
                    filename: 'member_details_batch_<?php echo $user_friend[0]['YR_OF_PASS'] ?>.pdf',
                    image: {
                        type: 'jpeg',
                        quality: 1
                    },
                    html2canvas: {
                        dpi: 192,
                        scale: 1,
                        letterRendering: true,
                        useCORS: true
                    },
                    jsPDF: {
                        unit: 'mm',
                        format: 'a4',
                        orientation: 'portrait'
                    }
                };
                html2pdf().from(invoice).set(opt).save();
            });
        }
    </script>





    <!-- <script>
        $(document).ready(function() {
            $('#myTable').DataTable({
                dom: 'lBfrtip',
                buttons: [
                    'excel'
                ]
            });
        });
    </script> -->

    <!-- <script>
        $(document).ready(function() {
            var dataTable = $('#myTable').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                        extend: 'pdfHtml5',
                        text: 'Download',
                        className: 'pdf-button',
                        customize: function(doc) {
                            // Center the content of the table in the PDF
                            var colCount = new Array(doc.content[1].table.body[0].length + 1).join('*').split('').map(function() {
                                return 'auto';
                            });

                            doc.styles.tableBody = {
                                valign: 'middle',
                                halign: 'center'
                            };
                            doc.content[1].table.widths = colCount;

                            // Check the number of rows
                            var rowCount = dataTable.rows().count();

                            // Set orientation based on the number of rows
                            doc.pageOrientation = (rowCount < 10) ? 'landscape' : 'portrait';

                            // Apply custom styles to the header
                            doc.content[1].table.headerRows = 1; // Ensure the header is included in the first row
                            doc.styles.tableHeader = {
                                fillColor: '#ECF0EC',
                                textColor: '#fff',
                                fontSize: 12,
                                bold: true
                            };

                            // Center the entire table on the page
                            doc.content[1].layout = {
                                hLineWidth: function(i, node) {
                                    return 1; // Set horizontal line width
                                },
                                vLineWidth: function(i, node) {
                                    return 1; // Set vertical line width
                                },
                                hLineColor: function(i, node) {
                                    return [0, 0, 0]; // Set black color for horizontal lines
                                },
                                vLineColor: function(i, node) {
                                    return [0, 0, 0]; // Set black color for vertical lines
                                },
                                paddingLeft: function(i, node) {
                                    return 4;
                                },
                                paddingRight: function(i, node) {
                                    return 4;
                                },
                                paddingTop: function(i, node) {
                                    return 4;
                                },

                                halign: 'center',
                                valign: 'middle' // Added to center content vertically
                            };
                        }
                    },
                    {
                        extend: 'excelHtml5', // Add Excel button
                        text: 'Download',
                        titleAttr: 'Export to Excel',
                        className: 'excel-button', // Add a class to the Excel button
                        exportOptions: {
                            modifier: {
                                page: 'all'
                            }
                        }
                    }
                ]
            });
        });
    </script> -->




    <!-- bar chart start -->
    <script>
        <?php
        // Initialize arrays
        $xValues = [];
        $yValues = [];
        $barColors = [];

        // Your PHP code here to retrieve dynamic data
        $curs_sql_graph = oci_new_cursor($conn);

        $sql_graph = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DF_GRAPH(:cur_data,:CAT_CODE,:DGR_CODE,:CHANNEL,:REPORT_LEVEL_CODE); end;");

        oci_bind_by_name($sql_graph, ":cur_data", $curs_sql_graph, -1, OCI_B_CURSOR);
        oci_bind_by_name($sql_graph, ":CAT_CODE", $CAT_CODE, -1, SQLT_CHR);
        oci_bind_by_name($sql_graph, ":DGR_CODE", $DGR_CODE, -1, SQLT_CHR);
        oci_bind_by_name($sql_graph, ":CHANNEL", $CHANNEL, -1, SQLT_CHR);
        oci_bind_by_name($sql_graph, ":REPORT_LEVEL_CODE", $REPORT_LEVEL_CODE, -1, SQLT_CHR);

        oci_execute($sql_graph);
        oci_execute($curs_sql_graph);

        while (($row_curs_sql_graph = oci_fetch_array($curs_sql_graph, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues[] = $row_curs_sql_graph['REPORT_X'];
            $yValues[] = $row_curs_sql_graph['NO_OF_MEM'];
            $barColors = ["green", "yellow", "blue", "orange", "brown", "#329262", "#5574a6", "#3b3eac", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1", "#8690C2", "#dc3912", "#ffb23f", "#0D153C "];
        }
        ?>
        const xValues = <?php echo json_encode($xValues); ?>;
        const yValues = <?php echo json_encode($yValues); ?>;
        const barColors = <?php echo json_encode($barColors); ?>;

        // Create the chart
        const ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx = chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "#000";
                        ctx.textAlign = "center";
                        ctx.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx.fillText(dataset.data[i], model.x, yPos);
                            }
                        });
                    }
                }
            }
        });
    </script>


    <!-- bar chart end -->



    <!-- bar chart start -->
    <script>
        <?php
        // Initialize arrays
        $xValues1 = [];
        $yValues1 = [];
        $barColors1 = [];

        // Your PHP code here to retrieve dynamic data
        $curs_sql_graph2 = oci_new_cursor($conn);

        $sql_graph2 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_DAy_wise_Reg_GRAPH_DATA(:cur_data,:p_batch); end;");

        oci_bind_by_name($sql_graph2, ":cur_data", $curs_sql_graph2, -1, OCI_B_CURSOR);
        oci_bind_by_name($sql_graph2, ":p_batch", $BATCH, -1, SQLT_CHR);


        oci_execute($sql_graph2);
        oci_execute($curs_sql_graph2);

        while (($row_curs_sql_graph2 = oci_fetch_array($curs_sql_graph2, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues1[] = $row_curs_sql_graph2['DD'];
            $yValues1[] = $row_curs_sql_graph2['NO_OF_REG'];
            $barColors1 = ["green", "yellow", "blue", "orange", "brown", "#329262", "#5574a6", "#3b3eac", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1"];
        }
        ?>
        const xValues1 = <?php echo json_encode($xValues1); ?>;
        const yValues1 = <?php echo json_encode($yValues1); ?>;
        const barColors1 = <?php echo json_encode($barColors1); ?>;

        // Create the chart
        const ctx1 = document.getElementById('myChart1').getContext('2d');
        new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: xValues1,
                datasets: [{
                    backgroundColor: barColors1,
                    data: yValues1
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx1 = chart.ctx;
                        ctx1.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx1.fillStyle = "#000";
                        ctx1.textAlign = "center";
                        ctx1.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx1.fillText(dataset.data[i], model.x, yPos);
                            }
                        });
                    }
                }
            }
        });
    </script>


    <!-- bar chart end -->



    <!-- bar chart start -->
    <script>
        <?php
        // Initialize arrays
        $xValues2 = [];
        $yValues2 = [];
        $barColors2 = [];

        // Your PHP code here to retrieve dynamic data
        $curs_sql_graph3 = oci_new_cursor($conn);

        $sql_graph3 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Batch_wise_Reg_top_GRAPH_DATA(:cur_data); end;");

        oci_bind_by_name($sql_graph3, ":cur_data", $curs_sql_graph3, -1, OCI_B_CURSOR);


        oci_execute($sql_graph3);
        oci_execute($curs_sql_graph3);

        while (($row_curs_sql_graph3 = oci_fetch_array($curs_sql_graph3, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues2[] = $row_curs_sql_graph3['BATCH'];
            $yValues2[] = $row_curs_sql_graph3['NO_OF_REG'];
            $barColors2 = ["#dd4477", "#b82e2e", "#0F0F0F", "#232022", "#dc3912", "#dd4477", "#109618", "#3b3eac", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1"];
        }
        ?>
        const xValues2 = <?php echo json_encode($xValues2); ?>;
        const yValues2 = <?php echo json_encode($yValues2); ?>;
        const barColors2 = <?php echo json_encode($barColors2); ?>;

        // Create the chart
        const ctx2 = document.getElementById('myChart2').getContext('2d');
        new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: xValues2,
                datasets: [{
                    backgroundColor: barColors2,
                    data: yValues2
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx2 = chart.ctx;
                        ctx2.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx2.fillStyle = "#000";
                        ctx2.textAlign = "center";
                        ctx2.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx2.fillText(dataset.data[i], model.x, yPos);
                            }
                        });
                    }
                }
            }
        });
    </script>


    <!-- bar chart end -->





    <!-- Donation Bar chart start -->
    <script>
        <?php
        // Your PHP code to fetch dynamic data
        $xValues3 = [];
        $yValues3 = [];
        $barColors3 = [];
        $noOfContrValues = [];

        $curs_sql_graph4 = oci_new_cursor($conn);

        $sql_graph4 = oci_parse($conn, "begin PKG_DASH_BOARD.DPD_Batch_wise_Donation_GRAPH_DATA(:cur_data); end;");

        oci_bind_by_name($sql_graph4, ":cur_data", $curs_sql_graph4, -1, OCI_B_CURSOR);

        oci_execute($sql_graph4);
        oci_execute($curs_sql_graph4);

        while (($row_curs_sql_graph4 = oci_fetch_array($curs_sql_graph4, OCI_ASSOC + OCI_RETURN_NULLS)) != false) {
            $xValues3[] = $row_curs_sql_graph4['YR_OF_PASS'];
            $yValues3[] = $row_curs_sql_graph4['PER_CONT'];
            $noOfContrValues[] = $row_curs_sql_graph4['NO_OF_CONTR'];
            $barColors3 = ["#232022", "#A2A2AB", "#232022", "#232022", "#990099", "#9ad7e8", "#396ace", "#0c5922", "#b77322", "#16d620", "#f43f9e", "#9c5935", "#a9c413", "#2a778d", "#668d1c", "#bea413", "#0c5922", "#743411", "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#9ad7e8", "#396ace", "#dc3912", "#ffb23f", "#109618", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#0F0F0F", "#1E5C73", "#43E7A1", "#0EF20E", "#0C540C", "#2B32CA", "#A2A2AB", "#350A32", "#7E1277", "#93E833", "#362E3B", "#B63B83", "#F04E1B", "#504E4D ", "#0A0126", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#232022", "#E50C93", "#5574a6", "#1E5C73", "#43E7A1"];
        }
        ?>
        const xValues3 = <?php echo json_encode($xValues3); ?>;
        const yValues3 = <?php echo json_encode($yValues3); ?>;
        const noOfContrValues = <?php echo json_encode($noOfContrValues); ?>;
        const barColors3 = <?php echo json_encode($barColors3); ?>;

        const ctx3 = document.getElementById('myChart3').getContext('2d');
        new Chart(ctx3, {
            type: 'bar',
            data: {
                labels: xValues3,
                datasets: [{
                    label: 'Total Donation',
                    backgroundColor: barColors3,
                    data: yValues3
                },
                {
                    label: 'Total Donor',
                    backgroundColor: "green",
                    data: noOfContrValues
                }
                ]
            },
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    // text: 'Total Alumni'
                },
                tooltips: {
                    enabled: false
                },
                animation: {
                    onComplete: function () {
                        const chart = this.chart;
                        const ctx2 = chart.ctx;
                        ctx2.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx2.fillStyle = "#000";
                        ctx2.textAlign = "center";
                        ctx2.textBaseline = "bottom";
                        this.data.datasets.forEach(function (dataset) {
                            for (let i = 0; i < dataset.data.length; i++) {
                                const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                const yPos = model.y - 5; // Adjust the vertical position as needed
                                ctx2.save();
                                ctx2.translate(model.x, model.y);
                                ctx2.rotate(-Math.PI / 6); // Rotate text 90 degrees
                                ctx2.fillText(dataset.data[i], 0, 0);
                                ctx2.restore();
                            }
                        });
                    }
                }
            }
        });
    </script>





    <!-- Donation Bar chart end -->


    <!-- Donation data table  -->
    <script>
        $(document).ready(function () {
            $('#example').DataTable();
        });
    </script>


    <script>
        function exportToExcel(tableId, filename) {
            const table = document.getElementById(tableId);
            const ws = XLSX.utils.table_to_sheet(table);

            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

            // Write to binary string
            const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' });

            // Create a Blob object
            const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });

            // Create a download link
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', `${filename}.xlsx`);
            document.body.appendChild(link);

            // Trigger the download
            link.click();

            // Clean up
            document.body.removeChild(link);
        }

        function s2ab(s) {
            const buf = new ArrayBuffer(s.length);
            const view = new Uint8Array(buf);
            for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }
    </script>



    <!-- search table buttuon starts  -->
    <script>
        function filterTable() {
            // Get input value and convert to lowercase for case-insensitive search
            var input = document.getElementById('searchInput').value.toLowerCase();

            // Get all table rows
            var rows = document.getElementById('table_id').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

            // Iterate through rows and hide/show based on search input
            for (var i = 0; i < rows.length; i++) {
                var rowVisible = false;

                // Iterate through all columns (td elements) in the current row
                for (var j = 0; j < rows[i].cells.length; j++) {
                    var cell = rows[i].cells[j];
                    var cellValue = cell.textContent || cell.innerText;

                    // Check if the cell value contains the search input
                    if (cellValue.toLowerCase().indexOf(input) > -1) {
                        rowVisible = true;
                        break; // Break out of the loop if a match is found in any column
                    }
                }

                // Set the display property based on whether the row should be visible
                rows[i].style.display = rowVisible ? '' : 'none';
            }
        }
    </script>

    <!-- search table buttuon ends  -->


<script>
    // Using the existing launch date from your code
const launchDate = new Date(2026, 00, 09, 0, 0, 0); // YYYY, MM (0-based), DD, HH, MM, SS
const countdownElement = document.querySelector(".countdown-blocks");

// Your existing createBlock function
const createBlock = (label, value) => {
    const block = document.createElement("div");
    block.className = "time-block";

    const valueEl = document.createElement("span");
    valueEl.className = "time-value";
    // Add leading zeros for single-digit values
    valueEl.textContent = value < 10 ? `0${value}` : value;

    const labelEl = document.createElement("p");
    labelEl.className = "time-label";
    labelEl.textContent = label;

    // Add pulsing animation to seconds block
    if (label === "Seconds") {
        valueEl.style.animation = "pulse 1s infinite";
    }

    block.appendChild(valueEl);
    block.appendChild(labelEl);
    return block;
};

// Modified updateCountdown function
const updateCountdown = () => {
    const now = new Date();
    const difference = launchDate - now;

    if (difference > 0) {
        const timeLeft = {
            Days: Math.floor(difference / (1000 * 60 * 60 * 24)),
            Hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
            Minutes: Math.floor((difference / 1000 / 60) % 60),
            Seconds: Math.floor((difference / 1000) % 60)
        };

        countdownElement.innerHTML = "";
        for (const [label, value] of Object.entries(timeLeft)) {
            countdownElement.appendChild(createBlock(label, value));
        }
    } else {
        // Handle countdown expiration
        countdownElement.innerHTML = "";
        document.querySelector(".countdown-title").textContent = "Launch Day!";
        document.querySelector(".countdown-description").textContent =
            "The day has arrived!";

        const messageBlock = document.createElement("div");
        messageBlock.className = "time-block expired-message";
        messageBlock.style.gridColumn = "1 / -1";
        messageBlock.style.padding = "2rem";
        messageBlock.textContent = "We're live now!";

        countdownElement.appendChild(messageBlock);
        clearInterval(timer);
    }
};

// Initialize and set the interval
updateCountdown();
const timer = setInterval(updateCountdown, 1000);

</script>

</body>

</html>