<?php
// Önceki PHP kodu aynı kalacak
require_once __DIR__ . '/../../vendor/autoload.php';
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/..' . '/../');
$dotenv->safeLoad();
require_once __DIR__ . '/../i18n.php';

use App\Auth;
use App\Csrf;
use App\Database;

Auth::init();
Auth::requireRole(['admin','staff']);
$pdo = Database::getConnection();
$errors = [];
$info = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $action = $_POST['action'] ?? '';
  if (!Csrf::verify($_POST['_csrf'] ?? '')) {
    $errors[] = 'Geçersiz CSRF';
  } else {
    try {
      if ($action === 'add_institution') {
        $name = trim($_POST['name'] ?? '');
        $type = trim($_POST['type'] ?? '');
        $tax_number = trim($_POST['tax_number'] ?? '');
        $tax_office = trim($_POST['tax_office'] ?? '');
        $address = trim($_POST['address'] ?? '');
        $full_address = trim($_POST['full_address'] ?? '');
        $phone = trim($_POST['phone'] ?? '');
        if (!$name) $errors[] = 'Kurum adı gerekli';
        if (!$tax_number) $errors[] = 'Vergi numarası gerekli';
        if (!$tax_office) $errors[] = 'Vergi dairesi gerekli';

        if (empty($errors)) {
          $st = $pdo->prepare('INSERT INTO institutions (name, type, tax_number, tax_office, address, full_address, phone) VALUES (:name,:type,:tax_number,:tax_office,:address,:full_address,:phone)');
          $st->execute([
            ':name' => $name,
            ':type' => $type ?: null,
            ':tax_number' => $tax_number,
            ':tax_office' => $tax_office,
            ':address' => $address ?: null,
            ':full_address' => $full_address ?: null,
            ':phone' => $phone ?: null
          ]);
          $info = 'Kurum başarıyla eklendi';
        }
      } elseif ($action === 'update_institution') {
        $id = (int)($_POST['id'] ?? 0);
        $name = trim($_POST['name'] ?? '');
        $type = trim($_POST['type'] ?? '');
        $tax_number = trim($_POST['tax_number'] ?? '');
        $tax_office = trim($_POST['tax_office'] ?? '');
        $address = trim($_POST['address'] ?? '');
        $full_address = trim($_POST['full_address'] ?? '');
        $phone = trim($_POST['phone'] ?? '');
        if (!$id) $errors[] = 'Geçersiz kurum';
        if (!$name) $errors[] = 'Kurum adı gerekli';
        if (!$tax_number) $errors[] = 'Vergi numarası gerekli';
        if (!$tax_office) $errors[] = 'Vergi dairesi gerekli';

        if (empty($errors)) {
          $upd = $pdo->prepare('UPDATE institutions SET name=:name, type=:type, tax_number=:tax_number, tax_office=:tax_office, address=:address, full_address=:full_address, phone=:phone WHERE id=:id');
          $upd->execute([
            ':id' => $id,
            ':name' => $name,
            ':type' => $type ?: null,
            ':tax_number' => $tax_number,
            ':tax_office' => $tax_office,
            ':address' => $address ?: null,
            ':full_address' => $full_address ?: null,
            ':phone' => $phone ?: null
          ]);
          $info = 'Kurum başarıyla güncellendi';
        }
      } elseif ($action === 'update_institution_status') {
        $id = (int)($_POST['id'] ?? 0);
        $newStatus = $_POST['status'] ?? 'active';
        if (!$id || !in_array($newStatus, ['active','inactive'], true)) {
          $errors[] = 'Geçersiz durum';
        } else {
          $upd = $pdo->prepare('UPDATE institutions SET status = :st WHERE id = :id');
          $upd->execute([':st' => $newStatus, ':id' => $id]);
          $info = 'Durum başarıyla güncellendi';
        }
      }
    } catch (\Throwable $e) {
      $errors[] = 'İşlem başarısız: ' . $e->getMessage();
    }
  }
}

$csrf = App\Csrf::token();
// Filters
$q = trim($_GET['q'] ?? '');
$status = trim($_GET['status'] ?? '');
$typeFilter = trim($_GET['type'] ?? '');

