<?php
/**
 * Fociz Integraties Hub (Microsoft Outlook, Microsoft Teams, Atlassian Jira)
 */

require_once __DIR__ . '/includes/auth.php';
require_once __DIR__ . '/includes/integrations/microsoft.php';
require_once __DIR__ . '/includes/integrations/jira.php';

$user = require_auth();
$db = get_db_connection();
$userId = $user['id'];

$message = null;
$messageType = 'success';

// Query parameters (bijv. na OAuth redirect)
if (!empty($_GET['success'])) {
    $message = $_GET['success'];
    $messageType = 'success';
} elseif (!empty($_GET['error'])) {
    $message = $_GET['error'];
    $messageType = 'error';
}

// POST Verwerking VÓÓR het inladen van header.php zodat HTTP redirects altijd werken
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $provider = strtoupper(trim($_POST['provider'] ?? ''));
    $action   = $_POST['action'] ?? 'save';

    // 1. Ontkoppelen
    if ($action === 'disconnect') {
        if ($provider === 'OUTLOOK') {
            microsoft_disconnect($userId);
            header('Location: /integrations.php?success=' . urlencode('Microsoft Outlook is succesvol ontkoppeld.'));
            exit;
        } elseif ($provider === 'JIRA') {
            jira_disconnect($userId);
            header('Location: /integrations.php?success=' . urlencode('Atlassian Jira is succesvol ontkoppeld.'));
            exit;
        }
    }

    // 2. Outlook Opslaan of Koppelen
    elseif ($provider === 'OUTLOOK') {
        $isAdmin = ($user['role'] === 'ADMIN');
        $appConfig = microsoft_get_app_config();

        // A. Koppelen via OAuth (zowel voor Collega als Beheerder)
        if ($action === 'connect_oauth') {
            // Als de beheerder vanaf het admin-formulier koppelt en eventueel gewijzigde velden meestuurt
            if ($isAdmin && isset($_POST['client_id'])) {
                $clientId     = trim($_POST['client_id'] ?? '');
                $clientSecret = trim($_POST['client_secret'] ?? '');
                $tenantId     = trim($_POST['tenant_id'] ?? 'common');
                if (empty($tenantId)) $tenantId = 'common';
                $isDemo = isset($_POST['is_demo_mode']) ? 1 : 0;

                $stmtExisting = $db->prepare("SELECT * FROM integrations WHERE user_id = ? AND provider = 'OUTLOOK'");
                $stmtExisting->execute([$userId]);
                $existing = $stmtExisting->fetch();
                $existingSettings = json_decode($existing['settings'] ?? '{}', true) ?: [];

                if (($clientSecret === '' || $clientSecret === '••••••••••••••••') && !empty($existingSettings['client_secret']) && $existingSettings['client_secret'] !== '••••••••••••••••') {
                    $clientSecret = $existingSettings['client_secret'];
                }

                $newSettings = array_merge($existingSettings, [
                    'client_id'     => $clientId,
                    'client_secret' => $clientSecret,
                    'tenant_id'     => $tenantId,
                ]);

                $stmt = $db->prepare("
                    INSERT INTO integrations (user_id, provider, is_enabled, is_demo_mode, settings, last_sync_at)
                    VALUES (?, 'OUTLOOK', 1, ?, ?, NOW())
                    ON DUPLICATE KEY UPDATE 
                        is_demo_mode = VALUES(is_demo_mode), 
                        settings = VALUES(settings), 
                        last_sync_at = NOW()
                ");
                $stmt->execute([$userId, $isDemo, json_encode($newSettings)]);

                if (empty($clientId)) {
                    $message = "Vul eerst de Application (Client) ID in van uw Azure App Registratie.";
                    $messageType = 'error';
                } elseif (empty($clientSecret)) {
                    $message = "Vul eerst het Client Secret in van uw Azure App Registratie.";
                    $messageType = 'error';
                } else {
                    header("Location: /auth/oauth_microsoft.php");
                    exit;
                }
            } else {
                // Collega of Beheerder zonder inline velden
                if (!$appConfig['is_configured']) {
                    $message = "Microsoft 365 is nog niet geconfigureerd door de beheerder. Vraag een beheerder om de Application ID en Client Secret in te stellen.";
                    $messageType = 'error';
                } else {
                    header("Location: /auth/oauth_microsoft.php");
                    exit;
                }
            }
        }

        // B. Alleen Beheerders mogen de centrale Azure instellingen opslaan
        elseif ($action === 'save') {
            if (!$isAdmin) {
                $message = "Alleen beheerders kunnen centrale integratie-instellingen wijzigen.";
                $messageType = 'error';
            } else {
                $clientId     = trim($_POST['client_id'] ?? '');
                $clientSecret = trim($_POST['client_secret'] ?? '');
                $tenantId     = trim($_POST['tenant_id'] ?? 'common');
                if (empty($tenantId)) $tenantId = 'common';
                $isDemo = isset($_POST['is_demo_mode']) ? 1 : 0;

                $stmtExisting = $db->prepare("SELECT * FROM integrations WHERE user_id = ? AND provider = 'OUTLOOK'");
                $stmtExisting->execute([$userId]);
                $existing = $stmtExisting->fetch();
                $existingSettings = json_decode($existing['settings'] ?? '{}', true) ?: [];

                if (($clientSecret === '' || $clientSecret === '••••••••••••••••') && !empty($existingSettings['client_secret']) && $existingSettings['client_secret'] !== '••••••••••••••••') {
                    $clientSecret = $existingSettings['client_secret'];
                }

                $newSettings = array_merge($existingSettings, [
                    'client_id'     => $clientId,
                    'client_secret' => $clientSecret,
                    'tenant_id'     => $tenantId,
                ]);

                $stmt = $db->prepare("
                    INSERT INTO integrations (user_id, provider, is_enabled, is_demo_mode, settings, last_sync_at)
                    VALUES (?, 'OUTLOOK', 1, ?, ?, NOW())
                    ON DUPLICATE KEY UPDATE 
                        is_demo_mode = VALUES(is_demo_mode), 
                        settings = VALUES(settings), 
                        last_sync_at = NOW()
                ");
                $stmt->execute([$userId, $isDemo, json_encode($newSettings)]);

                $message = "Centrale instellingen voor Microsoft Outlook zijn succesvol opgeslagen.";
                $messageType = 'success';
            }
        }
    }

    // 3. Teams Opslaan
    elseif ($provider === 'TEAMS') {
        $isDemo = isset($_POST['is_demo_mode']) ? 1 : 0;
        $stmt = $db->prepare("
            INSERT INTO integrations (user_id, provider, is_enabled, is_demo_mode, last_sync_at)
            VALUES (?, 'TEAMS', 1, ?, NOW())
            ON DUPLICATE KEY UPDATE is_demo_mode = VALUES(is_demo_mode), last_sync_at = NOW()
        ");
        $stmt->execute([$userId, $isDemo]);
        $message = "Instellingen voor Microsoft Teams zijn bijgewerkt.";
    }

    // 4. Jira Opslaan & Testen
    elseif ($provider === 'JIRA') {
        $jiraDomain = jira_normalize_domain($_POST['jira_domain'] ?? '');
        $jiraEmail = trim($_POST['jira_email'] ?? '');
        $jiraToken = trim($_POST['jira_api_token'] ?? '');
        $isDemo = isset($_POST['is_demo_mode']) ? 1 : 0;

        // Haal bestaande instellingen op
        $stmtExisting = $db->prepare("SELECT * FROM integrations WHERE user_id = ? AND provider = 'JIRA'");
        $stmtExisting->execute([$userId]);
        $existing = $stmtExisting->fetch();
        $existingSettings = json_decode($existing['settings'] ?? '{}', true) ?: [];

        if (($jiraToken === '' || $jiraToken === '••••••••••••••••') && !empty($existingSettings['jira_api_token']) && $existingSettings['jira_api_token'] !== '••••••••••••••••') {
            $jiraToken = $existingSettings['jira_api_token'];
        }

        // Als niet in demo mode, test verbinding
        $accountName = $existingSettings['account_name'] ?? '';
        $accountId = $existingSettings['account_id'] ?? '';
        if (!$isDemo && !empty($jiraDomain) && !empty($jiraEmail) && !empty($jiraToken)) {
            $testRes = jira_test_connection($jiraDomain, $jiraEmail, $jiraToken);
            if (!$testRes['success']) {
                $message = "Jira Verbindingsfout: " . $testRes['error'];
                $messageType = 'error';
            } else {
                $accountName = $testRes['user']['displayName'] ?? 'Jira Gebruiker';
                $accountId = $testRes['user']['accountId'] ?? '';
                $message = "Verbinding met Jira geslaagd! Ingelogd als: {$accountName}";
                $messageType = 'success';
            }
        } else {
            $message = "Jira instellingen opgeslagen.";
            $messageType = 'success';
        }

        $newSettings = [
            'jira_domain'    => $jiraDomain,
            'jira_email'     => $jiraEmail,
            'jira_api_token' => $jiraToken,
            'account_name'   => $accountName,
            'account_id'     => $accountId,
        ];

        $stmt = $db->prepare("
            INSERT INTO integrations (user_id, provider, is_enabled, is_demo_mode, settings, last_sync_at)
            VALUES (?, 'JIRA', 1, ?, ?, NOW())
            ON DUPLICATE KEY UPDATE 
                is_demo_mode = VALUES(is_demo_mode), 
                settings = VALUES(settings), 
                last_sync_at = NOW()
        ");
        $stmt->execute([$userId, $isDemo, json_encode($newSettings)]);

        // Wis cache
        unset($_SESSION["jira_issues_user_{$userId}"]);
    }
}

// Laad nu pas de HTML header in
require_once __DIR__ . '/includes/header.php';

// Haal huidige configuraties op
$stmtConfigs = $db->prepare("SELECT * FROM integrations WHERE user_id = ?");
$stmtConfigs->execute([$userId]);
$configsRaw = $stmtConfigs->fetchAll();
$configs = [];
foreach ($configsRaw as $c) {
    $configs[$c['provider']] = $c;
    $configs[$c['provider']]['settings_parsed'] = json_decode($c['settings'] ?? '{}', true) ?: [];
}

// Bepaal statussen
$isOutlookConnected = !empty($configs['OUTLOOK']['access_token']) && empty($configs['OUTLOOK']['is_demo_mode']);
$outlookSettings = $configs['OUTLOOK']['settings_parsed'] ?? [];

$isJiraConnected = !empty($configs['JIRA']) && empty($configs['JIRA']['is_demo_mode']) && !empty($configs['JIRA']['settings_parsed']['jira_api_token']);
$jiraSettings = $configs['JIRA']['settings_parsed'] ?? [];

// Haal actuele Jira issues op
$forceRefresh = isset($_GET['refresh_jira']);
$jiraData = jira_get_user_issues($userId, $forceRefresh);
$jiraIssues = $jiraData['issues'] ?? [];
$jiraIsDemo = !empty($jiraData['is_demo']);

// Callback redirect URI
$redirectUri = rtrim(APP_URL, '/') . '/auth/callback_microsoft.php';

$appConfig = microsoft_get_app_config();
$isAdmin = ($user['role'] === 'ADMIN');

// Voor beheerders tonen we eventueel centraal opgeslagen waarden als fallback in de inputvelden
if ($isAdmin) {
    if (empty($outlookSettings['client_id']) && !empty($appConfig['client_id'])) {
        $outlookSettings['client_id'] = $appConfig['client_id'];
    }
    if (empty($outlookSettings['client_secret']) && !empty($appConfig['client_secret'])) {
        $outlookSettings['client_secret'] = $appConfig['client_secret'];
    }
    if (empty($outlookSettings['tenant_id']) && !empty($appConfig['tenant_id'])) {
        $outlookSettings['tenant_id'] = $appConfig['tenant_id'];
    }
}
?>

<div class="space-y-6">
    <!-- Header -->
    <div class="bg-gradient-to-r from-slate-900 via-[#0d1527] to-slate-900 border border-slate-800 rounded-2xl p-6 shadow-2xl">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <div class="flex items-center space-x-2 text-blue-400 text-xs font-semibold uppercase tracking-wider mb-1">
                    <i data-lucide="layers" class="w-4 h-4"></i>
                    <span>Live Koppelingen & Data Synchronisatie</span>
                </div>
                <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight">
                    Integraties Hub
                </h1>
                <p class="text-slate-400 text-xs sm:text-sm mt-1 max-w-2xl">
                    <?= $isAdmin 
                        ? 'Beheer centrale organisatie-integraties en koppel uw persoonlijke Outlook agenda en Jira tickets.' 
                        : 'Koppel uw persoonlijke Microsoft 365 Outlook agenda en Atlassian Jira tickets om direct uw dagplanning in Fociz te vullen.' ?>
                </p>
            </div>

            <!-- Snelle status pills -->
            <div class="flex items-center space-x-2">
                <span class="px-2.5 py-1 rounded-xl text-xs font-semibold <?= $isAdmin ? 'bg-emerald-500/10 border border-emerald-500/30 text-emerald-400' : 'bg-slate-800/80 border border-slate-700 text-slate-300' ?>">
                    <?= $isAdmin ? 'Beheerdersweergave' : 'Collega Weergave' ?>
                </span>
                <div class="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl border text-xs font-semibold <?= $isOutlookConnected ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400' : 'bg-slate-800/80 border-slate-700 text-slate-400' ?>">
                    <span class="w-2 h-2 rounded-full <?= $isOutlookConnected ? 'bg-emerald-400 animate-pulse' : 'bg-slate-500' ?>"></span>
                    <span>Outlook: <?= $isOutlookConnected ? 'Verbonden' : 'Niet verbonden' ?></span>
                </div>
                <div class="flex items-center space-x-1.5 px-3 py-1.5 rounded-xl border text-xs font-semibold <?= $isJiraConnected ? 'bg-sky-500/10 border-sky-500/30 text-sky-400' : 'bg-slate-800/80 border-slate-700 text-slate-400' ?>">
                    <span class="w-2 h-2 rounded-full <?= $isJiraConnected ? 'bg-sky-400 animate-pulse' : 'bg-slate-500' ?>"></span>
                    <span>Jira: <?= $isJiraConnected ? 'Verbonden' : 'Niet verbonden' ?></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Flash message -->
    <?php if ($message): ?>
        <div class="p-4 rounded-xl text-xs font-semibold flex items-center justify-between border <?= $messageType === 'error' ? 'bg-red-500/10 border-red-500/30 text-red-400' : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400' ?>">
            <div class="flex items-center space-x-2">
                <i data-lucide="<?= $messageType === 'error' ? 'alert-triangle' : 'check-circle' ?>" class="w-4 h-4"></i>
                <span><?= htmlspecialchars($message) ?></span>
            </div>
            <button onclick="this.parentElement.remove()" class="text-slate-500 hover:text-slate-300">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
    <?php endif; ?>

    <!-- 3 Koloms Grid voor Providers -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- 1. MICROSOFT OUTLOOK -->
        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between relative overflow-hidden backdrop-blur-sm">
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/30 text-blue-400 flex items-center justify-center font-bold">
                        <i data-lucide="calendar" class="w-5 h-5"></i>
                    </div>
                    <?php if ($isOutlookConnected): ?>
                        <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold flex items-center space-x-1">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                            <span>Live Verbonden</span>
                        </span>
                    <?php elseif (!empty($configs['OUTLOOK']['is_demo_mode'])): ?>
                        <span class="px-2.5 py-0.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs font-semibold">
                            Sandbox Modus
                        </span>
                    <?php else: ?>
                        <span class="px-2.5 py-0.5 rounded-full bg-slate-800 border border-slate-700 text-slate-400 text-xs font-semibold">
                            Niet Gekoppeld
                        </span>
                    <?php endif; ?>
                </div>

                <div>
                    <h3 class="text-base font-bold text-white mb-1">Microsoft Outlook (365)</h3>
                    <p class="text-xs text-slate-400 leading-relaxed">
                        Synchroniseert automatisch uw zakelijke agenda-afspraken en meetings naar de dagplanner tijdlijn.
                    </p>
                </div>

                <?php if ($isOutlookConnected): ?>
                    <div class="bg-slate-950/70 rounded-xl p-3.5 border border-emerald-500/20 text-xs space-y-2">
                        <div class="flex items-center justify-between text-slate-400">
                            <span>Account:</span>
                            <span class="text-emerald-400 font-semibold truncate max-w-[180px]" title="<?= htmlspecialchars($outlookSettings['account_email'] ?? '') ?>">
                                <?= htmlspecialchars($outlookSettings['account_email'] ?? 'Verbonden') ?>
                            </span>
                        </div>
                        <div class="flex items-center justify-between text-slate-400">
                            <span>Naam:</span>
                            <span class="text-slate-200"><?= htmlspecialchars($outlookSettings['account_name'] ?? '-') ?></span>
                        </div>
                        <div class="flex items-center justify-between text-slate-400">
                            <span>Laatste Sync:</span>
                            <span class="text-slate-300 font-mono text-[11px]"><?= htmlspecialchars($configs['OUTLOOK']['last_sync_at'] ?? 'Zojuist') ?></span>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if ($isAdmin): ?>
                    <!-- ADMIN WEERGAVE: Centrale melding & Instructies Accordion -->
                    <div class="p-2.5 bg-blue-500/10 border border-blue-500/20 rounded-xl text-[11px] text-blue-300 flex items-start space-x-2">
                        <i data-lucide="shield" class="w-4 h-4 flex-shrink-0 mt-0.5 text-blue-400"></i>
                        <div class="leading-relaxed">
                            <strong class="text-white block font-semibold">Centrale Beheerdersinstellingen</strong>
                            <span>Deze Azure App gegevens gelden voor alle collega's in de organisatie. Gewone gebruikers zien deze technische details niet en hoeven alleen op 'Koppelen' te klikken.</span>
                        </div>
                    </div>

                    <!-- Azure App Instructies Accordion -->
                    <details class="group text-xs bg-slate-950/50 rounded-xl border border-slate-800/80 p-3">
                        <summary class="cursor-pointer font-semibold text-blue-400 flex items-center justify-between">
                            <span class="flex items-center space-x-1.5">
                                <i data-lucide="help-circle" class="w-3.5 h-3.5"></i>
                                <span>Azure App Registratie Instructies</span>
                            </span>
                            <i data-lucide="chevron-down" class="w-3.5 h-3.5 group-open:rotate-180 transition"></i>
                        </summary>
                        <div class="mt-3 space-y-2 text-slate-400 text-[11px] leading-relaxed border-t border-slate-800/60 pt-2">
                            <p>1. Open <a href="https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade" target="_blank" class="text-blue-400 underline">Azure App Registraties</a> en maak een nieuwe registratie.</p>
                            <p>2. Kies <em>Accounts in elke organisatiemap (...) en persoonlijke Microsoft-accounts</em>.</p>
                            <p>3. Voeg een <strong>Web</strong> Omleidings-URI toe:</p>
                            <div class="flex items-center space-x-1 bg-slate-900 p-1.5 rounded border border-slate-800">
                                <input type="text" readonly id="msRedirectUriInput" value="<?= htmlspecialchars($redirectUri) ?>" class="bg-transparent text-[10px] text-emerald-400 font-mono flex-1 focus:outline-none">
                                <button onclick="copyToClipboard('msRedirectUriInput')" class="text-slate-400 hover:text-white px-1.5 py-0.5 rounded bg-slate-800 text-[10px]">Kopieer</button>
                            </div>
                            <p>4. Maak een geheim aan onder <em>Certificaten en geheimen</em>.</p>
                            <p>5. Voeg API-machtigingen toe: <code>Calendars.ReadWrite</code>, <code>User.Read</code>, <code>offline_access</code>.</p>
                            <p>6. <strong class="text-amber-300">Cruciaal voor organisaties:</strong> Klik direct boven de tabel met machtigingen op de knop <strong class="text-white">"Beheerdersgoedkeuring verlenen voor [Organisatie]"</strong> (<em>Grant admin consent</em>) en bevestig met 'Ja'. Hiermee voorkomt u de melding <em>"Beheerdersgoedkeuring vereist"</em>.</p>
                            <?php 
                            $curClientId = !empty($outlookSettings['client_id']) ? $outlookSettings['client_id'] : $appConfig['client_id'];
                            $curTenantId = !empty($outlookSettings['tenant_id']) ? $outlookSettings['tenant_id'] : (!empty($appConfig['tenant_id']) ? $appConfig['tenant_id'] : 'organizations');
                            if (!empty($curClientId)): 
                                $adminConsentUrl = "https://login.microsoftonline.com/" . urlencode($curTenantId) . "/v2.0/adminconsent?client_id=" . urlencode($curClientId) . "&redirect_uri=" . urlencode($redirectUri) . "&scope=" . urlencode("https://graph.microsoft.com/.default");
                            ?>
                            <div class="mt-2 pt-2 border-t border-slate-800/80">
                                <a href="<?= htmlspecialchars($adminConsentUrl) ?>" target="_blank" class="inline-flex items-center space-x-1.5 text-[11px] text-amber-400 hover:text-amber-300 underline font-semibold">
                                    <i data-lucide="shield-alert" class="w-3.5 h-3.5"></i>
                                    <span>Direct Beheerdersgoedkeuring verlenen via Microsoft &rarr;</span>
                                </a>
                            </div>
                            <?php endif; ?>
                        </div>
                    </details>
                <?php else: ?>
                    <!-- COLLEGA WEERGAVE: Informatiebanner over status -->
                    <?php if (!$appConfig['is_configured']): ?>
                        <div class="p-3.5 bg-amber-500/10 border border-amber-500/20 rounded-xl text-xs text-amber-300 flex items-start space-x-3">
                            <i data-lucide="clock" class="w-5 h-5 flex-shrink-0 text-amber-400 mt-0.5"></i>
                            <div>
                                <strong class="block font-semibold mb-0.5">Configuratie vereist door beheerder</strong>
                                <span class="text-[11px] text-slate-300 leading-relaxed">
                                    Uw beheerder heeft de Microsoft 365 integratie nog niet geconfigureerd voor uw organisatie. Vraag uw beheerder om de Azure App gegevens in te stellen.
                                </span>
                            </div>
                        </div>
                    <?php elseif (!$isOutlookConnected): ?>
                        <div class="p-3.5 bg-blue-500/10 border border-blue-500/20 rounded-xl text-xs text-slate-300 flex items-start space-x-3">
                            <i data-lucide="shield-check" class="w-5 h-5 flex-shrink-0 text-blue-400 mt-0.5"></i>
                            <div>
                                <strong class="text-white block font-semibold mb-0.5">Gereed voor Koppeling</strong>
                                <span class="text-[11px] text-slate-300 leading-relaxed">
                                    Uw beheerder heeft Microsoft 365 klaargezet voor uw organisatie. Koppel uw persoonlijke werkagenda om al uw meetings en Teams-afspraken automatisch in uw dagplanning te laden.
                                </span>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

            <?php if ($isAdmin): ?>
                <!-- ADMIN FORMULIER -->
                <form method="POST" action="/integrations.php" class="pt-4 border-t border-slate-800 space-y-2.5 mt-4">
                    <input type="hidden" name="provider" value="OUTLOOK">

                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 mb-0.5">
                            Application (Client) ID <span class="text-blue-400">*</span>
                        </label>
                        <input 
                            type="text" 
                            name="client_id" 
                            value="<?= htmlspecialchars($outlookSettings['client_id'] ?? '') ?>"
                            placeholder="bijv. e8f498c1-1234-4567-89ab-cdef01234567" 
                            class="w-full bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 text-xs text-white placeholder-slate-600 focus:outline-none focus:border-blue-500 font-mono"
                        >
                        <p class="text-[10px] text-slate-500 mt-0.5">Te vinden op de Overzichtspagina (Overview) van uw Azure App Registratie.</p>
                    </div>

                    <div>
                        <label class="block text-[10px] font-semibold text-slate-400 mb-0.5">
                            Client Secret (Geheim) <span class="text-blue-400">*</span>
                        </label>
                        <div class="relative">
                            <input 
                                type="password" 
                                id="msClientSecret"
                                name="client_secret" 
                                value="<?= htmlspecialchars(!empty($outlookSettings['client_secret']) && $outlookSettings['client_secret'] !== '••••••••••••••••' ? $outlookSettings['client_secret'] : '') ?>"
                                placeholder="Plak hier de Waarde (Value) van uw Client Secret" 
                                class="w-full bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 pr-8 text-xs text-white placeholder-slate-600 focus:outline-none focus:border-blue-500 font-mono"
                            >
                            <button type="button" onclick="togglePasswordVisibility('msClientSecret', this)" class="absolute right-2 top-2 text-slate-500 hover:text-slate-300 transition" title="Toon / verberg geheim">
                                <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                        <p class="text-[10px] text-slate-500 mt-0.5">Aangemaakt onder <em>Certificaten en geheimen &gt; Nieuw clientgeheim</em> (kopieer de <strong>Waarde / Value</strong>).</p>
                    </div>

                    <div>
                        <div class="flex items-center justify-between mb-0.5">
                            <label class="text-[10px] font-semibold text-slate-400">Directory (Tenant) ID</label>
                            <span class="text-[9px] text-blue-400 font-semibold bg-blue-500/10 px-1.5 py-0.5 rounded">Standaard: common</span>
                        </div>
                        <input 
                            type="text" 
                            name="tenant_id" 
                            value="<?= htmlspecialchars(!empty($outlookSettings['tenant_id']) ? $outlookSettings['tenant_id'] : 'common') ?>"
                            placeholder="common of organizations" 
                            class="w-full bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 text-xs text-white placeholder-slate-600 focus:outline-none focus:border-blue-500 font-mono"
                        >
                        <div class="text-[10px] text-slate-400 mt-1.5 leading-relaxed bg-slate-950/80 p-2.5 rounded-lg border border-slate-800/80 space-y-1">
                            <p class="font-semibold text-slate-300 flex items-center space-x-1">
                                <span>💡 Wat moet hier staan?</span>
                            </p>
                            <p>• Voor uw organisatie: vul uw domein in (bijv. <code>planningsagenda.nl</code>) of uw Tenant GUID.</p>
                            <p>• Voor multi-tenant apps: vul <code>organizations</code> of <code>common</code> in.</p>
                        </div>

                        <?php 
                        $curClientId = !empty($outlookSettings['client_id']) ? $outlookSettings['client_id'] : $appConfig['client_id'];
                        $curTenantId = !empty($outlookSettings['tenant_id']) ? $outlookSettings['tenant_id'] : (!empty($appConfig['tenant_id']) ? $appConfig['tenant_id'] : 'organizations');
                        if (!empty($curClientId)): 
                            $adminConsentUrl = "https://login.microsoftonline.com/" . urlencode($curTenantId) . "/v2.0/adminconsent?client_id=" . urlencode($curClientId) . "&redirect_uri=" . urlencode($redirectUri) . "&scope=" . urlencode("https://graph.microsoft.com/.default");
                        ?>
                        <div class="mt-2 p-2.5 rounded-lg bg-amber-500/10 border border-amber-500/30 text-[11px] flex items-start space-x-2">
                            <i data-lucide="shield-alert" class="w-4 h-4 flex-shrink-0 mt-0.5 text-amber-400"></i>
                            <div class="text-slate-300 leading-snug flex-1">
                                <strong class="text-amber-300 block">Krijgt u "Beheerdersgoedkeuring vereist"?</strong>
                                <span>Stuur deze officiële Microsoft goedkeuringslink naar uw IT-beheerder om Fociz met 1 klik goed te keuren voor <?= htmlspecialchars($curTenantId) ?>:</span>
                                <div class="mt-2 flex items-center space-x-2">
                                    <input type="text" readonly id="adminConsentInput" value="<?= htmlspecialchars($adminConsentUrl) ?>" class="bg-slate-950/80 border border-slate-800 rounded px-2 py-1 text-[10px] text-amber-300 font-mono flex-1 focus:outline-none select-all">
                                    <button type="button" onclick="copyToClipboard('adminConsentInput')" class="bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 text-amber-300 text-[10px] font-semibold px-2 py-1 rounded transition flex items-center space-x-1 flex-shrink-0">
                                        <i data-lucide="copy" class="w-3 h-3"></i>
                                        <span>Kopieer Link</span>
                                    </button>
                                </div>
                                <div class="mt-1.5">
                                    <a href="<?= htmlspecialchars($adminConsentUrl) ?>" target="_blank" class="inline-flex items-center space-x-1 font-bold text-amber-400 hover:text-white underline">
                                        <span>Zelf beheerder? Open de goedkeuring direct &rarr;</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>

                    <label class="flex items-center space-x-2 text-xs text-slate-300 pt-1">
                        <input type="checkbox" name="is_demo_mode" value="1" <?= !empty($configs['OUTLOOK']['is_demo_mode']) ? 'checked' : '' ?> class="rounded bg-slate-900 border-slate-700 text-blue-500">
                        <span>Gebruik interactieve Sandbox data</span>
                    </label>

                    <div class="flex space-x-2 pt-2">
                        <button type="submit" name="action" value="save" class="flex-1 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold transition">
                            Instellingen Opslaan
                        </button>
                        
                        <button type="submit" name="action" value="connect_oauth" class="flex-1 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold transition flex items-center justify-center space-x-1 shadow-md shadow-blue-500/20">
                            <i data-lucide="key" class="w-3.5 h-3.5"></i>
                            <span><?= $isOutlookConnected ? 'Opnieuw Koppelen' : 'Koppel Mijn Outlook' ?></span>
                        </button>
                    </div>

                    <?php if ($isOutlookConnected): ?>
                        <button type="submit" name="action" value="disconnect" onclick="return confirm('Weet u zeker dat u Microsoft Outlook wilt ontkoppelen voor uw account?')" class="w-full py-1.5 text-[11px] text-red-400 hover:text-red-300 transition text-center block">
                            Mijn Koppeling Verwijderen
                        </button>
                    <?php endif; ?>
                </form>
            <?php else: ?>
                <!-- COLLEGA FORMULIER: Eenvoudig & Veilig (1-klik) -->
                <div class="pt-4 border-t border-slate-800 mt-4">
                    <?php if (!$appConfig['is_configured']): ?>
                        <button type="button" disabled class="w-full py-2.5 rounded-xl bg-slate-800/60 border border-slate-700/60 text-slate-500 text-xs font-semibold cursor-not-allowed flex items-center justify-center space-x-2">
                            <i data-lucide="lock" class="w-3.5 h-3.5"></i>
                            <span>Wachten op Configuratie Beheerder</span>
                        </button>
                    <?php elseif ($isOutlookConnected): ?>
                        <form method="POST" action="/integrations.php" class="space-y-2">
                            <input type="hidden" name="provider" value="OUTLOOK">
                            <button type="submit" name="action" value="connect_oauth" class="w-full py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold transition flex items-center justify-center space-x-2">
                                <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
                                <span>Opnieuw Aanmelden bij Microsoft</span>
                            </button>
                            <button type="submit" name="action" value="disconnect" onclick="return confirm('Weet u zeker dat u uw persoonlijke Outlook agenda wilt ontkoppelen?')" class="w-full py-2 rounded-xl bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 text-red-400 text-xs font-semibold transition flex items-center justify-center space-x-1.5">
                                <i data-lucide="link-2-off" class="w-3.5 h-3.5"></i>
                                <span>Mijn Agenda Ontkoppelen</span>
                            </button>
                        </form>
                    <?php else: ?>
                        <form method="POST" action="/integrations.php">
                            <input type="hidden" name="provider" value="OUTLOOK">
                            <button type="submit" name="action" value="connect_oauth" class="w-full py-3 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold transition flex items-center justify-center space-x-2 shadow-lg shadow-blue-500/25">
                                <i data-lucide="calendar-plus" class="w-4 h-4"></i>
                                <span>Koppel Mijn Microsoft Outlook Agenda</span>
                            </button>
                        </form>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- 2. MICROSOFT TEAMS -->
        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between relative overflow-hidden backdrop-blur-sm">
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/30 text-indigo-400 flex items-center justify-center font-bold">
                        <i data-lucide="video" class="w-5 h-5"></i>
                    </div>
                    <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-medium flex items-center space-x-1">
                        <i data-lucide="check-circle" class="w-3 h-3"></i>
                        <span>Inbegrepen bij Outlook</span>
                    </span>
                </div>

                <div>
                    <h3 class="text-base font-bold text-white mb-1">Microsoft Teams</h3>
                    <p class="text-xs text-slate-400 leading-relaxed">
                        Detecteert Teams vergaderingen automatisch vanuit uw Outlook agenda en toont directe 'Deelnemen' knoppen.
                    </p>
                </div>

                <div class="bg-slate-950/60 rounded-xl p-3.5 border border-slate-800/80 text-xs space-y-2">
                    <div class="flex items-center justify-between text-slate-400">
                        <span>Direct Deelnemen:</span>
                        <span class="text-emerald-400 font-semibold">Ondersteund</span>
                    </div>
                    <div class="flex items-center justify-between text-slate-400">
                        <span>Meeting detectie:</span>
                        <span class="text-slate-200">Via Graph API</span>
                    </div>
                    <div class="flex items-center justify-between text-slate-400">
                        <span>Status:</span>
                        <span class="text-indigo-400 font-semibold"><?= $isOutlookConnected ? 'Actief' : 'Koppel Outlook' ?></span>
                    </div>
                </div>

                <div class="p-3 bg-indigo-950/30 border border-indigo-900/50 rounded-xl text-xs text-indigo-200/80">
                    <p class="leading-relaxed">
                        Teams vergaderingen worden automatisch uitgelezen zodra Microsoft Outlook is gekoppeld. U hoeft voor Teams geen aparte koppeling te configureren!
                    </p>
                </div>
            </div>

            <form method="POST" action="/integrations.php" class="pt-4 border-t border-slate-800 space-y-3 mt-4">
                <input type="hidden" name="provider" value="TEAMS">
                <input type="hidden" name="action" value="save">
                
                <label class="flex items-center space-x-2 text-xs text-slate-300">
                    <input type="checkbox" name="is_demo_mode" value="1" <?= empty($configs['TEAMS']) || !empty($configs['TEAMS']['is_demo_mode']) ? 'checked' : '' ?> class="rounded bg-slate-900 border-slate-700 text-indigo-500">
                    <span>Gebruik interactieve Sandbox data</span>
                </label>

                <button type="submit" class="w-full py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold transition">
                    Teams Instellingen Opslaan
                </button>
            </form>
        </div>

        <!-- 3. ATLASSIAN JIRA -->
        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between relative overflow-hidden backdrop-blur-sm">
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="w-10 h-10 rounded-xl bg-sky-500/10 border border-sky-500/30 text-sky-400 flex items-center justify-center font-bold">
                        <i data-lucide="trello" class="w-5 h-5"></i>
                    </div>
                    <?php if ($isJiraConnected): ?>
                        <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold flex items-center space-x-1">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                            <span>Live Verbonden</span>
                        </span>
                    <?php elseif (!empty($configs['JIRA']['is_demo_mode'])): ?>
                        <span class="px-2.5 py-0.5 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs font-semibold">
                            Sandbox Modus
                        </span>
                    <?php else: ?>
                        <span class="px-2.5 py-0.5 rounded-full bg-slate-800 border border-slate-700 text-slate-400 text-xs font-semibold">
                            Niet Gekoppeld
                        </span>
                    <?php endif; ?>
                </div>

                <div>
                    <h3 class="text-base font-bold text-white mb-1">Atlassian Jira Cloud</h3>
                    <p class="text-xs text-slate-400 leading-relaxed">
                        Koppelt uw Jira tickets rechtstreeks aan de Fociz dagplanning en roadmap.
                    </p>
                </div>

                <?php if ($isJiraConnected): ?>
                    <div class="bg-slate-950/70 rounded-xl p-3.5 border border-sky-500/20 text-xs space-y-2">
                        <div class="flex items-center justify-between text-slate-400">
                            <span>Ingelogd als:</span>
                            <span class="text-sky-400 font-semibold truncate max-w-[170px]" title="<?= htmlspecialchars($jiraSettings['jira_email'] ?? '') ?>">
                                <?= htmlspecialchars($jiraSettings['account_name'] ?: ($jiraSettings['jira_email'] ?? '')) ?>
                            </span>
                        </div>
                        <div class="flex items-center justify-between text-slate-400">
                            <span>Domein:</span>
                            <span class="text-slate-200 font-mono text-[11px] truncate max-w-[170px]"><?= htmlspecialchars($jiraSettings['jira_domain'] ?? '-') ?></span>
                        </div>
                        <div class="flex items-center justify-between text-slate-400">
                            <span>Tickets Toegewezen:</span>
                            <span class="text-emerald-400 font-bold"><?= count($jiraIssues) ?> open taken</span>
                        </div>
                    </div>
                <?php endif; ?>

                <div class="bg-slate-950/50 rounded-xl border border-slate-800/80 p-3 text-xs text-slate-400">
                    <div class="flex items-center justify-between">
                        <span class="text-slate-300 font-semibold">Atlassian API Token nodig?</span>
                        <a href="https://id.atlassian.com/manage-profile/security/api-tokens" target="_blank" class="text-sky-400 hover:text-sky-300 font-semibold flex items-center space-x-1">
                            <span>Genereer Token</span>
                            <i data-lucide="external-link" class="w-3 h-3"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Jira Formulier -->
            <form method="POST" action="/integrations.php" class="pt-4 border-t border-slate-800 space-y-2.5 mt-4">
                <input type="hidden" name="provider" value="JIRA">

                <div>
                    <label class="block text-[10px] font-semibold text-slate-400 mb-0.5">Jira Cloud Domein</label>
                    <input 
                        type="text" 
                        name="jira_domain" 
                        value="<?= htmlspecialchars($jiraSettings['jira_domain'] ?? fociz_env('JIRA_DOMAIN', '')) ?>" 
                        placeholder="uwbedrijf.atlassian.net" 
                        class="w-full bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 text-xs text-white placeholder-slate-600 focus:outline-none focus:border-sky-500 font-mono"
                    >
                </div>

                <div>
                    <label class="block text-[10px] font-semibold text-slate-400 mb-0.5">Atlassian E-mailadres</label>
                    <input 
                        type="email" 
                        name="jira_email" 
                        value="<?= htmlspecialchars($jiraSettings['jira_email'] ?? fociz_env('JIRA_EMAIL', '')) ?>" 
                        placeholder="collega@uwbedrijf.nl" 
                        class="w-full bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 text-xs text-white placeholder-slate-600 focus:outline-none focus:border-sky-500"
                    >
                </div>

                <div>
                    <label class="block text-[10px] font-semibold text-slate-400 mb-0.5">Atlassian API Token</label>
                    <div class="relative">
                        <input 
                            type="password" 
                            id="jiraApiTokenInput"
                            name="jira_api_token" 
                            value="<?= htmlspecialchars(!empty($jiraSettings['jira_api_token']) && $jiraSettings['jira_api_token'] !== '••••••••••••••••' ? $jiraSettings['jira_api_token'] : fociz_env('JIRA_API_TOKEN', '')) ?>" 
                            placeholder="Plak hier uw Atlassian API token" 
                            class="w-full bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1.5 pr-8 text-xs text-white placeholder-slate-600 focus:outline-none focus:border-sky-500 font-mono"
                        >
                        <button type="button" onclick="togglePasswordVisibility('jiraApiTokenInput', this)" class="absolute right-2 top-2 text-slate-500 hover:text-slate-300 transition" title="Toon / verberg token">
                            <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                        </button>
                    </div>
                </div>

                <label class="flex items-center space-x-2 text-xs text-slate-300 pt-1">
                    <input type="checkbox" name="is_demo_mode" value="1" <?= empty($configs['JIRA']) || !empty($configs['JIRA']['is_demo_mode']) ? 'checked' : '' ?> class="rounded bg-slate-900 border-slate-700 text-sky-500">
                    <span>Gebruik interactieve Sandbox data</span>
                </label>

                <div class="flex space-x-2 pt-2">
                    <button type="submit" name="action" value="save" class="w-full py-2 rounded-xl bg-sky-600 hover:bg-sky-500 text-white text-xs font-bold transition flex items-center justify-center space-x-1.5 shadow-md shadow-sky-500/20">
                        <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
                        <span>Verbinding Testen & Opslaan</span>
                    </button>
                </div>

                <?php if ($isJiraConnected): ?>
                    <button type="submit" name="action" value="disconnect" onclick="return confirm('Weet u zeker dat u Atlassian Jira wilt ontkoppelen?')" class="w-full py-1.5 text-[11px] text-red-400 hover:text-red-300 transition text-center block">
                        Koppeling Verwijderen
                    </button>
                <?php endif; ?>
            </form>
        </div>
    </div>

    <!-- Gesynchroniseerde Jira Issues & 1-Click Import naar Dagplanning -->
    <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-800">
            <div class="flex items-center space-x-2">
                <i data-lucide="check-square" class="w-5 h-5 text-sky-400"></i>
                <h3 class="text-sm font-bold text-white uppercase tracking-wider">
                    Jira Issues Toegewezen aan U
                </h3>
                <?php if ($jiraIsDemo): ?>
                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-500/20 text-amber-400 border border-amber-500/30">Sandbox</span>
                <?php else: ?>
                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">Live Jira</span>
                <?php endif; ?>
            </div>

            <div class="flex items-center space-x-3">
                <span class="text-xs text-slate-400 font-mono"><?= count($jiraIssues) ?> issues</span>
                <a href="/integrations.php?refresh_jira=1" class="flex items-center space-x-1 text-xs text-slate-300 hover:text-white bg-slate-800 hover:bg-slate-700 px-2.5 py-1 rounded-lg border border-slate-700 transition">
                    <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
                    <span>Verversen</span>
                </a>
            </div>
        </div>

        <?php if (empty($jiraIssues)): ?>
            <div class="text-center py-10 text-slate-500 text-xs">
                Geen openstaande tickets gevonden die aan u zijn toegewezen in Jira.
            </div>
        <?php else: ?>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <?php foreach ($jiraIssues as $issue): 
                    $priority = $issue['priority'] ?? 'Medium';
                    $priorityClass = match(strtolower($priority)) {
                        'highest', 'high', 'hoog' => 'text-red-400 bg-red-500/10 border-red-500/20',
                        'medium', 'gemiddeld'     => 'text-amber-400 bg-amber-500/10 border-amber-500/20',
                        default                   => 'text-slate-400 bg-slate-800/60 border-slate-700',
                    };
                ?>
                    <div class="bg-slate-950/70 border border-slate-800/80 hover:border-slate-700 rounded-xl p-4 flex flex-col justify-between transition group">
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center space-x-2">
                                    <span class="font-mono text-xs font-bold text-sky-400 bg-sky-500/10 border border-sky-500/20 px-2 py-0.5 rounded">
                                        <?= htmlspecialchars($issue['key']) ?>
                                    </span>
                                    <span class="text-[10px] text-slate-400 font-medium truncate max-w-[140px]">
                                        <?= htmlspecialchars($issue['project'] ?? '') ?>
                                    </span>
                                </div>
                                <span class="text-[10px] font-semibold px-2 py-0.5 rounded bg-slate-800 text-slate-300">
                                    <?= htmlspecialchars($issue['status']) ?>
                                </span>
                            </div>

                            <h4 class="text-xs font-bold text-white leading-snug group-hover:text-sky-300 transition">
                                <?= htmlspecialchars($issue['summary']) ?>
                            </h4>

                            <div class="flex items-center space-x-3 mt-2 text-[10px] text-slate-500">
                                <span>Type: <?= htmlspecialchars($issue['issue_type'] ?? 'Issue') ?></span>
                                <?php if (!empty($issue['due_date'])): ?>
                                    <span>Vervaldatum: <?= htmlspecialchars($issue['due_date']) ?></span>
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded border <?= $priorityClass ?>">
                                <?= htmlspecialchars($priority) ?>
                            </span>

                            <div class="flex items-center space-x-2">
                                <?php if (!empty($issue['url']) && $issue['url'] !== '#'): ?>
                                    <a href="<?= htmlspecialchars($issue['url']) ?>" target="_blank" class="p-1 rounded-lg text-slate-500 hover:text-sky-400 transition" title="Open in Jira">
                                        <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                                    </a>
                                <?php endif; ?>

                                <button 
                                    onclick="importJiraToTasks(this, '<?= htmlspecialchars(addslashes($issue['summary'])) ?>', '<?= htmlspecialchars($issue['key']) ?>', '<?= htmlspecialchars(addslashes($issue['url'] ?? '')) ?>', 'P1')"
                                    class="flex items-center space-x-1 text-[11px] font-semibold text-emerald-400 hover:text-emerald-300 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 px-2.5 py-1 rounded-lg transition"
                                >
                                    <i data-lucide="plus" class="w-3 h-3"></i>
                                    <span>Plan als P1</span>
                                </button>
                                <button 
                                    onclick="importJiraToTasks(this, '<?= htmlspecialchars(addslashes($issue['summary'])) ?>', '<?= htmlspecialchars($issue['key']) ?>', '<?= htmlspecialchars(addslashes($issue['url'] ?? '')) ?>', 'P2')"
                                    class="flex items-center space-x-1 text-[11px] font-semibold text-slate-300 hover:text-white bg-slate-800 hover:bg-slate-700 border border-slate-700 px-2.5 py-1 rounded-lg transition"
                                >
                                    <span>Plan P2</span>
                                </button>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const el = document.getElementById(elementId);
    if (!el) return;
    navigator.clipboard.writeText(el.value).then(() => {
        alert('Omleidings-URI gekopieerd naar klembord!');
    }).catch(() => {
        el.select();
        document.execCommand('copy');
        alert('Omleidings-URI gekopieerd!');
    });
}

function togglePasswordVisibility(inputId, btn) {
    const input = document.getElementById(inputId);
    if (!input) return;
    const isNowText = input.type === 'password';
    input.type = isNowText ? 'text' : 'password';
    if (btn) {
        btn.innerHTML = isNowText 
            ? '<i data-lucide="eye-off" class="w-3.5 h-3.5 text-blue-400"></i>' 
            : '<i data-lucide="eye" class="w-3.5 h-3.5 text-slate-500"></i>';
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }
}

async function importJiraToTasks(btn, title, jiraKey, url, priority = 'P1') {
    const originalHtml = btn.innerHTML;
    btn.innerText = 'Toevoegen...';
    btn.disabled = true;

    try {
        const res = await fetch('/api/planner.php?action=add_task', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                title: `[${jiraKey}] ${title}`,
                priority: priority,
                source: 'JIRA',
                external_id: jiraKey,
                external_url: url,
                date: '<?= date('Y-m-d') ?>'
            })
        });
        const data = await res.json();
        if (data.success) {
            btn.innerHTML = '<i data-lucide="check" class="w-3 h-3"></i><span>Gepland!</span>';
            btn.className = 'flex items-center space-x-1 text-[11px] font-semibold text-emerald-400 bg-emerald-500/20 border border-emerald-500/30 px-2.5 py-1 rounded-lg';
            if (typeof lucide !== 'undefined') lucide.createIcons();
        } else {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
            alert(data.error || 'Kon taak niet toevoegen');
        }
    } catch(err) {
        btn.innerHTML = originalHtml;
        btn.disabled = false;
        alert('Netwerkfout bij toevoegen van taak');
    }
}
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>