@extends('blocks.modal', ['modalName' => 'add-report-modal'])

@section('modal-header')

    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--3-col" style="text-align: left;">
            <h4 class="mdl-color-text--indigo" id="add-report-header-type"></h4>
        </div>
        <div class="mdl-cell mdl-cell--9-col" style="text-align: left;">
            <span class="mdl-chip mdl-chip--contact">
                <span class="mdl-chip__contact mdl-color--indigo-900 mdl-color-text--white"><i class="material-icons"
                        style="padding-top: 4px">today</i></span>
                <span class="mdl-chip__text" id="add-report-header"></span>
            </span>
        </div>
    </div>

@overwrite

@section('modal-content')

    <form id="add-report-form">
        <fieldset id="add-report-fieldset">
            <div class="mdl-grid">
                <div class="mdl-cell mdl-cell--4-col">
                    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="add-report-result-option-1">
                        <input type="radio" id="add-report-result-option-1" class="mdl-radio__button" name="result"
                            value="done">
                        <span class="mdl-radio__label">Odbyło się</span>
                    </label>
                </div>
                <div class="mdl-cell mdl-cell--4-col">
                    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="add-report-result-option-2">
                        <input type="radio" id="add-report-result-option-2" class="mdl-radio__button" name="result"
                            value="canceled">
                        <span class="mdl-radio__label">Odwołane</span>
                    </label>
                </div>
                <div class="mdl-cell mdl-cell--4-col">
                    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="add-report-result-option-3">
                        <input type="radio" id="add-report-result-option-3" class="mdl-radio__button" name="result"
                            value="not_held">
                        <span class="mdl-radio__label">Nie odbyło się</span>
                    </label>
                </div>

                <div class="cancelled-status mdl-grid mdl-cell--12-col" style="width:100%; padding:0; margin:0;">
                    <hr class="mdl-cell--12-col">
                    <label class="mdl-cell--12-col">
                        Podaj powód odwołania:
                    </label>
                    <div class="mdl-cell mdl-cell--4-col">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                            for="add-report-cancel-reason-option-place">
                            <input type="radio" id="add-report-cancel-reason-option-place"
                                class="cancellation_reason mdl-radio__button" name="cancellation_reason" value="place">
                            <span class="mdl-radio__label">Lokal</span>
                        </label>
                    </div>
                    <div class="mdl-cell mdl-cell--4-col">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                            for="add-report-cancel-reason-option-no_host">
                            <input type="radio" id="add-report-cancel-reason-option-no_host"
                                class="cancellation_reason mdl-radio__button" name="cancellation_reason" value="no_host">
                            <span class="mdl-radio__label">Brak prowadzenia</span>
                        </label>
                    </div>
                    <div class="mdl-cell mdl-cell--4-col">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                            for="add-report-cancel-reason-option-other">
                            <input type="radio" id="add-report-cancel-reason-option-other"
                                class="cancellation_reason mdl-radio__button" name="cancellation_reason" value="other">
                            <span class="mdl-radio__label">Inne</span>
                        </label>
                    </div>
                </div>

                <div class="mdl-cell mdl-cell--2-col hide-in-not-done-status">
                    <div id="add-report-attendance-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
                        style="margin-top: -10px">
                        <input value="0" class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?"
                            id="add-report-attendance" name="attendance">
                        <label class="mdl-textfield__label" for="add-report-attendance">Liczba osób</label>
                        <span class="mdl-textfield__error">Podaj wartość numeryczną!</span>
                    </div>
                </div>

                <div class="mdl-cell mdl-cell--4-col hide-in-not-done-status">
                    <div id="add-report-payment-count-mdl"
                        class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top: -10px">
                        <input value="0" class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?"
                            id="add-report-payment-count" name="cash_payments">
                        <label class="mdl-textfield__label" for="add-report-payment-count">Liczba osób płacących
                            gotówką</label>
                        <span class="mdl-textfield__error">Podaj wartość numeryczną!</span>
                    </div>
                </div>

                <div class="mdl-cell mdl-cell--6-col hide-in-not-done-status">
                    <div id="add-report-fb-post-mdl" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
                        style="margin-top: -10px; width: 100%">
                        <input class="mdl-textfield__input" type="url" id="add-report-fb-post" name="fb_post">
                        <label class="mdl-textfield__label" for="add-report-fb-post">Link do postu FB</label>
                        <span class="mdl-textfield__error">Podaj poprawny link!</span>
                    </div>
                </div>

                <div class="mdl-cell mdl-cell--12-col hide-in-not-done-status reward-wrapper">
                    <span class="label">Nagroda</span>
                    <div class="mdl-grid mdl-cell--12-col reward-container-0">
                        <div class="mdl-cell mdl-cell--4-col">
                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect edit-disable"
                                for="add-report-reward-option-0-CASH">
                                <input type="radio" id="add-report-reward-option-0-CASH"
                                    class="reward-radio mdl-radio__button" name="reward[0][payment_method]"
                                    value="CASH">
                                <span class="mdl-radio__label">Gotówka</span>
                            </label>
                        </div>
                        <div class="mdl-cell mdl-cell--4-col">
                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect edit-disable"
                                for="add-report-reward-option-0-BLIK">
                                <input type="radio" id="add-report-reward-option-0-BLIK"
                                    class="reward-radio mdl-radio__button" name="reward[0][payment_method]"
                                    value="BLIK">
                                <span class="mdl-radio__label">BLIK</span>
                            </label>
                        </div>
                        <div class="reward-inputs reward-person-0"></div>
                    </div>

                    <div class="mdl-grid mdl-cell--12-col reward-container-1">
                        <div class="mdl-cell mdl-cell--4-col">
                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect edit-disable"
                                for="add-report-reward-option-1-CASH">
                                <input type="radio" id="add-report-reward-option-1-CASH"
                                    class="reward-radio mdl-radio__button" name="reward[1][payment_method]"
                                    value="CASH">
                                <span class="mdl-radio__label">Gotówka</span>
                            </label>
                        </div>
                        <div class="mdl-cell mdl-cell--4-col">
                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect edit-disable"
                                for="add-report-reward-option-1-BLIK">
                                <input type="radio" id="add-report-reward-option-1-BLIK"
                                    class="reward-radio mdl-radio__button" name="reward[1][payment_method]"
                                    value="BLIK">
                                <span class="mdl-radio__label">BLIK</span>
                            </label>
                        </div>

                        <div class="reward-inputs reward-person-1"></div>
                    </div>
                </div>
                <div class="mdl-cell mdl-cell--12-col">
                    <div id="add-report-description-mdl"
                        class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
                        style="margin-top: -10px; width: 100%;">
                        <textarea rows="3" class="mdl-textfield__input" id="add-report-description" name="description"></textarea>
                        <label class="mdl-textfield__label" for="add-report-description">Opis</label>
                    </div>
                </div>
                <br>
                <div class="center mdl-cell mdl-cell--4-col hide-in-not-done-status">
                    <h4 style="margin-bottom: 1.3em;">
                        Czy była promocja za barem?
                    </h4>
                    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="add-report-bar-promo-option-1">
                        <input type="radio" id="add-report-bar-promo-option-1" class="mdl-radio__button"
                            name="bar_promo" value="1">
                        <span class="mdl-radio__label">Tak</span>
                    </label>
                    <label style="margin-left: 1em;" class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                        for="add-report-bar-promo-option-2">
                        <input type="radio" id="add-report-bar-promo-option-2" class="mdl-radio__button"
                            name="bar_promo" value="0" checked>
                        <span class="mdl-radio__label">Nie</span>
                    </label>
                </div>

                <div class="mdl-cell mdl-cell--8-col hide-in-not-done-status">
                    <h4 class="center">
                        Czy były materiały promocyjne?
                    </h4>
                    <div class="promoContainer">
                        <div>
                            <p class="bigger">Plakaty</p>
                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                                for="add-report-poster-promo-option-1">
                                <input type="radio" id="add-report-poster-promo-option-1" class="mdl-radio__button"
                                    name="poster_promo" value="1">
                                <span class="mdl-radio__label">Tak</span>
                            </label>
                            <label style="margin-left: 1em;" class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                                for="add-report-poster-promo-option-2">
                                <input type="radio" id="add-report-poster-promo-option-2" class="mdl-radio__button"
                                    name="poster_promo" value="0" checked>
                                <span class="mdl-radio__label">Nie</span>
                            </label>
                        </div>
                        <div>
                            <p class="bigger">Standy</p>
                            <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                                for="add-report-stand-promo-option-1">
                                <input type="radio" id="add-report-stand-promo-option-1" class="mdl-radio__button"
                                    name="stand_promo" value="1">
                                <span class="mdl-radio__label">Tak</span>
                            </label>
                            <label style="margin-left: 1em;" class="mdl-radio mdl-js-radio mdl-js-ripple-effect"
                                for="add-report-stand-promo-option-2">
                                <input type="radio" id="add-report-stand-promo-option-2" class="mdl-radio__button"
                                    name="stand_promo" value="0" checked>
                                <span class="mdl-radio__label">Nie</span>
                            </label>
                        </div>
                    </div>
                </div>

                <br>
                <div id="survey-questionnaire" class="mdl-grid mdl-cell--12-col hide-in-not-done-status"></div>
                <div class="mdl-cell mdl-cell--12-col alert" style='display:none;' id="cancel-penalty-box">
                    <p id='cancel-penalty-message'></p>
                    <button id="cancel-penalty-button"
                        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                        Anuluj karę
                    </button>
                </div>


                <div class="mdl-cell mdl-cell--12-col" style="text-align: center" id="add-report-loading">
                    <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
                </div>

            </div>
        </fieldset>
    </form>

    <style>
        #cancel-penalty-box {
            text-align: center;
            border-radius: 4px;
        }

        .bigger {
            font-size: 1.1em;
        }

        .center {
            text-align: center;
        }

        .promoContainer {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        #survey-questionnaire {
            text-align: left;
            margin: 0 auto;
        }

        #survey-questionnaire .question-item {
            display: flex;
            align-items: center;
            width: 100%;
            margin: 0;
        }

        #survey-questionnaire .rating {
            font-size: 24px;
            height: 24px;
            margin-left: 1em;
            width: 100px !important;
        }

        .survey-title {
            font-weight: bold;
            margin-bottom: 6px;
            margin-top: 2em;
        }

        .label {
            color: #3f51b5;
            font-size: 12px;
        }

        .reward-inputs label {
            width: 100px;
            color: #3f51b5;
            font-size: 12px;
            margin: 0 10px !important;
        }

        .reward-inputs input {
            color: black;
            font-weight: normal;
            outline: none;
        }
    </style>
