<div class="descrizione-fissa">
    <div class="testo-descrizione">
        {{{descrizione}}}
    </div>
</div>

<form method="post" name="frminiziale" id="frminiziale" action="saveattempt.php">

<div class="scroll-container">
    <table class="generaltable">
        <thead>
            <tr>
                <th>{{#str}}denominazioneconto, mtcontabilita{{/str}}</th>
                <th class="text-center">{{#str}}saldo, mtcontabilita{{/str}}</th>
                <th class="text-center">{{#str}}ce, mtcontabilita{{/str}}/{{#str}}sp, mtcontabilita{{/str}}</th>
                <th class="text-center">{{#str}}dareavere, mtcontabilita{{/str}}</th>
                {{#bmacroclasse}}
                <th>{{#str}}macroclasse, mtcontabilita{{/str}}</th>
                {{/bmacroclasse}}
            </tr>
        </thead>
        <tbody>
            {{#elementi}}
            <tr class="{{rowstatus}}">
                <td>{{denominazione_conto}}</td>
                <td class="text-end">{{saldo}}</td>
                <td>
                    <div>
                        <select name="scheme[{{itemdetid}}]" class="form-select validate" id="scheme_{{itemdetid}}" {{#disable_scheme}}disabled{{/disable_scheme}}>
                            {{#select_options}}
                            <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                            {{/select_options}}
                        </select>
                        {{#corretto_scheme}}
                        <div class="feedback-corretta">Correct: {{.}}</div>
                        {{/corretto_scheme}}
                    </div>
                </td>
                <td>
                    <div>
                        <select name="da[{{itemdetid}}]" class="form-select validate" id="da_{{itemdetid}}" {{#disable_da}}disabled{{/disable_da}}>
                            {{#select_options2}}
                            <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                            {{/select_options2}}
                        </select>
                        {{#corretto_da}}
                        <div class="feedback-corretta">Correct: {{.}}</div>
                        {{/corretto_da}}
                    </div>
                </td>
                {{#bmacroclasse}}
                <td>
                    <div>
                        <!-- <select name="mc[{{itemdetid}}]" class="form-select validate" id="mc_{{itemdetid}}" {{#disable_mc}}disabled{{/disable_mc}}>
                            {{#select_options_mc}}
                            <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                            {{/select_options_mc}}
                        </select> -->
                        <select name="mc[{{itemdetid}}]" class="form-select validate" id="mc_{{itemdetid}}" {{#disable_mc}}disabled{{/disable_mc}}>
                            {{#select_options_mc}}
                                {{#isgroup}}
                                    <optgroup label="{{grouplabel}}">
                                        {{#options}}
                                            <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                                        {{/options}}
                                    </optgroup>
                                {{/isgroup}}
                                {{^isgroup}}
                                    <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                                {{/isgroup}}
                            {{/select_options_mc}}
                        </select>

                        {{#corretto_mc}}
                        <div class="feedback-corretta">Correct: {{.}}</div>
                        {{/corretto_mc}}
                    </div>
                </td>
                {{/bmacroclasse}}
            </tr>
            {{/elementi}}
        </tbody>
    </table>
</div>

{{#bcheck}}
<p>
    {{#str}}strscore, mtcontabilita{{/str}} <b>{{scoreut}} / {{scoretot}}</b>
</p>
{{/bcheck}}

<div class="btn-group mt-6">
    <button type="submit" name="action1" value="save" class="btn btn-primary" id="mtsalva">{{#str}}save{{/str}}</button>
{{#inline}}
    <button type="submit" name="action2" value="check" class="btn btn-success" id="mtcheck">{{#str}}check, mtcontabilita{{/str}}</button>
{{/inline}}
</div>

<input type="hidden" name="attemptid" id="id_attemptid" value="{{{attemptid}}}">
<input type="hidden" name="mtcontabilitaid" id="id_mtcontabilitaid" value="{{{mtcontabilitaid}}}">
<input type="hidden" name="inline" id="id_inline" value="{{{inline}}}">
<input type="hidden" name="besame" id="id_besame" value="{{{besame}}}">
<input type="hidden" name="cmid" id="id_cmid" value="{{{cmid}}}">
<input type="hidden" name="num" id="id_num" value="{{{num}}}">
<input type="hidden" name="action" id="id_action" value="{{{action}}}">

</form>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Tasto salva e check.
        const cmtsalva = document.getElementById('mtsalva');
        const cmtcheck = document.getElementById('mtcheck');

            // Tasto Salva.
        cmtsalva.addEventListener('click', (e) => {
            e.preventDefault();
            $('#itemdate').val($('#datemastrino').val());
            const dati = $('#frminiziale').serializeArray();
            $('#id_action').val('save')
            document.getElementById('frminiziale').submit();
        });
        // Tasto Check.
        cmtcheck.addEventListener('click', (e) => {
            e.preventDefault();
            $('#itemdate').val($('#datemastrino').val());
            const dati = $('#frminiziale').serializeArray();
            $('#id_action').val('check')
            document.getElementById('frminiziale').submit();
        });
    });
</script>


<style>
.text-center { text-align: center; }
.text-end { text-align: right; }



.descrizione-fissa {
    position: relative;
    z-index: 1;
    background-color: white;
    padding: 10px;
}
.testo-descrizione {
    max-height: 150px;
    overflow-y: auto;
    padding-right: 10px;
}
.scroll-container {
    max-height: 400px;
    overflow-y: auto;
}
.is-invalid {
    border-color: #dc3545;
}
.invalid-feedback {
    display: block;
    color: #dc3545;
}
tr {
    transition: background-color 0.3s ease;
}
tr.ok {
    background-color: #d4edda !important;
}
tr.ko {
    background-color: #f8d7da !important;
}
.feedback-corretta {
    color: #dc3545;
    font-size: 0.75rem;
    margin-top: 2px;
}
</style>
