<?php
ini_set('display_errors', 1);

require_once '../../../../../resources/base_path_include.php';

require_once $base_path_to_learning_resources  . "includes/connect.php"; // use require for mandatory files
require_once $base_path_to_learning_resources . 'lib/function.php';
require_once $base_path_to_learning_resources . 'lib/validate_api_signature.php';

// Validation file
require_once $base_path_to_learning_resources . 'lib/validate_function.php';
require_once $base_path_to_learning . 'user_management/authenticate.php';
require_once $base_path_to_learning . 'admin_api/academic_session/functions/functions.php';
require_once $base_path_to_learning . 'functions/common_functions.php';
// DB access function
require_once $base_path_to_learning_resources . 'includes/specific_db_config.php';

require_once $base_path_to_learning . "vendor/autoload.php";
require_once $base_path_to_learning_resources . 'lib/bucket_functions/bucket_functions.php';
require_once $base_path_to_learning_resources . 'includes/aws_bucket_config.php';

use Aws\S3\S3Client;
use Aws\S3\Exception\S3Exception;

// Fetch necessary data
$institutions = getInstitution($conn_rjllearning, $institution_id);
$additional_data = ['address', 'pincode', 'contact_number', 'email'];
$branch = getBranchInfo($conn_rjllearning_specific, $institution_id, $branch_id, $additional_data);

$data = geStudenIDCardTemplate($conn_rjllearning, $conn_rjllearning_specific, $institution_id, $branch_id, $class_id, $section_id, $student_id, $id_card_template_selected);

StudentFirstTemplate($institutions, $branch, $data, $primary_color, $secondary_color, $display_filter);

function StudentFirstTemplate($institutions, $branch, $data, $primary_color, $secondary_color, $display_filter)
{
    // Initialize container
    $html = '<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student ID Cards</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .id-card {
            width: 460px;
            max-width: 800px;
            height: 300px;
            aspect-ratio: 16 / 9;
            border: 1px solid black;
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
            background-color: white;
            margin: 20px; /* Added margin for separation */
            page-break-inside: avoid; /* Prevent page break inside ID cards */
        }
        .id-card-header {
            background-color: ' . ($primary_color) . ';
            color: white;
            text-align: center;
            padding: 1vw;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .img1 {
            width: 60px;
            height: 60px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 15px;
        }
        .id-card-content {
            margin-left: 80px;
            text-align: center;
        }
        .school-name {
            font-size: 25px;
            font-weight: bold;
        }
        .address-contact {
            font-size: 12px;
            text-align: center;
        }
        .dotted_line {
            width: 100%;
            height: 8px;
            background: ' . ($secondary_color) . ';
            margin-top: 2px;
            display: flex;
            align-items: center;
        }
        .dotted_line > div {
            width: 100%;
            border-top: 2px dotted white;
        }
        .details {
            width: 60%;
            display: flex;
            margin: 14px 15px;
            flex-wrap: wrap;
            padding: 1px;
            box-sizing: border-box;
        }
        .details table {
            width: 100%;
            table-layout: fixed;
        }
        .details td, .details th {
            font-size: 14px;
            font-weight: bold;
            word-wrap: break-word;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            line-height: 0.9;
        }
        .adjustable {
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 3em;
            padding: 0;
        }
        .photo {
            width: 100%;
            flex: 1;
            padding: 2px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            position: absolute;
            top: 95px;
            right: 12px;
        }
        .photo img {
            width: 135px;
            height: 150px;
            border: 2px solid #000;
        }
        .footer {
            background-color: ' . ($primary_color) . ';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 17px;
            padding: 0;
            text-align: center;
            z-index: 1000;
        }
        .session {
            width: 33%;
            font-weight: bold;
            text-align: center;
            position: absolute;
            right: 10px;
            top: 255px;
        }
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px; /* Added gap between cards */
        }
        @media print {
            .id-card {
                page-break-inside: avoid; /* Avoid page break inside ID card */
                margin-bottom: 15px; /* Maintain margin for separation in print */
            }
            .grid-container {
                display: block; /* Ensure proper display in print */
            }
            body {
                margin: 0; /* Remove default body margin for print */
            }
        }
    </style>
    
    
    
    <script>