@overwrite

@section('modal-footer')

    <div id="add-report-submit-add-section" class="mdl-grid">
        <div class="mdl-cell mdl-cell--6-col">
            <span class="mdl-chip mdl-color--red-200 add-report-error">
                <span class="mdl-chip__text add-report-error-msg"></span>
            </span>
        </div>
        <div class="mdl-cell mdl-cell--6-col mdl-typography--text-right">
            <button id="add-report-submit-add"
                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                dodaj
            </button>
        </div>
    </div>
    <div id="add-report-submit-edit-section" class="mdl-grid">
        <div class="mdl-cell mdl-cell--6-col mdl-typography--text-left">
            <span class="mdl-chip mdl-color--red-200 add-report-error">
                <span class="mdl-chip__text add-report-error-msg"></span>
            </span>
        </div>
        <div class="mdl-cell mdl-cell--6-col mdl-typography--text-right">
            <button id="add-report-edit-mode"
                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Tryb edycji
            </button>
            <button id="add-report-submit-edit"
                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                zapisz
            </button>
        </div>
    </div>

@overwrite

@section('modal-scripts')
    <style>
        #add-report-modal .modal-body {
            max-height: calc(100vh - 290px);
            overflow: auto;
        }

        .description {
            margin-top: 1.7em !important;
            margin-left: 2em;
            width: 230px;
        }
    </style>
    <script>
        var addReportEvent = null;
        var addReportEditMode = false;
        var addReportReadMode = false;
        var addReportParams = null;
        var addReportCallback = null;
        let rewardRate = 4;
        const nowYearMonth = "{{ date('Y-m') }}";
        const lastMonth = "{{ date('Y-m', strtotime('first day of previous month')) }}";
        const nowDay = {{ date('d') }};

        const isPresenter = {{ is_null(auth()->user()) || auth()->user()->role == 'presenter' ? 1 : 0 }};
        const isManager =
            {{ !is_null(auth()->user()) && (auth()->user()->role == 'admin' || auth()->user()->role == 'manager') ? 1 : 0 }};

        const canEdit = (eventOrgDate) => {
            const eventDate = eventOrgDate.slice(0, -3);
            let eventYearMonth = new Date(eventDate).getTime();
            let now = new Date(nowYearMonth).getTime();


            return eventYearMonth == now ||
                (eventYearMonth == lastMonth && nowDay <= 10) ||
                !isPresenter;
        };

        function editMode(eventDate) {

            $("#add-report-edit-mode").show().unbind('click').on('click', function() {
                if (!canEdit(eventDate)) {
                    showAddReportError(
                        'Minał termin możliwości modyfikacji raportu. W celu edycji skontaktuj się z administratorem.'
                        );
                    return false;
                }

                $(this).hide();
                addReportReadMode = false;
                $("#add-report-form input").prop('disabled', false);
                $("#add-report-form label").removeClass('is-disabled');
                $("#add-report-form textarea").prop('readonly', false);
                $("#add-report-submit-edit").html("Zapisz");

                if (!isManager) {
                    $(`.edit-disable input`).prop('readonly', true);
                    $(".edit-disable").addClass('is-disabled');
                }
                //showAddReport(event, addReportReadMode, callback);
            });

        }

        function showAddReport(event, readMode, callback) {
            addReportEvent = event;
            addReportReadMode = readMode;
            addReportCallback = callback;
            rewardRate = event.gameType.rate_for_prizes * 1;

            $('#add-report-header').html(event.title);
            $('#add-report-header-type').html(readMode ? "Edytuj raport" : "Dodaj raport");
            hideAddReportError();
            editMode(event.date);
            resetAddReportFormData();

            $('#survey-questionnaire').html('');

            var responses = [];
            $.each(event.responses, function(index, element) {
                responses[element.question_id] = element.response;
            });

            if (!(event.questionnaire === undefined || event.questionnaire === null)) {
                let questionsHTML = ``;
                $.each(event.questionnaire, function(index, questionnaire) {
                    if (questionnaire.questions && questionnaire.questions.length > 0) {
                        questionsHTML =
                            `<div style="width:51%; min-width: 300px;"><h4 class="survey-title">${questionnaire.name}</h4>`;

                        $.each(questionnaire.questions, function(index, element) {
                            questionsHTML += populateQuestion(element, responses);
                        }, responses);

                        questionsHTML += '</div>';

                        $('#survey-questionnaire').append(questionsHTML);
                        let lastFrom = 0;
                        $(".rating").rate({
                            readonly: false
                        }).on("change", function(e, data) {

                            if (addReportReadMode && data.to != lastFrom) {
                                $(this).rate('setValue', data.from);
                            } else {
                                $(this).siblings('input.question-value').val(data.to);
                            }
                            lastFrom = data.from;
                        });

                        addAdditionalComment(questionnaire);
                    }
                });

                let buttonText = "Zapisz";
                if (addReportReadMode) {
                    buttonText = "Wyjdź";
                }
                $("#add-report-submit-edit").html(buttonText);
            }
            componentHandler.upgradeDom();


            if (addReportReadMode) {
                $("#add-report-form textarea").prop('readonly', true);
                $("#add-report-submit-add-section").hide();
                $("#add-report-submit-edit-section").show();
                $("#add-report-form input").prop('disabled', true);
                fillAddReportFormWithData(event, addReportEvent.report);
                $("#add-report-form input").prop('disabled', true);
            } else {
                $("#add-report-form input").prop('disabled', false);
                $("#add-report-form label").removeClass('is-disabled');
                $("#add-report-form textarea").prop('readonly', false);
                $("#add-report-submit-add-section").show();
                $("#add-report-submit-edit-section").hide();
                $("#add-report-submit-add").removeAttr('disabled');
                $('.reward-container-1').hide();
            }

            $("input[name=result]").trigger('change');
            $('#add-report-modal').modal();
            $('.reward-wrapper').toggle(rewardRate > 0);
        }

        function addAdditionalComment(questionnaire) {
            let descData = [];
            if (questionnaire["questions"].length > 0 && questionnaire["questions"][0]["survey_id"] === 3) {
                descData = ["quiz_comment", "Komentarz do quizu"];
            }
            if (questionnaire["questions"].length > 0 && questionnaire["questions"][0]["survey_id"] === 4) {
                descData = ["technical_condition_comment", "Warunki techniczne"];
            }
            if (descData.length === 2) {
                const html = `<div id="${descData[0]}" class="description mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-top: -10px;">
                                  <textarea rows="3" class="mdl-textfield__input" id="add-report-${descData[0]}" name="${descData[0]}"></textarea>
                                  <label class="mdl-textfield__label" for=add-report-${descData[0]}">${descData[1]}</label>
                              </div>`;
                $("#survey-questionnaire").append(html);
            }
        }

        const personRewardTemplate = (kind, person, data = []) => {
            const phoneNumber = kind == 'CASH' ? '' : `<label class="mdl-textfield mdl-js-textfield">
                        Numer telefonu
                        <input value="${data.phone ? data.phone : ''}" class="mdl-textfield__input" type="number" name="reward[${person}][phone]"/>
                    </label>`;

            const attendance = $("#add-report-attendance").val();
            let rewards = getRewardPrice(attendance);

            return `<input value="${data.id ? data.id : ''}" type="hidden" name="reward[${person}][id]"/>
                    <label class="mdl-textfield mdl-js-textfield">
                        Imię
                        <input value="${data.name ? data.name : ''}" class="mdl-textfield__input" type="text" name="reward[${person}][name]"/>
                    </label>
                    <label class="mdl-textfield mdl-js-textfield">
                        Nazwisko
                        <input value="${data.surname ? data.surname : ''}" class="mdl-textfield__input" type="text" name="reward[${person}][surname]"/>
                    </label>
                    <label class="mdl-textfield mdl-js-textfield">
                        Kwota nagrody
                        <input readonly value="${data.amount ? data.amount : rewards[person]}" class="mdl-textfield__input" type="number" name="reward[${person}][amount]"/>
                    </label>
                    ${phoneNumber}`;
        };

        function handleRewardsData(person) {
            $(`input[name="reward[${person}][payment_method]"]`).on('change', function(e) {
                const data = new Object();
                data.name = $(`input[name="reward[${person}][name]`).val();
                data.surname = $(`input[name="reward[${person}][surname]`).val();
                const html = personRewardTemplate(this.value, person, data);
                $(`.reward-person-${person}`).html($.parseHTML(html));
            });
        }

        handleRewardsData(0);
        handleRewardsData(1);

        $('#add-report-modal').on('hidden.bs.modal', function() {
            showEditEvent(addReportEvent, resetFilters);
        });

        $("#add-report-attendance").on('input', function(e) {
            const attendance = parseInt($(e.target).val());
            const twoRewards = getRewardsCount(attendance) == 2;
            const rewards = getRewardPrice(attendance);
            $('input[name="reward[0][amount]"]').val(rewards[0]);

            if (twoRewards) {
                $('input[name="reward[1][amount]"]').val(rewards[1]);
            } else {
                $('.reward-person-1').html('');
                const inputs = document.querySelectorAll('.reward-container-1 .reward-radio');
                inputs.forEach(i => {
                    i.parentNode.MaterialRadio.uncheck();
                });
            }

            $('.reward-container-1').toggle(twoRewards);
        });

        function getRewardsCount(persons) {
            let count = 1;
            switch (addReportEvent.gameType.type) {
                case 'PQ':
                case 'PQT':
                    if (persons > 40) {
                        count = 2;
                    } 
                    break;
                default:
                    count = 1;
                    break;
            }

            return count;
        }

        function getRewardPrice(attendance) {
            let awards = [0,0];
            switch (addReportEvent.gameType.type) {
                case 'PQ':
                    if (attendance > 40) {
                        awards = [attendance * rewardRate * 3 / 4, attendance];
                    } else {
                        awards = [attendance * rewardRate, 0];
                    }
                    break;
                case 'CHILL':
                case 'STB':
                case 'PC':
                case 'MUZ': // prawdopodobnie muz = stb
                    awards = [attendance * rewardRate, 0];
                    break;
                case 'PQT':
                    if (attendance > 40) {
                        awards = [attendance * rewardRate * 2 / 3, attendance];
                    } else {
                        awards = [attendance * rewardRate, 0];
                    }
                    break;
                default:
                    break;
            }

            return [parseFloat(awards[0]).toFixed(2), parseFloat(awards[1]).toFixed(2)];
        }

        $("#add-report-form").change(function() {
            collectAddReportParams();
        });

        $("#add-report-submit-add").click(function() {
            hideAddReportError();
            collectAddReportParams();

            let error = false;
            $('.report-rating').each((i, obj) => {
                const val = $(obj).attr('data-rate-value');
                if (val === "0") {
                    error = true;
                }
            });

            if (error && $("input[name=result]:checked").val() === "done") {
                showAddReportError("Odpowiedz na wszystkie pytania");
                return false;
            }

            const attendance = $("#add-report-attendance").val();
            let rewards = getRewardPrice(attendance);
            if(rewards[0] > 0 && $("input[name='reward[0][payment_method]']:checked").length == 0) {
                showAddReportError("Wybierz metodę płatności nagrody");
                return false;
            }
            // tutaj wlaidacja

            hideAddReportError();
            showAddReportLoading();

            $.ajax("/api/report/add", {
                method: "POST",
                data: addReportParams
            }).done(function(data) {
                addReportEvent = data.event;
                refreshCallendar();
                setTimeout(hideAddReport, 350);
            }).fail(function(data) {
                showAddReportError(data.responseJSON.message);
                hideAddReportLoading();
            });
        });

        $("input[name=result]").on('change', function() {

            let showRewards = rewardRate > 0;
            if ($("input[name=result]:checked").val() === "done") {
                // show all field
                $('.hide-in-not-done-status').show();
            } else {
                showRewards = false;
                $('.hide-in-not-done-status').hide();
            }

            $('.cancelled-status').toggle($("input[name=result]:checked").val() === "canceled");
            $('.reward-wrapper').toggle(showRewards);
        });

        $("#add-report-submit-edit").click(function() {
            hideAddReportError();
            collectAddReportParams();

            let error = false;
            $('.report-rating').each((i, obj) => {
                const val = $(obj).attr('data-rate-value');
                if (val === "0") {
                    error = true;
                }
            });
            if (error && $("input[name=result]:checked").val() === "done") {
                showAddReportError("Odpowiedz na wszystkie pytania");
                return false;
            }
            hideAddReportError();
            showAddReportLoading();
            if (addReportReadMode) {
                hideAddReport();
            } else {
                $.ajax("/api/report/edit", {
                    method: "POST",
                    data: addReportParams
                }).done(function(data) {
                    addReportEvent = data.event;
                    refreshCallendar();
                    setTimeout(hideAddReport, 350);
                }).fail(function(data) {
                    showAddReportError(data.responseJSON.message);
                    hideAddReportLoading();
                });
            }
        });

        function populateQuestion(data, responses) {
            let objectHtml = '<div class="question-item" data-question_id="' + data.id + '">';
            objectHtml += '<span class="question-content">' + data.question_content + '</span>';
            objectHtml += '<input type="hidden" class="question-value" name="questions[' + data.id + ']" value="' + (
                responses[data.id] ? responses[data.id] : 0) + '">';
            objectHtml += '<input type="hidden" name="survey_ids[' + data.id + ']" value="' + data.survey_id + '">';
            objectHtml += '<div class="rating report-rating" data-rate-value="' + (responses[data.id] ? responses[data.id] :
                0) + '"></div>';
            objectHtml += '</div>';
            return objectHtml;
        }

        function showAddReportLoading() {
            $('#add-report-fieldset').prop("disabled", true);
            $('#add-report-modal-footer').hide();
            $('#add-report-loading').show();
        }

        function hideAddReportLoading() {
            $('#add-report-fieldset').prop("disabled", false);
            $('#add-report-modal-footer').show();
            $('#add-report-loading').hide();
        }

        function showAddReportError(message) {
            $('.add-report-error-msg').html(message);
            $('.add-report-error').show();
        }

        function hideAddReportError() {
            $('.add-report-error').hide();
        }

        function resetAddReportFormData() {
            hideAddReportLoading();
            hideAddReportError();
            $('.reward-inputs').html('');
            $('.reward-radio').each(function(){ this.parentNode.MaterialRadio.uncheck(); });
            $('.cancelled-status').hide();
            $('#add-report-form')[0].reset();
            $('#cancel-penalty-box').hide();
            document.querySelector('#add-report-result-option-1').parentNode.MaterialRadio.check();

            addReportParams = null;
        }

        function collectAddReportParams() {
            addReportParams = $("#add-report-form").serialize();
            // addReportParams += '&' + $.param({
            //     'cancellation_reason': $("input[name=cancellation_reason]:checked").val()
            // });
            addReportParams += '&' + $.param({
                'event_id': addReportEvent.id
            });
        }

        function fillAddReportFormWithData(event, data) {
            if (event.canceled) document.querySelector('#add-report-result-option-2').parentNode.MaterialRadio.check();
            else if (event.not_held) document.querySelector('#add-report-result-option-3').parentNode.MaterialRadio.check();
            else document.querySelector('#add-report-result-option-1').parentNode.MaterialRadio.check();

            document.querySelector('.cancellation_reason').parentNode.MaterialRadio.uncheck();

            if (data.cancellation_reason) {
                document.querySelector('#add-report-cancel-reason-option-' + data.cancellation_reason).parentNode
                    .MaterialRadio.check();
            }

            if (data.bar_promo)
                document.querySelector('#add-report-bar-promo-option-1').parentNode.MaterialRadio.check();
            else
                document.querySelector('#add-report-bar-promo-option-2').parentNode.MaterialRadio.check();

            if (data.poster_promo)
                document.querySelector('#add-report-poster-promo-option-1').parentNode.MaterialRadio.check();
            else
                document.querySelector('#add-report-poster-promo-option-2').parentNode.MaterialRadio.check();

            if (data.stand_promo)
                document.querySelector('#add-report-stand-promo-option-1').parentNode.MaterialRadio.check();
            else
                document.querySelector('#add-report-stand-promo-option-2').parentNode.MaterialRadio.check();

            const twoRewards = getRewardsCount(data.attendance) == 2;
            $('.reward-container-1').toggle(twoRewards);

            data.rewards.forEach((reward, i) => {
                document.querySelector(`#add-report-reward-option-${i}-${reward.payment_method}`).parentNode
                    .MaterialRadio.check();
                const html = personRewardTemplate(reward.payment_method, i, reward);
                $(`.reward-person-${i}`).html($.parseHTML(html));
            });

            $('#add-report-attendance').val(data.attendance);
            $('#add-report-payment-count').val(data.cash_payments);
            $('#add-report-fb-post').val(data.fb_post);
            $('#add-report-description').val(data.description);

            if ($("#add-report-quiz_comment").length) {
                $("#add-report-quiz_comment").val(data.quiz_comment);
                document.querySelector('#quiz_comment').MaterialTextfield.checkDirty();
            }

            if ($("#add-report-technical_condition_comment").length) {
                $("#add-report-technical_condition_comment").val(data.technical_condition_comment);
                document.querySelector('#technical_condition_comment').MaterialTextfield.checkDirty();
            }

            document.querySelector('#add-report-attendance-mdl').MaterialTextfield.checkDirty();
            document.querySelector('#add-report-fb-post-mdl').MaterialTextfield.checkDirty();
            document.querySelector('#add-report-description-mdl').MaterialTextfield.checkDirty();

            if (isManager) {
                $('#cancel-penalty-box').show();

                if (data.delayed) {
                    $('#cancel-penalty-message').html(`Raport spóźniony (${data.created_at})`);
                    $('#cancel-penalty-box').addClass('alert-danger').removeClass('alert-success');
                    $('#cancel-penalty-button').show();
                } else {
                    $('#cancel-penalty-message').html(`Raport dodany w terminie (${data.created_at})`);
                    $('#cancel-penalty-box').addClass('alert-success').removeClass('alert-danger');
                    $('#cancel-penalty-button').hide();
                }
            } else {
                $('#cancel-penalty-box').hide();
            }

            collectAddReportParams();
        }

        $('#cancel-penalty-button').click(function(e) {
            e.preventDefault();
            showAddReportLoading();
            const payload = {
                reportID: addReportEvent.report.id
            };
            $('#cancel-penalty-button').hide();

            $.ajax("/api/accounting/delete-penalty", {
                method: "POST",
                data: payload
            }).done(function(data) {
                $('#cancel-penalty-message').html(`Raport dodany w terminie`);
                $('#cancel-penalty-box').addClass('alert-success').removeClass('alert-danger');
                hideAddReportLoading();
            }).fail(function(data) {
                $('#cancel-penalty-button').show();
                hideAddReportLoading();
            });

        });

        function hideAddReport() {
            if (addReportCallback) {
                addReportCallback();
            }
            hideAddReportLoading();
            $('#add-report-modal').modal('hide');
        }
    </script>

@overwrite