{% extends 'base.html.twig' %}

{% block title %}SwimMonitor - Interaktive Tour{% endblock %}

{% block header %}
    <div class="container-header">
        <h1 class="display-4">Interaktive Tour</h1>
        <div class="container-status">
            <span class="badge bg-primary">Entdecken Sie SwimMonitor</span>
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}
    <i class="fas fa-map-signs me-2"></i>Interaktive Tour
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow border-start border-bottom">
                <div class="card-body">
                    <h2 class="mb-4">Entdecken Sie die versteckten Funktionen</h2>
                    
                    <!-- Container Overview Section -->
                    <div class="tour-section mb-5">
                        <h3 class="section-title">
                            <i class="fas fa-swimming-pool me-2"></i>Container Übersicht
                        </h3>
                        <div class="feature-grid">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <h4>Interaktive Metriken</h4>
                                <p>Klicken Sie auf die Metrik-Karten (Temperatur, Chlor, etc.) um detaillierte Informationen zu erhalten.</p>
                                <div class="feature-demo">
                                    <div class="demo-container">
                                        <div class="metric-preview">
                                            <div class="metric-value">25.5°C</div>
                                            <div class="metric-status">Normal</div>
                                        </div>
                                        <div class="demo-modal">
                                            <h5>Wassertemperatur Details</h5>
                                            <div class="demo-modal-content">
                                                <div class="modal-value">
                                                    <strong>Momentaner Wert:</strong> 25.5°C
                                                </div>
                                                <div class="modal-value">
                                                    <strong>Status:</strong> Normal
                                                </div>
                                                <div class="modal-value">
                                                    <strong>Obere Grenze:</strong> 28°C
                                                </div>
                                                <div class="modal-value">
                                                    <strong>Untere Grenze:</strong> 22°C
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-search"></i>
                                </div>
                                <h4>Intelligente Suche</h4>
                                <p>Nutzen Sie die Suchfunktion, um schnell bestimmte Container zu finden.</p>
                                <div class="feature-demo">
                                    <div class="search-preview">
                                        <div class="search-input">
                                            <i class="fas fa-search"></i>
                                            <input type="text" placeholder="Container suchen..." disabled>
                                        </div>
                                        <div class="search-results">
                                            <div class="result-item">Container A1</div>
                                            <div class="result-item">Container A2</div>
                                            <div class="result-item">Container B1</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-map-marked-alt"></i>
                                </div>
                                <h4>Interaktive Karte</h4>
                                <p>Die Karte zeigt alle Container-Standorte und deren Status in Echtzeit.</p>
                                <div class="feature-demo">
                                    <div class="map-preview">
                                        <div class="map-container">
                                            <div class="map-marker online"></div>
                                            <div class="map-marker offline"></div>
                                            <div class="map-marker online"></div>
                                        </div>
                                        <div class="map-legend">
                                            <span class="legend-item"><i class="fas fa-circle text-success"></i> Online</span>
                                            <span class="legend-item"><i class="fas fa-circle text-danger"></i> Offline</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- QR Scanner Section -->
                    <div class="tour-section mb-5">
                        <h3 class="section-title">
                            <i class="fas fa-qrcode me-2"></i>QR-Code Scanner
                        </h3>
                        <div class="feature-grid">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-camera"></i>
                                </div>
                                <h4>Schnelles Scannen</h4>
                                <p>Scannen Sie QR-Codes direkt mit Ihrer Kamera für schnelles Ein- und Auschecken.</p>
                                <div class="feature-demo">
                                    <div class="scanner-preview">
                                        <div class="scanner-view">
                                            <div class="scanner-overlay">
                                                <div class="scanner-line"></div>
                                            </div>
                                            <div class="scanner-qr">
                                                <i class="fas fa-qrcode"></i>
                                            </div>
                                        </div>
                                        <div class="scanner-status">
                                            <div class="status-icon">
                                                <i class="fas fa-check-circle text-success"></i>
                                            </div>
                                            <div class="status-text">
                                                <div class="status-title">Container A1</div>
                                                <div class="status-subtitle">Erfolgreich gescannt</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-history"></i>
                                </div>
                                <h4>Scan-Historie</h4>
                                <p>Behalten Sie den Überblick über alle Scans und deren Status.</p>
                                <div class="feature-demo">
                                    <div class="history-preview">
                                        <div class="history-header">
                                            <div class="history-title">Letzte Scans</div>
                                            <div class="history-filter">
                                                <select class="form-select form-select-sm">
                                                    <option>Alle Container</option>
                                                    <option>Container A1</option>
                                                    <option>Container A2</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="history-list">
                                            <div class="history-item">
                                                <div class="history-icon success">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="history-content">
                                                    <div class="history-main">Container A1</div>
                                                    <div class="history-sub">Heute, 14:30</div>
                                                </div>
                                            </div>
                                            <div class="history-item">
                                                <div class="history-icon warning">
                                                    <i class="fas fa-exclamation"></i>
                                                </div>
                                                <div class="history-content">
                                                    <div class="history-main">Container B2</div>
                                                    <div class="history-sub">Heute, 13:15</div>
                                                </div>
                                            </div>
                                            <div class="history-item">
                                                <div class="history-icon success">
                                                    <i class="fas fa-check"></i>
                                                </div>
                                                <div class="history-content">
                                                    <div class="history-main">Container A1</div>
                                                    <div class="history-sub">Heute, 11:45</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Administration Section -->
                    <div class="tour-section mb-5">
                        <h3 class="section-title">
                            <i class="fas fa-user-cog me-2"></i>Administration
                        </h3>
                        <div class="feature-grid">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <h4>Benutzerverwaltung</h4>
                                <p>Verwalten Sie Benutzer und deren Berechtigungen einfach und übersichtlich.</p>
                                <div class="feature-demo">
                                    <div class="admin-preview">
                                        <div class="admin-header">
                                            <div class="admin-title">Benutzer</div>
                                            <button class="btn btn-sm btn-primary">
                                                <i class="fas fa-plus"></i> Neu
                                            </button>
                                        </div>
                                        <div class="admin-list">
                                            <div class="admin-item">
                                                <div class="admin-avatar">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                                <div class="admin-content">
                                                    <div class="admin-name">Max Mustermann</div>
                                                    <div class="admin-role">Administrator</div>
                                                </div>
                                                <div class="admin-actions">
                                                    <button class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="admin-item">
                                                <div class="admin-avatar">
                                                    <i class="fas fa-user"></i>
                                                </div>
                                                <div class="admin-content">
                                                    <div class="admin-name">Anna Schmidt</div>
                                                    <div class="admin-role">Benutzer</div>
                                                </div>
                                                <div class="admin-actions">
                                                    <button class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-cogs"></i>
                                </div>
                                <h4>Globale Einstellungen</h4>
                                <p>Passen Sie die Systemeinstellungen an Ihre Bedürfnisse an.</p>
                                <div class="feature-demo">
                                    <div class="settings-preview">
                                        <div class="settings-group">
                                            <div class="settings-header">
                                                <i class="fas fa-sliders-h"></i>
                                                <span>Allgemeine Einstellungen</span>
                                            </div>
                                            <div class="settings-item">
                                                <div class="settings-label">Automatische Updates</div>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" checked>
                                                </div>
                                            </div>
                                            <div class="settings-item">
                                                <div class="settings-label">Benachrichtigungen</div>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" checked>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="settings-group">
                                            <div class="settings-header">
                                                <i class="fas fa-bell"></i>
                                                <span>Benachrichtigungen</span>
                                            </div>
                                            <div class="settings-item">
                                                <div class="settings-label">E-Mail Benachrichtigungen</div>
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Start Guide -->
                    <div class="tour-section">
                        <h3 class="section-title">
                            <i class="fas fa-rocket me-2"></i>Schnellstart
                        </h3>
                        <div class="quick-start-steps">
                            <div class="step">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h4>Container verwalten</h4>
                                    <p>Navigieren Sie zur Container-Übersicht, um alle Ihre Container zu sehen und zu verwalten.</p>
                                    <a href="{{ path('api_data') }}" class="btn btn-outline-primary">
                                        <i class="fas fa-arrow-right me-2"></i>Zur Übersicht
                                    </a>
                                </div>
                            </div>
                            
                            <div class="step">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h4>QR-Codes scannen</h4>
                                    <p>Nutzen Sie den QR-Code Scanner für schnelles Ein- und Auschecken.</p>
                                    <a href="{{ path('app_qr_scanner') }}" class="btn btn-outline-primary">
                                        <i class="fas fa-arrow-right me-2"></i>Zum Scanner
                                    </a>
                                </div>
                            </div>
                            
                            <div class="step">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h4>Einstellungen anpassen</h4>
                                    <p>Passen Sie die Systemeinstellungen an Ihre Bedürfnisse an.</p>
                                    <a href="{{ path('admin_settings') }}" class="btn btn-outline-primary">
                                        <i class="fas fa-arrow-right me-2"></i>Zu den Einstellungen
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.section-title {
    color: #2c3e50;
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-icon i {
    font-size: 1.5rem;
    color: #2c3e50;
}

.feature-demo {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.quick-start-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.step-number {
    width: 40px;
    height: 40px;
    background: #2c3e50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h4 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.btn-outline-primary {
    color: #2c3e50;
    border-color: #2c3e50;
}

.btn-outline-primary:hover {
    background-color: #2c3e50;
    border-color: #2c3e50;
    color: white;
}

@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .step-number {
        margin-bottom: 1rem;
    }
}

/* Demo Styles */
.demo-container {
    position: relative;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.metric-preview {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.metric-preview:hover {
    transform: translateY(-2px);
}

.metric-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c3e50;
    text-align: center;
}

.metric-status {
    text-align: center;
    color: #28a745;
    font-weight: 500;
}

.demo-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    z-index: 1000;
    min-width: 300px;
}

.metric-preview:hover + .demo-modal {
    display: block;
}

.demo-modal h5 {
    color: #2c3e50;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.modal-value {
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.modal-value strong {
    color: #6c757d;
}

/* Search Preview */
.search-preview {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-input {
    position: relative;
    margin-bottom: 1rem;
}

.search-input i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.search-input input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #f8f9fa;
}

.search-results {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.result-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: white;
}

.result-item:last-child {
    border-bottom: none;
}

/* Map Preview */
.map-preview {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.map-container {
    height: 200px;
    background: #e9ecef;
    border-radius: 4px;
    position: relative;
    margin-bottom: 1rem;
}

.map-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.map-marker.online {
    background: #28a745;
}

.map-marker.offline {
    background: #dc3545;
}

.map-marker:nth-child(1) {
    top: 30%;
    left: 30%;
}

.map-marker:nth-child(2) {
    top: 50%;
    left: 60%;
}

.map-marker:nth-child(3) {
    top: 40%;
    left: 80%;
}

.map-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .demo-container,
[data-bs-theme="dark"] .metric-preview,
[data-bs-theme="dark"] .demo-modal,
[data-bs-theme="dark"] .search-preview,
[data-bs-theme="dark"] .map-preview {
    background: #2a2a2a;
}

[data-bs-theme="dark"] .search-input input,
[data-bs-theme="dark"] .result-item {
    background: #343a40;
    border-color: #444;
    color: #e9ecef;
}

[data-bs-theme="dark"] .map-container {
    background: #343a40;
}

[data-bs-theme="dark"] .modal-value {
    background: #343a40;
}

[data-bs-theme="dark"] .modal-value strong {
    color: #adb5bd;
}

/* Scanner Preview */
.scanner-preview {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.scanner-view {
    height: 200px;
    background: #000;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.scanner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 8px;
}

.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #00ff00;
    animation: scan 2s linear infinite;
}

@keyframes scan {
    0% { top: 0; }
    100% { top: 100%; }
}

.scanner-qr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 4rem;
    opacity: 0.3;
}

.scanner-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.status-icon {
    font-size: 1.5rem;
}

.status-text {
    flex: 1;
}

.status-title {
    font-weight: 500;
    color: #2c3e50;
}

.status-subtitle {
    font-size: 0.875rem;
    color: #6c757d;
}

/* History Preview */
.history-preview {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.history-title {
    font-weight: 500;
    color: #2c3e50;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.history-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.history-icon.success {
    background: #28a745;
}

.history-icon.warning {
    background: #ffc107;
}

.history-content {
    flex: 1;
}

.history-main {
    font-weight: 500;
    color: #2c3e50;
}

.history-sub {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Admin Preview */
.admin-preview {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.admin-title {
    font-weight: 500;
    color: #2c3e50;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.admin-avatar {
    width: 40px;
    height: 40px;
    background: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.admin-content {
    flex: 1;
}

.admin-name {
    font-weight: 500;
    color: #2c3e50;
}

.admin-role {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Settings Preview */
.settings-preview {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.settings-group {
    margin-bottom: 1.5rem;
}

.settings-group:last-child {
    margin-bottom: 0;
}

.settings-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
    color: #2c3e50;
    font-weight: 500;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.settings-label {
    color: #6c757d;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .scanner-preview,
[data-bs-theme="dark"] .history-preview,
[data-bs-theme="dark"] .admin-preview,
[data-bs-theme="dark"] .settings-preview {
    background: #2a2a2a;
}

[data-bs-theme="dark"] .history-item,
[data-bs-theme="dark"] .admin-item {
    background: #343a40;
}

[data-bs-theme="dark"] .scanner-status {
    background: #343a40;
}

[data-bs-theme="dark"] .admin-avatar {
    background: #2a2a2a;
    color: #adb5bd;
}

[data-bs-theme="dark"] .settings-header {
    border-bottom-color: #444;
}

[data-bs-theme="dark"] .form-check-input {
    background-color: #343a40;
    border-color: #444;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
</style>
{% endblock %}