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

require_once '../../../../../resources/base_path_include.php';
require_once $base_path_to_learning_resources  . "includes/connect.php";
require_once $base_path_to_learning_resources . 'lib/function.php';
require_once $base_path_to_learning_resources . 'lib/validate_api_signature.php';
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/validate_faculty.php';
require_once $base_path_to_learning . 'admin_api/academic_session/functions/functions.php';
require_once $base_path_to_learning . 'functions/common_functions.php';
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;

$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, $display_filter);
StudentFirstTemplate($institutions, $branch, $data, $primary_color, $secondary_color, $display_filter);

function StudentFirstTemplate($institutions, $branch, $data, $primary_color, $secondary_color, $display_filter)
{
    // Start creating the HTML content
    $html = '<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Profile</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            color: #000;
        }

        .student-profile .card {
            border-radius: 10px;
            margin-bottom: 20px;
        }

       .profile_img {
            width: 120px;
            height: 130px;
            object-fit: cover;
            margin: 0px auto;
            border: 1px solid #ccc;
        }

        .student-profile .card h3 {
            font-size: 20px;
            font-weight: 700;
        }

        .student-profile .card p {
            font-size: 16px;
            color: #000;
        }

        .table th,
        .table td {
                font-size: 16px;
            //padding: 2px 6px;
            color: #000;
              font-weight: 400;
            text-align: left;
        }
        .table  {
            padding-left: 6px;
        }

         .table tr  {
            text-align: left;
        }

        .shadow-sm {
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
        }

        .card {
            width: 400px; /* Full width of the container */
            max-width: 400px; /* Maximum width */
            height: 280px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border: 1px solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
        
        }

        .bg-transparent {
            background-color: transparent !important;
        }

        .card-header {
            padding: .4rem .2rem;
            margin-bottom: 0;
            background-color: rgba(0, 0, 0, .03);
            
        }
        .card-body {
            flex: 1 1 auto;
            padding: 1.25rem;
        }

        .mb-0, .my-0 {
            margin-bottom: 0 !important;
        }

        .pr-1, .px-1 {
            padding-right: .25rem !important;
        }

        .col-lg-4 {
            width: 35%;
        }

        .flex-container {
            display: flex;
            background-color: ' . $primary_color . ';
        }

        .card-header, .card-body {
            background-color: ' . $secondary_color . ';
        }

    .container {
        // width: 100%;
        padding-right: var(--bs-gutter-x, 1.5rem);
        padding-left: var(--bs-gutter-x, 1.5rem);
        margin-right: auto;
        margin-left: auto;
    }
        .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: calc(var(--bs-gutter-x) / -2);
        margin-left: calc(var(--bs-gutter-x) / -2);
    }

        .col {
            flex: 1;
            padding: 9px;
        }
        
        @media (min-width: 768px) {
            .col-6 {
                 flex: 0 0 32%;
                width: 8.56cm; /* Width in cm */
                height: 5.4cm; /* Height in cm */
                width: 3.37in; /* Width in inches */
                height: 3.13in; /* Height in inches */
                
            }
        }
    
//         /* Content styles */

// #student-name {
//     font-size: 12px;
// }

// #student-address {
//     font-size: 12px;
// }
// #father-name {
//     font-size: 12px;
// }
     
// #father-text {
//     font-size: 12px;
// }
// #admission-number{
    
//     font-size: 12px;
// }
// #grade{
    
//     font-size: 12px;
// }
// #admission-text{
    
//     font-size: 12px;
// }
// #student-text{
    
//     font-size: 12px;
// }
// #grade-text{
    
//     font-size: 12px;
// }
// #phone-text{
    
//     font-size: 12px;
// }
// #mobile{
    
//     font-size: 12px;
// }
// 	.card {
//     overflow: hidden; /* Hide content that overflows the card */
// }

// .card * {
//     word-wrap: break-word; /* Break long words to avoid overflow */
//     overflow-wrap: break-word; /* For more consistent behavior across browsers */
// }
    </style>
