<?php
if(!isset($_GET['code'])){
    echo "<script>location.href='https://employee.nishtyainfotech.com/404';</script>";
}
?>

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

<head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Employee Profile</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="preconnect stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="preconnect stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<style>
    .clipped-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: #172027;
        z-index: -1;
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
        transition: clip-path 2s ease-in-out;
    }
    
    .flip-card-container {
        width: 100%;
        height: 100%;
        perspective: 500px; /* 3D perspective */
    }
    .flip-card{
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 2s;
        transform-style: preserve-3d;
    }
    /* Flip card trigger */
    .flip-card.flip {
        transform: rotateY(180deg);
    }

    .flip-card-front, .flip-card-back{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;  
    }

    .flip-card-back {
        transform: rotateY(180deg);
    }
    .next-button{
        position: absolute;
        top: 5px;
        right: 10px;
        
    }
</style>

<body class="d-flex justify-content-center align-items-center" style="height:100vh;">

        <!-- 172027 -->
    <div class="" style="width: 380px; height:570px;">

        <div class="flip-container">
            <div class="flip-card" id="flip-card">
                <div class="flip-card-front">
                    <div class="text-center text-white rounded d-flex align-items-center justify-content-center position-relative" style="width: 380px; height:570px; background-color:#172027;">
                        <div>
                            <div class="d-flex align-items-center justify-content-center mb-3" >
                                <div style="width:120px; height: 120px; border-radius: 50%; padding:5px; background-color:#fff; display: flex; align-items: center; justify-content: center;">
                                    <img src="https://cdn.nishtyainfotech.com/content/jobaaj/assets/svg/logos/jobaaj.png" alt="" class="img-fluid" style="border-radius:50%;">
                                </div>
                            </div>
                            <h5 class="mb-1">Nishtyainfotech PVT. LTD.</h5>
                            <p class="mb-0" style="font-size: 14px;">Office no. 810 & 811, 8th Floor, Corporate Park,<br>Sanjay Palace, Sanjay Place, Civil Lines,<br>Agra, Uttar Pradesh 282002</p>
                        </div>

                        <!-- <div class="next-button"><i class="bi bi-arrow-right fs-3 fw-bold"></i></div> -->
                    </div>

                </div>
                <div class="flip-card-back">
                    <div class="card-design text-center border rounded shadow-sm position-relative">
                        <div class="p-3">
                            <div class="mb-4" style="color:#172027;">
                                <img src="https://cdn.nishtyainfotech.com/content/jobaaj/assets/svg/logos/jobaaj.png" alt="" style="width:100px;">
                                <!-- <h5 class="mb-1">Jobaaj</h5> -->
                            </div>
                            <div class="d-flex justify-content-center">
                                <div style="width:120px; background:#fff; padding:10px; border-radius:50%;">
                                    <img src="https://cdn.nishtyainfotech.com/content/employee/images/avatar.png" id="image" alt="" style="border-radius:50%; width:100px; height:100px;">
                                </div>
                            </div>
                            <div class="text-center text-white">
                                <h4 class="mb-0" id="name">Not Available</h4>
                                <p class="mb-0" id="designation_name" style="font-size:14px;">Not Available</p>
                            </div>
                            <div class="text-white my-3 ">
                                <table>
                                    <tr>
                                        <td style="text-align: left;">Employee Id</td>
                                        <td style="text-align:center; padding:0px 10px;">:</td>
                                        <td style="text-align: left;" id="employee_id">Not Available</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left;">Joining Date</td>
                                        <td style="text-align:center; padding:0px 10px;">:</td>
                                        <td style="text-align: left;" id="joining_date">Not Available</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left;">E-mail</td>
                                        <td style="text-align:center; padding:0px 10px;">:</td>
                                        <td style="text-align: left;" id="email">Not Available</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left;">Phone</td>
                                        <td style="text-align:center; padding:0px 10px;">:</td>
                                        <td style="text-align: left;" id="phone">Not Available</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left;">Manager</td>
                                        <td style="text-align:center; padding:0px 10px;">:</td>
                                        <td style="text-align: left;" id="leader_name">Not Available</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left;">Date of Birth</td>
                                        <td style="text-align:center; padding:0px 10px;">:</td>
                                        <td style="text-align: left;" id="dob">Not Available</td>
                                    </tr>
                                </table>
    
                            </div>
                        </div>
    
                        <div class="clipped-content rounded"></div>
    
                    </div>
                </div>
            </div>
        </div>
    
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
    function adjustClipPath() {
        const card = document.querySelector('.card-design');
        const clippedContent = document.querySelector('.clipped-content');
        const cardHeight = card.offsetHeight;

        // Dynamically adjust clip-path based on card size
        const percentage = cardHeight / 2; // Adjust the ratio as needed

        // Output card height and calculated percentage for debugging
        // console.log("🚀 ~ adjustClipPath ~ cardHeight:", cardHeight);
        // console.log("🚀 ~ adjustClipPath ~ percentage:", percentage);

        // Adjust clip-path by combining percentage and pixel values dynamically
        const newClipPath = `polygon(0 calc(0% + ${percentage-20}px), 
                                 100% calc(0% + ${percentage-120}px), 
                                 100% 100%, 0 100%)`;

        clippedContent.style.clipPath = newClipPath;

    }

    // Function to flip the card on click
    function flipCard() {
        const flipCard = document.getElementById('flip-card');
        flipCard.classList.toggle('flip');
        adjustClipPath(); // Adjust the clip-path on flip
    }
    // document.querySelector('.next-button').addEventListener('click', flipCard);

    // Adjust on load and resize
    window.addEventListener('resize', adjustClipPath);
    
    
    window.addEventListener('load', async function(){
        let data = await fetch(`https://emp3.jobaaj.com/fun/qr-api`, {
                    method: "POST",
                    body: JSON.stringify({ code: '<?php echo $_GET['code']; ?>' }),
                });
        let json = await data.json();
        console.log(json);

        for (const [key, value] of Object.entries(json)) {
            try {
                // console.log(key, value);
                let ele = document.getElementById(key);
                // console.log(ele.textContent);
                if(key == 'image'){
                    ele.setAttribute('src', value);
                }else{
                    ele.textContent = value??'Not Available';
                }
            } catch (error) {
                console.log(error);
            }
        }
        flipCard()

    });
</script>

</html>