{% extends 'base.html.twig' %}

{% block title %} HOME {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .modal-backdrop{ z-index: 1020; }
        .modal{ z-index: 1030; }
    </style>

{% endblock stylesheets %}

{% block breadcrumbs %}

    <div class="container-fluid">
        <br>
    </div>

{% endblock %}

{% block body %}

    <div class="row ">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">

                        {# colone 01 #}
                        <div class="col-xs-12 col-md-8  col-lg-8 container-btn-gihsn-database">
                            <a href="{{ path('data_list') }}" class="btn-gihsn-database" style="width: 100%; height: 98%;">
                                <div style="position: absolute; left: 50%; top:50%;">
                                    <div class="container-titre" style="position: relative; left: -50%; top:-100px;">
                                        <i class="fa-solid fa-database" style="font-size:70px; "></i> <br>
                                        <span>GIHSN Database Query</span> <i class="fa-solid fa-angles-right" style="font-size: 30px;"></i>
                                    </div>
                                </div>
                            </a>
                        </div>

                        {# colone 02 #}
                        <div class="col-xs-12 col-md-4  col-lg-4">

                            {% if app.user and app.user.manager %}
                            <a href="{{ path('data_file_list') }}" class="boutonbleuclair">
                                <div class="card box-acmf pointer">
                                    <div class="bg-primary b-r-4 card-body">
                                        <div class="media static-top-widget">
                                            <div class="align-self-center text-center"><i data-feather="file"></i>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mb-0 pointer">File management</h5><i class="icon-bg" data-feather="file"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="boutonbleuclair d-none" data-bs-toggle="modal" data-bs-target="#importFile">
                                <div class="card box-acmf pointer">
                                    <div class="bg-primary b-r-4 card-body">
                                        <div class="media static-top-widget">
                                            <div class="align-self-center text-center">
                                                <i data-feather="clipboard"></i>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mb-0 pointer">Data Quality Check</h5>
                                                <i class="icon-bg" data-feather="clipboard"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a href="{{ path('historic_list') }}" class="boutonbleuclair">
                                <div class="card box-acmf pointer">
                                    <div class="bg-primary b-r-4 card-body">
                                        <div class="media static-top-widget">
                                            <div class="align-self-center text-center"><i data-feather="archive"></i>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mb-0 pointer">Historic</h5><i class="icon-bg" data-feather="archive"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            {% endif %}

                            <a href="{% if app.user and app.user.visitor %}{{ path('user_demand_list') }} {% else %} {{ path('admin_demand_list') }}{% endif %}" class="boutonbleuclair">
                                <div class="card box-acmf pointer">
                                    <div class="bg-primary b-r-4 card-body">
                                        <div class="media static-top-widget">
                                            <div class="align-self-center text-center"><i data-feather="download"></i>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mb-0 pointer">Export queries list</h5><i class="icon-bg" data-feather="download"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            {% if app.user and app.user.manager %}
                                <a href="{{ path('statistics_page') }}" class="boutonbleuclair">
                                    <div class="card box-acmf pointer">
                                        <div class="bg-primary b-r-4 card-body">
                                            <div class="media static-top-widget">
                                                <div class="align-self-center text-center"><i data-feather="pie-chart"></i>
                                                </div>
                                                <div class="media-body">
                                                    <h5 class="mb-0 pointer">Statistics</h5><i class="icon-bg" data-feather="pie-chart"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            {% endif %}

                            <a href="{{ path('data_detail') }}" class="boutonbleufoncersmall">
                                <div class="card box-acmf pointer">
                                    <div class="bg-primary b-r-4 card-body">
                                        <div class="media static-top-widget">
                                            <div class="align-self-center text-center"><i data-feather="info"></i>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mb-0 pointer text-plus-petit">Data dictionary</h5>                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <a href="{{ path('season_list') }}" class="boutonbleufoncersmall">
                                <div class="card box-acmf pointer">
                                    <div class="bg-primary b-r-4 card-body">
                                        <div class="media static-top-widget">
                                            <div class="align-self-center text-center"><i data-feather="file-text"></i>
                                            </div>
                                            <div class="media-body">
                                                <h5 class="mb-0 pointer text-plus-petit"> Questionnaires and protocols</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Loader Element -->
<div id="loader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.7); z-index: 9999; text-align: center; padding-top: 200px;">
    <div class="spinner-border text-primary" role="status"></div>
</div>


{% endblock %}

{% block javascripts %}

    {{ parent() }}
    {% include 'global/modal/add_file.html.twig' with {
        modal_title: 'Check data',
        submit_button_text: 'Check'
    } %}
    {% include 'global/modal/validate_cgu.html.twig' %}
    {% include 'global/modal/list_wrong_fields_and_header_modal.html.twig' %}
    <script>
    $(document).ready(function () {
        {% if (app.user) and (app.user.visitor) and (not app.user.visitor.validateCgu) %}
            $('#validate_cgu_modal').modal('show');
        {% endif %}
    });
    $(document).on('click','.validate-cgu-action',function(){
        if($('.general-condition').is(":checked")){
            $.ajax({
                url: "{{ path('validate_cgu_ajax') }}",
                method: 'POST',
                success: function (response) {
                    if (response.status === 200) {
                        $('#validate_cgu_modal').modal('hide');
                        showNotify('Success', response.message, "info");
                    } else {
                        showNotify("Error", 'Thank you for contacting the admin!', 'danger');
                    }
                }
            });
        } else{
            showNotify("Error", 'You must accept the terms and conditions and the privacy policy!', 'danger');
        }

    });
    $(document).on('click', '.import-file-validate-action', function () {
        let bool = verifyRequiredFieldsAlert();
        if (bool) {
            let formData = new FormData(document.getElementById('data_post_form'));
            $('#importFile').modal('hide');
            $('#loader').show();

            $.ajax({
                url: "{{ path('check_data_add_file') }}",
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function (response) {
                    if (response.status === 200) {
                        let wrongFieldsArray = response.listWrongFields;
                        let wrongHeadersObject = response.wrongHeaderInFile || {};
                        let file = response.file;

                        let unexpectedCols = wrongHeadersObject.unexpectedColumn || [];
                        let missingCols = wrongHeadersObject.missingColumn || [];

                        if (wrongFieldsArray.length > 0 || unexpectedCols.length > 0 || missingCols.length > 0) {
                            showNotify("Warning", "File data checked but contains errors", 'warning');

                            setTimeout(function () {
                                let fieldsHtml = '';
                                let headersHtml = '';

                                // File download link
                                if (file != null) {
                                    $('#file').append(
                                        '<a href="' + file + '" class="btn btn-primary" title="Download">' +
                                        '<i class="fas fa-download"></i> Download result</a>'
                                    );
                                }

                                // Wrong fields table rows
                                $.each(wrongFieldsArray, function (key, value) {
                                    fieldsHtml += '<tr><td>' + value.line + '</td><td>';
                                    $.each(value.fields, function (k, v) {
                                        fieldsHtml += '- ' + v.field + '<br>';
                                    });
                                    fieldsHtml += '</td></tr>';
                                });
                                $('#listWrongFields').append(fieldsHtml);

                // Filter unexpected columns
                const filteredUnexpected = unexpectedCols.filter(item => item[0] && item[0].trim() !== "");
                $('#unexpectedColumnsList').empty();
                if (filteredUnexpected.length > 0) {
                    filteredUnexpected.forEach(item => {
                        $('#unexpectedColumnsList').append('<li>' + item[0] + '</li>');
                    });
                    $('#unexpectedColumnsBlock').show();
                } else {
                    $('#unexpectedColumnsBlock').hide(); // Hide whole block (title + list)
                }

                // Filter missing columns
                const filteredMissing = missingCols.filter(item => item[0] && item[0].trim() !== "");
                $('#missingColumnsList').empty();
                if (filteredMissing.length > 0) {
                    filteredMissing.forEach(item => {
                        $('#missingColumnsList').append('<li>' + item[0] + '</li>');
                    });
                    $('#missingColumnsBlock').show();
                } else {
                    $('#missingColumnsBlock').hide();
                }

                // Show or hide full Wrong Headers section
                if (filteredUnexpected.length > 0 || filteredMissing.length > 0) {
                    $('#wrongHeadersWrapper').show();
                } else {
                    $('#wrongHeadersWrapper').hide();
                }




                                // Show modal
                                $('#wrongFieldsModal').modal('show');
                            }, 2500);
                        } else {
                            showNotify("Success", "File data checked successfully.", 'info');
                            datatable.draw(true);
                            document.getElementById("data_post_form").reset();
                        }
                    } else if (response.status === 500) {
                        showNotify("Warning", response.message, 'warning');
                    } else {
                        showNotify("Error", 'Thank you for contacting the admin!', 'danger');
                    }
                },
                error: function () {
                    showNotify("Error", "An unexpected error occurred!", 'danger');
                },
                complete: function () {
                    $('#loader').hide();
                }
            });
        }
    });
    $('#importFile').on('hidden.bs.modal', function (){
        document.getElementById("data_post_form").reset();
    });
    $('#wrongFieldsModal').on('hidden.bs.modal', function () {
        $("#listWrongFields").empty();
        $("#unexpectedColumnsList").empty();
        $("#missingColumnsList").empty();        
        $("#file").empty();
        $('#wrongHeadersWrapper').hide(); // Also reset wrapper visibility
    });
    $('#btnExportErrorsPdf').on('click', function () {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        doc.setFontSize(16);
        doc.text("Import Error Report", 14, 15);
        doc.setFontSize(10);
        let finalY = 20;

        // === Wrong Headers ===
        const unexpectedList = [];
        const missingList = [];

        $('#unexpectedColumnsList li').each(function () {
            const value = $(this).text().trim();
            if (value !== "") unexpectedList.push(value);
        });

        $('#missingColumnsList li').each(function () {
            const value = $(this).text().trim();
            if (value !== "") missingList.push(value);
        });

        if (unexpectedList.length > 0 || missingList.length > 0) {
            doc.setFont(undefined, 'bold'); // BOLD for section title
            doc.text("Wrong Headers", 14, finalY);
            finalY += 5;

            doc.setFont(undefined, 'normal'); // reset to normal

            if (unexpectedList.length > 0) {
                doc.text("Unexpected Columns:", 14, finalY);
                finalY += 4;
                unexpectedList.forEach(col => {
                    doc.text("- " + col, 18, finalY);
                    finalY += 4;
                });
                finalY += 2;
            }

            if (missingList.length > 0) {
                doc.text("Missing Columns:", 14, finalY);
                finalY += 4;
                missingList.forEach(col => {
                    doc.text("- " + col, 18, finalY);
                    finalY += 4;
                });
                finalY += 2;
            }
        }

        // === Wrong Fields ===
        const fieldsBody = [];
        $('#listWrongFields tr').each(function () {
            const line = $(this).find('td:first').text().trim();
            const fields = $(this).find('td:last').html().trim().replace(/<br\s*\/?>/gi, '\n');
            fieldsBody.push(['Line ' + line, fields]);
        });

        if (fieldsBody.length > 0) {
            doc.setFont(undefined, 'bold'); // BOLD for section title
            doc.text("Wrong Fields by Line", 14, finalY);
            doc.setFont(undefined, 'normal'); // reset

            finalY += 4;
            doc.autoTable({
                head: [['Line', 'Wrong Fields']],
                body: fieldsBody,
                startY: finalY,
                styles: { fontSize: 8, cellPadding: 2 },
                columnStyles: {
                    1: { cellWidth: 150 }
                }
            });
        }

        doc.save('import_errors.pdf');
    });
    // Copy all errors from both tables
    $('#btnCopyAllErrors').on('click', function () {
        let text = '=== Wrong Headers ===\n';

        // Loop through Unexpected Columns
        text += 'Unexpected Columns:\n';
        $('#unexpectedColumnsList li').each(function () {
            text += '- ' + $(this).text().trim() + '\n';
        });

        // Loop through Missing Columns
        text += '\nMissing Columns:\n';
        $('#missingColumnsList li').each(function () {
            text += '- ' + $(this).text().trim() + '\n';
        });

        // Wrong Fields
        text += '\n=== Wrong Fields ===\n';
        $('#listWrongFields tr').each(function () {
            const line = $(this).find('td:first').text().trim();
            const fields = $(this).find('td:last').html().trim()
                .replace(/<br\s*\/?>/gi, '\n- ')
                .replace(/^\s*-/, '')
                .trim();

            text += `Line ${line}:\n- ${fields}\n\n`;
        });

        // Copy to clipboard
        navigator.clipboard.writeText(text).then(() => {
            showNotify("Success", "All errors copied to clipboard", 'info');
        }).catch(() => {
            showNotify("Error", "Failed to copy text", 'danger');
        });
    });
    </script>
     <script src="{{ asset('assets/js/jspdf/jspdf.umd.min.js') }}"></script>
     <script src="{{ asset('assets/js/jspdf/autotable.js') }}"></script>


{% endblock %}