</head>
<body>';

    if ($display_filter == 2) {
          $html .= ' <div class="container mt-4" >';
        $html .= '<div class="row g-4">';
    }

    foreach ($data as $student_rows) {
     
       
        $html .= '<div class="' . ($display_filter == 2 ? 'col col-6' : 'col-lg-4') . '">
            <div class="card shadow-sm">
               <header class="flex-container" id="header-content" style="padding: 2px 0; margin: 0;">
    <div style="padding: 0px; margin: 0; width: 20%;">
        <img class="logo" src="' . $institutions['logo'] . '" alt="School Logo" style="margin-bottom: 5px; width: 60px; height: 60px; border-radius: 50%;">
    </div>
    <div style="padding-top: 5px; width: 70%; text-align: center;">
        <span style="display: flex; align-items: center; font-weight: 600; font-size: 28px; color: #fff; font-family: calibri; justify-content: center;">' . $institutions['institution_name'] . '</span>
        <span style="display: flex; align-items: center; font-weight: 500; font-size: 14px; color: #fff; font-family: calibri; justify-content: center;">' . $branch['name'] . '</span>
        <span style="display: flex; align-items: center; font-weight: 500; font-size: 14px; color: #fff; font-family: calibri; justify-content: center;">' . $branch['address'] . ', ' . $branch['pincode'] . '</span>
        <span style="display: flex; align-items: center; font-weight: 500; font-size: 14px; color: #fff; font-family: calibri; justify-content: center;">' . $branch['contact_number'] . ' | ' . $branch['email'] . '</span>
    </div>
</header>

                <div class="card-header bg-transparent text-center" id="card-header">
                    <div style="float:left">';
        if (isset($student_rows['student']['student_profile_image']) && $student_rows['student']['student_profile_image'] != null) {
            $html .= '<img class="profile_img" src=' . $student_rows['student']['student_profile_image'] . ' alt="">';
        } else {
            $html .= '<img class="profile_img" src= alt=""> ';
        }
        $html .= '<h4 style="margin:0px;padding:0px;padding-top:2px;">Session 2023-24</h4>
                    </div>
                    <div>
                        <table class="table table-bordered">';
        if (isset($student_rows['student']['name'])) {
            $html .= '<tr> 
                                <th style=";font-weight:700;">Name:</th>
                               
                                <td style="font-weight:700;" id="student-name">' . $student_rows['student']['name'] . '</td>
                            </tr>';
        }
        if (isset($student_rows['student']['fathername'])) {
            $html .= '<tr>
                                <th id="father-text">Father Name:</th>
                               
                                <td id="father-name">' . $student_rows['student']['fathername'] . '</td>
                            </tr>';
        }
        if (isset($student_rows['student']['dob'])) {
            $html .= '<tr>
                                <th style="">D.O.B:</th>
                               
                                <td>' . $student_rows['student']['dob'] . '</td>
                            </tr>';
        }
        if (isset($student_rows['student']['admission_number'])) {
            $html .= '<tr>
                                <th id="admission-text">Adm. No.:</th>
                               
                                <td id = "admission-number">' . $student_rows['student']['admission_number'] . '</td>
                            </tr>';
        }
        if (isset($student_rows['student']['class']) && isset($student_rows['student']['section'])) {
            $html .= '<tr>
                                <th id="grade-text">Grade:</th>
                               
                                <td id= "grade">' . ($student_rows['student']['class']['class_name']) . ' &nbsp;' . ($student_rows['student']['section']['section_name']) . '</td>
                            </tr>';
        }
        if (isset($student_rows['student']['address_line_1'])) {
            $html .= '<tr>
                                <th id="student-text">Address:</th>
                               
                                <td id="student-address">' . $student_rows['student']['address_line_1'] . '</td>
                            </tr>';
        }
        if (isset($student_rows['student']['mobile'])) {
            $html .= '<tr>
                                <th id="phone-text">Phone:</th>
                               
                                <td id= "mobile">' . $student_rows['student']['mobile'] . '</td>
                            </tr>';
        }
        if (isset($student_rows['blood_group'])) {
            $html .= '<tr>
                                <th>Blood Group:</th>
                               
                                <td>' . $student_rows['student']['blood_group'] . '</td>
                            </tr>';
        }
        $html .= '</table>
                    </div>
                </div>
            </div>
        </div>';
    }

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

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

    // Output the HTML content
    echo $html;
}
?>



<script>
function adjustContent() {
    var cards = document.querySelectorAll(".card");
    

    cards.forEach(function(card) {
     var addressElement = card.querySelector("#student-address");

if (addressElement) {
    // Get the width of the element's container (parent)
    var containerWidth = addressElement.parentElement.clientWidth;
    var fontSize = 16; // Default font size in pixels
    var smallFontSize = 12; // Smaller font size in pixels

    // Adjust font size based on content width relative to container width
    if (containerWidth >  addressElement.scrollWidth) {
        addressElement.style.fontSize = smallFontSize + "px"; // Smaller font size
    } else {
        addressElement.style.fontSize = fontSize + "px"; // Default font size
        
    }

    // Additional adjustment for very small containers or very large text
    if (addressElement.scrollWidth > containerWidth) {
        var scale = containerWidth / addressElement.scrollWidth;
        // Ensure the font size is not scaled down below 10px
        var newFontSize = Math.max(smallFontSize * scale, 10);
        addressElement.style.fontSize = newFontSize + "px"; 
    }
} 


    });
}

// Call the adjustContent function on window resize
window.onresize = adjustContent;

// Call the function on load
window.onload = adjustContent;


</script>
