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

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

{% block extra_css %}
<style>
    .edit-table-container {
        padding: 20px;
    }
    .edit-table-filters {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    .edit-table-filters form {
        display: flex;
        gap: 20px;
        align-items: flex-end;
    }
    .edit-table-filters .field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .edit-table-filters label {
        font-weight: 600;
        color: #333;
    }
    .edit-table-filters select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        min-width: 150px;
    }
    .edit-table-filters button {
        padding: 8px 20px;
        background: #007d7e;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        height: fit-content;
    }
    .edit-table-filters button:hover {
        background: #006b6c;
    }
    .edit-table-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .edit-table-table thead {
        background: #007d7e;
        color: white;
    }
    .edit-table-table th {
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }
    .edit-table-table td {
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
    }
    .edit-table-table tbody tr:hover {
        background: #f8f9fa;
    }
    .edit-table-table tbody tr:nth-child(even) {
        background: #fafafa;
    }
    .edit-table-table input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }
    .edit-table-table input:focus {
        outline: none;
        border-color: #007d7e;
        box-shadow: 0 0 0 2px rgba(0, 125, 126, 0.1);
    }
    .edit-table-table .editable {
        background: #fff3cd;
    }
    .edit-table-table .readonly {
        background: #f8f9fa;
        color: #666;
    }
    .number-cell {
        text-align: right;
    }
    .action-cell {
        text-align: center;
    }
    .save-btn {
        padding: 4px 12px;
        background: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
    }
    .save-btn:hover {
        background: #218838;
    }
    .save-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
    }
    .message {
        padding: 12px;
        border-radius: 4px;
        margin: 10px 0;
    }
    .message.success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .message.error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
</style>
{% endblock %}

{% block content %}
<div class="edit-table-container">
    <header class="nice-padding">
        <div class="row">
            <div class="left">
                <h1 class="icon icon-snippet">{{ title }}</h1>
            </div>
            <div class="right">
                <a href="{{ index_url }}" class="button bicolor icon icon-arrow-left">{% trans "Back" %}</a>
            </div>
        </div>
    </header>

    <div class="nice-padding">
        <div class="edit-table-filters">
            <form method="get" id="series-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">
                    <button type="submit">{% trans "Load Series" %}</button>
                </div>
            </form>
        </div>

        <div id="message-container"></div>

        <table class="edit-table-table">
            <thead>
                <tr>
                    <th>Day</th>
                    <th>Body Weight</th>
                    <th>Daily Gain (g)</th>
                    <th>Avg Daily Gain</th>
                    <th>FCR</th>
                    <th class="action-cell">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for row in fcrbw_rows %}
                <tr data-series="{{ row.series }}" data-day="{{ row.i }}">
                    <td>{{ row.i }}</td>
                    <td>
                        <input type="number" 
                               class="editable" 
                               data-field="value" 
                               value="{{ row.value|floatformat:2 }}" 
                               step="0.01"
                               data-original="{{ row.value }}"
                               id="value-{{ row.i }}"
                               placeholder="{{ row.value|floatformat:2 }}">
                    </td>
                    <td>
                        <input type="text" 
                               class="readonly" 
                               value="{{ row.dg }}" 
                               readonly
                               id="dg-{{ row.i }}">
                    </td>
                    <td>
                        <input type="text" 
                               class="readonly" 
                               value="{{ row.adg|floatformat:6 }}" 
                               readonly
                               id="adg-{{ row.i }}">
                    </td>
                    <td>
                        <input type="number" 
                               class="editable" 
                               data-field="fcr" 
                               value="{{ row.fcr|floatformat:3 }}" 
                               step="0.001"
                               data-original="{{ row.fcr }}"
                               id="fcr-{{ row.i }}"
                               placeholder="{{ row.fcr|floatformat:3 }}">
                    </td>
                    <td class="action-cell">
                        <button class="save-btn" 
                                onclick="saveRow(this, {{ row.series }}, {{ row.i }})">
                            Save
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
function showMessage(message, type) {
    const container = document.getElementById('message-container');
    container.innerHTML = `<div class="message ${type}">${message}</div>`;
    setTimeout(() => {
        container.innerHTML = '';
    }, 3000);
}

function saveRow(button, series, day) {
    const row = button.closest('tr');
    const valueInput = row.querySelector('input[data-field="value"]');
    const fcrInput = row.querySelector('input[data-field="fcr"]');
    
    const value = parseFloat(valueInput.value);
    const fcr = parseFloat(fcrInput.value);
    
    if (isNaN(value) || isNaN(fcr)) {
        showMessage('Please enter valid numbers', 'error');
        return;
    }
    
    button.disabled = true;
    button.textContent = 'Saving...';
    
    fetch('{{ save_url }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify({
            series: series,
            day: day,
            value: value,
            fcr: fcr
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update readonly fields using IDs
            const dgInput = document.getElementById('dg-' + day);
            const adgInput = document.getElementById('adg-' + day);
            
            if (dgInput) dgInput.value = data.data.dg;
            if (adgInput) adgInput.value = parseFloat(data.data.adg).toFixed(6);
            
            // Update original values
            valueInput.setAttribute('data-original', value);
            fcrInput.setAttribute('data-original', fcr);
            
            showMessage('Row saved successfully. Recalculating subsequent rows...', 'success');
            
            // Reload page to update subsequent rows
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            showMessage('Error: ' + (data.error || 'Failed to save'), 'error');
        }
    })
    .catch(error => {
        showMessage('Error: ' + error.message, 'error');
    })
    .finally(() => {
        button.disabled = false;
        button.textContent = 'Save';
    });
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
{% endblock %}