$where = [];
$params = [];
if ($q !== '') {
  $where[] = '(name LIKE :q OR tax_number LIKE :q OR phone LIKE :q)';
  $params[':q'] = "%{$q}%";
}
if (in_array($status, ['active','inactive'], true)) {
  $where[] = 'status = :st';
  $params[':st'] = $status;
}
if ($typeFilter !== '') {
  $where[] = 'type = :tp';
  $params[':tp'] = $typeFilter;
}
$whereSql = $where ? ('WHERE ' . implode(' AND ', $where)) : '';

$sql = "SELECT id, name, type, tax_number, tax_office, address, full_address, phone, status, created_at
        FROM institutions
        $whereSql
        ORDER BY name";
$st = $pdo->prepare($sql);
$st->execute($params);
$rows = $st->fetchAll();

// Types for filter dropdown
$typesQuery = $pdo->query('SELECT DISTINCT type FROM institutions WHERE type IS NOT NULL AND type != "" ORDER BY type');
$allTypes = $typesQuery->fetchAll(PDO::FETCH_COLUMN);

include __DIR__ . '/../header.php';
?>
<style>
/* ✅ BU SAYFADA: header.php içindeki Bootstrap container'ı full width yap */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100% !important;
  width: 100% !important;
}

/* Bazı temalarda main/content alanı da max-width verebiliyor */
main,
#app,
#content,
.content,
.page,
.wrapper {
  max-width: 100% !important;
}

:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #e0e7ff;
  --secondary: #7c3aed;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --light: #f8fafc;
  --dark: #0f172a;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --border-radius: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: var(--gray-800);
  line-height: 1.6;
  min-height: 100vh;
}

.page-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px 24px;
}

@media (max-width: 768px) {
  .page-container {
    padding: 14px;
  }
}

/* Header - Premium Styling */
.page-header {
  background: white;
  color: var(--gray-900);
  padding: 32px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  border-left: 6px solid var(--primary);
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, var(--primary-light) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
}

.page-title-wrapper {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.page-title h1 {
  font-weight: 800;
  font-size: 36px;
  color: var(--gray-900);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.page-title p {
  color: var(--gray-600);
  font-size: 16px;
  font-weight: 400;
}

/* Premium Button Styles */
.btn {
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
}

.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, #0da271 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 13px;
  border-radius: 10px;
}

/* Premium Alerts */
.alert {
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 20px 24px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: 16px;
  animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: none;
}

.alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
}

