<?php

error_reporting(0);
include "fetch_data55.php";
include "connection.php";

$MEM_ID = $_GET['id'];

$sql = "SELECT 
  M.MEM_NAME,  M.MEM_MOBILE_NO,M.YR_OF_PASS,M.COLL_ROLL_NO,Y.YEAR_NAME,M.PRE_EMAIL,E.EVENT_DETAILS AS EVENT_NAME,R.EVENT_CODE,
  R.REG_NO,R.NO_OF_MEM,R.MEM_RATE,R.TOTAL_AMT,P.PAY_TIME FROM NAA_MEMBERS M JOIN NAA_EVENTS_REG R ON M.MEM_ID = R.MEM_ID
LEFT JOIN NAA_PAYMENT P ON M.MEM_MOBILE_NO = P.MEM_MOBILE_NO LEFT JOIN NAA_YEAR_MST Y ON M.YR_OF_PASS = Y.YEAR_CODE
LEFT JOIN NAA_EVENTS E ON R.EVENT_CODE = E.EVENT_CODE WHERE R.PAYMENT_STATUS = 'P' 
  AND M.MEM_ID = '$MEM_ID'";

// $sql = "SELECT NAA_MEMBERS.MEM_NAME,NAA_MEMBERS.MEM_MOBILE_NO,NAA_MEMBERS.SMS_MOBILE_NO,NAA_MEMBERS.YR_OF_PASS, 
// (SELECT NAA_YEAR_MST.YEAR_NAME FROM NAA_YEAR_MST WHERE NAA_MEMBERS.YR_OF_PASS=NAA_YEAR_MST.YEAR_CODE ) AS YEAR_NAME,
// NAA_MEMBERS.PRE_EMAIL, NAA_MEMBERS.COLL_ROLL_NO,
// NAA_EVENTS.EVENT_CODE, NAA_EVENTS.EVENT_DETAILS, NAA_EVENTS_REG.CHANNEL, NAA_EVENTS_REG.REG_NO, NAA_EVENTS_REG.NO_OF_MEM, NAA_EVENTS_REG.MEM_RATE,
// NAA_EVENTS_REG.NO_OF_SPOUSE, NAA_EVENTS_REG.SPOUSE_RATE, NAA_EVENTS_REG.NO_OF_CHILD, NAA_EVENTS_REG.CHILD_RATE,NAA_EVENTS_REG.PRE_CODE,NAA_EVENTS_REG.TOTAL_AMT,
// (SELECT NAA_PRE_DATE.PRE_DATE FROM NAA_PRE_DATE WHERE NAA_EVENTS_REG.PRE_CODE=NAA_PRE_DATE.PRE_CODE ) AS PRE_DATE, (select pay_time from naa_payment where mem_id= NAA_MEMBERS.MEM_ID  and PAY_STATUS='Successful'  and INV_TYPE='05') PAY_TIME, trunc(NAA_EVENTS_REG.CREATE_DATE) reg_date  ,decode(CHANNEL,'O','Online','Offline') CHANNEL 
// FROM NAA_MEMBERS,NAA_EVENTS,NAA_EVENTS_REG WHERE NAA_MEMBERS.MEM_ID = NAA_EVENTS_REG.MEM_ID AND  NAA_EVENTS_REG.EVENT_CODE='05'
// AND NAA_EVENTS.EVENT_CODE='05' AND   NAA_EVENTS_REG.PAYMENT_STATUS ='P' AND NAA_MEMBERS.MEM_ID='$MEM_ID'
// and (NAA_EVENTS_REG.channel='M' or  NAA_MEMBERS.mem_id in (select mem_id from naa_payment where INV_TYPE='05' and PAY_STATUS='Successful' ) )";
$parse = ociparse($conn, $sql);
oci_execute($parse);

// print_r($sql);
while ($row = oci_fetch_assoc($parse)) {
    $user_row[] = $row;
}

// var_dump($division);
// echo count($division);
oci_free_statement($parse);

$YER_TYPE = $user_row[0]['YEAR_TYPE'];
// echo "$YER_TYPE";


$MEM_NAME = $user_row[0]['MEM_NAME'];
// echo "$MEM_NAME";
$MEM_MOBILE_NO = $user_row[0]['MEM_MOBILE_NO'];
// echo "$MEM_MOBILE_NO";

