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

@section('modal-header')

<div class="mdl-grid" style="padding: 0;">
    <div class="mdl-cell mdl-cell--6-col" style="text-align: left;">
        <h4 class="mdl-color-text--indigo">Rozliczenie płatności</h4>
    </div>
    <div class="mdl-cell mdl-cell--6-col" style="text-align: right;">
        <h4 class="mdl-color-text--indigo"><small>Sposób rozliczania:</small> <span class="tax-type"></span></h5>
    </div>
</div>

@overwrite

@section('modal-content')
<div class="mdl-grid">

    <div class="mdl-cell mdl-cell--12-col" style="text-align: center; margin-bottom: 20px;" id="edit-payments-title">
    </div>
    <select class="mb-5 mdl-textfield__input" id="edit-payments-presenter" name="presenter_id">
        <option value="0" class="filter-item-option-none">Wybierz prezentera</option>
    </select>

    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-amount-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?" id="edit-payments-amount"
                name="amount">
            <label class="mdl-textfield__label" for="edit-payments-amount">Wynagrodzenie <small>(quizy)</small></label>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-amount-netto-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?"
                id="edit-payments-amount-netto" name="netto-salary">
            <label class="mdl-textfield__label" for="edit-payments-amount-netto">Wynagrodzenie
                <small>(dodatkowe)</small></label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-gathered-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?" id="edit-payments-gathered"
                name="gathered">
            <label class="mdl-textfield__label" for="edit-payments-gathered">Zebrane złotówki</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-price-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?" id="edit-payments-price"
                name="price">
            <label class="mdl-textfield__label" for="edit-payments-price">Za organizację</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-change-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input" step="0.01" type="number" id="edit-payments-change" name="change">
            <label class="mdl-textfield__label" for="edit-payments-change">Plus i minus</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-amount_bonus-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?"
                id="edit-payments-amount_bonus" name="amount_bonus">
            <label class="mdl-textfield__label" for="edit-payments-amount_bonus">Premia</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-amount_penalty-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?"
                id="edit-payments-amount_penalty" name="amount_penalty">
            <label class="mdl-textfield__label" for="edit-payments-amount_penalty">Kara</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--6-col">
        <div id="edit-payments-tax-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px">
            <input class="mdl-textfield__input editable" type="number" pattern="-?[0-9]*(\.[0-9]+)?" step="0.01"
                id="edit-payments-tax" name="tax">
            <label class="mdl-textfield__label" for="edit-payments-tax">Podatek</label>
        </div>
    </div>

    <div style="margin: 0;" class="mdl-cell mdl-cell--9-col">
    </div>

    <div style="margin: 0 8px;" class="mdl-cell mdl-cell--3-col">
        <label id="edit-payments-settled-mdl" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
            for="edit-payments-settled">
            <input type="checkbox" id="edit-payments-settled" class="mdl-checkbox__input" name="settled">
            <span class="mdl-checkbox__label">Rozliczony</span>
        </label>
    </div>

    <div class="mdl-cell mdl-cell--12-col">
        <div id="edit-payments-description-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
            style="margin-top: -10px; width: 100%;">
            <textarea rows="4" class="mdl-textfield__input" id="edit-payments-description"
                name="description"></textarea>
            <label class="mdl-textfield__label" for="edit-payments-description">Uwagi</label>
        </div>
    </div>

    <hr>
    <h4>Dodatkowe rozliczenia netto</h4>
    <div id="amount-netto-rows" class="mdl-grid mdl-cell--12-col">
        <div class="mdl-grid mdl-cell--9-col">
            <div class="mdl-cell mdl-cell--7-col">
                <div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label filter-sublist-dropdown">
                    <select class="mdl-selectfield__select mdl-color--grey-200" id="amount-netto-rows-name">
                        <option value="Prezentacje">Prezentacje</option>
                        <option value="Instagram">Instagram</option>
                        <option value="Quiz firmowy">Quiz firmowy</option>
                        <option value="Wydarzenie specjalne">Wydarzenie specjalne</option>
                        <option value="Szkolenie">Szkolenie</option>
                        <option value="Wizytacja">Wizytacja</option>
                        <option value="Manager">Manager</option>
                        <option value="Premia za quiz tematyczny">Premia za quiz tematyczny</option>
                        <option value="Premia za regularne prowadzenie wydarzeń">Premia za regularne prowadzenie wydarzeń</option>
                        <option value="Kara za brak dokumentów w terminie">Kara za brak dokumentów w terminie</option>
                        <option value="Układanie pytań">Układanie pytań</option>
                        <option value="Inne">Inne</option>
                    </select>
                    <div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div>
                    <label class="mdl-selectfield__label" for="amount-netto-rows-name">Typ kwoty</label>
                </div>
            </div>

            <div class="mdl-cell mdl-cell--5-col">
                <div id="amount-netto-rows-amount-mdl"
                    class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top: -10px">
                    <input class="mdl-textfield__input rows-amount-input" id='amount-netto-rows-value' step="0.01"
                        type="number">
                    <label class="mdl-textfield__label" for="amount-netto-rows-value">Wartość (zł)</label>
                    <span class="mdl-textfield__error">Podaj wartość tekstową!</span>
                </div>
            </div>
            <div class="mdl-cell mdl-cell--12-col">
                <div id="amount-netto-rows-desc-mdl"
                    class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top: -10px">
                    <input class="mdl-textfield__input rows-amount-input" id='amount-netto-rows-desc' type="text">
                    <label class="mdl-textfield__label" for="amount-netto-rows-desc">Opis</label>
                    <span class="mdl-textfield__error">Podaj wartość tekstową!</span>
                </div>
            </div>
        </div>

        <div class="mdl-cell mdl-cell--3-col">
            <button id="amount-netto-add"
                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent mdl-color--indigo-300"
                style="width: 100%; margin-top: 10px">
                dodaj
            </button>
        </div>

        <div class="mdl-cell mdl-cell--12-col rows-amount-group-netto"></div>
    </div>
    {{-- instagram, quiz firmnowy, wydarzenie specjalne, szkolenie, wizytacja, manager, premia za quiz tematyczny,
    ukladeni pytan --}}
    <hr>
    <h4>Dodatkowe rozliczenia plus/minus</h4>
    <div id="amount-change-rows" class="mdl-grid mdl-cell--12-col">
        <div class="mdl-cell mdl-cell--5-col">
            <div id="amount-change-rows-service-mdl"
                class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top: -10px">
                <input class="mdl-textfield__input rows-service-input" type="text" id='amount-change-rows-name'>
                <label class="mdl-textfield__label" for="amount-change-rows-name">Opis</label>
                <span class="mdl-textfield__error">Podaj wartość tekstową!</span>
            </div>
        </div>

        <div class="mdl-cell mdl-cell--4-col">
            <div id="amount-change-rows-amount-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
                style="margin-top: -10px">
                <input class="mdl-textfield__input rows-amount-input" id='amount-change-rows-value' step="0.01"
                    type="number">
                <label class="mdl-textfield__label" for="amount-change-rows-value">Wartość (zł)</label>
                <span class="mdl-textfield__error">Podaj wartość tekstową!</span>
            </div>
        </div>

        <div class="mdl-cell mdl-cell--3-col">
            <button id="amount-change-add"
                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent mdl-color--indigo-300"
                style="width: 100%; margin-top: 10px">
                dodaj
            </button>
        </div>

        <div class="mdl-cell mdl-cell--12-col rows-amount-group"></div>

    </div>

    <div class="mdl-cell mdl-cell--12-col" style="text-align: center" id="edit-payments-loading">
        <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
    </div>
