<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID Card Generator</title>
    <style>
        body {
            font-family: Courier;
            display: flex;
            flex-direction: column;
            background-color: #f4f4f4;
            align-items: center;
            padding: 20px;
            margin: 0;
        }

        #instructions {
            background: #f8f9fa;
            padding: 20px;
            border: 2px solid #ccc;
            border-radius: 10px;
            max-width: 650px;
 }

        canvas {
            /* border: 2px dashed #000;
            border: 2px dotted #000; */
            border: 2px solid #000;
            margin: 20px;
            max-width: 700px;
            width: 98vw;
            height: auto;
            border-radius: 10px;
        }

        button {
            background-color: #003060;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 17px;
             transition: 0.3s;
        }

        button:hover {
            background-color: #004080;
        }

        input {
            display: none;
        }
    </style>
</head>

<body>
    <div id="instructions">
        <li>Click on any text field (Student ID, Name, Department, etc.) to edit the information.</li>
        <li>Click on the photo/signature area to upload a student's photo/signature.</li>
        <li>Once all details are filled, click the "Download ID Card" button to save the ID card.</li>
    </div>
    <canvas id="Canvas" width="700" height="450"></canvas>
    <button id="downloadButton">Download ID Card</button>
    <input type="file" id="uploadPhoto" accept="image/*">
    <input type="file" id="uploadSign" accept="image/*">

    <script>
        const canvas = document.getElementById('Canvas');
        const ctx = canvas.getContext('2d');
        const uploadPhoto = document.getElementById('uploadPhoto');
        const uploadSign = document.getElementById('uploadSign');

        const radius = 10;
        const MARGIN = 5;
        const WIDTH = 700;
        const HEIGHT = 450;

        let studentData = {
            ID: "24BTIT1113",
            Name: "SHRIWAS KARTIK NARENDRA",
            Department: "INFORMATION TECHNOLOGY",
            Program: "BT - IT",
            Year: getAcademicYearRange(),
            Photo: "https://raw.githubusercontent.com/kartikshriwas/data/refs/heads/main/Img/photo.webp",
            Sign: "https://raw.githubusercontent.com/kartikshriwas/data/refs/heads/main/Img/sign.webp",
            PRMITR: "https://raw.githubusercontent.com/kartikshriwas/data/refs/heads/main/Img/prmitr.webp",
            NAAC: "https://raw.githubusercontent.com/kartikshriwas/data/refs/heads/main/Img/image.webp",
            Stamp: "https://raw.githubusercontent.com/kartikshriwas/data/refs/heads/main/Img/stamp.webp"
        };

        function getAcademicYearRange() {
            const currentDate = new Date();
            const currentMonth = currentDate.getMonth() + 1;
            const currentYear = currentDate.getFullYear();

            const startYear = currentMonth >= 9 ? currentYear : currentYear - 1;
            const endYear = startYear + 1;

            return `${startYear}-${endYear}`;
        }

        function drawIDCard() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, WIDTH, HEIGHT);

            // Header Background
            ctx.fillStyle = "#004080";
            ctx.beginPath();
            ctx.moveTo(MARGIN + radius, MARGIN);
            ctx.arcTo(WIDTH - MARGIN, MARGIN, WIDTH - MARGIN, MARGIN + 172, radius);
            ctx.lineTo(WIDTH - MARGIN, MARGIN + 172);
            ctx.lineTo(MARGIN, MARGIN + 172);
            ctx.lineTo(MARGIN, MARGIN + radius);
            ctx.arcTo(MARGIN, MARGIN, MARGIN + radius, MARGIN, radius);
            ctx.closePath();
            ctx.fill();

            // Logo Background
            ctx.fillStyle = "#fff";
            ctx.beginPath();
            ctx.moveTo(MARGIN + 5 + radius, 10);
            ctx.lineTo(MARGIN + 5 + 105 - radius, 10);
            ctx.arcTo(MARGIN + 5 + 105, 10, MARGIN + 5 + 105, 10 + 160, radius);
            ctx.lineTo(MARGIN + 5 + 105, 10 + 160 - radius);
            ctx.arcTo(MARGIN + 5 + 105, 10 + 160, MARGIN + 5 + 105 - radius, 10 + 160, radius);
            ctx.lineTo(MARGIN + 5 + radius, 10 + 160);
            ctx.arcTo(MARGIN + 5, 10 + 160, MARGIN + 5, 10 + 160 - radius, radius);
            ctx.lineTo(MARGIN + 5, 10 + radius);
            ctx.arcTo(MARGIN + 5, 10, MARGIN + 5 + radius, 10, radius);
            ctx.closePath();
            ctx.fill();
            ctx.fillStyle = "#fff";
            ctx.beginPath();
            ctx.moveTo(WIDTH - MARGIN - 110 + radius, 10);
            ctx.lineTo(WIDTH - MARGIN - 110 + 104 - radius, 10);
            ctx.arcTo(WIDTH - MARGIN - 110 + 104, 10, WIDTH - MARGIN - 110 + 104, 10 + 160, radius);
            ctx.lineTo(WIDTH - MARGIN - 110 + 104, 10 + 160 - radius);
            ctx.arcTo(WIDTH - MARGIN - 110 + 104, 10 + 160, WIDTH - MARGIN - 110 + 104 - radius, 10 + 160, radius);
            ctx.lineTo(WIDTH - MARGIN - 110 + radius, 10 + 160);
            ctx.arcTo(WIDTH - MARGIN - 110, 10 + 160, WIDTH - MARGIN - 110, 10 + 160 - radius, radius);
            ctx.lineTo(WIDTH - MARGIN - 110, 10 + radius);
            ctx.arcTo(WIDTH - MARGIN - 110, 10, WIDTH - MARGIN - 110 + radius, 10, radius);
            ctx.closePath();
            ctx.fill();
            // load Images
            loadImage(studentData.PRMITR, MARGIN + 17, MARGIN + 30, 80, 100);
            loadImage(studentData.NAAC, WIDTH - MARGIN - 130, MARGIN + 40, 140, 80);
            loadImage(studentData.Stamp, 520, 370, 120, 80);
            loadImage(studentData.Photo, 12, 195, 140, 160);
            loadImage(studentData.Sign, 12, 370, 140, 40);
            // Add Texts
            ctx.fillStyle = "#fff";
            ctx.font = "bold 15px Arial";
            ctx.textAlign = "center";
            ctx.fillText("VIDARBHA YOUTH WELFARE SOCIETY'S", WIDTH / 2, MARGIN + 21);
            ctx.font = "bold 25px Arial";
            ctx.fillText("PROF. RAM MEGHE INSTITUTE OF", WIDTH / 2, MARGIN + 50);
            ctx.fillText("TECHNOLOGY AND RESEARCH", WIDTH / 2, MARGIN + 80);
            ctx.font = "bold 15px Arial";
            ctx.fillText("BADNERA - AMRAVATI (MS) 44470)", WIDTH / 2, MARGIN + 106);
            ctx.font = "12px Arial";
            ctx.fillText("Approved by AICTE, New Delhi        Web: https://mitra.ac.in            Ph: 0721-2681246", WIDTH / 2, MARGIN + 124);
            ctx.font = "bold 15px Arial";
            ctx.fillText("(An Autonomous Institute)", WIDTH / 2, MARGIN + 140);
            ctx.font = "15px Arial";
            ctx.fillText("Affiliated to: Sant Gadge Baba Amravati University, Amravati", WIDTH / 2, MARGIN + 160);
            ctx.fillStyle = "#000";
            ctx.font = "20.5px Arial";
            ctx.textAlign = "left";
            editText("Student ID", 170, 220, studentData.ID);
            editText("Name", 170, 255, studentData.Name);
            editText("Dept", 170, 305, studentData.Department);
            editText("Programme", 170, 360, studentData.Program);
            editText("Year of", 170, 395, studentData.Year);
            ctx.fillText("Admission", 170, 425);
            ctx.font = "14px Arial";
            ctx.fillText("Sign of Student", 34, 420);
        }

        function parseInput(input) {
            const regex = /^(\d{2})(BT|BE|PG)([A-Z]{2})(\d{4})$/;
            const match = input.match(regex);
            if (!match) {
                return { error: "Invalid input format" };
            }
            const programCode = match[2];
            const departmentCode = match[3];
            const departmentMapping = {
                IT: "INFORMATION TECHNOLOGY",
                ME: "MECHANICAL",
                CE: "CIVIL",
                CE: "COMPUTER SCIENCE AND ENGINEERING ",
                ET: "ELECTRONICS AND TELECOMMUNICATION",
                AI: "ARTIFICIAL INTELLIGENCE AND DATA SCIENCE",
            };
            const departmentName =
                departmentMapping[departmentCode] || "Unknown Department";
            return {
                program: `${programCode} - ${departmentCode}`,
                department: departmentName,
            };
        }
 
        function loadImage(src, x, y, width, height) {
            const img = new Image();
            img.crossOrigin = "Anonymous";
            img.src = src;
            img.onload = () => {
                ctx.drawImage(img, x, y, width, height);
            }
        }

        function editText(label, x, y, value) {
            ctx.fillText(label, x, y);
            ctx.fillText(`:  ${value}`, x + 130, y);
        }

        canvas.addEventListener("click", function (event) {
            let rect = canvas.getBoundingClientRect();
            let mouseX = event.clientX - rect.left;
            let mouseY = event.clientY - rect.top;

            let fields = [
                { label: "Student ID", x: 170, y: 220, key: "ID" },
                { label: "Name", x: 170, y: 255, key: "Name" },
                { label: "Dept", x: 170, y: 305, key: "Department" },
                { label: "Programme", x: 170, y: 360, key: "Program" },
                { label: "Year of", x: 170, y: 395, key: "Year" },
                { label: "Admission", x: 170, y: 425, key: "Year" }
            ];

            for (let field of fields) {
                if (mouseX >= field.x && mouseX <= field.x + 440 && mouseY >= field.y - 15 && mouseY <= field.y + 5) {
                    let newValue = prompt(`Edit ${field.label}:`, studentData[field.key]);
                    if (newValue !== null) {
                        if (field.key === "ID") {
                            let parsedData = parseInput(newValue);
                            if (!parsedData.error) {
                                studentData.Program = parsedData.program;
                                studentData.Department = parsedData.department;
                            }
                        }
                        studentData[field.key] = newValue; drawIDCard();
                    }
                    return;
                }
            }

            if (mouseX >= 12 && mouseX <= 152 && mouseY >= 195 && mouseY <= 355) {
                uploadPhoto.click();
            }
            if (mouseX >= 12 && mouseX <= 152 && mouseY >= 370 && mouseY <= 410) {
                uploadSign.click();
            }
        });

        uploadPhoto.addEventListener("change", function (event){
            studentData.Photo = URL.createObjectURL(event.target.files[0]);
            drawIDCard();
        });

        uploadSign.addEventListener("change", function (event) {
            studentData.Sign = URL.createObjectURL(event.target.files[0]);
            drawIDCard();
        });

        document.getElementById('downloadButton').addEventListener('click', function () {
            const format = prompt("Enter the format (png, jpg, webp):", "png");

            if (!format) return;

            const validFormats = ["png", "jpg", "jpeg", "webp"];
            const chosenFormat = format.toLowerCase();

            if (!validFormats.includes(chosenFormat)) {
                alert("Invalid format! Please enter png, jpg, or webp.");
                return;
            }

            const link = document.createElement('a');
            link.download = `id_card.${chosenFormat}`;

            link.href = canvas.toDataURL(`image/${chosenFormat === "jpg" ? "jpeg" : chosenFormat}`);
            link.click();
        });

        canvas.addEventListener("mousemove", function (event) {
            const rect = canvas.getBoundingClientRect();
            const scaleX = WIDTH / rect.width;
            const scaleY = HEIGHT / rect.height;
            const mouseX = (event.clientX - rect.left) * scaleX;
            const mouseY = (event.clientY - rect.top) * scaleY;

            let isInteractive = false;

            if (mouseX >= 12 && mouseX <= 152 && mouseY >= 195 && mouseY <= 355) isInteractive = true;

            if (mouseX >= 12 && mouseX <= 152 && mouseY >= 370 && mouseY <= 410) isInteractive = true;

            const fields = [
                { x: 170, y: 220 }, { x: 170, y: 255 },
                { x: 170, y: 305 }, { x: 170, y: 360 },
                { x: 170, y: 395 }, { x: 170, y: 425 }
            ];

            fields.forEach(field => {
                if (mouseX >= field.x && mouseX <= field.x + 440 &&
                    mouseY >= field.y - 17 && mouseY <= field.y + 2) {
                    isInteractive = true;
                }
            });

            canvas.style.cursor = isInteractive ? 'pointer' : 'default';
        });
        drawIDCard();
    </script>
</body>

</html>