$MEM_RATE = $user_row[0]['MEM_RATE'];
$SPOUSE_RATE = $user_row[0]['SPOUSE_RATE'];
$CHILD_RATE = $user_row[0]['CHILD_RATE'];
// $CHILD2_RATE = $user_row[0]['CHILD2_RATE'];
// $GUEST_RATE = $user_row[0]['GUEST_RATE'];
// $DRIVER_RATE = $user_row[0]['DRIVER_RATE'];

$MEM_NOS = $user_row[0]['NO_OF_MEM'];
$SPOUSE_NOS = $user_row[0]['NO_OF_SPOUSE'];
$NO_OF_CHILD = $user_row[0]['NO_OF_CHILD'];
// $NO_OF_CHILD2 = $user_row[0]['NO_OF_CHILD2'];
// $NO_OF_GUEST = $user_row[0]['NO_OF_GUEST'];
// $NO_OF_DRIVER = $user_row[0]['NO_OF_DRIVER'];

$FAMILY_RATE = $MEM_RATE + $SPOUSE_RATE + $CHILD_RATE;
// echo "$FAMILY_RATE";
// $FAMILY_NOS  = $MEM_NOS + $SPOUSE_NOS + $NO_OF_CHILD1 + $NO_OF_CHILD2 + $NO_OF_GUEST + $NO_OF_DRIVER;
$FAMILY_NOS  = $MEM_NOS + $SPOUSE_NOS + $NO_OF_CHILD;
// echo "$FAMILY_NOS";


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IET Event Card</title>
    <link rel="icon" href="./images/75logo.png" type="image/ico">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Poppins:wght@500&family=Roboto+Mono&display=swap" rel="stylesheet">

    <!-- html2pdf CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

    <style>
        body {
            background-color: #fff;
            font-family: 'Poppins', sans-serif;
        }

        .card-body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .id-page {
            width: 2.125in;
            height: 3.37in;
            border: 1px solid #000;
            padding: 10px;
            background-color: #fff;
            font-size: 9px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }

        .header {
            text-align: center;
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .header .school-name {
            color: #0c0a8a;
            font-weight: 600;
            font-size: 12px;
            margin: 0;
        }

        .header .event-title {
            color: #ddbe4d;
            font-family: 'Dancing Script', cursive;
            font-size: 14px;
            font-weight: bold;
            margin: 0;
        }

        .header .event-meta {
            color: #000;
            font-family: 'Roboto Mono', monospace;
            font-size: 10px;
            margin: 0;
        }

        .photo {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid #888;
        }

        .qr-img {
            width: 50px;
            height: 50px;
        }

        .label {
            font-weight: bold;
        }

        .info-text {
            font-size: 9px;
            margin-bottom: 2px;
        }

        .row-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .col-box {
            width: 32%;
        }

        .powered {
            text-align: center;
            margin-top: 5px;
        }

        .powered p {
            margin: 0;
            font-size: 10px;
            color: #061442;
        }

        .powered img {
            margin-top: -3px;
            height: 18px;
            width: 48px;
        }

        .note {
            font-size: 10px;
            color: red;
            margin-top: 8px;
            text-align: center;
        }

        @media print {
            .btn {
                display: none;
            }
        }
        .col-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px; /* Gap between lines */
}

.info-text {
    font-size: 9px;
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.label {
    font-weight: bold;
    min-width: 30px; /* Keeps label width consistent */
    /*display: inline-block;*/
}

.id-page {
    position: relative;
    width: 2.125in;
    height: 3.37in;
    padding: 10px;
    background-color: #fff;
    font-size: 9px;
    box-sizing: border-box;
    border: 1px solid #000;
}

/* Light watermark for back side only */
.id-page.back-side::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('image/logo.jpeg'); /* Watermark image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.08; /* Light watermark */
    z-index: 0;
    pointer-events: none; /* Avoid blocking clicks or selection */
}

/* Make content show on top of watermark */
.id-page.back-side > * {
    position: relative;
    z-index: 1;
}
.Contract p {
    margin: 0;
    padding: 0;
    line-height: 1.2; /* Optional: Adjust vertical spacing */
    font-size: 15px;   /* Optional: Adjust font size to match your card */
}