</div>
@overwrite

@section('modal-footer')

<div id="edit-payments-submit-section" class="mdl-grid" style="padding: 0 8px;">
    <div class="mdl-cell mdl-cell--6-col mdl-typography--text-left">
        <button id="edit-payments-no"
            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
            anuluj
        </button>
    </div>
    <div class="mdl-cell mdl-cell--6-col mdl-typography--text-right">
        <button id="edit-payments-yes"
            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
            zapisz
        </button>
    </div>
</div>

@overwrite

<style>
    .editable {
        background-color: #eee;
    }

    .mb-5 {
        margin-bottom: 2.5em;
    }
</style>

@section('modal-scripts')

<script>
    var editPaymentsData = null;
    var editPaymentsCallback = null;

    $('#edit-payments-no').click(function () {
        $('#edit-payments-modal').modal('hide');
    });

    $('#edit-payments-yes').click(function (e) {
        collectEditPaymentsData();
        if (editPaymentsCallback) {
            const presenterSelect = $('#edit-payments-presenter');
            if (presenterSelect.is(':visible') && !editPaymentsData.presenter_id) {
                alert("Wybierz prezentera z listy");
                return false;
            }

            editPaymentsCallback(editPaymentsData);
        }
    });

    function showEditPaymentsModal(title, data, callback) {
        editPaymentsData = data;
        editPaymentsCallback = callback;
        hideEditPaymentsLoading();
        fillEditPaymentsFormWithData(title, data);
        $('#edit-payments-modal').modal();
    }

    function collectEditPaymentsData() {
        editPaymentsData.settled = $('#edit-payments-settled').is(":checked");
        editPaymentsData.description = $('#edit-payments-description').val();
        editPaymentsData.tax = $('#edit-payments-tax').val();
        editPaymentsData.netto_salary = $('#edit-payments-amount-netto').val();
        editPaymentsData.amount_change_rows = [];
        editPaymentsData.amount_additional_rows = [];
        editPaymentsData.presenter_id = null;

        $('.amount-rows-item').each(function (i) {
            const amount = $(this).find('.row-amount');
            const desc = $(this).find('.row-amount-description');

            const payment = { amount: amount.html(), description: desc.html() };
            editPaymentsData.amount_change_rows.push(payment);
        });

        $('.amount-rows-item-netto').each(function (i) {
            const amount = $(this).find('.row-amount');
            const desc = $(this).find('.row-amount-description');

            const payment = { amount: amount.html(), description: desc.html() };
            editPaymentsData.amount_additional_rows.push(payment);
        });

        const presenterSelect = $('#edit-payments-presenter');
        if (presenterSelect.is(':visible') && presenterSelect.val() != 0) {
            editPaymentsData.presenter_id = presenterSelect.val();
        }
    }

    function getUsersList() {
        if($('#edit-payments-presenter option').length == 1){
            showEditPaymentsLoading();
            $.ajax("/api/users-select").done(function (data) {
                data.users.forEach(user => {
                    let html = `<option value="${user.id}">${user.name}</option>`;
                    html = $.parseHTML(html);
                    $('#edit-payments-presenter').append(html);
                });

                hideEditPaymentsLoading();
            }).fail(function (data) {
                hideEditPaymentsLoading();
                window.alert(data.responseJSON.result.display);
            });
        }
    }

    function fillEditPaymentsFormWithData(title, data) {
        if (title == null) {
            $('#edit-payments-title').html('');
            $('#edit-payments-presenter').show();
            $('#edit-payments-description').attr('disabled', 'disabled');
            getUsersList();
        } else {
            $('#edit-payments-description').removeAttr('disabled');
            $('#edit-payments-presenter').val(0).hide();
            $('#edit-payments-title').html(title);
        }
        $('#edit-payments-amount').val(data.amount);
        $('#edit-payments-amount').prop("disabled", true);
        document.querySelector('#edit-payments-amount-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-amount-netto').prop("disabled", false);
        $('#edit-payments-amount-netto').val(data.additional_salary);
        $('#edit-payments-amount-netto').prop("disabled", true);
        document.querySelector('#edit-payments-amount-netto-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-amount_penalty').prop("disabled", false);
        $('#edit-payments-amount_penalty').val(data.amount_penalty);
        $('#edit-payments-amount_penalty').prop("disabled", true);
        document.querySelector('#edit-payments-amount_penalty-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-tax').val(data.tax);
        document.querySelector('#edit-payments-tax-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-amount_bonus').prop("disabled", false);
        $('#edit-payments-amount_bonus').val(data.amount_bonus);
        $('#edit-payments-amount_bonus').prop("disabled", true);
        document.querySelector('#edit-payments-amount_bonus-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-gathered').prop("disabled", false);
        $('#edit-payments-gathered').val(data.gathered_cash);
        $('#edit-payments-gathered').prop("disabled", true);
        document.querySelector('#edit-payments-gathered-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-price').prop("disabled", false);
        $('#edit-payments-price').val(data.event_price);
        $('#edit-payments-price').prop("disabled", true);
        document.querySelector('#edit-payments-price-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-change').prop("disabled", false);
        $('#edit-payments-change').val(data.amount_change);
        $('#edit-payments-change').prop("disabled", true);

        $('.tax-type').html(data.tax_type ? data.tax_type : '-');

        document.querySelector('#edit-payments-change-mdl').MaterialTextfield.checkDirty();

        $('#edit-payments-settled').toggle(data.settled);
        if (data.settled) {
            document.querySelector('#edit-payments-settled-mdl').MaterialCheckbox.check();
        } else {
            document.querySelector('#edit-payments-settled-mdl').MaterialCheckbox.uncheck();
        }

        $('#edit-payments-description').val(data.description);
        if (data.description.length > 0)
            document.querySelector('#edit-payments-description-mdl').MaterialTextfield.checkDirty();


        let htmlAmountGroup = '';
        data.amount_change_rows.forEach(element => {
            htmlAmountGroup += rowTemplate(element);
        });
        $('.rows-amount-group').html(htmlAmountGroup);

        htmlAmountGroup = '';
        data.amount_additional_rows.forEach(element => {
            htmlAmountGroup += rowTemplate(element, true);
        });
        $('.rows-amount-group-netto').html(htmlAmountGroup);
        $('#amount-netto-rows-desc-mdl').hide(); // by default
    }

    function showEditPaymentsLoading() {
        $('#edit-payments-modal-footer').hide();
        $('#edit-payments-loading').show();
    }

    function hideEditPaymentsLoading() {
        $('#edit-payments-modal-footer').show();
        $('#edit-payments-loading').hide();
    }


    const nameRowElement = $('#amount-change-rows-name');
    const valueRowElement = $('#amount-change-rows-value');
    $('#amount-change-add').on('click', function () {
        if (!(nameRowElement.val() && valueRowElement.val())) return false;

        let actualValue = parseFloat($('#edit-payments-change').val());
        $('#edit-payments-change').val(actualValue + parseFloat(valueRowElement.val()));

        const htmlData = rowTemplate({ description: nameRowElement.val(), amount: valueRowElement.val() });
        $('.rows-amount-group').append(htmlData);
        nameRowElement.val('');
        valueRowElement.val('');

        return false;
    });

    $('#amount-netto-rows-name').on('change', function () {
        $('#amount-netto-rows-desc-mdl').toggle(this.value == 'Inne');
    });

    const nameRowElementNetto = $('#amount-netto-rows-name');
    const valueRowElementNetto = $('#amount-netto-rows-value');
    const descRowElementNetto = $('#amount-netto-rows-desc');
    $('#amount-netto-add').on('click', function () {
        const name = nameRowElementNetto.find(":selected");
        if (!(nameRowElementNetto.val() && valueRowElementNetto.val())) return false;

        let actualValue = parseFloat($('#edit-payments-amount-netto').val());
        $('#edit-payments-amount-netto').val(actualValue + parseFloat(valueRowElementNetto.val()));

        let desc = nameRowElementNetto.val();
        if (descRowElementNetto.val().length > 0) {
            desc += ' - ' + descRowElementNetto.val();
        }

        const htmlData = rowTemplate({ description: desc, amount: valueRowElementNetto.val() }, true);
        $('.rows-amount-group-netto').append(htmlData);
        valueRowElementNetto.val('');
        descRowElementNetto.val('');

        return false;
    });

    $(document).on("click", ".row-amount-delete", function () {
        $(this).closest(".amount-rows-item").remove();
        $(this).closest(".amount-rows-item-netto").remove();
    });

    const rowTemplate = (element, netto = false) => {
        const autocreatedIcon = element.autocreated ? '<i title="Automatycznie dodane przez system" style="float:right;padding-top:4px; color: #555" class="material-icons">autorenew</i>' : '';
        return `<div class="amount-rows-item${netto ? '-netto' : ''}">
                         <span style="width: 90%;" class="mdl-chip mdl-chip--deletable mdl-typography--text-left mdl-cell mdl-cell--9-col">
                            <span class="mdl-chip__text mdl-color-text--indigo-500 row-title" style="width: 60%;">
                                <span class="row-amount-description">${element.description}</span>
                            </span>
                             <span class="mdl-chip__text mdl-color-text--pink-500 row-title" style="width: 15%">
                                <span class="row-amount">${element.amount}</span> zł
                            </span>
                            <a href="#" style="float:right;" class="row-amount-delete">
                                <button type="button" class="mdl-chip__action">
                                    <i class="material-icons">cancel</i>
                                </button>
                            </a>
                            ${autocreatedIcon}
                        </span>
                </div>`;
    };
</script>

@overwrite