document.addEventListener("DOMContentLoaded", function() {
    function adjustFontSize(element) {
        const container = element.parentElement;
        let fontSize = parseFloat(getComputedStyle(element).fontSize) || 14;

        while (element.scrollWidth > container.clientWidth || element.scrollHeight > container.clientHeight) {
            fontSize -= 1; // Decrease font size
            element.style.fontSize = fontSize + "px";

            if (fontSize <= 12) break; // Minimum font size limit
        }
    }

    const adjustableElements = document.querySelectorAll(".adjustable");
    adjustableElements.forEach(adjustable => adjustFontSize(adjustable));

    // Adjust font size on window resize
    window.onresize = () => {
        adjustableElements.forEach(adjustable => adjustFontSize(adjustable));
    };
});
</script>

</head>
<body>';

    // For display_filter = 2, wrap in a grid container
    if ($display_filter == 2) {
        $html .= '<div class="grid-container">';
    }

    foreach ($data as $student_rows) {
        $html .= '
        <div class="id-card">
            <div class="id-card-header">
                <img class="img1" src="' . $institutions['logo'] . '" alt="logo">
                <div class="id-card-content">
                    <div class="school-name">' . ($institutions['institution_name']) . '</div>
                    <div class="address-contact">' . ($branch['name']) . '</div>
                </div>
            </div>
            <div class="dotted_line">
                <div></div>
            </div>
            <div class="details">
                <table> ';
        if (isset($student_rows['student']['name'])) {
            $html .= '
                    <tr>
                        <td><strong>Name:</strong></td>
                        <td class="adjustable">' . ($student_rows['student']['name']) . '</td>
                    </tr>';
        }
        if (isset($student_rows['student']['fathername'])) {
            $html .= '
                    <tr>
                        <td><strong>F. Name:</strong></td>
                        <td class="adjustable">' . ($student_rows['student']['fathername']) . '</td>
                    </tr>';
        }
        if (isset($student_rows['student']['class']['class_name']) and isset($student_rows['student']['section']['section_name'])) {
            $html .= '
                    <tr>
                        <td><strong>Class:</strong></td>
                        <td class="adjustable">' . ($student_rows['student']['class']['class_name']) . ' &nbsp; ' . ($student_rows['student']['section']['section_name']) . '</td>
                    </tr>';
        }
        if (isset($student_rows['student']['mobile'])) {
            $html .= '
                    <tr>
                        <td><strong>Ph. No.:</strong></td>
                        <td class="adjustable">' . ($student_rows['student']['mobile']) . '</td>
                    </tr>';
        }
        if (isset($student_rows['student']['dob'])) {
            $html .= '
                    <tr>
                        <td><strong>D.O.B.:</strong></td>
                        <td class="adjustable">' . ($student_rows['student']['dob']) . '</td>
                    </tr>';
        }
        if (isset($student_rows['student']['admission_number'])) {
            $html .= '
                    <tr>
                        <td><strong>Adm. No.:</strong></td>
                        <td class="adjustable">' . ($student_rows['student']['admission_number']) . '</td>
                    </tr>';
        }
        if (isset($student_rows['student']['address_line_1'])) {
            $html .= '
                    <tr>
                        <td><strong>Address:</strong></td>
                        <td class="adjustable">' . ($student_rows['student']['address_line_1']) . '</td>
                    </tr>';
        }
        $html .= ' </table>
            </div>
            <div class="photo">
                <img src="' . ($student_rows['student']['student_profile_image']) . '" alt="Student Photo">
            </div>
            
            <div class="session">SESSION: 2023-24</div>
            <div class="footer"></div>
        </div>';
    }

    if ($display_filter == 2) {
        $html .= '</div>';
    }

    $html .= '</body>
</html>';

    echo $html;
}
