<?php include('database-connection.php');?>
<?php include('function.php');?>
<?php include('website-meta-tag.php');?>

<body class="body__wrapper">
    <!-- pre loader area start -->
    <div id="back__preloader">
        <div id="back__circle_loader"></div>
        <div class="back__loader_logo">
            <img loading="lazy" src="<?php echo GeneralSetting()[4];?>/images/logo/<?php echo GeneralSetting()['5'];?>" alt="Preload">
        </div>
    </div>
    <!-- pre loader area end -->

    <!-- Dark/Light area start -->
    <!-- <div class="mode_switcher my_switcher">
        <button id="light--to-dark-button" class="light align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon dark__mode" viewBox="0 0 512 512"><path d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>

            <svg xmlns="http://www.w3.org/2000/svg" class="ionicon light__mode" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/></svg>

            <span class="light__mode">Light</span>
            <span class="dark__mode">Dark</span>
        </button>
    </div> -->
    <!-- Dark/Light area end -->

    <main class="main_wrapper overflow-hidden">

        <!-- topbar__section__stert -->        
        <?php include('website-header-topbar.php');?>
        <!-- topbar__section__end -->

        <!-- headar section start -->
        <?php include('website-header.php');?>
        <!-- header section end --> 

        <?php
        $slug = isset($_GET['slug']) ? $conn->real_escape_string($_GET['slug']) : '';

        $page_query = $conn->query("SELECT * FROM pages WHERE slug='$slug'");
        $page_data = $page_query ? $page_query->fetch_assoc() : null;

        // include("header.php"); // Load dynamic header
        ?>

        <style>
            .page-body-content img {
                max-width: 100% !important;
                height: auto !important;
                object-fit: contain;
            }
            .page-body-content iframe,
            .page-body-content table {
                max-width: 100% !important;
            }
        </style>

        <div class="container py-5" style="min-height: 60vh;">
            <?php if ($page_data): ?>
                <div class="bg-white p-4 p-md-5 rounded shadow-sm">
                    <h1 class="mb-4 font-weight-bold" style="color: #100639;"><?php echo htmlspecialchars($page_data['title']); ?></h1>
                    <hr class="mb-4">
                    <div class="page-body-content">
                        <?php echo $page_data['content']; // Outputs text & embedded images ?>
                    </div>
                </div>
            <?php else: ?>
                <div class="text-center py-5">
                    <h1 class="display-4 text-muted">404</h1>
                    <h3>Page Not Found</h3>
                    <p>The page you are looking for does not exist or has been removed.</p>
                    <a href="index.php" class="btn text-white font-weight-bold" style="background-color: #ff6b00;">Return Home</a>
                </div>
            <?php endif; ?>
        </div>

  <!-- Include necessary JavaScript -->
<script src="<?php echo GeneralSetting()[4]?>/js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    
    
    $('#submitDetails').click(function(e) {
        e.preventDefault();
        var form = $('#certificateMarksheet')[0];
        var data = new FormData(form);  
        var CertificateType = $('#CertificateType').val();
        var Enrollment = $('#Enrollment').val();    
        var studentDOB = $('#studentDOB').val();    
    

        // Validation
        if (!CertificateType) {     
            
            $('#errorCertificateVarificatin').html("<p style='color:rgba(255, 74, 0, 0.95); padding-top:10px;'>Select Certificate Type</p>");
            
            return;
        }
        if (!Enrollment) {     
            
            $('#errorCertificateVarificatin').html("<p style='color:rgba(255, 74, 0, 0.95); padding-top:10px;'>Enrollment No. is required</p>");
            
            return;
        }
        if (!studentDOB) {      
            $('#errorCertificateVarificatin').html("<p style='color:rgba(255, 74, 0, 0.95); padding-top:10px;'>Dob is required.</p>");
            return;
        }
        
        // Check if the username is unique
        $.ajax({
            url: '<?php echo GeneralSetting()[4]?>/controller-verify-marksheet-certificate.php',
            type: 'post',
            data: {Enrollment:Enrollment, studentDOB: studentDOB, CertificateType:CertificateType, request:4 },
            dataType: 'html',
            success: function(response) {               
                    $('#show_certificate_marksheet_details').html(response);
                    
                
            }
        });

    });
});

</script>

        <!-- footer__section__start -->
        <?php include("website-footer.php");?>
        <!-- footer__section__end -->

    </main>
    <!-- JS here -->
    <?php include("coaching-website-script.php");?>

</body>
</html>