.alert-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.alert-success::before {
  background: linear-gradient(180deg, var(--success), #0da271);
}

.alert-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-danger::before {
  background: linear-gradient(180deg, var(--danger), #dc2626);
}

.alert i {
  font-size: 20px;
}

/* Filter Section - Premium */
.filter-section {
  max-width: 100%;
  margin: 0 auto 32px;
  background: white;
  border-radius: var(--border-radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
}

.filter-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-header h3 i {
  color: var(--primary);
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border: 2px solid var(--gray-300);
  border-radius: 12px;
  font-size: 15px;
  color: var(--gray-800);
  background: white;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
  transform: translateY(-1px);
}

.form-control::placeholder {
  color: var(--gray-500);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}

/* Main Content Container */
.main-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 32px 32px;
}

/* Desktop Table Section - Hidden on Mobile */
.desktop-table-section {
  background: white;
  border-radius: var(--border-radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  margin-bottom: 32px;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.table-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-header h3 i {
  color: var(--primary);
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-container {
  overflow-x: auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--gray-200);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1200px;
}

.table thead {
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.table th {
  padding: 20px 16px;
  font-weight: 700;
  color: var(--gray-700);
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: inherit;
}

.table tbody tr {
  transition: var(--transition);
  border-bottom: 1px solid var(--gray-200);
}

.table tbody tr:hover {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.03) 0%, rgba(79, 70, 229, 0.01) 100%);
  transform: translateX(4px);
}

.table td {
  padding: 20px 16px;
  font-size: 14px;
  color: var(--gray-800);
  vertical-align: middle;
}

/* Premium Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: none;
  backdrop-filter: blur(10px);
}

.badge-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Institution Avatar */
.institution-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.institution-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.institution-details {
  display: flex;
  flex-direction: column;
}

.institution-name {
  font-weight: 700;
  color: var(--gray-900);
  font-size: 15px;
}

.institution-type {
  font-size: 13px;
  color: var(--gray-600);
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Mobile Cards Section - Hidden on Desktop */
.mobile-cards-section {
  display: none;
  margin-bottom: 32px;
}

.mobile-cards-header {
  margin-bottom: 24px;
}

.mobile-cards-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-cards-header h3 i {
  color: var(--primary);
  background: var(--primary-light);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards-container {
  display: grid;
  gap: 20px;
}

.institution-card {
  background: white;
  border-radius: var(--border-radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.institution-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.institution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
}

.card-body {
  display: grid;
  gap: 16px;
}

.card-row {
  display: grid;
  gap: 8px;
}

.card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-value {
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.5;
}

.card-footer {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}

.card-footer .btn {
  flex: 1;
  justify-content: center;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
}

.empty-state i {
  font-size: 72px;
  color: var(--gray-300);
  margin-bottom: 24px;
  opacity: 0.5;
}

.empty-state h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-600);
  margin-bottom: 12px;
}

.empty-state p {
  color: var(--gray-500);
  max-width: 400px;
  margin: 0 auto;
  font-size: 15px;
}

/* Premium Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

.modal.open {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: white;
  border-radius: var(--border-radius-xl);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--gray-200);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  padding: 32px 32px 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-header h3 i {
  color: var(--primary);
  background: var(--primary-light);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close {
  background: var(--gray-100);
  border: none;
  font-size: 24px;
  color: var(--gray-500);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
  transform: rotate(90deg);
}

.modal-body {
  padding: 32px;
}

.modal-footer {
  padding: 0 32px 32px;
  border-top: none;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

/* Form Grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.form-group-full {
  grid-column: 1 / -1;
}

textarea.form-control {
  min-height: 120px;
  padding: 16px;
  resize: vertical;
}

/* Animations */
.fade-in {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .main-content {
    padding: 0 24px 24px;
  }
  
  .page-header {
    padding: 32px 24px;
  }
  
  .filter-section,
  .desktop-table-section {
    padding: 24px;
  }
  
  .page-title h1 {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  /* Hide desktop table, show mobile cards */
  .desktop-table-section {
    display: none;
  }
  
  .mobile-cards-section {
    display: block;
  }
  
  .page-title-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .page-title h1 {
    font-size: 28px;
  }
  
  .filter-grid {
    grid-template-columns: 1fr;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .card-footer {
    flex-direction: column;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 24px;
  }
  
  .modal-header h3 {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .main-content {
    padding: 0 16px 16px;
  }
  
  .page-header {
    padding: 24px 16px;
    margin-bottom: 24px;
  }
  
  .filter-section,
  .mobile-cards-section {
    padding: 20px;
    margin-bottom: 24px;
  }
  
  .page-title h1 {
    font-size: 24px;
  }
  
  .page-title p {
    font-size: 14px;
  }
  
  .btn {
    padding: 12px 20px;
    font-size: 13px;
  }
  
  .institution-card {
    padding: 20px;
  }
  
  .modal-content {
    border-radius: var(--border-radius-lg);
  }
}

@media (max-width: 400px) {
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .btn {
    width: 100%;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Loading Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}
</style>

<div class="page-container">
  <!-- Navigation Links -->
  <div style="margin-bottom: 20px; display: flex; gap: 10px; justify-content: center;">
    <a href="/SistemModulu/kurum-tanimlari.php" class="btn btn-primary" style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; text-decoration: none; padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 600;">
      <i class="bi bi-building" style="margin-right: 6px;"></i>
      Kurum Tanımlamaları
    </a>
    <a href="/SistemModulu/dislab-tanimlari.php" class="btn btn-secondary" style="background: transparent; color: #4f46e5; border: 1px solid #4f46e5; text-decoration: none; padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 600;">
      <i class="bi bi-flask-fill" style="margin-right: 6px;"></i>
      Dış Laboratuvar Tanımlamaları
    </a>
    <a href="/SistemModulu/kurum-lab-iliskilendirme.php" class="btn btn-secondary" style="background: transparent; color: #4f46e5; border: 1px solid #4f46e5; text-decoration: none; padding: 10px 16px; border-radius: 6px; font-size: 14px; font-weight: 600;">
      <i class="bi bi-diagram-3" style="margin-right: 6px;"></i>
      Kurum-Lab İlişkilendirmesi
    </a>
  </div>
  
  <!-- Alerts -->
  <div class="main-content">
    <?php if($info): ?>
      <div class="alert alert-success fade-in">
        <i class="bi bi-check-circle-fill"></i>
        <?= htmlspecialchars($info) ?>
      </div>
    <?php endif; ?>
    
    <?php if($errors): ?>
      <div class="alert alert-danger fade-in">
        <i class="bi bi-exclamation-circle-fill"></i>
        <div>
          <?php foreach($errors as $e): ?>
            <div><?= htmlspecialchars($e) ?></div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endif; ?>

    <!-- Filter Section -->
    <div class="filter-section fade-in">
      <div class="filter-header">
        <h3><i class="bi bi-funnel"></i> Kurum Filtreleme</h3>
      </div>
      
      <form method="get">
        <div class="filter-grid">
          <div class="form-group">
            <label class="form-label">Arama</label>
            <input type="text" name="q" value="<?= htmlspecialchars($q) ?>" 
                   class="form-control" placeholder="Kurum adı, vergi no veya telefon ara...">
          </div>
          
          <div class="form-group">
            <label class="form-label">Durum</label>
            <select name="status" class="form-control">
              <option value="">Tüm Kurumlar</option>
              <option value="active" <?= $status==='active'?'selected':'' ?>>Aktif Kurumlar</option>
              <option value="inactive" <?= $status==='inactive'?'selected':'' ?>>Pasif Kurumlar</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">Kurum Tipi</label>
            <select name="type" class="form-control">
              <option value="">Tüm Tipler</option>
              <?php foreach($allTypes as $t): ?>
                <option value="<?= htmlspecialchars($t) ?>" <?= $typeFilter===$t?'selected':'' ?>>
                  <?= htmlspecialchars($t) ?>
                </option>
              <?php endforeach; ?>
            </select>
          </div>
        </div>
        
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-search"></i>
            FİLTRELE
          </button>
          <a href="/SistemModulu/kurum-tanimlari.php" class="btn btn-secondary">
            <i class="bi bi-x-lg"></i>
            FİLTRELERİ TEMİZLE
          </a>
        </div>
      </form>
    </div>

    <!-- Desktop Table (Hidden on Mobile) -->
    <?php if($rows): ?>
      <div class="desktop-table-section fade-in">
        <div class="table-header">
          <h3><i class="bi bi-building"></i> Kurum Listesi</h3>
          <div style="display: flex; align-items: center; gap: 20px;">
            <div style="color: var(--gray-600); font-size: 14px;">
              <strong><?= count($rows) ?></strong> kurum listeleniyor
            </div>
            <button class="btn btn-primary" onclick="openModal('addInstitutionModal')">
              <i class="bi bi-plus-lg"></i>
              YENİ KURUM EKLE
            </button>
          </div>
        </div>
        
        <div class="table-container">
          <table class="table">
            <thead>
              <tr>
                <th>KURUM BİLGİSİ</th>
                <th>VERGİ BİLGİLERİ</th>
                <th>İLETİŞİM</th>
                <th>ADRES</th>
                <th>DURUM</th>
                <th>KAYIT TARİHİ</th>
                <th>İŞLEMLER</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach($rows as $r): 
                $firstLetter = mb_substr($r['name'], 0, 1, 'UTF-8');
              ?>
                <tr>
                  <td>
                    <div class="institution-info">
                      <div class="institution-avatar">
                        <?= $firstLetter ?>
                      </div>
                      <div class="institution-details">
                        <div class="institution-name"><?= htmlspecialchars($r['name']) ?></div>
                        <?php if(!empty($r['type'])): ?>
                          <div class="institution-type"><?= htmlspecialchars($r['type']) ?></div>
                        <?php endif; ?>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div style="margin-bottom: 8px;">
                      <div style="font-weight: 600; font-size: 12px; color: var(--gray-600);">Vergi No:</div>
                      <div style="font-size: 14px;"><?= htmlspecialchars($r['tax_number'] ?? '-') ?></div>
                    </div>
                    <div>
                      <div style="font-weight: 600; font-size: 12px; color: var(--gray-600);">Vergi Dairesi:</div>
                      <div style="font-size: 14px;"><?= htmlspecialchars($r['tax_office'] ?? '-') ?></div>
                    </div>
                  </td>
                  <td>
                    <?php if(!empty($r['phone'])): ?>
                      <div style="display: flex; align-items: center; gap: 10px;">
                        <i class="bi bi-telephone" style="color: var(--primary);"></i>
                        <div style="font-size: 14px;"><?= htmlspecialchars($r['phone']) ?></div>
                      </div>
                    <?php else: ?>
                      <span style="color: var(--gray-400); font-size: 13px;">-</span>
                    <?php endif; ?>
                  </td>
                  <td style="max-width: 200px;">
                    <?php if(!empty($r['address'])): ?>
                      <div style="margin-bottom: 8px;">
                        <div style="font-weight: 600; font-size: 12px; color: var(--gray-600);">Kısa Adres:</div>
                        <div style="font-size: 13px; line-height: 1.4;"><?= htmlspecialchars($r['address']) ?></div>
                      </div>
                    <?php endif; ?>
                  </td>
                  <td>
                    <?php if(($r['status'] ?? 'active') === 'active'): ?>
                      <span class="badge badge-success">
                        <i class="bi bi-check-circle"></i>
                        AKTİF
                      </span>
                    <?php else: ?>
                      <span class="badge badge-danger">
                        <i class="bi bi-x-circle"></i>
                        PASİF
                      </span>
                    <?php endif; ?>
                  </td>
                  <td>
                    <div style="font-weight: 600; font-size: 14px; color: var(--gray-900);">
                      <?= date('d.m.Y', strtotime($r['created_at'] ?? '')) ?>
                    </div>
                    <div style="font-size: 12px; color: var(--gray-500);">
                      <?= date('H:i', strtotime($r['created_at'] ?? '')) ?>
                    </div>
                  </td>
                  <td>
                    <div class="action-buttons">
                      <button class="btn btn-secondary btn-sm" type="button"
                        onclick="openEditModal(<?= (int)$r['id'] ?>, '<?= htmlspecialchars(addslashes($r['name'])) ?>', '<?= htmlspecialchars(addslashes($r['type'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['tax_number'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['tax_office'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['phone'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['address'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['full_address'] ?? '')) ?>')">
                        <i class="bi bi-pencil"></i>
                        DÜZENLE
                      </button>
                      <form method="post" style="display: inline;">
                        <input type="hidden" name="_csrf" value="<?= htmlspecialchars($csrf) ?>">
                        <input type="hidden" name="action" value="update_institution_status">
                        <input type="hidden" name="id" value="<?= (int)$r['id'] ?>">
                        <input type="hidden" name="status" value="<?= ($r['status'] ?? 'active') === 'active' ? 'inactive' : 'active' ?>">
                        <button class="btn btn-sm <?= ($r['status'] ?? 'active') === 'active' ? 'btn-danger' : 'btn-success' ?>" 
                                type="submit"
                                onclick="return confirm('Bu kurumun durumunu değiştirmek istediğinizden emin misiniz?')">
                          <i class="bi bi-toggle-<?= ($r['status'] ?? 'active') === 'active' ? 'off' : 'on' ?>"></i>
                          <?= ($r['status'] ?? 'active') === 'active' ? 'PASİFLEŞTİR' : 'AKTİFLEŞTİR' ?>
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>

      <!-- Mobile Cards (Visible only on Mobile) -->
      <div class="mobile-cards-section fade-in">
        <div class="mobile-cards-header">
          <h3><i class="bi bi-building"></i> Kurum Listesi</h3>
        </div>
        
        <div class="cards-container">
          <?php foreach($rows as $r): 
            $firstLetter = mb_substr($r['name'], 0, 1, 'UTF-8');
          ?>
            <div class="institution-card">
              <div class="card-header">
                <div class="institution-avatar">
                  <?= $firstLetter ?>
                </div>
                <div class="institution-details">
                  <div class="institution-name"><?= htmlspecialchars($r['name']) ?></div>
                  <?php if(!empty($r['type'])): ?>
                    <div class="institution-type"><?= htmlspecialchars($r['type']) ?></div>
                  <?php endif; ?>
                </div>
              </div>
              
              <div class="card-body">
                <div class="card-row">
                  <div class="card-label">Vergi No</div>
                  <div class="card-value"><?= htmlspecialchars($r['tax_number'] ?? '-') ?></div>
                </div>
                
                <div class="card-row">
                  <div class="card-label">Vergi Dairesi</div>
                  <div class="card-value"><?= htmlspecialchars($r['tax_office'] ?? '-') ?></div>
                </div>
                
                <?php if(!empty($r['phone'])): ?>
                  <div class="card-row">
                    <div class="card-label">Telefon</div>
                    <div class="card-value">
                      <div style="display: flex; align-items: center; gap: 8px;">
                        <i class="bi bi-telephone" style="color: var(--primary);"></i>
                        <?= htmlspecialchars($r['phone']) ?>
                      </div>
                    </div>
                  </div>
                <?php endif; ?>
                
                <?php if(!empty($r['address'])): ?>
                  <div class="card-row">
                    <div class="card-label">Adres</div>
                    <div class="card-value"><?= htmlspecialchars($r['address']) ?></div>
                  </div>
                <?php endif; ?>
                
                <div class="card-row">
                  <div class="card-label">Durum</div>
                  <div class="card-value">
                    <?php if(($r['status'] ?? 'active') === 'active'): ?>
                      <span class="badge badge-success">
                        <i class="bi bi-check-circle"></i>
                        AKTİF
                      </span>
                    <?php else: ?>
                      <span class="badge badge-danger">
                        <i class="bi bi-x-circle"></i>
                        PASİF
                      </span>
                    <?php endif; ?>
                  </div>
                </div>
                
                <div class="card-row">
                  <div class="card-label">Kayıt Tarihi</div>
                  <div class="card-value">
                    <?= date('d.m.Y H:i', strtotime($r['created_at'] ?? '')) ?>
                  </div>
                </div>
              </div>
              
              <div class="card-footer">
                <button class="btn btn-secondary btn-sm" type="button"
                  onclick="openEditModal(<?= (int)$r['id'] ?>, '<?= htmlspecialchars(addslashes($r['name'])) ?>', '<?= htmlspecialchars(addslashes($r['type'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['tax_number'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['tax_office'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['phone'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['address'] ?? '')) ?>', '<?= htmlspecialchars(addslashes($r['full_address'] ?? '')) ?>')">
                  <i class="bi bi-pencil"></i>
                  DÜZENLE
                </button>
                <form method="post" style="display: inline; width: 100%;">
                  <input type="hidden" name="_csrf" value="<?= htmlspecialchars($csrf) ?>">
                  <input type="hidden" name="action" value="update_institution_status">
                  <input type="hidden" name="id" value="<?= (int)$r['id'] ?>">
                  <input type="hidden" name="status" value="<?= ($r['status'] ?? 'active') === 'active' ? 'inactive' : 'active' ?>">
                  <button class="btn btn-sm <?= ($r['status'] ?? 'active') === 'active' ? 'btn-danger' : 'btn-success' ?>" 
                          type="submit"
                          onclick="return confirm('Bu kurumun durumunu değiştirmek istediğinizden emin misiniz?')">
                    <i class="bi bi-toggle-<?= ($r['status'] ?? 'active') === 'active' ? 'off' : 'on' ?>"></i>
                    <?= ($r['status'] ?? 'active') === 'active' ? 'PASİFLEŞTİR' : 'AKTİFLEŞTİR' ?>
                  </button>
                </form>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php else: ?>
      <div class="empty-state fade-in">
        <i class="bi bi-building-x"></i>
        <h4>Kurum bulunamadı</h4>
        <p>Filtre kriterlerinize uygun kurum bulunamadı. Yeni bir kurum eklemek için "YENİ KURUM EKLE" butonuna tıklayın.</p>
      </div>
    <?php endif; ?>
  </div>
</div>

<!-- Add Institution Modal -->
<div class="modal" id="addInstitutionModal">
  <div class="modal-content">
    <div class="modal-header">
      <h3><i class="bi bi-building-add"></i> YENİ KURUM EKLE</h3>
      <button class="modal-close" onclick="closeModal('addInstitutionModal')">×</button>
    </div>
    <form method="post">
      <div class="modal-body">
        <input type="hidden" name="_csrf" value="<?= htmlspecialchars($csrf) ?>">
        <input type="hidden" name="action" value="add_institution">
        
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label">Kurum Adı *</label>
            <input type="text" name="name" class="form-control" required 
                   placeholder="Kurumun tam ticari unvanı">
          </div>
          
          <div class="form-group">
            <label class="form-label">Kurum Tipi</label>
            <input type="text" name="type" class="form-control" 
                   placeholder="Hastane, Klinik, Eczane, Şirket vb.">
          </div>
          
          <div class="form-group">
            <label class="form-label">Vergi Numarası *</label>
            <input type="text" name="tax_number" class="form-control" required 
                   placeholder="10 haneli vergi numarası">
          </div>
          
          <div class="form-group">
            <label class="form-label">Vergi Dairesi *</label>
            <input type="text" name="tax_office" class="form-control" required 
                   placeholder="Bağlı olduğu vergi dairesi">
          </div>
          
          <div class="form-group">
            <label class="form-label">Telefon</label>
            <input type="tel" name="phone" class="form-control" 
                   placeholder="(0212) 123 45 67">
          </div>
          
          <div class="form-group">
            <label class="form-label">Kısa Adres</label>
            <input type="text" name="address" class="form-control" 
                   placeholder="Cadde, sokak, no, bina">
          </div>
          
          <div class="form-group form-group-full">
            <label class="form-label">Detaylı Adres</label>
            <textarea name="full_address" class="form-control" rows="4" 
                      placeholder="İlçe, il, posta kodu ve diğer detaylar"></textarea>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" onclick="closeModal('addInstitutionModal')">
          <i class="bi bi-x-lg"></i>
          İPTAL
        </button>
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-save"></i>
          KURUMU KAYDET
        </button>
      </div>
    </form>
  </div>
</div>

<!-- Edit Institution Modal -->
<div class="modal" id="editInstitutionModal">
  <div class="modal-content">
    <div class="modal-header">
      <h3><i class="bi bi-building-gear"></i> KURUMU DÜZENLE</h3>
      <button class="modal-close" onclick="closeModal('editInstitutionModal')">×</button>
    </div>
    <form method="post">
      <div class="modal-body">
        <input type="hidden" name="_csrf" value="<?= htmlspecialchars($csrf) ?>">
        <input type="hidden" name="action" value="update_institution">
        <input type="hidden" name="id" id="editInstitutionId">
        
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label">Kurum Adı *</label>
            <input type="text" name="name" id="editInstitutionName" class="form-control" required>
          </div>
          
          <div class="form-group">
            <label class="form-label">Kurum Tipi</label>
            <input type="text" name="type" id="editInstitutionType" class="form-control">
          </div>
          
          <div class="form-group">
            <label class="form-label">Vergi Numarası *</label>
            <input type="text" name="tax_number" id="editInstitutionTaxNumber" class="form-control" required>
          </div>
          
          <div class="form-group">
            <label class="form-label">Vergi Dairesi *</label>
            <input type="text" name="tax_office" id="editInstitutionTaxOffice" class="form-control" required>
          </div>
          
          <div class="form-group">
            <label class="form-label">Telefon</label>
            <input type="tel" name="phone" id="editInstitutionPhone" class="form-control">
          </div>
          
          <div class="form-group">
            <label class="form-label">Kısa Adres</label>
            <input type="text" name="address" id="editInstitutionAddress" class="form-control">
          </div>
          
          <div class="form-group form-group-full">
            <label class="form-label">Detaylı Adres</label>
            <textarea name="full_address" id="editInstitutionFullAddress" class="form-control" rows="4"></textarea>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" onclick="closeModal('editInstitutionModal')">
          <i class="bi bi-x-lg"></i>
          İPTAL
        </button>
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-save"></i>
          DEĞİŞİKLİKLERİ KAYDET
        </button>
      </div>
    </form>
  </div>
</div>

<script>
// Modal Functions
function openModal(modalId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.add('open');
    document.body.style.overflow = 'hidden';
  }
}

function closeModal(modalId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.remove('open');
    document.body.style.overflow = '';
  }
}

// Edit Modal Function
function openEditModal(id, name, type, taxNumber, taxOffice, phone, address, fullAddress) {
  document.getElementById('editInstitutionId').value = id;
  document.getElementById('editInstitutionName').value = name;
  document.getElementById('editInstitutionType').value = type || '';
  document.getElementById('editInstitutionTaxNumber').value = taxNumber || '';
  document.getElementById('editInstitutionTaxOffice').value = taxOffice || '';
  document.getElementById('editInstitutionPhone').value = phone || '';
  document.getElementById('editInstitutionAddress').value = address || '';
  document.getElementById('editInstitutionFullAddress').value = fullAddress || '';
  
  openModal('editInstitutionModal');
}

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

// Close modals with Escape key
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.modal.open').forEach(modal => {
      closeModal(modal.id);
    });
  }
});

// Auto-hide success messages after 5 seconds
setTimeout(() => {
  const alerts = document.querySelectorAll('.alert');
  alerts.forEach(alert => {
    setTimeout(() => {
      alert.style.opacity = '0';
      alert.style.transform = 'translateY(-10px)';
      setTimeout(() => alert.remove(), 300);
    }, 5000);
  });
}, 1000);

// Table row hover effects for desktop
document.addEventListener('DOMContentLoaded', () => {
  const tableRows = document.querySelectorAll('.table tbody tr');
  tableRows.forEach(row => {
    row.addEventListener('mouseenter', () => {
      row.style.transform = 'translateX(8px)';
    });
    
    row.addEventListener('mouseleave', () => {
      row.style.transform = 'translateX(0)';
    });
  });
  
  // Mobile card hover effects
  const mobileCards = document.querySelectorAll('.institution-card');
  mobileCards.forEach(card => {
    card.addEventListener('touchstart', () => {
      card.style.transform = 'translateY(-4px)';
    });
    
    card.addEventListener('touchend', () => {
      setTimeout(() => {
        card.style.transform = 'translateY(0)';
      }, 150);
    });
  });
});

// Form validation
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', (e) => {
    const requiredFields = form.querySelectorAll('[required]');
    let isValid = true;
    
    requiredFields.forEach(field => {
      if (!field.value.trim()) {
        isValid = false;
        field.style.borderColor = 'var(--danger)';
        field.style.boxShadow = '0 0 0 4px rgba(239, 68, 68, 0.1)';
        
        setTimeout(() => {
          field.style.borderColor = '';
          field.style.boxShadow = '';
        }, 2000);
      }
    });
    
    if (!isValid) {
      e.preventDefault();
      alert('Lütfen zorunlu alanları doldurunuz (* ile işaretli alanlar)');
    }
  });
});

// Filter form enhancement
const filterForm = document.querySelector('.filter-section form');
if (filterForm) {
  const inputs = filterForm.querySelectorAll('input, select');
  inputs.forEach(input => {
    input.addEventListener('change', () => {
      filterForm.submit();
    });
  });
}

// Initialize tooltips for buttons
document.querySelectorAll('[title]').forEach(element => {
  element.addEventListener('mouseenter', (e) => {
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    tooltip.textContent = element.title;
    tooltip.style.position = 'absolute';
    tooltip.style.background = 'var(--gray-900)';
    tooltip.style.color = 'white';
    tooltip.style.padding = '6px 12px';
    tooltip.style.borderRadius = '6px';
    tooltip.style.fontSize = '12px';
    tooltip.style.zIndex = '9999';
    tooltip.style.whiteSpace = 'nowrap';
    
    const rect = element.getBoundingClientRect();
    tooltip.style.left = rect.left + 'px';
    tooltip.style.top = (rect.top - 40) + 'px';
    
    document.body.appendChild(tooltip);
    
    element.addEventListener('mouseleave', () => {
      tooltip.remove();
    }, { once: true });
  });
});
</script>

<?php include __DIR__ . '/../footer.php'; ?>