.id-page.back-side * {
        color: #000; /* Make all text black */
    }

    .Contract p {
        margin: 0;
        padding: 0;
        line-height: 1.2;
        font-size: 10px;
    }

    .powered p {
        margin: 0;
        font-size: 10px;
    }



    </style>
</head>
<body onload="download()">

<div class="container mt-3" id="print_doc">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div class="id-card-wrapper"> <!-- Page 1: Front -->
                    <div class="id-page">
                        <div class="header">
                            <p class="school-name" style="font-size: 10px">Holy Cross Girls High School</p>
                            <p class="event-title">75th Years Celebration</p>
                            <p class="event-meta">Venue: NULL</p>
                            <p class="event-meta">Date: NULL</p>
                        </div>

                        <hr style="margin: 5px 0;">

                        <div class="row-content" style="margin-top: 10px">
                            <div class="col-box text-left" style="display: flex; justify-content: center; align-items: center;">
                            <img src="data:image/jpeg;base64,<?php echo $photoout; ?>" 
                                 alt="Profile Photo" class="photo"
                                 onerror="this.onerror=null; this.src='images/default profile pic.png'" />
                        </div>


                            
                        </div>

                        <div class="row-content mt-4">
                            <div class="col-box text-left" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%;">
                                    <p class="info-text" style="font-weight: bold;"><?php echo $user_row[0]['MEM_NAME']; ?></p>
                                    <p class="info-text"><span class="label">SL No:</span> <?php echo $user_row[0]['REG_NO']; ?></p>
                                    <p class="info-text"><span class="label">Mobile:</span> <?php echo $user_row[0]['MEM_MOBILE_NO']; ?></p>
                                    <p class="info-text"><span class="label">SSC Year:</span> <?php echo $user_row[0]['YR_OF_PASS']; ?></p>
                                </div>


                        </div>

                        <div class="col-box text-right" style="display: flex; justify-content: center; align-items: center;margin-top: 10px">
                            <?php
                            $val = 'qrcode_entry.php?bn=' . urlencode($user_row[0]['REG_NO'] . ' ') .
                                   urlencode($user_row[0]['MEM_NAME'] . ' ') .
                                   '&an=' . urlencode($user_row[0]['MEM_MOBILE_NO'] . ' ') .
                                   '&vat=';
                            ?>
                            <img src="<?php echo $val ?>" alt="QR Code" class="qr-img" style="width: 80px; height: 80px;" />
                        </div>



                        
                    </div> 
                </div>

                   <div class="id-card-wrapper"> <!-- Page 2: Back -->
                        <div class="id-page back-side">
                            <div class="note" style="margin-top:30px">
                                <h6 style="font-size: 13px; font-weight: 600;">
                                    * অনুষ্ঠানে অংশগ্রহণ করার সময় কার্ডটি সঙ্গে রাখুন ।
                                </h6>

                                <p style="font-size: 10px; margin-top: 30px; color: red;">
                                    This card must be presented at entry.
                                </p>
                                <p style="font-size: 10px; margin-top: 20px; color: red;">
                                    Unauthorized duplication is prohibited.
                                </p>

                                <div class="Contract">
                                    <p>Emergency Contact</p>
                                    <p>01678601383</p>
                                </div>

                                <div class="powered" style="margin-top:30px">
                                    <p>Powered by</p>
                                    <img src="image/itbl_icon_1.jpeg" alt="ITBL Icon">
                                </div>
                            </div>
                        </div>
                    </div>


                    

                    

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

<!-- PDF Generation Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script>
    async function download() {
        const pages = document.querySelectorAll('.id-card-wrapper > .id-page');
        const { jsPDF } = window.jspdf;

        const pdf = new jsPDF({
            orientation: 'portrait',
            unit: 'in',
            format: [2.125, 3.37]
        });

        for (let i = 0; i < pages.length; i++) {
            const canvas = await html2canvas(pages[i], {
                scale: 2,
                useCORS: true
            });

            const imgData = canvas.toDataURL('image/jpeg', 1.0);

            if (i !== 0) {
                pdf.addPage([2.125, 3.37], 'portrait');
            }

            pdf.addImage(imgData, 'JPEG', 0, 0, 2.125, 3.37);
        }

        pdf.save('<?php echo $user_row[0]['MEM_NAME']; ?>_ID_Card.pdf');
    }
</script>



</body>
</html>





