{% extends "base.html" %}

{% block head %}
<title>{{ seo_title }}</title>
<meta name="description" content="{{ seo_description }}">
<meta name="keywords" content="{{ seo_keywords }}">
<meta name="robots" content="index, follow">
<link rel="canonical" href="{{ canonical_url }}">

<meta property="og:type" content="website">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:title" content="{{ seo_title }}">
<meta property="og:description" content="{{ seo_description }}">
<meta property="og:site_name" content="Satta King">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="{{ canonical_url }}">
<meta name="twitter:title" content="{{ seo_title }}">
<meta name="twitter:description" content="{{ seo_description }}">

<script type="application/ld+json">
{{ schema_data | safe }}
</script>
{% endblock %}

{% block styles %}
<style>
    .main-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 15%;
    }
    
    @media (max-width: 1200px) {
        .main-container {
            padding: 0 10%;
        }
    }
    
    @media (max-width: 768px) {
        .main-container {
            padding: 0 3%;
        }
    }
    
    @media (max-width: 480px) {
        .main-container {
            padding: 0 2%;
        }
    }
    
    .header-section {
        background: #fff;
        padding: 15px 0;
        text-align: center;
        border-bottom: 3px solid #ffd700;
    }
    
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .logo-container img {
        max-height: 60px;
    }
    
    .site-title {
        color: #333;
        font-size: 28px;
        font-weight: 800;
        margin: 0;
    }
    
    .site-subtitle {
        color: #666;
        font-size: 14px;
        margin-top: 8px;
    }
    
    .nav-section {
        background: #000;
        padding: 10px 15%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    @media (max-width: 1200px) {
        .nav-section { padding: 12px 10%; }
    }
    
    @media (max-width: 768px) {
        .nav-section { padding: 12px 3%; }
    }
    
    @media (max-width: 480px) {
        .nav-section { padding: 12px 2%; }
    }
    
    .nav-menu {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .nav-item {
        color: #fff;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .nav-item:hover, .nav-item.active {
        background: #333;
        color: #fff;
    }
    
    .chart-header {
        background: #fff;
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        margin: 20px 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
    }
    
    .chart-title {
        color: #333;
        font-size: 24px;
        font-weight: 700;
    }
    
    .chart-subtitle {
        color: #667eea;
        font-size: 18px;
        margin-top: 8px;
    }
    
    .selectors-row {
        display: flex;
        gap: 10px;
        padding: 0;
        margin-bottom: 20px;
        flex-wrap: nowrap;
    }
    
    .selector-group {
        flex: 1;
        min-width: 0;
    }
    
    .selector-group label {
        display: block;
        color: #666;
        font-size: 11px;
        margin-bottom: 5px;
    }
    
    .selector-group select {
        width: 100%;
        padding: 10px;
        background: #fff;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 12px;
        cursor: pointer;
    }
    
    .selector-group select:focus {
        outline: none;
        border-color: #667eea;
    }
    
    .results-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        background: #fff;
    }
    
    .results-table thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .results-table th {
        color: #fff;
        padding: 15px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 13px;
    }
    
    .results-table tbody tr {
        background: #fff;
        transition: all 0.3s;
    }
    
    .results-table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }
    
    .results-table tbody tr:hover {
        background: #e8f4fd;
    }
    
    .results-table td {
        padding: 12px 15px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    
    .date-cell {
        color: #555;
        font-size: 14px;
    }
    
    .result-cell {
        background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
        color: #fff;
        padding: 8px 15px;
        border-radius: 8px;
        font-weight: 700;
        display: inline-block;
        min-width: 40px;
    }
    
    .result-pending {
        background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
        color: #fff;
        padding: 8px 15px;
        border-radius: 8px;
        font-weight: 700;
        display: inline-block;
        min-width: 40px;
    }
    
    .no-results {
        text-align: center;
        padding: 40px;
        color: #888;
        font-size: 16px;
    }
    
    .footer-section {
        background: #1a1a2e;
        padding: 25px 15%;
        text-align: center;
        margin-top: 40px;
    }
    
    @media (max-width: 1200px) {
        .footer-section { padding: 25px 10%; }
    }
    
    @media (max-width: 768px) {
        .footer-section { padding: 25px 3%; }
    }
    
    @media (max-width: 480px) {
        .footer-section { padding: 25px 2%; }
    }
    
    .footer-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }
    
    .footer-link {
        color: #a0a0b0;
        font-size: 13px;
        transition: color 0.3s;
        cursor: pointer;
    }
    
    .footer-link:hover {
        color: #fff;
    }
    
    .copyright {
        color: #6a6a7a;
        font-size: 12px;
    }
    
    .game-info-section {
        background: #fff;
        padding: 25px;
        border-radius: 15px;
        margin-bottom: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
    }
    
    .info-title {
        color: #333;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 15px;
    }
    
    .info-text {
        color: #555;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 20px;
    }
    
    .stats-row {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .stat-box {
        flex: 1;
        min-width: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        color: #fff;
    }
    
    .stat-number {
        font-size: 28px;
        font-weight: 700;
    }
    
    .stat-label {
        font-size: 12px;
        opacity: 0.9;
        margin-top: 5px;
    }
    
    .table-title {
        color: #333;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .content-section {
        background: #fff;
        padding: 25px;
        border-radius: 15px;
        margin-top: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
    }
    
    .section-heading {
        color: #333;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 15px;
    }
    
    .content-text {
        color: #555;
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 15px;
    }
    
    .faq-section {
        background: #fff;
        padding: 25px;
        border-radius: 15px;
        margin-top: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
    }
    
    .faq-item {
        border-bottom: 1px solid #eee;
        padding: 20px 0;
    }
    
    .faq-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .faq-item:first-of-type {
        padding-top: 0;
    }
    
    .faq-question {
        color: #333;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .faq-answer {
        color: #666;
        font-size: 14px;
        line-height: 1.7;
    }
    
    .related-section {
        background: #fff;
        padding: 25px;
        border-radius: 15px;
        margin-top: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
    }
    
    .related-games {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .related-game-link {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 10px 20px;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .related-game-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }
    
    @media (max-width: 768px) {
        .selectors-row {
            gap: 8px;
        }
        
        .selector-group select {
            padding: 8px;
            font-size: 11px;
        }
        
        .chart-title {
            font-size: 20px;
        }
        
        .chart-subtitle {
            font-size: 14px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="main-container">
    <div class="header-section">
        <div class="logo-container">
            {% if site_settings and site_settings.logo_data %}
            <img src="{{ site_settings.logo_data }}" alt="Satta King">
            {% else %}
            <span class="site-title">Satta King</span>
            {% endif %}
        </div>
    </div>

    <div class="nav-section">
        <div class="nav-menu">
            <a href="/" class="nav-item">Home</a>
            <a href="/chart" class="nav-item active">Chart</a>
            <a href="/daily-update" class="nav-item">Daily Update</a>
            <a href="/latest" class="nav-item">Latest</a>
        </div>
    </div>

    <div class="chart-header">
        <h1 class="chart-title">Record Chart</h1>
        <div class="chart-subtitle">{{ game_name if game_name else "Select a game" }}</div>
    </div>

    <form method="GET" action="/chart" id="chartForm">
    <div class="selectors-row">
    <div class="selector-group">
        <label for="game">Select Game</label>
        <select name="game" id="game" onchange="document.getElementById('chartForm').submit()">
            {% for game in games_list %}
            <option value="{{ game.slug }}" {% if game.name == game_name %}selected{% endif %}>{{ game.name }}</option>
            {% endfor %}
        </select>
    </div>
    
    <div class="selector-group">
        <label for="month">Select Month</label>
        <select name="month" id="month" onchange="document.getElementById('chartForm').submit()">
            {% for i in range(12) %}
            <option value="{{ i + 1 }}" {% if i + 1 == selected_month %}selected{% endif %}>{{ months[i] }}</option>
            {% endfor %}
        </select>
    </div>
    
    <div class="selector-group">
        <label for="year">Select Year</label>
        <select name="year" id="year" onchange="document.getElementById('chartForm').submit()">
            {% for year in years %}
            <option value="{{ year }}" {% if year == selected_year %}selected{% endif %}>{{ year }}</option>
            {% endfor %}
        </select>
    </div>
</div>
</form>

    {% if game_name %}
    
    <div class="game-info-section">
        <h2 class="info-title">About {{ game_name }}</h2>
        <p class="info-text">{{ game_name }} is a popular Satta King game with daily results. This page shows the complete result chart for {{ month_name }} {{ selected_year }}. Check the table below for all winning numbers declared during this month. Our website provides accurate and timely updates for {{ game_name }} results.</p>
        
        <div class="stats-row">
            <div class="stat-box">
                <div class="stat-number">{{ total_results }}</div>
                <div class="stat-label">Results Declared</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">{{ days_in_month }}</div>
                <div class="stat-label">Days in Month</div>
            </div>
            <div class="stat-box">
                <div class="stat-number">{{ days_in_month - total_results }}</div>
                <div class="stat-label">Pending</div>
            </div>
        </div>
    </div>
    
    <h2 class="table-title">{{ game_name }} Result Chart - {{ month_name }} {{ selected_year }}</h2>
    <table class="results-table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            {% for day in range(1, days_in_month + 1) %}
            {% set result = results.get(day, '--') %}
            <tr>
                <td class="date-cell">{{ '%02d' | format(day) }}-{{ '%02d' | format(selected_month) }}-{{ selected_year }}</td>
                <td>
                    <span class="{{ 'result-pending' if result == '--' else 'result-cell' }}">{{ result }}</span>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
    <div class="content-section">
        <h2 class="section-heading">{{ game_name }} {{ month_name }} {{ selected_year }} Summary</h2>
        <p class="content-text">This chart displays all {{ game_name }} Satta King results for {{ month_name }} {{ selected_year }}. A total of {{ total_results }} results have been declared so far this month. Players can use this chart to track winning numbers and analyze patterns. We update this page regularly to ensure you have access to the latest {{ game_name }} results.</p>
        <p class="content-text">{{ game_name }} is known for its consistent timing and reliable result declaration. Whether you're looking for today's result or historical data, our record chart provides comprehensive information for {{ month_name }} {{ selected_year }}.</p>
    </div>
    
    {% if faqs %}
    <div class="faq-section">
        <h2 class="section-heading">Frequently Asked Questions</h2>
        {% for faq in faqs %}
        <div class="faq-item">
            <h3 class="faq-question">{{ faq.question }}</h3>
            <p class="faq-answer">{{ faq.answer }}</p>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    
    {% if related_games %}
    <div class="related-section">
        <h2 class="section-heading">Other Popular Games</h2>
        <div class="related-games">
            {% for game in related_games %}
            <a href="/chart?game={{ game.slug }}" class="related-game-link">{{ game.name }}</a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    {% else %}
    <div class="no-results">Please select a game to view results</div>
    {% endif %}
</div>

<div class="footer-section">
    <div class="footer-links">
        <a href="/privacy-policy" class="footer-link">Privacy Policy</a>
        <a href="/about" class="footer-link">About Us</a>
        <a href="/contact" class="footer-link">Contact</a>
        <a href="/disclaimer" class="footer-link">Disclaimer</a>
    </div>
    <div class="copyright">© 2026 Satta King. All rights reserved.</div>
</div>
{% endblock %}