@extends('blocks.modal', ['modalName' => 'import-payments-modal'])

@section('modal-header')

    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col" style="text-align: left;">
            <h4 id="import-payments-header" class="mdl-color-text--indigo">Importowanie płatności</h4>
        </div>
    </div>

@overwrite

@section('modal-content')
    <div class="mdl-grid import-payments">
        <div class="text-center mdl-cell mdl-cell--12-col">
            <input accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id='excel-file' type='file'
                hidden />
            <button style="margin-bottom: 1em;" id='import-button'
                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Załącz plik do importu
            </button>
            <br>
            <div>
                <div id="import-loader" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
            </div>
            <p style="padding: 0.5em" class='alert-danger' id='import-message'></p>
        </div>

        <div class="results-import mdl-cell mdl-cell--12-col">
            <h4>Błędne pozycje</h4>
            <table class="table errors-table">
                <thead>
                    <tr>
                        <th>L.p.</th>
                        <th>Prowadzący</th>
                        <th>Kwota [zł]</th>
                        <th>Opis</th>
                        <th>Błąd</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="results-import mdl-cell mdl-cell--12-col">
            <h4>Prawidłowe pozycje</h4>
            <table class="table success-table">
                <thead>
                    <tr>
                        <th>L.p.</th>
                        <th>Prowadzący</th>
                        <th>Kwota [zł]</th>
                        <th>Opis</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="results-import text-center mdl-cell mdl-cell--12-col">
            <button id='accept-import-button'
                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Zaakceptuj import
            </button>
            <p class="accept-import-message"></p>
        </div>
    </div>
@overwrite

@section('modal-footer')

@overwrite

@section('modal-scripts')
    <style>
        #import-loader {
            margin: 0 auto;
        }

        .import-payments .table {
            font-size: 0.88em;
        }

        .import-payments td {
            padding: 6px !important;
        }

        .import-payments tr.amount-change {
            background-color: #eee;
        }

        .accept-import-message {
            margin-top: 1em;
        }
    </style>

    <script>
        var dateRangeInput;
        $(() => {
            dateRangeInput = $('#daterange-form input[name="query_month"]');
            let allSuccessImports = [];

            function fillTable(data, type, className) {
                let index = 1;
                let title = className == 'additional' ? 'Dodatkowe wynagrodzenie' : 'Plus/minus';
                let html = `<tr><th colspan="${type == 'errors' ? 5 : 4}" style="text-align:center;">${title}</th></tr>`
                
                data.forEach(row => {
                    html += `<tr class="${className}">
                        <td>${index++}</td>
                        <td>${row['presenter']}</td>
                        <td>${row['amount']}</td>
                        <td>${row['name']}</td>`;

                    if (type == 'errors') {
                        html += `<td>${row['description']}</td>`;
                    }

                    html += `</tr>`;
                });

                $(`.${type}-table tbody`).append(html);
            }

            function sendFile() {
                showImportPaymentsLoading();
                const fd = new FormData();
                fd.append('file', $('#excel-file')[0].files[0]);
                fd.append('date', dateRangeInput.val());

                $.ajax("/api/accounting/document/upload", {
                    type: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false
                }).done(function(response) {
                    $('.import-payments .table tbody').html('');
                    allSuccessImports = response.success;
                    fillTable(response.success.additional_amount, 'success', 'additional');                    
                    fillTable(response.success.amount_change, 'success', 'amount-change');
                    fillTable(response.errors.additional_amount, 'errors', 'additional');
                    fillTable(response.errors.amount_change, 'errors', 'amount-change');

                    if(response.success.additional_amount.length == 0
                        && response.success.amount_change.length == 0
                    ) {
                        $('.success-table').html('<tr><td colspan="4" style="text-align:center;">Brak</td></tr>');
                    }
                    if(response.errors.additional_amount.length == 0
                        && response.errors.amount_change.length == 0
                    ) {
                        $('.errors-table').html('<tr><td colspan="5" style="text-align:center;">Brak</td></tr>');
                    }

                    $('.results-import').show();
                }).fail(function() {
                    $('#import-message').html('Wystąpił błąd, spróbuj ponownie').show();
                }).always(() => {
                    hideImportPaymentsLoading();
                    $('#excel-file').val('');
                });
            }

            $('#accept-import-button').click(function(){
                const sum = allSuccessImports.additional_amount.length *1 + allSuccessImports.amount_change.length*1;
                if(confirm('Czy na pewno chcesz zaimportować ' + sum + ' płatności?')) {
                    importPayments();
                }
            });

            function importPayments(){
                $('#accept-import-button').attr('disabled', 'disabled');
                $('.accept-import-message').hide();

                $.ajax("/api/accounting/payments/import", {
                    method: 'POST',
                    data: {
                        payments: allSuccessImports,
                        query_month: dateRangeInput.val()
                    },
                }).done(function(response) {
                    $('.accept-import-message')
                    .html(response.message)
                    .removeClass('alert-danger alert-success')
                    .addClass('alert-success')
                    .show();
                }).fail(function(res){
                    $('#accept-import-button').removeAttr('disabled');
                    $('.accept-import-message')
                    .removeClass('alert-danger alert-success')
                    .addClass('alert-danger')
                    .html(res.responseJSON.message)
                    .show();
                });
            }

            $('#import-button').on('click', () => {
                $('#excel-file').trigger('click');
            });

            $('#excel-file').on('change', () => {
                sendFile();
            });


            function showImportPaymentsLoading() {
                $('#import-loader').show();
                $('#import-message').hide();
                $('#import-button').attr('disabled', 'disabled');
                $('.results-import').hide();
                $('#accept-import-button').removeAttr('disabled');
                $('.accept-import-message').hide();
            }


            function hideImportPayments() {
                hideImportPaymentsLoading();
                $('#import-payments-modal').modal('hide');
            }
        });

        function hideImportPaymentsLoading() {
            $('#import-loader').hide();
            $('#import-button').removeAttr('disabled');
        }

        function showImportModal() {
            $('#import-payments-header').html('Importowanie płatności za okres ' + dateRangeInput.val());
            hideImportPaymentsLoading();
            $('.results-import').hide();
            $('#import-message').hide();
            $('.accept-import-message').hide();
            $('#import-payments-modal').modal();
        }
    </script>

@overwrite