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

@section('modal-header')


    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col" style="text-align: left;">
            <h4 id="generate-code-header" class="mdl-color-text--indigo">Generuj kod rabatowy</h4>
        </div>
    </div>

@overwrite

@section('modal-content')
    <div class="mdl-grid" style="margin: 0 1%;">
        <div class="mdl-cell mdl-cell--12-col">
            <h2>Wygeneruj kody rabatowe</h2>
        </div>
        <div class="mdl-cell mdl-cell--2-col">
            <input type="hidden" id="codes_event_id">
        </div>
        <div class="mdl-cell mdl-cell--5-col" style="margin-top:2em;">
            <div id="add-code-discount-mdl"
                 class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label filter-sublist-dropdown"
                 style="width: 100%">
                <select class="mdl-selectfield__select mdl-color--grey-200" id="get-code-discount"
                        name="discount_percentage">
                    <option class="filter-item-option" value="25">25%</option>
                    <option class="filter-item-option" value="50">50%</option>
                    <option class="filter-item-option" value="100">100%</option>
                    <option class="filter-item-option" value="200">Dla znajomych</option>
                </select>
                <div class="mdl-selectfield__icon"><i class="material-icons">arrow_drop_down</i></div>
                <label class="mdl-selectfield__label" for="add-code-discount">Wysokość zniżki</label>
            </div>
        </div>
        <div class="mdl-cell mdl-cell--4-col mdl-typography--text-right" style="padding-top: 2em;">
            <button id="get-code-confirm" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                Generuj
            </button>
        </div>
        <div class="mdl-cell mdl-cell--2-col"></div>
        <div class="mdl-cell mdl-cell--12-col" style="padding-left: 6em;" id="get-codes-loading">
            <div style="margin: 0 auto;" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
        </div>

        <div class="mdl-cell mdl-cell--12-col mdl-typography--text-center">
            <h2 id="generatedCode"></h2>
        </div>
        <div style="margin: 2em 0;"></div>
    </div>

@overwrite

@section('modal-footer')
    <div id="add-comment-submit-add-section" class="mdl-grid">

    </div>
@overwrite

@section('modal-scripts')

    <script>
        $(()=>{
            const loader = $("#get-codes-loading");
            const btn = $("#get-code-confirm");
            const message = $("#generatedCode");
            loader.hide();

            btn.on("click", ()=>{
                btn.hide();
                loader.show();
                message.html(" ");
                let discount_percent = $("#get-code-discount").val();
                const event_id = $("#codes_event_id").val();
                $.ajax("api/discount-codes/generate",{
                    method: "POST",
                    data: {
                        discount: discount_percent,
                        event_id: event_id
                    }
                }).done(function (data) {
                    loader.hide();
                    btn.show();
                    if(discount_percent === '200')
                        discount_percent = "50% - dla znajomych";
                    else
                        discount_percent += '%';

                    if(data.type === "success")
                        message.html(`Kod rabatowy (${discount_percent}): <span style="font-weight: bold">${data.code}</span>`);
                    else
                        message.html(data.message);
                }).fail(function (data) {
                    loader.hide();
                    btn.show();
                    message.html("Wystąpił błąd, spróbuj ponownie");
                });
            });
        });

        function showGenerateCodes(data) {
            $("#codes_event_id").val(data.id);
            $("#generatedCode").html("");
            $('#generate-code').modal();
        }


    </script>

@overwrite