<?php
require_once("../layouts/members/head.php");
$baseUrl = "https://" . paymentapi("gateway_Url") . "/layouts/members/assets/pdf/jharsewa";

// Define PDF files and their display names
$pdfFiles = [
    ['name' => 'Caste Certificate (BC-1, Bc-2)', 'file' => 'Caste Certificate Bc 1 Bc 2.pdf'],
    ['name' => 'Caste Certificate (SC, ST)', 'file' => 'Caste Certificate SC ST.pdf'],
    ['name' => 'Old From Pragya Kendras Local Residence Certificate', 'file' => 'Residence Certificate.pdf'],
    ['name' => 'Old From Pragya Kendras Income Certificate', 'file' => 'Income-Certificate.pdf'],
    ['name' => 'Tatkal Form', 'file' => 'Tatkal.pdf'],
    ['name' => 'Caste Certificate (All) with Prospectus', 'file' => 'Caste Certificate All.pdf'],
    ['name' => 'New All In One Pdf Form', 'file' => 'declaration-jh.pdf']
];
?>

<div class="row">
    <!-- Left: Form + Table (50%) -->
    <div class="col-md-6 mb-2">
        <div class="card text-dark">
            <div class="card-header bg-primary text-white py-2">
                <div class="d-flex align-items-center">
                    <span class="mr-auto"><?= file_name() ?></span>
                </div>
            </div>

            <!-- Table -->
            <div class="table-responsive scroll">
                <table class="table w-100" id="dataTable">
                    <thead>
                        <tr class="bg-secondary">
                            <th>SL No</th>
                            <th>Name</th>
                            <th>Link</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($pdfFiles as $index => $pdf): ?>
                            <tr>
                                <td><?= $index + 1 ?></td>
                                <td><?= htmlspecialchars($pdf['name']) ?></td>
                                <td>
                                    <a href="#" class="preview-link" data-pdf="<?= $baseUrl . '/' . rawurlencode($pdf['file']) ?>">
                                        <i class="fas fa-link"></i> Open
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Right: PDF Preview Section (50%) -->
    <div class="col-md-6 mb-2" id="pdfPreviewContainer" style="display: none;">
        <div class="card h-100">
            <div class="card-header bg-info text-white py-2">PDF Preview</div>
            <div class="card-body p-2">
                <iframe id="pdfPreview" src="" width="100%" height="800px" style="border:1px solid #ccc;">
                    Your browser does not support iframes.
                </iframe>
            </div>
        </div>
    </div>
</div>

<!-- JS for PDF Preview -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const previewLinks = document.querySelectorAll('.preview-link');
        const iframe = document.getElementById('pdfPreview');
        const pdfPreviewContainer = document.getElementById('pdfPreviewContainer');

        previewLinks.forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                const pdfUrl = this.getAttribute('data-pdf');

                // Show the preview section
                pdfPreviewContainer.style.display = 'block';

                // Set the iframe's source to the selected PDF
                iframe.src = pdfUrl;
            });
        });
    });
</script>

<?php
require_once("../layouts/members/foot.php");
data_table('#dataTable');
?>
