<?php
$baseUrl = env('API_BASE_URL');
?>
<?php echo view ('header.php') ?>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#2D295F',
        secondary: '#6B5B95'
      },
      borderRadius: {
        'button': '8px'
      }
    }
  }
}
</script>



<style>
body { font-family: 'Open Sans', sans-serif; }
.hero-gradient { background: linear-gradient(135deg, rgba(45, 41, 95, 0.8) 0%, rgba(107, 91, 149, 0.6) 100%); }
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1); }
.compact-section { padding: 2rem 0; }
.compact-card { padding: 1rem; }
.dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; z-index: 1000; }
.dropdown:hover .dropdown-content { max-height: 500px; }
</style>
    <style>
        .contact-hero {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.9), rgba(59, 130, 246, 0.8)), 
                        url('/assets/images/contact-hero.jpg') center/cover;
            height: 300px;
            margin-top: 160px;
            padding-bottom: 100px;
        }
        .sidebar-nav {
            position: sticky;
            top: 120px;
            max-height: calc(100vh - 140px);
            overflow-y: auto;
        }
        .nav-item {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            font-size: 0.875rem;
        }
        .nav-item:hover, .nav-item.active {
            background: rgba(30, 64, 175, 0.1);
            border-left-color: #1e40af;
        }
        .emergency-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .emergency-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        .emergency-red { border-color: #ef4444; background: linear-gradient(135deg, #fef2f2, #fee2e2); }
        .emergency-orange { border-color: #f97316; background: linear-gradient(135deg, #fff7ed, #fed7aa); }
        .emergency-blue { border-color: #3b82f6; background: linear-gradient(135deg, #eff6ff, #dbeafe); }
        
        .contact-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .contact-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: white;
            border-radius: 8px;
            padding: 2rem;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.875rem;
        }
        .form-input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 0.875rem;
        }
        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .btn-primary {
            background: #1e40af;
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            font-size: 0.875rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .btn-primary:hover {
            background: #1d4ed8;
        }
        .btn-secondary {
            background: #6b7280;
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            font-size: 0.875rem;
            cursor: pointer;
            margin-left: 0.5rem;
        }
        .close-modal {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
        }
        .dept-table {
            font-size: 0.875rem;
        }
        .office-hours-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        .location-card {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 1rem;
            background: white;
            transition: all 0.3s ease;
        }
        .location-card:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .feedback-category {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .feedback-category:hover {
            border-color: #3b82f6;
            background: #f8fafc;
        }
    </style>
</head>

    
    <!-- Contact Hero Section -->
    <section class="contact-hero flex items-center justify-center text-white text-center pt-28">
        <div class="max-w-4xl mx-auto px-4">
            <!-- Breadcrumb -->
            <div class="mb-4">
                <a href="/" class="text-white/80 hover:text-white text-sm">
                    <i class="ri-home-line mr-1"></i>Home
                </a>
                <span class="text-white/60 mx-2">/</span>
                <span class="text-white text-sm">Contact Us</span>
            </div>
            
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Contact Directory</h1>
            <p class="text-xl opacity-90">Connect with BGMCH - Your Gateway to Healthcare Excellence</p>
            
            <!-- Quick Stats -->
            <div class="mt-6 stats-grid max-w-2xl mx-auto">
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">27+</div>
                    <div class="text-xs opacity-90">Departments</div>
                </div>
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">3</div>
                    <div class="text-xs opacity-90">Emergency Lines</div>
                </div>
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">24x7</div>
                    <div class="text-xs opacity-90">Office Hours</div>
                </div>
                                <div class="bg-white/20 px-3 py-2 rounded-full text-center">
                    <div class="font-bold text-lg">< 2 hrs</div>
                    <div class="text-xs opacity-90">Response Time</div>
                </div>
                            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="grid lg:grid-cols-4 gap-8">
            <!-- Left Sidebar Navigation -->
            <div class="lg:col-span-1">
                <div class="sidebar-nav bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <h3 class="font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="ri-navigation-line mr-2 text-blue-600"></i>
                        Contact Sections
                    </h3>
                    <nav class="space-y-1">
                        <a href="#emergency" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-alarm-warning-line mr-2"></i>Emergency Contacts
                        </a>
                        <a href="#key-personnel" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-user-star-line mr-2"></i>Key Personnel
                        </a>
                        <a href="#departments" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-building-line mr-2"></i>Department Contacts
                        </a>
                        <a href="#administration" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-government-line mr-2"></i>Administrative Offices
                        </a>
                        <a href="#patient-services" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-hospital-line mr-2"></i>Patient Services
                        </a>
                        <a href="#" onclick="openModal('inquiryModal')" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-mail-line mr-2"></i>General Inquiry
                        </a>
                        <a href="#" onclick="openModal('feedbackModal')" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-feedback-line mr-2"></i>Feedback & Complaints
                        </a>
                        <a href="#office-hours" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-time-line mr-2"></i>Office Hours
                        </a>
                        <a href="#locations" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-map-pin-line mr-2"></i>Locations & Directions
                        </a>
                        <a href="#social-media" class="nav-item block px-3 py-2 text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-share-line mr-2"></i>Social Media
                        </a>
                    </nav>

                    <!-- Quick Contact Card -->
                    <div class="mt-8 pt-6 border-t border-gray-200">
                        <h4 class="font-medium text-gray-900 mb-3 text-sm">Quick Contact</h4>
                        <div class="bg-blue-50 p-3 rounded-lg text-sm">
                            <p class="font-medium text-blue-900 mb-1">Main Hospital</p>
                            <p class="text-blue-700 text-xs mb-2">+91-33-2552-3228</p>
                            <p class="font-medium text-red-900 mb-1">Emergency</p>
                            <p class="text-red-700 text-xs">+91-33-2552-3229</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="lg:col-span-3 space-y-8">
                
                <!-- Emergency Contacts -->
                <?php
                if(!empty($emergency_contacts)){
                    ?>
                    <section id="emergency" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                            <i class="ri-alarm-warning-line mr-3 text-red-600"></i>
                            Emergency Contacts
                        </h2>
                        
                        <?php if (!empty($emergency_contacts)) : ?>
                            <div class="grid md:grid-cols-3 gap-6 mb-6">
                                <?php foreach ($emergency_contacts as $index => $contact) : ?>
                                    <?php
                                        // Optional: Define color and icon by index
                                        $colors = ['red', 'orange', 'blue'];
                                        $icons = ['ri-hospital-line', 'ri-fire-line', 'ri-shield-line'];
                                        $color = $colors[$index % count($colors)];
                                        $icon = $icons[$index % count($icons)];
                                    ?>
                                    <div class="emergency-card emergency-<?= $color ?> p-4 rounded-lg">
                                        <div class="text-center">
                                            <i class="<?= $icon ?> text-4xl text-<?= $color ?>-600 mb-3"></i>
                                            <h3 class="font-bold text-gray-900 mb-2"><?= htmlspecialchars($contact['heading']) ?></h3>
                                            <p class="text-2xl font-bold text-<?= $color ?>-700 mb-2"><?= htmlspecialchars($contact['mobile']) ?></p>
                                            <p class="text-sm font-medium text-<?= $color ?>-600 mb-2"><?= htmlspecialchars($contact['time']) ?></p>
                                            <p class="text-xs text-gray-600"><?= $contact['description'] ?></p>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>


                        <div class="bg-red-50 border border-red-200 p-4 rounded-lg">
                            <div class="flex items-start">
                                <i class="ri-error-warning-line text-red-600 mr-3 mt-1"></i>
                                <div>
                                    <h4 class="font-medium text-red-900 mb-2">Emergency Protocol</h4>
                                    <p class="text-sm text-red-800">For life-threatening emergencies, call <strong>+91-33-2552-3229</strong> immediately. Our emergency team is available 24/7 to provide immediate medical assistance.</p>
                                </div>
                            </div>
                        </div>
                    </section>
                    <?php
                }
                ?>
               

                <!-- Key Personnel -->
                <section id="key-personnel" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-user-star-line mr-3 text-blue-600"></i>
                        Key Personnel
                    </h2>

                    <div class="grid md:grid-cols-2 gap-6">
                        <?php
                        if(!empty($keypersonnel)){
                            foreach($keypersonnel as $kp){
                                ?>
                                  <div class="contact-card bg-gray-50 p-4 rounded-lg border">
                                    <div class="flex items-start">
                                        <img src="/assets/images/contacts/principal.jpg" alt="Personnel" class="w-16 h-16 rounded-full mr-4 object-cover">
                                        <div class="flex-1">
                                            <h3 class="font-semibold text-gray-900 mb-1"><?php echo $kp['name']?></h3>
                                            <p class="text-sm text-blue-600 mb-2"><?php echo $kp['designation']?></p>
                                            <p class="text-xs text-gray-600 mb-3"><?php echo $kp['faculty']?></p>
                                            
                                            <div class="space-y-1 text-xs">
                                                <div class="flex items-center text-gray-600">
                                                    <i class="ri-phone-line mr-1 text-green-600"></i>
                                                    <a href="tel:<?php echo $kp['mobile']?>" class="hover:text-blue-600"><?php echo $kp['mobile']?></a>
                                                </div>
                                                <div class="flex items-center text-gray-600">
                                                    <i class="ri-mail-line mr-1 text-blue-600"></i>
                                                    <a href="mailto:<?php echo $kp['email']?>" class="hover:text-blue-600"><?php echo $kp['email']?></a>
                                                </div>
                                                <div class="flex items-center text-gray-600">
                                                    <i class="ri-map-pin-line mr-1 text-purple-600"></i>
                                                    <?php echo $kp['address']?>                                       </div>
                                                <div class="flex items-center text-gray-600">
                                                    <i class="ri-time-line mr-1 text-orange-600"></i>
                                                    <?php echo $kp['time']?>                                      </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php
                            }
                        }
                        ?>
                                              
                                                
                                                
                                                
                                            </div>
                </section>

                <!-- Department Contacts -->
                <section id="departments" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-building-line mr-3 text-blue-600"></i>
                        Department Contacts
                    </h2>

                    <div class="overflow-x-auto">
                        <table class="dept-table w-full border border-gray-200 rounded-lg">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Department</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Head of Department</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Phone</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Location</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Office Hours</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <?php
                                if(!empty($departments)){
                                    foreach($departments as $dp){
                                        ?>
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-4 py-4 text-sm font-medium text-gray-900"><?php echo $dp['department_name']?></td>
                                            <td class="px-4 py-4 text-sm text-gray-900"><?php echo $dp['hod_name']?></td>
                                            <td class="px-4 py-4 text-sm">
                                                <a href="tel:<?php echo $dp['department_mobile']?>" class="text-blue-600 hover:underline"><?php echo $dp['department_mobile']?></a>
                                            </td>
                                            <td class="px-4 py-4 text-sm">
                                                <a href="mailto:<?php echo $dp['department_email']?>" class="text-blue-600 hover:underline"><?php echo $dp['department_email']?></a>
                                            </td>
                                            <td class="px-4 py-4 text-sm text-gray-600"></td>
                                            <td class="px-4 py-4 text-xs text-gray-600"></td>
                                        </tr>
                                        <?php
                                    }
                                }
                                ?>
                                
                            </tbody>
                        </table>
                    </div>
                </section>

                <!-- Administrative Contacts -->
                <section id="administration" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-government-line mr-3 text-blue-600"></i>
                        Administrative Offices
                    </h2>

                    <div class="grid md:grid-cols-2 gap-6">
                      <?php if (!empty($admin_offices)) : ?>
                        <?php foreach ($admin_offices as $office) : ?>
                            <div class="contact-card bg-white border border-gray-200 p-4 rounded-lg">
                                <h3 class="font-semibold text-gray-900 mb-2"><?= htmlspecialchars($office['title']) ?></h3>
                                <p class="text-sm text-gray-600 mb-3"><?= htmlspecialchars($office['head_name']) ?></p>

                                <div class="space-y-2 text-sm mb-4">
                                    <div class="flex items-center text-gray-600">
                                        <i class="ri-phone-line mr-2 text-green-600"></i>
                                        <a href="tel:<?= htmlspecialchars($office['mobile']) ?>" class="hover:text-blue-600"><?= htmlspecialchars($office['mobile']) ?></a>
                                    </div>
                                    <div class="flex items-center text-gray-600">
                                        <i class="ri-mail-line mr-2 text-blue-600"></i>
                                        <a href="mailto:<?= htmlspecialchars($office['email']) ?>" class="hover:text-blue-600"><?= htmlspecialchars($office['email']) ?></a>
                                    </div>
                                    <div class="flex items-center text-gray-600">
                                        <i class="ri-map-pin-line mr-2 text-purple-600"></i>
                                        <?= htmlspecialchars($office['address']) ?>
                                    </div>
                                    <div class="flex items-center text-gray-600">
                                        <i class="ri-time-line mr-2 text-orange-600"></i>
                                        <?= htmlspecialchars($office['time']) ?>
                                    </div>
                                </div>

                                <?php
                                    // Convert services CSV to array
                                    $services = array_map('trim', explode(',', $office['services']));
                                ?>
                                <?php if (!empty($services)) : ?>
                                    <div>
                                        <h4 class="text-xs font-medium text-gray-900 mb-2">Services Offered:</h4>
                                        <div class="flex flex-wrap gap-1">
                                            <?php foreach ($services as $service) : ?>
                                                <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded"><?= htmlspecialchars($service) ?></span>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>

                        
                        </div>
                </section>

                <!-- Patient Services -->
                <section id="patient-services" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-hospital-line mr-3 text-blue-600"></i>
                        Patient Services
                    </h2>

                    <div class="grid md:grid-cols-2 gap-6">
                        <?php if (!empty($paitent_services)) : ?>
                            <?php foreach ($paitent_services as $row) : ?>
                                <div class="contact-card bg-blue-50 border border-blue-200 p-4 rounded-lg">
                                    <h3 class="font-semibold text-gray-900 mb-2"><?= htmlspecialchars($row['heading']) ?></h3>
                                    <p class="text-sm text-gray-600 mb-3"><?= htmlspecialchars($row['description']) ?></p>
                                    
                                    <div class="space-y-2 text-sm">
                                        <?php if (!empty($row['mobile'])) : ?>
                                            <div class="flex items-center text-gray-600">
                                                <i class="ri-phone-line mr-2 text-green-600"></i>
                                                <a href="tel:<?= htmlspecialchars($row['mobile']) ?>" class="hover:text-blue-600"><?= htmlspecialchars($row['mobile']) ?></a>
                                            </div>
                                        <?php endif; ?>

                                        <?php if (!empty($row['email'])) : ?>
                                            <div class="flex items-center text-gray-600">
                                                <i class="ri-mail-line mr-2 text-blue-600"></i>
                                                <a href="mailto:<?= htmlspecialchars($row['email']) ?>" class="hover:text-blue-600"><?= htmlspecialchars($row['email']) ?></a>
                                            </div>
                                        <?php endif; ?>

                                        <?php if (!empty($row['address'])) : ?>
                                            <div class="flex items-center text-gray-600">
                                                <i class="ri-map-pin-line mr-2 text-purple-600"></i>
                                                <?= htmlspecialchars($row['address']) ?>
                                            </div>
                                        <?php endif; ?>

                                        <?php if (!empty($row['time'])) : ?>
                                            <div class="flex items-center text-gray-600">
                                                <i class="ri-time-line mr-2 text-orange-600"></i>
                                                <?= htmlspecialchars($row['time']) ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>

                       
                                                
                    </div>
                </section>

                <!-- Office Hours -->
                <section id="office-hours" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-time-line mr-3 text-blue-600"></i>
                        Office Hours & Visiting Times
                    </h2>

                    <div class="office-hours-grid">
                        <?php if (!empty($office_hours)) : ?>
                            <?php foreach ($office_hours as $row) : ?>
                                <div class="location-card">
                                    <h3 class="font-semibold text-gray-900 mb-3 flex items-center">
                                        <i class="ri-hospital-line mr-2 text-green-600"></i>
                                        <?= htmlspecialchars($row['title']) ?>
                                    </h3>

                                    <?php if (!empty($row['text1'])) : ?>
                                        <div class="flex justify-between items-center py-1 text-sm">
                                            <span class="text-gray-600">General:</span>
                                            <span class="text-gray-900 font-medium"><?= htmlspecialchars($row['text1']) ?></span>
                                        </div>
                                    <?php endif; ?>

                                    <?php if (!empty($row['text2'])) : ?>
                                        <div class="flex justify-between items-center py-1 text-sm">
                                            <span class="text-gray-600">Emergency:</span>
                                            <span class="text-gray-900 font-medium"><?= htmlspecialchars($row['text2']) ?></span>
                                        </div>
                                    <?php endif; ?>

                                    <?php if (!empty($row['text3'])) : ?>
                                        <div class="flex justify-between items-center py-1 text-sm">
                                            <span class="text-gray-600">Special Clinics:</span>
                                            <span class="text-gray-900 font-medium"><?= htmlspecialchars($row['text3']) ?></span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>


                      

                       
                    </div>
                </section>

                <!-- Locations -->
                <section id="locations" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-map-pin-line mr-3 text-blue-600"></i>
                        Campus Locations & Directions
                    </h2>

                    <!-- Building Locations -->
                    <div class="grid md:grid-cols-2 gap-6 mb-8">
                        <?php if (!empty($campus_locations)) : ?>
                            <?php foreach ($campus_locations as $row) : ?>
                                <div class="location-card">
                                    <h3 class="font-semibold text-gray-900 mb-2"><?= htmlspecialchars($row['title']) ?></h3>
                                    
                                    <div class="space-y-1 text-sm text-gray-600 mb-3">
                                        <?php if (!empty($row['floor'])) : ?>
                                            <p><strong>Floors:</strong> <?= htmlspecialchars($row['floor']) ?></p>
                                        <?php endif; ?>
                                        <?php if (!empty($row['access'])) : ?>
                                            <p><strong>Access:</strong> <?= htmlspecialchars($row['access']) ?></p>
                                        <?php endif; ?>
                                        <?php if (!empty($row['parking'])) : ?>
                                            <p><strong>Parking:</strong> <?= htmlspecialchars($row['parking']) ?></p>
                                        <?php endif; ?>
                                    </div>

                                    <?php
                                        $departments = array_map('trim', explode(',', $row['departments']));
                                    ?>
                                    <?php if (!empty($departments)) : ?>
                                        <div>
                                            <h4 class="text-xs font-medium text-gray-900 mb-2">Departments:</h4>
                                            <div class="flex flex-wrap gap-1">
                                                <?php foreach ($departments as $department) : ?>
                                                    <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded"><?= htmlspecialchars($department) ?></span>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>

                                               
                                               
                                                
                        </div>

                    <!-- Directions -->
                    <?php echo $address[0]['description']?>
                </section>

                <!-- Social Media -->
                <section id="social-media" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-share-line mr-3 text-blue-600"></i>
                        Connect with Us
                    </h2>

                    <div class="grid md:grid-cols-4 gap-4">
                                                <a href="<?php echo $connect[0]['facebook_link']?>" target="_blank" class="contact-card bg-gray-50 p-4 rounded-lg border text-center hover:bg-blue-50">
                            <i class="ri-facebook-line text-3xl text-blue-600 mb-2"></i>
                            <p class="font-medium text-gray-900 text-sm">Facebook</p>
                            <p class="text-xs text-gray-600">Follow us</p>
                        </a>
                                                <a href="<?php echo $connect[0]['twiter_link']?>" target="_blank" class="contact-card bg-gray-50 p-4 rounded-lg border text-center hover:bg-blue-50">
                            <i class="ri-twitter-line text-3xl text-blue-600 mb-2"></i>
                            <p class="font-medium text-gray-900 text-sm">Twitter</p>
                            <p class="text-xs text-gray-600">Follow us</p>
                        </a>
                                                <a href="<?php echo $connect[0]['youtube_link']?>" target="_blank" class="contact-card bg-gray-50 p-4 rounded-lg border text-center hover:bg-blue-50">
                            <i class="ri-youtube-line text-3xl text-blue-600 mb-2"></i>
                            <p class="font-medium text-gray-900 text-sm">Youtube</p>
                            <p class="text-xs text-gray-600">Follow us</p>
                        </a>
                                                <a href="<?php echo $connect[0]['linkedin_link']?>" target="_blank" class="contact-card bg-gray-50 p-4 rounded-lg border text-center hover:bg-blue-50">
                            <i class="ri-linkedin-line text-3xl text-blue-600 mb-2"></i>
                            <p class="font-medium text-gray-900 text-sm">Linkedin</p>
                            <p class="text-xs text-gray-600">Follow us</p>
                        </a>
                                            </div>

                    <!-- Main Contact Summary -->
                    <div class="mt-8 bg-blue-50 border border-blue-200 p-6 rounded-lg">
                        <h3 class="font-bold text-blue-900 mb-4 text-center">Main Contact Information</h3>
                        <div class="grid md:grid-cols-2 gap-4 text-sm">
                            <div class="space-y-2">
                                <div class="flex items-start">
                                    <i class="ri-hospital-line text-blue-600 mr-2 mt-1"></i>
                                    <div>
                                        <p class="font-medium text-blue-900">Barasat Government Medical College & Hospital</p>
                                        <p class="text-blue-700">Barasat, North 24 Parganas, West Bengal 700124</p>
                                    </div>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <div class="flex items-center">
                                    <i class="ri-phone-line text-green-600 mr-2"></i>
                                    <a href="tel:+91-33-2552-3228" class="text-blue-900 hover:underline">+91-33-2552-3228</a>
                                </div>
                                <div class="flex items-center">
                                    <i class="ri-mail-line text-blue-600 mr-2"></i>
                                    <a href="mailto:info@barasatgmch.ac.in" class="text-blue-900 hover:underline">info@barasatgmch.ac.in</a>
                                </div>
                                <div class="flex items-center">
                                    <i class="ri-alarm-warning-line text-red-600 mr-2"></i>
                                    <a href="tel:+91-33-2552-3229" class="text-red-900 hover:underline font-bold">+91-33-2552-3229 (Emergency)</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

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

    <!-- Modals -->
    <!-- General Inquiry Modal -->
    <div id="inquiryModal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal('inquiryModal')">&times;</button>
            <h3 class="text-lg font-bold text-gray-900 mb-4">General Inquiry Form</h3>
            <form id="enquiryForm">
                <div class="grid md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Full Name *</label>
                        <input type="text" name="name" class="form-input" placeholder="Enter your full name" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Email Address *</label>
                        <input type="email" name="email" class="form-input" placeholder="Enter your email" required>
                    </div>
                </div>
                <div class="grid md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Phone Number</label>
                        <input type="tel" name="mobile" class="form-input" placeholder="Enter your phone number">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Inquiry Type *</label>
                        <select name="enquiry_type" class="form-input" required>
                            <option value="">Select inquiry type</option>
                            <option value="admission">Admission Information</option>
                            <option value="medical">Medical Services</option>
                            <option value="academic">Academic Programs</option>
                            <option value="general">General Information</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Subject *</label>
                    <input type="text" name="subject" class="form-input" placeholder="Enter subject" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Message *</label>
                    <textarea name="message" class="form-input" rows="4" placeholder="Enter your message" required></textarea>
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">Send Inquiry</button>
                    <button type="button" class="btn-secondary" onclick="closeModal('inquiryModal')">Cancel</button>
                </div>
            </form>

        </div>
    </div>

    <!-- Feedback Modal -->
    <div id="feedbackModal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeModal('feedbackModal')">&times;</button>
            <h3 class="text-lg font-bold text-gray-900 mb-4">Feedback & Complaints</h3>
            
            <!-- Feedback Categories -->
            <div class="mb-6">
                <label class="form-label">Select Category *</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                                        <div class="feedback-category" onclick="selectCategory(this, 'Medical Services')">
                        <i class="ri-stethoscope-line text-2xl text-blue-600 mb-2"></i>
                        <h4 class="font-medium text-gray-900 text-sm mb-1">Medical Services</h4>
                        <p class="text-xs text-gray-600">Doctor consultation, treatment quality, nursing care</p>
                    </div>
                                        <div class="feedback-category" onclick="selectCategory(this, 'Administrative Services')">
                        <i class="ri-file-list-line text-2xl text-blue-600 mb-2"></i>
                        <h4 class="font-medium text-gray-900 text-sm mb-1">Administrative Services</h4>
                        <p class="text-xs text-gray-600">Admission process, documentation, staff behavior</p>
                    </div>
                                        <div class="feedback-category" onclick="selectCategory(this, 'Infrastructure')">
                        <i class="ri-building-line text-2xl text-blue-600 mb-2"></i>
                        <h4 class="font-medium text-gray-900 text-sm mb-1">Infrastructure</h4>
                        <p class="text-xs text-gray-600">Facilities, cleanliness, equipment, accessibility</p>
                    </div>
                                        <div class="feedback-category" onclick="selectCategory(this, 'Academic Services')">
                        <i class="ri-graduation-cap-line text-2xl text-blue-600 mb-2"></i>
                        <h4 class="font-medium text-gray-900 text-sm mb-1">Academic Services</h4>
                        <p class="text-xs text-gray-600">Teaching quality, curriculum, examination process</p>
                    </div>
                                        <div class="feedback-category" onclick="selectCategory(this, 'General Suggestions')">
                        <i class="ri-lightbulb-line text-2xl text-blue-600 mb-2"></i>
                        <h4 class="font-medium text-gray-900 text-sm mb-1">General Suggestions</h4>
                        <p class="text-xs text-gray-600">Overall improvements, new services, appreciation</p>
                    </div>
                                    </div>
            </div>

            <form id="feedbackForm">
                <input type="hidden" id="selectedCategory" name="category">

                <div class="grid md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Full Name *</label>
                        <input type="text" name="name" class="form-input" placeholder="Enter your full name" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Email Address *</label>
                        <input type="email" name="email" class="form-input" placeholder="Enter your email" required>
                    </div>
                </div>

                <div class="grid md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Phone Number</label>
                        <input type="tel" name="mobile" class="form-input" placeholder="Enter your phone number">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Feedback Type *</label>
                        <select name="feedback_type" class="form-input" required>
                            <option value="">Select type</option>
                            <option value="suggestion">Suggestion</option>
                            <option value="complaint">Complaint</option>
                            <option value="appreciation">Appreciation</option>
                            <option value="query">Query</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Subject *</label>
                    <input type="text" name="subject" class="form-input" placeholder="Enter subject" required>
                </div>

                <div class="form-group">
                    <label class="form-label">Detailed Feedback *</label>
                    <textarea name="description" class="form-input" rows="4" placeholder="Please provide detailed feedback" required></textarea>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary">Submit Feedback</button>
                    <button type="button" class="btn-secondary" onclick="closeModal('feedbackModal')">Cancel</button>
                </div>
            </form>

        </div>
    </div>

     <?php echo view ('footer.php') ?>

    <!-- JavaScript for Modal Functionality -->
    <script>
        function openModal(modalId) {
            document.getElementById(modalId).classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('active');
            document.body.style.overflow = 'auto';
        }

        function selectCategory(element, category) {
            // Remove active class from all categories
            document.querySelectorAll('.feedback-category').forEach(cat => {
                cat.style.backgroundColor = '';
                cat.style.borderColor = '#e5e7eb';
            });
            
            // Add active style to selected category
            element.style.backgroundColor = '#eff6ff';
            element.style.borderColor = '#3b82f6';
            
            // Set hidden input value
            document.getElementById('selectedCategory').value = category;
        }

        // Close modal when clicking outside
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal(this.id);
                }
            });
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('.sidebar-nav a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    
                    // Update active state
                    document.querySelectorAll('.sidebar-nav a').forEach(link => {
                        link.classList.remove('active');
                    });
                    this.classList.add('active');
                }
            });
        });

        // Update active navigation on scroll
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('section[id]');
            const scrollPos = window.scrollY + 150;
            
            sections.forEach(section => {
                const top = section.offsetTop;
                const bottom = top + section.offsetHeight;
                const id = section.getAttribute('id');
                
                if (scrollPos >= top && scrollPos <= bottom) {
                    document.querySelectorAll('.sidebar-nav a').forEach(link => {
                        link.classList.remove('active');
                    });
                    const activeLink = document.querySelector(`.sidebar-nav a[href="#${id}"]`);
                    if (activeLink) {
                        activeLink.classList.add('active');
                    }
                }
            });
        });

        // Form submission handlers (placeholder functionality)
        // document.querySelectorAll('form').forEach(form => {
        //     form.addEventListener('submit', function(e) {
        //         e.preventDefault();
        //         alert('Form submitted successfully! We will get back to you within 24-48 hours. (This is a demo - no data was actually sent)');
                
        //         // Close the modal
        //         const modal = this.closest('.modal');
        //         if (modal) {
        //             closeModal(modal.id);
        //         }
                
        //         // Reset form
        //         this.reset();
                
        //         // Reset feedback categories
        //         document.querySelectorAll('.feedback-category').forEach(cat => {
        //             cat.style.backgroundColor = '';
        //             cat.style.borderColor = '#e5e7eb';
        //         });
        //     });
        // });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.getElementById('enquiryForm');
        const baseUrl = "<?php echo $baseUrl; ?>";
        form.addEventListener('submit', function (e) {
            e.preventDefault(); // Stop form from submitting normally

            const formData = new FormData(form);
            formData.append('<?= csrf_token() ?>', '<?= csrf_hash() ?>');

            fetch($baseUrl +'contact/submit-enquiry-form', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert(data.message);
                    form.reset();
                    closeModal('inquiryModal');
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('AJAX error:', error);
                alert('An unexpected error occurred.');
            });
        });
    });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const feedbackForm = document.getElementById('feedbackForm');
            const baseUrl = "<?php echo $baseUrl; ?>";
            feedbackForm.addEventListener('submit', function (e) {
                e.preventDefault();

                const formData = new FormData(feedbackForm);

                fetch($baseUrl +'contact/submit-feedback-form', {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        alert(data.message || 'Feedback submitted successfully.');
                        feedbackForm.reset();
                        closeModal('feedbackModal');
                    } else {
                        alert('Error: ' + (data.message || 'Failed to submit feedback.'));
                    }
                })
                .catch(error => {
                    console.error('AJAX error:', error);
                    alert('An unexpected error occurred. Please try again.');
                });
            });
        });
    </script>
</body>
</html>