<?php
date_default_timezone_set("Europe/Berlin");
require_once "config/config.php";
include("Data.class.php");
$Data = new Data($pdo);

$statusFilter = (isset($_GET['status']) && $_GET['status'] !== '') 
    ? intval($_GET['status']) 
    : null;


if ($statusFilter !== null) {
    $sql = $pdo->prepare("SELECT * FROM termine WHERE status = :s ORDER BY startzeit ASC");
    $sql->execute([':s' => $statusFilter]);
    $termine = $sql->fetchAll(PDO::FETCH_ASSOC);
} else {
    $sql = $pdo->query("SELECT * FROM termine ORDER BY status ASC, startzeit ASC");
    $termine = $sql->fetchAll(PDO::FETCH_ASSOC);
}

function badgeLocationType($art) {
    $class = '';
    switch (strtolower($art)) {
        case 'party':    $class = 'badge-party'; break;
        case 'club':     $class = 'badge-club'; break;
        case 'hochzeit': $class = 'badge-hochzeit'; break;
    }
    return "<span class='badge $class text-white'>" . htmlspecialchars($art) . "</span>";
}

?>

<!-- KORREKTER VIEWPORT -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

    <title>ANJUMA Dashboard</title>
</head>



<style>

.badge-party {
    background-color: #0d6efd; /* Blau */
}
.badge-club {
    background-color: #6f42c1; /* Lila */
}
.badge-hochzeit {
    background-color: #dc3545; /* Rot */
}

/* Bootstrap Borders killen */
.table td, 
.table th, 
.table tr {
    border: none !important;
}

/* Hintergrundfarben (lassen wir wie du sie hast) */
.table tr.status-open > td {
    background-color: #cfe2ff !important;
}
.table tr.status-ready > td {
    background-color: #fff3cd !important;
}
.table tr.status-done > td {
    background-color: #d1e7dd !important;
}
.table tr.status-cancel > td {
    background-color: #f8d7da !important;
}

/* Linker Farbstreifen – stabil & sauber */
tr.status-open td:first-child {
    box-shadow: inset 4px 0 0 0 #0d6efd !important;
}
tr.status-ready td:first-child {
    box-shadow: inset 4px 0 0 0 #ffc107 !important;
}
tr.status-done td:first-child {
    box-shadow: inset 4px 0 0 0 #198754 !important;
}
tr.status-cancel td:first-child {
    box-shadow: inset 4px 0 0 0 #dc3545 !important;
}


/* MOBILE OPTIMIERUNG */
/* Desktop normal */
@media (min-width: 769px) {
    .mobile-label {
        display: none !important;
    }
}

/* Mobile optimiert */
@media (max-width: 768px) {

    /* Kopfzeile ausblenden (wir ersetzen sie je Zelle) */
    thead {
        display: none;
    }

    /* Zeilen als Blöcke */
    table tr {
        display: block;
        margin-bottom: 18px;
        padding: 12px;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    /* Tabellenzellen untereinander */
    table td {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 8px 5px !important;
        font-size: 15px;
        border: none !important;
    }

    /* Label links, Wert rechts */
    table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #333;
    }

    /* Bearbeiten Button schön */
    td .btn {
        width: 100%;
        margin-top: 8px;
    }
}


</style>


<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-12">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3 class="mb-0"><i class="bi bi-calendar-event"></i> Termine</h3>

                <a href="termin_create.php" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i> Neuer Termin
                </a>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle shadow-sm">
                    <thead class="table-dark">
                        <tr>
                            <th><i class="bi bi-hash"></i> ID</th>
                            <th><i class="bi bi-clock-history"></i> Startzeit</th>
                            <th><i class="bi bi-geo-alt"></i> Location</th>
                            <th><i class="bi bi-person-circle"></i> Erstellt von</th>
                            <th class="text-end">Aktion</th>
                        </tr>
                    </thead>

                    <tbody>
                    <?php foreach ($termine as $row): ?>
                        <tr class="<?= $Data->getTerminLabel($row['id']); ?>">

                            <td data-label="ID"><?= $row['id']; ?></td>

                            <td data-label="Startzeit">
                                <?= $Data->timestampToDate($row['startzeit']); ?>
                            </td>

                            <td data-label="Location"><?= $row['location'] . " " . badgeLocationType($row['locationtype']); ?></td>

                            <td data-label="Erstellt von">
                                <?= $Data->getDataByID($row['user_id'], "name"); ?>
                            </td>

                            <td data-label="Aktion" class="text-end">
                                <a href="termin_show.php?id=<?= $row['id']; ?>"
                                class="btn btn-warning btn-sm w-100">
                                    <i class="bi bi-pencil-square"></i> Bearbeiten
                                </a>
                            </td>

                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
<body>
<!-- Bootstrap JS Bundle (mit Popper) -->
</body>