@include('frontend.header')

<style>
.cert-card {
    border-radius: 18px;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #fff;
}
.cert-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.12) !important;
    border-color: var(--theme-color);
}
.cert-card .cert-preview {
    height: 260px;
    object-fit: contain;
    background: #f5f7fa;
    padding: 20px;
    width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.cert-card .cert-preview:hover {
    transform: scale(1.03);
}
.cert-header-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.new-glow {
    animation: glow 1.5s infinite;
    background: #dc3545;
    color: #fff;
}
@keyframes glow {
    0%   { box-shadow: 0 0 5px rgba(220,53,69,0.5); }
    50%  { box-shadow: 0 0 12px rgba(220,53,69,0.85); }
    100% { box-shadow: 0 0 5px rgba(220,53,69,0.5); }
}

/* Lightbox */
#cert-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#cert-lightbox.show { display: flex; }
#cert-lightbox img {
    max-height: 85vh;
    max-width: 90vw;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#cert-lightbox .lb-close {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
#cert-lightbox .lb-close:hover { color: #f7a600; }
#cert-lightbox .lb-caption {
    margin-top: 14px;
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
</style>

<main class="main">
    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/01.png)">
        <div class="container">
            <h2 class="breadcrumb-title">Certificates</h2>
            <ul class="breadcrumb-menu">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li class="active">Certificates</li>
            </ul>
        </div>
    </div>

    <div class="certificates-area py-120">
        <div class="container">

            <div class="site-heading text-center mb-5">
                <span class="site-title-tagline"><i class="far fa-award"></i> Recognition</span>
                <h2 class="site-title">Official <span>Certificates</span></h2>
                <p>Accreditation and recognition certificates of Tagore Government Arts and Science College, Puducherry.</p>
            </div>

            <!-- Table styled like original site -->
            <div class="row justify-content-center mb-5">
                <div class="col-lg-10">
                    <div class="table-responsive rounded-4 shadow-sm" style="border: 2px solid #0d6efd;">
                        <table class="table table-bordered mb-0" style="border-color: #0d6efd;">
                            <thead>
                                <tr style="background: #f0f6ff;">
                                    <th colspan="3" class="text-center py-3" style="color: #0d6efd; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; border-color: #0d6efd;">
                                        Certificate
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center fw-bold" style="width: 50px; color: #0d6efd; border-color: #0d6efd;">1.</td>
                                    <td style="color: #0d6efd; font-weight: 600; border-color: #0d6efd;">
                                        NAAC ACCREDITATION CERTIFICATE 3rd CYCLE
                                        <span class="cert-header-badge new-glow ms-2">NEW</span>
                                    </td>
                                    <td style="border-color: #0d6efd;">
                                        <a href="javascript:void(0)"
                                           onclick="openLightbox('{{ asset('assets/documents/certificates/naac2.jpeg') }}', 'NAAC Accreditation Certificate 3rd Cycle')"
                                           class="text-primary fw-semibold text-decoration-none">
                                            Click Here to view
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-center fw-bold" style="color: #0d6efd; border-color: #0d6efd;">2.</td>
                                    <td style="color: #0d6efd; font-weight: 600; border-color: #0d6efd;">
                                        INSTITUTION INNOVATION COUNCIL (IIC) 3* CERTIFICATE
                                        <span class="cert-header-badge new-glow ms-2">NEW</span>
                                    </td>
                                    <td style="border-color: #0d6efd;">
                                        <a href="javascript:void(0)"
                                           onclick="openLightbox('{{ asset('assets/documents/certificates/iic.jpg') }}', 'Institution Innovation Council (IIC) 3* Certificate')"
                                           class="text-primary fw-semibold text-decoration-none">
                                            Click Here to view
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-center fw-bold" style="color: #0d6efd; border-color: #0d6efd;">3.</td>
                                    <td style="color: #0d6efd; font-weight: 600; border-color: #0d6efd;">
                                        RED RIBBON CLUB
                                        <span class="cert-header-badge new-glow ms-2">NEW</span>
                                    </td>
                                    <td style="border-color: #0d6efd;">
                                        <a href="javascript:void(0)"
                                           onclick="openLightbox('{{ asset('assets/documents/certificates/RedRibbon.jpg') }}', 'Red Ribbon Club Certificate')"
                                           class="text-primary fw-semibold text-decoration-none">
                                            Click Here to view
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Preview Cards -->
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="cert-card shadow-sm">
                        <img src="{{ asset('assets/documents/certificates/naac2.jpeg') }}"
                             class="cert-preview"
                             alt="NAAC Certificate"
                             onclick="openLightbox(this.src, 'NAAC Accreditation Certificate 3rd Cycle')">
                        <div class="p-3 text-center">
                            <h6 class="fw-bold mb-1" style="color: #002147;">NAAC Accreditation</h6>
                            <small class="text-muted">3rd Cycle — Click image to enlarge</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="cert-card shadow-sm">
                        <img src="{{ asset('assets/documents/certificates/iic.jpg') }}"
                             class="cert-preview"
                             alt="IIC Certificate"
                             onclick="openLightbox(this.src, 'Institution Innovation Council (IIC) 3* Certificate')">
                        <div class="p-3 text-center">
                            <h6 class="fw-bold mb-1" style="color: #002147;">IIC Certificate</h6>
                            <small class="text-muted">Innovation Council — Click image to enlarge</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="cert-card shadow-sm">
                        <img src="{{ asset('assets/documents/certificates/RedRibbon.jpg') }}"
                             class="cert-preview"
                             alt="Red Ribbon Club Certificate"
                             onclick="openLightbox(this.src, 'Red Ribbon Club Certificate')">
                        <div class="p-3 text-center">
                            <h6 class="fw-bold mb-1" style="color: #002147;">Red Ribbon Club</h6>
                            <small class="text-muted">RRC Certificate — Click image to enlarge</small>
                        </div>
                    </div>
                </div>
            </div>

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

<!-- Lightbox -->
<div id="cert-lightbox">
    <span class="lb-close" onclick="closeLightbox()">&times;</span>
    <img id="lb-img" src="" alt="Certificate">
    <div class="lb-caption" id="lb-caption"></div>
</div>

<script>
function openLightbox(src, caption) {
    document.getElementById('lb-img').src = src;
    document.getElementById('lb-caption').textContent = caption;
    document.getElementById('cert-lightbox').classList.add('show');
    document.body.style.overflow = 'hidden';
}
function closeLightbox() {
    document.getElementById('cert-lightbox').classList.remove('show');
    document.body.style.overflow = '';
}
document.getElementById('cert-lightbox').addEventListener('click', function(e) {
    if (e.target === this) closeLightbox();
});
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeLightbox();
});
</script>

@include('frontend.footer')