<?php
$con = new mysqli('localhost', 'gdhhsxmy_kpamajeedmla', 'kpamajeedmla', 'gdhhsxmy_kpamajeedmla');

if ($con->connect_error) {
    die('Connection failed: ' . $con->connect_error);
}

// Fetch the ID from the URL parameter
$id = isset($_GET['id']) ? $_GET['id'] : null;

// Make sure $id is not null and is numeric to prevent SQL injection
if (!is_null($id) && is_numeric($id)) {
    // Use prepared statement to prevent SQL injection
    $stmt = $con->prepare('SELECT students.*, panchayath.panchayath FROM students INNER JOIN panchayath ON students.panchayath = panchayath.id WHERE students.id = ?');
    $stmt->bind_param('i', $id); // "i" for integer, $id is bound to the "?" placeholder
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        $row             = $result->fetch_assoc();
        $image_file_name = $row['photo'];
        $image_directory = ''; // Change this to your image directory path
        $image_url       = $image_directory . $image_file_name;

        // Set counter number based on the ID
        $counter_num = ceil($row['id'] / 150);
    } else {
        $image_url = 'path/to/default/image.png'; // Default or fallback image URL
    }

    $stmt->close();
} else {
    // Handle invalid or missing ID
    $image_url = 'path/to/default/image.png'; // Default or fallback image URL
}
$counter_num = ceil($row['id'] / 150);


$con->close();
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entry pass</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
    <style>
        .container {
            position: relative;
            display: inline-block;
        }

        .piece {
            width: 42%;
            height: 27%;
            background-image: url('<?php echo $image_url; ?>');
            background-size: cover;
           
            position: absolute;
            top: 53.6%;
            left: 28.7%;
            border-radius: 50%;
        }

        .download-btn {
            width: 100%;
            padding: 2%;
            /* Adjust padding as needed */
            box-sizing: border-box;
            /* Include padding in width calculation */
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 4vw;
            /* Adjust as needed */
            margin: 2% 0;
            /* Adjust margin as needed */
            cursor: pointer;
        }

        .counter-num {
            width: 122px;
            height: 114px;
            background-position: center;
            position: absolute;
            top: 74%;
            left: 68%;
            font-size: 12vw;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: bold;

        }

        .register-num {
            width: 25%;
            height: 9%;
            background-position: center;
            position: absolute;
            top: 81%;
            left: 3%;
            font-size: 4vw;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: bold;

        }

        .name {
            width: 70%;
            height: 10%;
            background-position: center;
            position: absolute;
            top: 82%;
            left: 16%;
            font-family: 'M PLUS Rounded 1c', sans-serif;
            /* Specify the font family */
            font-size: 4vw;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .panchayath {
            width: 30%;
            height: 10%;
            background-position: center;
            position: absolute;
            top: 85%;
            left: 35%;
            font-family: 'M PLUS Rounded 1c', sans-serif;

            font-size: 2vw;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

        }

        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div>
        <button id="download-btn" class="download-btn" onclick="downloadAndRedirect()">Download Pass </button>

    </div>
    <div class="container">

        <div class="piece"></div>
        <div class="counter-num"><?php echo $counter_num; ?></div>
        <div class="name">
            <?php echo $row['name']; ?></div>
        <div class="panchayath"> <?php echo $row['panchayath']; ?></div>
        <div class="register-num"><?php
                                    $reg = '';

if ($row['id'] < 10) {
    $reg = '0000' . $row['id'];
} elseif ($row['id'] < 100) {
    $reg = '000' . $row['id'];
} elseif ($row['id'] < 1000) {
    $reg = '00' . $row['id'];
}


echo $reg;


?></div>
        <img src="ticket.png" width="700px" alt="Ticket">
    </div>

    </div>




    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>
    <script>
        // Function to download the content as an image and redirect to index.php
        function downloadAndRedirect() {
            html2canvas(document.querySelector('.container')).then(canvas => {
                let link = document.createElement('a');
                link.download = 'download.png';
                link.href = canvas.toDataURL('image/png');
                link.click();

                // Add a small delay before redirecting
                // setTimeout(function() {
                //     window.location.href = 'https://kpamajeedmla.in/index.php';
                // }, 3000); // 1-second delay
            });
        }

        // Automatically trigger download and redirect function when the page is loaded
        // window.onload = function() {
        //     downloadAndRedirect();
        // };
    </script>
</body>

</html>

</html>