{% extends "layout.html" %}

{% block content %}

<div class="dashboard-header">
    <h1 class="display-5 fw-bold">Domain Monitoring Dashboard</h1>
    <p class="lead">Monitor your domains for Nawala blocking status, Google rankings, and AMP connectivity.</p>
</div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-selected="true">
            <i class="fas fa-chart-line"></i> Overview
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="domains-tab" data-bs-toggle="tab" data-bs-target="#domains" type="button" role="tab" aria-selected="false">
            <i class="fas fa-globe"></i> Domains <span class="domain-count">{{ domains|length }}</span>
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="monitoring-tab" data-bs-toggle="tab" data-bs-target="#monitoring" type="button" role="tab" aria-selected="false">
            <i class="fas fa-search"></i> Monitoring Results
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-selected="false">
            <i class="fas fa-cog"></i> Settings
        </button>
    </li>
</ul>

<!-- Tab content -->
<div class="tab-content" id="myTabContent">
    <!-- Overview Tab -->
    <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card stats-card">
                    <div class="card-body">
                        <h5 class="card-title">{{ domains|length }}</h5>
                        <p class="card-text">Total Domains</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stats-card">
                    <div class="card-body">
                        <h5 class="card-title">
                            {% set blocked = namespace(count=0) %}
                            {% for result in monitoring_results %}
                                {% if result['is_blocked'] == 1 %}
                                    {% set blocked.count = blocked.count + 1 %}
                                {% endif %}
                            {% endfor %}
                            {{ blocked.count }}
                        </h5>
                        <p class="card-text">Domains Blocked</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card stats-card">
                    <div class="card-body">
                        <h5 class="card-title">
                            {% set amp = namespace(count=0) %}
                            {% for result in monitoring_results %}
                                {% if result['amp_status'] == 'Terhubung' %}
                                    {% set amp.count = amp.count + 1 %}
                                {% endif %}
                            {% endfor %}
                            {{ amp.count }}
                        </h5>
                        <p class="card-text">AMP Connected</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="alert alert-info mt-4">
            <h4 class="alert-heading"><i class="fas fa-info-circle"></i> How It Works</h4>
            <p>This system monitors your domains for Nawala blocking status, checks Google search rankings, and verifies AMP connectivity.</p>
            <hr>
            <p>When a domain is blocked, the system will send a Telegram notification with detailed information about the domain's status.</p>
        </div>
        
        <div class="card mt-4">
            <div class="card-header">
                <h5>Recent Activity</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Domain</th>
                                <th>Status</th>
                                <th>Google Rank</th>
                                <th>AMP Status</th>
                                <th>Last Checked</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for result in monitoring_results[:5] %}
                            <tr>
                                <td>{{ result['domain'] }}</td>
                                <td>
                                    {% if result['is_blocked'] == 1 %}
                                    <span class="status-blocked"><i class="fas fa-ban"></i> Blocked</span>
                                    {% else %}
                                    <span class="status-unblocked"><i class="fas fa-check-circle"></i> Unblocked</span>
                                    {% endif %}
                                </td>
                                <td>{{ result['google_rank'] }}</td>
                                <td>
                                    {% if result['amp_status'] == 'Terhubung' %}
                                    <span class="amp-connected"><i class="fas fa-bolt"></i> Connected</span>
                                    {% else %}
                                    <span class="amp-disconnected"><i class="fas fa-times"></i> Disconnected</span>
                                    {% endif %}
                                </td>
                                <td>{{ result['checked_at'] }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Domains Tab -->
    <div class="tab-pane fade" id="domains" role="tabpanel" aria-labelledby="domains-tab">
        <div class="add-domain-form mt-4">
            <h3><i class="fas fa-plus-circle"></i> Add New Domain</h3>
            
            {% if error %}
            <div class="alert alert-danger" role="alert">
                {{ error }}
            </div>
            {% endif %}
            
            <div class="alert alert-danger d-none" id="formAlert" role="alert"></div>
            
            <form id="addDomainForm" method="POST" action="/">
                <div class="row g-3">
                    <div class="col-md-5">
                        <label for="domainInput" class="form-label">Domain Name</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-globe"></i></span>
                            <input type="text" class="form-control" id="domainInput" name="domain" placeholder="example.com" required>
                        </div>
                        <div class="form-text">Enter domain name without http:// or www</div>
                    </div>
                    <div class="col-md-5">
                        <label for="brandInput" class="form-label">Brand Name</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-tag"></i></span>
                            <input type="text" class="form-control" id="brandInput" name="brand" placeholder="Your Brand" required>
                        </div>
                        <div class="form-text">Used for Google search ranking checks</div>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-plus"></i> Add Domain
                        </button>
                    </div>
                </div>
            </form>
        </div>
        
        <h3><i class="fas fa-list"></i> Your Domains <span class="domain-count">{{ domains|length }}</span></h3>
        
        {% if domains %}
        <div class="row">
            {% for domain in domains %}
            <div class="col-md-4">
                <div class="card domain-card">
                    <div class="card-body">
                        <h5 class="card-title">{{ domain['domain'] }}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Brand: {{ domain['brand'] }}</h6>
                        <p class="card-text small text-muted">Added on: {{ domain['created_at'] }}</p>
                        <form class="delete-domain-form" action="/domains/delete/{{ domain['id'] }}" method="POST">
                            <button type="submit" class="btn btn-sm btn-danger delete-btn">
                                <i class="fas fa-trash-alt"></i> Delete
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i> No domains found. Add a domain to start monitoring.
        </div>
        {% endif %}
    </div>
    
    <!-- Monitoring Results Tab -->
    <div class="tab-pane fade" id="monitoring" role="tabpanel" aria-labelledby="monitoring-tab">
        <h3 class="mt-4"><i class="fas fa-search"></i> Monitoring Results</h3>
        
        <!-- Manual Check Card -->
        <div class="card mt-4 mb-4">
            <div class="card-header">
                <h5><i class="fas fa-tasks"></i> Manual Domain Check</h5>
            </div>
            <div class="card-body">
                <form id="manualCheckForm" method="POST" action="/manual-check">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="domainSelect" class="form-label">Select Domain</label>
                            <select class="form-select" id="domainSelect" name="domain_id" required>
                                <option value="" selected disabled>Choose a domain to check...</option>
                                {% for domain in domains %}
                                <option value="{{ domain['id'] }}">{{ domain['domain'] }} ({{ domain['brand'] }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="checkOptions" class="form-label">Check Options</label>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="checkNawala" name="check_nawala" checked>
                                <label class="form-check-label" for="checkNawala">
                                    Check Nawala Blocking Status
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="checkGoogle" name="check_google" checked>
                                <label class="form-check-label" for="checkGoogle">
                                    Check Google Ranking & AMP Status
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" id="notifyTelegram" name="notify_telegram" checked>
                                <label class="form-check-label" for="notifyTelegram">
                                    Send Results to Telegram
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-play-circle"></i> Run Manual Check
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        {% if monitoring_results %}
        <div class="table-responsive results-table">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Domain</th>
                        <th>Brand</th>
                        <th>Status</th>
                        <th>Google Rank</th>
                        <th>AMP Status</th>
                        <th>Last Checked</th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in monitoring_results %}
                    <tr>
                        <td>{{ result['domain'] }}</td>
                        <td>{{ result['brand'] }}</td>
                        <td>
                            {% if result['is_blocked'] == 1 %}
                            <span class="status-blocked"><i class="fas fa-ban"></i> Blocked</span>
                            {% else %}
                            <span class="status-unblocked"><i class="fas fa-check-circle"></i> Unblocked</span>
                            {% endif %}
                        </td>
                        <td>{{ result['google_rank'] }}</td>
                        <td>
                            {% if result['amp_status'] == 'Terhubung' %}
                            <span class="amp-connected"><i class="fas fa-bolt"></i> Connected</span>
                            {% else %}
                            <span class="amp-disconnected"><i class="fas fa-times"></i> Disconnected</span>
                            {% endif %}
                        </td>
                        <td>{{ result['checked_at'] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i> No monitoring results available yet. Results will appear once the system has checked your domains.
        </div>
        {% endif %}
    </div>
    
    <!-- Settings Tab -->
    <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
        <h3 class="mt-4"><i class="fas fa-cog"></i> Telegram Settings</h3>
        
        <div class="card mt-4">
            <div class="card-header">
                <h5>Telegram Bot Configuration</h5>
            </div>
            <div class="card-body">
                <form id="telegramSettingsForm" method="POST" action="/settings/telegram">
                    <div class="mb-3">
                        <label for="telegramToken" class="form-label">Telegram Bot Token</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-key"></i></span>
                            <input type="text" class="form-control" id="telegramToken" name="telegram_token" 
                                placeholder="Enter your Telegram bot token" value="{{ telegram_token }}" required>
                        </div>
                        <div class="form-text">You can get a token by creating a bot with <a href="https://t.me/BotFather" target="_blank">@BotFather</a></div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="telegramChatId" class="form-label">Telegram Chat ID</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-comment"></i></span>
                            <input type="text" class="form-control" id="telegramChatId" name="telegram_chat_id" 
                                placeholder="Enter your Telegram chat ID" value="{{ telegram_chat_id }}" required>
                        </div>
                        <div class="form-text">This is the ID of the chat/group where the bot will send notifications</div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Save Settings
                    </button>
                </form>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-header">
                <h5>Test Telegram Connection</h5>
            </div>
            <div class="card-body">
                <form id="testTelegramForm" method="POST" action="/settings/telegram/test">
                    <div class="mb-3">
                        <p>Send a test message to verify your Telegram bot is configured correctly.</p>
                    </div>
                    <button type="submit" class="btn btn-info">
                        <i class="fas fa-paper-plane"></i> Send Test Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}