@include('frontend.header')

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

    <style>
        :root {
            --iqac-primary: #012758;
            --iqac-accent: #fda31b;
            --iqac-light-bg: #f0f4ff;
            --iqac-text: #333;
        }

        .iqac-section {
            padding: 80px 0;
        }

        .iqac-hero {
            background: linear-gradient(rgba(1, 39, 88, 0.94), rgba(1, 39, 88, 0.94)),
                url('{{ asset('assets/img/college-campus.jpg') }}') center/cover no-repeat;
            color: white;
            text-align: center;
            padding: 80px 8%;
            border-radius: 0 0 40px 40px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .iqac-hero h1 {
            font-size: 34px;
            margin-bottom: 20px;
            font-weight: 700;
            letter-spacing: -0.5px;
            color: #fff;
        }

        .iqac-hero p {
            font-size: 17px;
            margin-bottom: 30px;
            max-width: 850px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            opacity: 0.95;
        }

        .iqac-btn {
            padding: 15px 35px;
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            display: inline-block;
            margin: 10px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .report-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            padding: 10px 0;
        }

        @media(max-width: 1200px) {
            .report-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media(max-width: 768px) {
            .report-grid {
                grid-template-columns: 1fr;
            }
        }

        .report-link {
            display: flex;
            align-items: center;
            gap: 15px;
            background: white;
            padding: 18px 22px;
            border-radius: 20px;
            text-decoration: none;
            color: var(--iqac-primary);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid #f0f4f8;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
            position: relative;
        }

        .report-link:hover {
            transform: translateY(-8px);
            border-color: var(--iqac-accent);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
            color: var(--iqac-primary);
        }

        .report-icon-box {
            width: 54px;
            height: 54px;
            background: #fff0f0;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .report-link:hover .report-icon-box {
            background: #ff4d4d;
            transform: scale(1.1);
        }

        .report-icon-box i {
            font-size: 24px;
            color: #ff4d4d;
        }

        .report-link:hover .report-icon-box i {
            color: white;
        }

        .report-content-box {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .report-title {
            font-size: 17px;
            font-weight: 800;
            margin-bottom: 2px;
            color: var(--iqac-primary);
        }

        .report-subtitle {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #8898aa;
            font-weight: 700;
        }

        .report-arrow {
            font-size: 18px;
            color: #e2e8f0;
            transition: all 0.3s ease;
        }

        .report-link:hover .report-arrow {
            color: var(--iqac-accent);
            transform: translateX(5px);
        }

        .report-link.disabled {
            opacity: 0.4;
            background: #f8fafc;
            cursor: not-allowed;
            pointer-events: none;
            filter: grayscale(1);
        }

        .iqac-btn-primary {
            background: var(--iqac-accent);
            color: #000;
            box-shadow: 0 5px 20px rgba(244, 180, 0, 0.4);
        }

        .iqac-btn-primary:hover {
            transform: translateY(-5px);
            background: #fff;
            color: var(--iqac-primary);
            box-shadow: 0 10px 25px rgba(244, 180, 0, 0.5);
        }

        .iqac-btn-outline {
            border: 2px solid white;
            color: white;
        }

        .iqac-btn-outline:hover {
            background: white;
            color: var(--iqac-primary);
            transform: translateY(-5px);
        }

        .iqac-section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 26px;
            font-weight: 700;
            color: var(--iqac-primary);
            position: relative;
        }

        .iqac-section-title::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 5px;
            background: var(--iqac-accent);
            border-radius: 10px;
        }

        .iqac-cards {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }

        .iqac-card {
            background: white;
            padding: 45px 35px;
            border-radius: 25px;
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
            flex: 1 1 320px;
            text-align: center;
            transition: all 0.4s ease;
            border: 1px solid rgba(0, 0, 0, 0.03);
        }

        .iqac-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
            border-color: var(--iqac-accent);
        }

        .iqac-card h3 {
            margin: 15px 0 8px;
            color: var(--iqac-primary);
            font-weight: 700;
            font-size: 18px;
        }

        .iqac-light-section {
            background: var(--iqac-light-bg);
            border-radius: 60px;
            margin: 50px 0;
        }

        .iqac-func-item {
            background: white;
            padding: 25px;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
            border-left: 6px solid var(--iqac-accent);
            transition: all 0.4s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(0, 0, 0, 0.02);
            border-right: 1px solid rgba(0, 0, 0, 0.02);
            border-bottom: 1px solid rgba(0, 0, 0, 0.02);
        }

        .iqac-func-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
            border-color: var(--iqac-accent);
        }

        .iqac-func-item.active {
            background: var(--iqac-primary);
            color: white;
            border-left-color: var(--iqac-accent);
        }

        .iqac-func-header {
            display: flex;
            align-items: center;
            gap: 15px;
            width: 100%;
        }

        .iqac-func-header h4 {
            margin: 0;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.4;
        }

        .iqac-func-item i {
            font-size: 22px;
            color: var(--iqac-accent);
            min-width: 25px;
            text-align: center;
        }

        .iqac-func-item.active i {
            color: var(--iqac-accent);
        }

        .iqac-func-item.active h4 {
            color: white;
        }

        .iqac-func-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            width: 100%;
        }

        .iqac-func-item.active .iqac-func-content {
            max-height: 500px;
            opacity: 1;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .iqac-func-content ul {
            padding-left: 20px;
            margin: 0;
            list-style: none;
        }

        .iqac-func-content li {
            position: relative;
            padding-bottom: 10px;
            font-size: 14px;
            line-height: 1.6;
            opacity: 0.9;
        }

        .iqac-func-content li::before {
            content: "→";
            position: absolute;
            left: -20px;
            color: var(--iqac-accent);
            font-weight: bold;
        }

        .iqac-func-toggle {
            position: absolute;
            right: 20px;
            top: 25px;
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .iqac-func-item.active .iqac-func-toggle {
            transform: rotate(180deg);
        }

        .iqac-tabs-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        .iqac-tab-btn {
            background: white;
            border: 2px solid #eef2f6;
            padding: 14px 28px;
            border-radius: 50px;
            font-weight: 700;
            color: var(--iqac-primary);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
        }

        .iqac-tab-btn i {
            font-size: 20px;
            color: var(--iqac-accent);
        }

        .iqac-tab-btn:hover {
            border-color: var(--iqac-accent);
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        }

        .iqac-tab-btn.active {
            background: var(--iqac-primary);
            color: white;
            border-color: var(--iqac-primary);
            box-shadow: 0 15px 35px rgba(1, 39, 88, 0.25);
        }

        .iqac-tab-btn.active i {
            color: var(--iqac-accent);
        }

        .iqac-tab-content {
            display: none;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .iqac-tab-content.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        .iqac-contact-card {
            background: linear-gradient(135deg, var(--iqac-primary) 0%, #174ea6 100%);
            border-radius: 60px;
            padding: 80px 40px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 40px 80px rgba(1, 39, 88, 0.3);
            margin-top: 50px;
        }

        .iqac-contact-card::before {
            content: '';
            position: absolute;
            top: -20%;
            left: -10%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(253, 163, 27, 0.25), transparent 70%);
            border-radius: 50%;
        }

        .iqac-contact-card::after {
            content: '';
            position: absolute;
            bottom: -10%;
            right: -5%;
            width: 350px;
            height: 350px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 70%);
            border-radius: 50%;
        }

        .iqac-contact-content {
            position: relative;
            z-index: 2;
        }

        .iqac-contact-main {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            color: var(--iqac-primary);
            border-radius: 40px;
            padding: 50px;
            display: inline-block;
            min-width: 500px;
            max-width: 100%;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .iqac-contact-main:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 40px 90px rgba(0, 0, 0, 0.3);
        }

        .iqac-contact-badge {
            background: var(--iqac-accent);
            color: #000;
            padding: 10px 30px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 3px;
            display: inline-block;
            margin-bottom: 30px;
            box-shadow: 0 8px 20px rgba(253, 163, 27, 0.4);
        }

        .iqac-contact-items {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }

        .iqac-contact-item {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 20px;
            color: #333;
            width: 100%;
            justify-content: center;
        }

        .iqac-contact-item i {
            background: var(--iqac-light-bg);
            width: 60px;
            height: 60px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--iqac-accent);
            font-size: 24px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            flex-shrink: 0;
        }

        @media(max-width:768px) {
            .iqac-contact-main {
                min-width: 100%;
                padding: 40px 20px;
            }
        }
    </style>

    <section class="iqac-hero">
        <div class="container">
            <h1>Internal Quality Assurance Cell</h1>
            <p>
                Promoting a culture of continuous improvement, academic excellence,
                and institutional accountability at Tagore Government Arts and Science College, Puducherry.
            </p>
            <div class="mt-4">
                <a href="#iqac-reports"
                    onclick="switchTab(document.querySelector('[onclick*=\'tab-aqar\']'), 'tab-aqar')"
                    class="iqac-btn iqac-btn-primary"><i class="fas fa-file-alt me-2"></i> View AQAR Reports</a>
                <a href="#iqac-reports" onclick="switchTab(document.querySelector('[onclick*=\'tab-bp\']'), 'tab-bp')"
                    class="iqac-btn iqac-btn-outline"><i class="fas fa-award me-2"></i> Best Practices</a>
            </div>
        </div>
    </section>

    <div class="container">
        <section class="iqac-section">
            <h2 class="iqac-section-title">Institutional Leadership</h2>
            <div class="iqac-cards">
                <div class="iqac-card">
                    <div class="text-primary mb-3"><i class="fas fa-user-tie fa-4x"></i></div>
                    <h3>Dr. R. Veluraj</h3>
                    <p class="text-muted"><strong>IQAC Co-ordinator</strong></p>
                </div>

                <div class="iqac-card">
                    <div class="text-primary mb-3"><i class="fas fa-user-edit fa-4x"></i></div>
                    <h3>Mrs. T.Sunitha</h3>
                    <p class="text-muted"><strong>Assistant Co-ordinator</strong></p>
                </div>
                <div class="iqac-card">
                    <div class="text-primary mb-3"><i class="fas fa-user-gradient fa-4x"></i></div>
                    <h3>Dr. Ananthalakshmi Hemalatha</h3>
                    <p class="text-muted"><strong>Assistant Co-ordinator</strong></p>
                </div>
            </div>
        </section>

        {{-- ===== IQAC Members List ===== --}}
        <section class="iqac-section" id="iqac-members">
            <style>
                .iqac-members-card {
                    background: #fff;
                    border-radius: 18px;
                    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
                    padding: 40px;
                    margin: auto;
                }

                .iqac-members-card .header {
                    text-align: center;
                    margin-bottom: 30px;
                }

                .iqac-members-card .header h2 {
                    font-weight: 700;
                    color: #012758;
                    text-transform: uppercase;
                }

                .iqac-members-card .header h5 {
                    font-weight: 500;
                    color: #444;
                }

                .iqac-members-card .divider {
                    height: 3px;
                    width: 80px;
                    background: #fda31b;
                    margin: 10px auto 20px auto;
                    border-radius: 5px;
                }

                .iqac-members-card .table thead {
                    background-color: #012758;
                    color: #fff;
                    text-transform: uppercase;
                    font-size: 0.9rem;
                    letter-spacing: 0.5px;
                }

                .iqac-members-card .table tbody tr {
                    transition: all 0.3s ease;
                }

                .iqac-members-card .table tbody tr:hover {
                    background: #e8f0fe !important;
                    transform: scale(1.005);
                }

                .iqac-members-card .note {
                    font-size: 0.95rem;
                    margin-top: 20px;
                    font-style: italic;
                    background: #f1f8e9;
                    padding: 12px 15px;
                    border-left: 4px solid #43a047;
                    border-radius: 6px;
                    color: #2e7d32;
                }
            </style>

            <h2 class="iqac-section-title">IQAC Members List</h2>
            <div class="iqac-members-card">
                {{-- Header --}}
                <div class="header">
                    <h2>Government of Puducherry</h2>
                    <h5>Tagore Government Arts and Science College</h5>
                    <p>(Accredited with "A" Grade by NAAC)<br>Puducherry-605 008, India</p>
                    <p>📞 Phone: 0413-2253263 | 🌐
                        <a href="https://tgasc.edu.in" target="_blank"
                            style="color:#012758; font-weight:600;">https://tgasc.edu.in</a>
                    </p>
                    <div class="divider"></div>
                    <h4 class="fw-bold text-uppercase">Internal Quality Assurance Cell (IQAC)</h4>
                    <p class="text-muted fst-italic">
                        The IQAC has been reconstituted with the following members.
                    </p>
                </div>

                {{-- Table --}}
                <div class="table-responsive">
                    <table class="table table-bordered table-striped align-middle text-center shadow-sm">
                        <thead>
                            <tr>
                                <th scope="col">S.No</th>
                                <th scope="col">Name</th>
                                <th scope="col">Designation</th>
                                <th scope="col">Position</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr>
                                <td>1</td>
                                <td>Dr. R. Karuppusamy, Principal</td>
                                <td>Principal</td>
                                <td><span class="badge bg-primary">Chairperson</span></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Dr. R. Veluraj</td>
                                <td>Assistant Professor of Coop.</td>
                                <td>Co-ordinator</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Dr. Ananthalakshmi Hemalatha</td>
                                <td>Assistant Professor of English</td>
                                <td>Jt. Coordinator</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Tmt. T. Sunitha</td>
                                <td>Assistant Professor of Economics</td>
                                <td>Joint Coordinator</td>
                            </tr> -->
                            <tr>
                                <td>1</td>
                                <td>Dr. S. Ramakrishnan</td>
                                <td>Assistant Professor of Botany</td>
                                <td>Member</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Dr. S. Nagarajan</td>
                                <td>Assistant Professor of Zoology</td>
                                <td>Member</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Mr. V. Sougoumarin</td>
                                <td>Assistant Professor of Commerce</td>
                                <td>Member</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Thiru. Prasath Sivasubramanian</td>
                                <td>Assistant Professor of Comp. Science</td>
                                <td>Member</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Dr. R. Sridevi</td>
                                <td>Assistant Professor of Computer Science</td>
                                <td>Member</td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Dr. Jennie Balasubramanian</td>
                                <td>Assistant Professor of French</td>
                                <td>Member</td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>Dr. Deepak. PC</td>
                                <td>Assistant Librarian</td>
                                <td>Member</td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>Mr. P. Thangamani</td>
                                <td>Superintendent</td>
                                <td>Administrative Officer</td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>Dr. P. Dinadayalan</td>
                                <td>Asst. Prof. of Comp. Science, KMGIPSR, Pdy</td>
                                <td>Alumni Member</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>Dr. Sambasivam Vijayan</td>
                                <td>Assistant Professor, TGASC, Pdy</td>
                                <td>Alumni Member</td>
                            </tr>
                            <tr>
                                <td>11</td>
                                <td>Mr. Mohandass, MD</td>
                                <td>Navayuga Consultancy, Pdy</td>
                                <td>Industrialist</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {{-- Note --}}
                <div class="note">
                    <p>
                        The Heads of Department are requested to relieve the members mentioned above, whenever their
                        services are required by the IQAC.
                        <br><strong>Circular No:</strong> 786/TGASC/PPL/PA/2025/261 &nbsp;|&nbsp; <strong>Date:</strong>
                        14.03.2025
                    </p>
                </div>
            </div>
        </section>
        {{-- ===== End IQAC Members List ===== --}}

        <section class="iqac-section iqac-light-section">
            <div class="p-5">
                <h2 class="iqac-section-title">About IQAC</h2>
                <p
                    style="max-width:950px; margin:auto; text-align:center; font-size: 19px; line-height: 1.9; color: #555;">
                    The Internal Quality Assurance Cell (IQAC) functions as a strategic body to monitor,
                    evaluate and enhance the academic and administrative performance of the institution.
                    It promotes systematic documentation, outcome-based practices, research initiatives,
                    and continuous institutional development aligned with national accreditation standards.
                </p>
            </div>
        </section>

        <section class="iqac-section">
            <h2 class="iqac-section-title">Key Functions</h2>
            <div class="iqac-grid">
                <!-- 1. Develop Quality Benchmarks -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-tasks"></i>
                        <h4>1. Develop Quality Benchmarks</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Define standards for teaching, learning, and evaluation</li>
                            <li>Set measurable targets (pass %, placements, research output, etc.)</li>
                            <li>Align institutional practices with NAAC / accreditation frameworks</li>
                        </ul>
                    </div>
                </div>

                <!-- 2. Monitor Performance -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-chart-line"></i>
                        <h4>2. Monitor Academic & Administrative Performance</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Track department-wise performance</li>
                            <li>Review teaching plans, syllabus completion, result analysis</li>
                            <li>Evaluate administrative efficiency (admissions, exams, support services)</li>
                        </ul>
                    </div>
                </div>

                <!-- 3. Collect & Analyze Institutional Data -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-database"></i>
                        <h4>3. Collect & Analyze Institutional Data</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Maintain structured data for: Student performance, Faculty activities, Research output,
                                Infrastructure usage</li>
                            <li>Prepare Annual Quality Assurance Report (AQAR)</li>
                        </ul>
                    </div>
                </div>

                <!-- 4. Promote Quality in Teaching-Learning -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <h4>4. Promote Quality in Teaching-Learning</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Encourage: ICT-enabled teaching, Student-centric methods, Outcome-based education (OBE)
                            </li>
                            <li>Organize faculty development programs (FDPs)</li>
                        </ul>
                    </div>
                </div>

                <!-- 5. Encourage Research & Innovation -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-microscope"></i>
                        <h4>5. Encourage Research & Innovation</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Promote: Publications, Conferences, Research projects</li>
                            <li>Facilitate collaborations and MoUs</li>
                        </ul>
                    </div>
                </div>

                <!-- 6. Conduct AAA -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-clipboard-check"></i>
                        <h4>6. Conduct Internal Academic & Administrative Audits (AAA)</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Periodic audits of Departments and Offices</li>
                        </ul>
                    </div>
                </div>

                <!-- 7. Collect Feedback -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-comments"></i>
                        <h4>7. Collect Feedback & Act on It</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Gather feedback from: Students, Teachers, Alumni, Employers</li>
                            <li>Analyze and implement changes</li>
                        </ul>
                    </div>
                </div>

                <!-- 8. Facilitate Continuous Improvement -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-arrow-trend-up"></i>
                        <h4>8. Facilitate Continuous Improvement</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Design action plans based on weaknesses</li>
                            <li>Track implementation of improvements</li>
                            <li>Ensure follow-up on quality initiatives</li>
                        </ul>
                    </div>
                </div>

                <!-- 9. Documentation & Best Practices -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-folder-open"></i>
                        <h4>9. Documentation & Best Practices</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Maintain records of activities, Best practices, Institutional achievements</li>
                            <li>Ensure documentation for NAAC and other accreditations</li>
                        </ul>
                    </div>
                </div>

                <!-- 10. Promote Institutional Collaboration -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-handshake"></i>
                        <h4>10. Promote Institutional Collaboration</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Build linkages with Industry and Other institutions</li>
                            <li>Encourage internships and field exposure</li>
                        </ul>
                    </div>
                </div>

                <!-- 11. Implement Quality Culture -->
                <div class="iqac-func-item" onclick="toggleFunc(this)">
                    <div class="iqac-func-header">
                        <i class="fas fa-users-cog"></i>
                        <h4>11. Implement Quality Culture</h4>
                        <i class="fas fa-chevron-down iqac-func-toggle"></i>
                    </div>
                    <div class="iqac-func-content">
                        <ul>
                            <li>Make quality everyone’s responsibility—not just IQAC’s</li>
                            <li>Integrate quality practices into daily operations</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <script>
            function toggleFunc(element) {
                // Toggle active class on clicked item
                element.classList.toggle('active');

                // Optional: Close other items when one is opened
                /*
                const items = document.querySelectorAll('.iqac-func-item');
                items.forEach(item => {
                    if (item !== element) {
                        item.classList.remove('active');
                    }
                });
                */
            }
        </script>

        <section class="iqac-section iqac-light-section" id="iqac-reports">
            <div class="p-5">
                <h2 class="iqac-section-title">Reports & Documents</h2>

                <!-- Tab Navigation -->
                <div class="iqac-tabs-nav">
                    <button class="iqac-tab-btn active" onclick="switchTab(this, 'tab-aqar')">
                        <i class="fas fa-file-invoice"></i> AQAR Reports
                    </button>
                    <button class="iqac-tab-btn" onclick="switchTab(this, 'tab-atr')">
                        <i class="fas fa-tasks"></i> Action Taken
                    </button>
                    <button class="iqac-tab-btn" onclick="switchTab(this, 'tab-minutes')">
                        <i class="fas fa-handshake"></i> Minutes of Meetings
                    </button>
                    <button class="iqac-tab-btn" onclick="switchTab(this, 'tab-bp')">
                        <i class="fas fa-star"></i> Best Practices
                    </button>
                    <!-- Tab Content: AQAR -->
                    <div id="tab-aqar" class="iqac-tab-content active">
                        <div class="iqac-report-category"
                            style="box-shadow: none; border-radius: 25px; background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);">
                            <div class="report-grid">
                                @foreach([
                                                '2009-2010' => 'aqar2009-10.pdf',
                                                '2010-2011' => 'aqar2010-11.pdf',
                                                '2011-2012' => 'aqar2011-12.pdf',
                                                '2014-2015' => 'AQAR2014-15.pdf',
                                                '2015-2016' => 'AQAR2015-16.pdf',
                                                '2016-2017' => 'AQAR2016-17.pdf',
                                                '2017-2018' => 'AQAR2017-18.pdf',
                                                '2018-2019' => 'aqar2018-19.pdf',
                                                '2019-2020' => 'aqar2019-20.pdf',
                                                '2020-2021' => 'AQAR2020-21.pdf',
                                                '2021-2022' => 'AQAR2021-22.pdf',
                                                '2022-2023' => 'AQAR2022-23.pdf',
                                                '2023-2024' => 'AQAR2023-24.pdf'
                                            ] as $year => $file)
                                            <a href="{{ asset('assets/documents/iqac/' . $file) }}" target="_blank" class="report-link">
                                                <span class="report-i
                                       con-box"><i class="fas fa-file-pdf"></i></span>
                                                <div class="report-content-box">
                                                    <span class="report-title">{{ $year }}</span>
                                                <span class="report-subtitle">AQAR REPORT</span>
                                        </div>
                                        <i class="fas fa-arrow-right report-arrow"></i>
                                    </a>
                                @endforeach
                    </div>
                </div>
                </div>
    
                    <!-- Tab Content: ATR -->
                    <div id="tab-atr" class="iqac-tab-content">
    
                                                       <div class="iqac-report-category" style="box-shadow: none; border-radius: 25px; background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);">
                            <div class="report-grid">
                                @php
                                    $atrs = [
                                        '2018-2019' => '1819A.pdf',
                                        '2019-2020' => null,
                                        '2020-2021' => '2021A.pdf',
                                        '2021-2022' => '2122A.pdf',
                                        '2022-2023' => '2223A.pdf',
                                        '2023-2024' => null
                                    ];
                                @endphp
                                @foreach($atrs as $year => $file)
                                                    <a href="{{ $file ? asset('assets/documents/iqac/' . $file) : '#' }}" target="_blank" class="report-link {{ $file ? '' : 'disabled' }}">
                                                        <span class="report-i
                                       c        on-box"><i class="fas fa-file-pdf"></i></span>
                                                        <div class="report-content-box">
                                                            <span class="report-title">{{ $year }}</span>
                                                            <span class="report-subtitle">ACTION TAKEN</span>

                                                                                           </div>
                                                        <i class="fas fa-arrow-right report-arrow"></i>
                                                </a>
                                @endforeach
                        </div>
                            </div>
                </div>
        
                <!-- Tab     Content: Minutes -->
                    <div id="tab-minutes" class="iqac-tab-content">
                        <div class="iqac-report-category" style="box-shadow: none; border-radius: 25px; background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);">
                        <div class="report-grid">
                                @foreach([
                                            '2018-2019' => '1819M.pdf',
                                            '2019-2020' => '1920M.pdf',
                                            '2020-2021' => '2021M.pdf',
                                            '2021-2022' => '2122M.pdf',
                                            '2022-2023' => '2223M.pdf',
                                            '2023-2024' => '2324M.pdf'
                                        ] as $year => $file)
                                       <a href= "{{ asset('assets/documents/iqac/' . $file) }}" target="_blank" class="report-link">
                                           <spa n class="report-icon-box"><i class="fas fa-file-pdf"></i></span>
                                            <div class="report-content-box">
                                                <span class="report-title">{{ $year }}</span>
                                                <span class="report-subtitle">MEETING MINUTES</span>
                                            </div>
                                            <i class="fas fa-arrow-right report-arrow"></i>
                                        </a>
                                @endforeach
                            </div>
                    </div>
                </div>

                <!-- Tab Content: BP -->
                <div id="tab-bp" class="iqac-tab-content">
                    <div class="iqac-report-category" style="box-shadow: none; border-radius: 25px; background: rgba(255,255,255,0.7); backdrop-filter: blur(5px);">
                        <div class="report-grid">
            @foreach([
                    'Practice 1' => 'BP.pdf',
                    'Practice 2' => 'BP1.pdf',
                    'Practice 3' => 'bp2.pdf',
                    'Practice 4' => 'bp3.pdf'
                ] as $name => $file)
                                <a href="{{ asset('assets/documents/iqac/' . $file) }}" target="_blank" class="report-link">
                                    <span class="report-icon-box"><i class="fas fa-award"></i></span>
                                    <div class="report-content-box">
                                        <span class="report-title">{{ $name }}</span>
                                        <span class="report-subtitle">BEST PRACTICES</span>
                                    </div>
                                    <i class="fas fa-arrow-right report-arrow"></i>
                                </a>
            @endforeach
                        </div>
                    </div>
                </div>

                                           </div>
        </section>

        <script>
            function switchTab(btn, tabId) {
                // Remove active class from all buttons and contents
                document.querySelectorAll('.iqac-tab-btn').forEach(b => b.classList.remove('active'));
                document.querySelectorAll('.iqac-tab-content').forEach(c => c.classList.remove('active'));
                
                // Add active class to clicked button and target content
                btn.classList.add('activ
e                                       ');
                document.getElementById(tabId).classList.add('active');

                                                       }

                                                   </script>

        <section class="iqac-section mb-5">
            <div class="iqac-contact-card text-center">
                <div class="iqac-contact-content">
                    <h2 class="iqac-section-title mb-5" style="color: white; border-bottom: none;">
                        <span style="position: relative;">IQAC CONTACT</span>
                    </h2>

                    <div class="mt-4">
                        <div class="iqac-contact-main">
                            <div class="iqac-contact-badge">CO-ORDINATOR</div>
                            <h3 style="font-size: 28px; font-weight: 900; margin-bottom: 30px; color: var(--iqac-primary); letter-spacing: -0.5px;">
                                DR. VELU RAJ
                            </h3>

                            <div class="iqac-contact-items">
                                <div class="iqac-contact-item">
                                    <i class="fas fa-phone-alt"></i>
                                    <span style="font-weight: 800; font-size: 22px;">9443601531</span>
                                </div>
                                <div class="iqac-contact-item" style="flex-wrap: wrap;">
                                    <i class="fas fa-envelope-open-text"></i>
                                    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 8px;">
                                        <a href="mailto:velutac@yahoo.co.in" style="color: var(--iqac-primary); text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--iqac-accent);">velutac@yahoo.co.in</a>
                                        <a href="mailto:velutac@gmail.com" style="color: var(--iqac-primary); text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--iqac-accent);">velutac@gmail.com</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

@include('frontend.footer')