{% extends "wagtailadmin/base.html" %}
{% load i18n wagtailadmin_tags %}

{% block titletag %}{{ title }}{% endblock %}

{% block extra_css %}
<style>
    .fcrtable-container {
        padding: 20px;
    }
    .fcrtable-filters {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    .fcrtable-filters form {
        display: flex;
        gap: 20px;
        align-items: flex-end;
    }
    .fcrtable-filters .field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .fcrtable-filters label {
        font-weight: 600;
        color: #333;
    }
    .fcrtable-filters input,
    .fcrtable-filters select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        min-width: 150px;
    }
    .fcrtable-filters button {
        padding: 8px 20px;
        background: #007d7e;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        height: fit-content;
    }
    .fcrtable-filters button:hover {
        background: #006b6c;
    }
    .fcrtable-loading {
        text-align: center;
        padding: 40px;
        color: #666;
    }
    .fcrtable-error {
        background: #fee;
        color: #c33;
        padding: 15px;
        border-radius: 4px;
        margin: 20px 0;
    }
    .fcrtable-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .fcrtable-table thead {
        background: #007d7e;
        color: white;
    }
    .fcrtable-table th {
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }
    .fcrtable-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #eee;
    }
    .fcrtable-table tbody tr:hover {
        background: #f8f9fa;
    }
    .fcrtable-table tbody tr:nth-child(even) {
        background: #fafafa;
    }
    .fcrtable-table tbody tr:nth-child(even):hover {
        background: #f0f0f0;
    }
    .number-cell {
        text-align: right;
    }
</style>
{% endblock %}

{% block content %}
<div class="fcrtable-container">
    <header class="nice-padding">
        <div class="row">
            <div class="left">
                <h1 class="icon icon-snippet">{{ title }}</h1>
            </div>
        </div>
    </header>

    <div class="nice-padding">
        <div class="fcrtable-filters">
            <form method="get" id="fcrtable-form">
                <div class="field">
                    <label for="series">{% trans "Series" %}</label>
                    <select name="series" id="series">
                        {% for s in series_options %}
                            <option value="{{ s }}" {% if s|stringformat:"s" == series %}selected{% endif %}>
                                {{ s }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="field">
                    <label for="population">{% trans "Population" %}</label>
                    <input type="number" name="population" id="population" value="{{ population }}" min="1" step="1">
                </div>
                <div class="field">
                    <button type="submit">{% trans "Load Data" %}</button>
                </div>
                {% if edit_table_url %}
                <div class="field">
                    <a href="{{ edit_table_url }}" class="button" style="padding: 8px 20px; background: #28a745; color: white; text-decoration: none; border-radius: 4px; display: inline-block;">
                        {% trans "Edit Table" %}
                    </a>
                </div>
                {% endif %}
            </form>
        </div>

        <div id="fcrtable-content">
            <div class="fcrtable-loading">{% trans "Loading data..." %}</div>
        </div>
    </div>
</div>

<script>
(function() {
    const form = document.getElementById('fcrtable-form');
    const content = document.getElementById('fcrtable-content');
    const seriesSelect = document.getElementById('series');
    const populationInput = document.getElementById('population');

    function loadData() {
        const series = seriesSelect.value;
        const population = populationInput.value;
        
        if (!series || !population) {
            content.innerHTML = '<div class="fcrtable-error">Please select series and enter population.</div>';
            return;
        }

        content.innerHTML = '<div class="fcrtable-loading">Loading data...</div>';

        fetch(`/api/data-support/fcrtable/series/${series}/${population}/`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data && data.data.length > 0) {
                    renderTable(data.data);
                } else {
                    content.innerHTML = '<div class="fcrtable-error">No data found for the selected series and population.</div>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                content.innerHTML = '<div class="fcrtable-error">Error loading data. Please try again.</div>';
            });
    }

    function renderTable(data) {
        let html = '<table class="fcrtable-table">';
        html += '<thead><tr>';
        html += '<th>Day</th>';
        html += '<th>Weight</th>';
        html += '<th>Daily Gain</th>';
        html += '<th>ADG</th>';
        html += '<th>Cumul ADG</th>';
        html += '<th>Feed Daily</th>';
        html += '<th>FCR</th>';
        html += '<th class="number-cell">Total Feed</th>';
        html += '<th class="number-cell">Sacks</th>';
        html += '</tr></thead>';
        html += '<tbody>';

        data.forEach(row => {
            html += '<tr>';
            html += `<td>${row.day}</td>`;
            html += `<td>${row.weight}</td>`;
            html += `<td>${row.daily_gain}</td>`;
            html += `<td>${row.adg.toFixed(6)}</td>`;
            html += `<td>${row.cumul_adg.toFixed(6)}</td>`;
            html += `<td>${row.feed_daily.toFixed(4)}</td>`;
            html += `<td>${row.fcr.toFixed(3)}</td>`;
            html += `<td class="number-cell">${row.total_feed.toLocaleString()}</td>`;
            html += `<td class="number-cell">${row.sacks.toLocaleString()}</td>`;
            html += '</tr>';
        });

        html += '</tbody></table>';
        content.innerHTML = html;
    }

    // Load data on page load
    loadData();

    // Reload data when form is submitted
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        loadData();
    });

    // Optional: Auto-reload when inputs change (debounced)
    let debounceTimer;
    function debounceLoad() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(loadData, 500);
    }
    
    // Uncomment to enable auto-reload on change:
    // seriesSelect.addEventListener('change', debounceLoad);
    // populationInput.addEventListener('input', debounceLoad);
})();
</script>
{% endblock %}