{% extends 'base.html' %}

{% block title %} View Horse Records | EquiSeq {% endblock title %}

{% block content %}
    <div class="container">

        <p class="title title--subtitle">EquiSeq Horse Management System</p>
        <h1 class="title">List of Horses</h1>
        <div class="horses-list">


            <table id="horse-table" class="horses-list__table" style="table-layout: fixed">
                <thead>
                <tr>

                    <th>Horse#</th>
                    <th>Horse&nbsp;Name</th>
                    <th>Breed</th>
                    <th>Gender</th>
                    <th>YOB</th>
                    <th>MYOT</th>
                    <th>FLNC</th>
                    <th>MYOZ3</th>
                    <th>PYROXD1</th>
                    <th>COL6A3</th>
                    <th>DYSF</th>
                    <th>CACNA2D3</th>
                    <th>GYS1</th>
                    <th>GBE1</th>
                    <th>MYH1</th>
                    <th>PPIB</th>
                    <th>RYR1</th>
                    <th>SCN4A</th>
                    <th class="controls buttons-hide">Controls</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <form id="csrf-form">
        {% csrf_token %}
    </form>

    <script>
        $(document).ready(function () {
            var csrftoken = $('#csrf-form [name=csrfmiddlewaretoken]').val();

            var table = $('#horse-table').DataTable({
                'processing': true,
                'serverSide': true,
                'pageLength': 10,
                'lengthMenu': [[10, 25, 100, -1], [10, 25, 100, 'All']],
                'ajax': {
                    'url': '/horses/json/',
                    'data': function (d) {
                        d.csrfmiddlewaretoken = csrftoken;
                    },
                    'dataSrc': function (json) {
                        // Hide processing indicator when data is loaded
                        $('#processing-indicator').hide();
                        return json.data;
                    },
                    'beforeSend': function (xhr, settings) {
                        // Show processing indicator before sending AJAX request
                        $('#processing-indicator').show();
                    },
                    'xhr': function () {
                        var xhr = $.ajaxSettings.xhr();
                        // Add progress event listener to the AJAX request
                        xhr.addEventListener('progress', function (e) {
                            if (e.lengthComputable) {
                                var percentComplete = (e.loaded / e.total) * 100;
                                // Update progress text and bar
                                showProgress(percentComplete);
                            }
                        });
                        return xhr;
                    }
                },
                'columns': [
                    {'data': 'number'},
                    {
                        'data': 'name',
                        'render': function (data, type, full, meta) {
                            return '<a class="horses-list__link" href="/horses/detail/' + full.uuid + '">' + data + '</a>';
                        }
                    },
                    {'data': 'breed'},
                    {'data': 'sex'},
                    {'data': 'year_birth'},
                    {'data': 'MYOT'},
                    {'data': 'FLNC_combined_result'},
                    {'data': 'MYOZ3'},
                    {'data': 'PYROXD1'},
                    {'data': 'COL6A3'},
                    {'data': 'DYSF_combined_result'},
                    {'data': 'CACNA2D3'},
                    {'data': 'GYS1'},
                    {'data': 'GBE1'},
                    {'data': 'MYH1'},
                    {'data': 'PPIB'},
                    {'data': 'RYR1'},
                    {'data': 'SCN4A'},


                    {
                        'data': 'controls',
                        'orderable': false,
                        'searchable': false,
                        'render': function (data, type, full, meta) {
                            return '<form method="post" action="/horses/delete/' + full.uuid + '">' +
                                '<input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">' +
                                '<button class="horses-list__remove" type="submit">Remove</button>' +
                                '</form>' +
                                '<a class="horses-list__edit" href="/horses/edit/' + full.uuid + '" data-uuid="' + full.uuid + '">Edit</a>';
                        }
                    }
                ],
                'dom': '<"top"Bfrl>t<"bottom"p>',
                'buttons': [
                    {
                        extend: 'csv',
                        exportOptions: {
                            orthogonal: 'export'
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            orthogonal: 'export'
                        }
                    }
                ],
                  'columnDefs': [
        {#{ 'width': '50px', 'targets': 0 },  // Horse##}
        { 'width': '150px', 'targets': 1 }, // Horse Name
        { 'width': '150px', 'targets': 2 }, // Breed
        // Добавьте другие столбцы по аналогии
    ],
                {#'autoWidth': true ,#}
            });

            $('#horses-list').on('click', '.horse-list-table__horse-edit', function (e) {
                e.preventDefault();
                var horseUUID = $(this).attr('data-uuid');
                window.location.href = '/horses/edit/' + horseUUID;
            });

            // Custom function to show progress percentage
            function showProgress(percent) {
                $('#progress-text').text('Loading... ' + percent.toFixed(0) + '%');
                $('.progress-bar').css('width', percent.toFixed(0) + '%').attr('aria-valuenow', percent.toFixed(0));
            }

            // Hide processing indicator initially
            $('#processing-indicator').hide();

            $(document).on('submit', '.remove-horse-form', function (event) {
                event.preventDefault();
                var form = $(this);
                var formData = form.serialize();
                var horseName = form.data('horse');
                formData += '&horse_name=' + horseName;
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: formData,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    },
                    success: function (response) {
                        console.log('Horse removed successfully');
                    },
                    error: function (xhr, errmsg, err) {
                        console.log('Error removing horse');
                    }
                });
            });


            $('#horses-list').on('click', '.horse-list-table__horse-edit', function (e) {
                e.preventDefault();
                var horseUUID = $(this).attr('data-uuid');
                window.location.href = '/horses/edit/' + horseUUID;
            });


            // Custom function to show progress percentage
            function showProgress(percent) {
                $('#progress-text').text('Loading... ' + percent.toFixed(0) + '%');
                $('.progress-bar').css('width', percent.toFixed(0) + '%').attr('aria-valuenow', percent.toFixed(0));
            }

            // Hide processing indicator initially
            $('#processing-indicator').hide();


            $(document).on('submit', '.remove-horse-form', function (event) {
                event.preventDefault();
                var form = $(this);
                var formData = form.serialize();
                var horseName = form.data('horse');
                formData += '&horse_name=' + horseName;
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: formData,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    },
                    success: function (response) {
                        console.log('Horse removed successfully');

                    },
                    error: function (xhr, errmsg, err) {
                        console.log('Error removing horse');
                    }
                });
            });
        })

        const horsesListContainer = document.querySelector('.page-main .container');
        console.log(horsesListContainer)
        horsesListContainer.style.maxWidth = 'max-content'

    </script>
{% endblock %}