@model PantheonRA.BackOffice.Models.SubjectCreateViewModel

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Hidden("UrlSaveEparam", Url.Action("SaveECommerce", "Subjects"))
        @Html.Hidden("UrlDeleteEparam", Url.Action("DeleteECommerce", "Subjects"))
        @Html.Hidden("UrlSaveWebShop", Url.Action("SaveWebShop", "Subjects"))
        @Html.Hidden("UrlDeleteWebShop", Url.Action("DeleteWebShop", "Subjects"))
        @Html.Hidden("TxtConfirm", Loc.Confirm)
        @Html.Hidden("TxtDeleteQuestion", Loc.DeleteQuestionRecord)
        @Html.Hidden("TxtCancel", Loc.Cancel)
        @Html.Hidden("TxtConfirmation", Loc.Confirmation)
        @Html.Hidden("TxtDelNotPossible", Loc.DeleteEntryTypeNotPossible)
        @Html.Hidden("TxtInputFields", Loc.FieldIsRequired)
        @Html.Hidden("TxtAlreadyExists", Loc.AlreadyExists)
        @Html.Hidden("PrimaryKeyExists", Loc.PrimaryKeyExists)
        @Html.Hidden("SubjectId", Model.SubjectId)
        @Html.Hidden("PageUrl", Url.Action("Edit", "Subjects"))

        <div class="tab-content set-wh-content">

            <div class="tab-content">
                <div class="row">
                    <div class="col-sm-12 col-md-6 padding-top-10 column-full-height-border-right">
                        <div class="row padding-top-10">
                            <!-- eStoritve -->
                            <div class="col-md-12 padding-top-10">
                                <h4 class="padding-top-10">@Loc.SubjectEPaymentParams</h4>
                                <table id="tblEparams" class="table table-bordered setwh-table" role="grid">
                                    <thead>
                                        <tr>
                                            <th>@Loc.DocType</th>
                                            <th>@Loc.Type</th>
                                            <th>@Loc.Mailbox</th>
                                            <th>@Loc.Data</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="tr-ep">
                                            <!-- DocType -->
                                            <td>
                                                <select id="input-ep-doctype"
                                                        data-placeholder="@Loc.DocType"
                                                        class="form-control select2withAPI"
                                                        data-search-width="450"
                                                        data-url=@Url.Action("GetPoslDog", "Subjects")>
                                                </select>
                                            </td>
                                            <!-- Type -->
                                            <td>
                                                <select id="input-ep-type"
                                                        data-placeholder="@Loc.Type"
                                                        class="form-control select2withAPI"
                                                        data-search-width="450"
                                                        data-url=@Url.Action("GetMailboxParams", "Subjects")>
                                                </select>
                                            </td>
                                            <!-- Mailbox -->
                                            <td>
                                                <select id="input-ep-mailbox"
                                                        data-placeholder="@Loc.Mailbox"
                                                        class="form-control select2withAPI"
                                                        data-search-width="450"
                                                        data-url=@Url.Action("GetMnMailBox", "Subjects")>
                                                </select>
                                            </td>
                                            <!-- Data -->
                                            <td>
                                                <select id="input-ep-data"
                                                        data-placeholder="@Loc.Data"
                                                        class="form-control select2withAPI"
                                                        data-search-width="450"
                                                        data-column-names="@Loc.Name"
                                                        data-bootstrap-columns="col-md-12"
                                                        onchange="setEparamData(0)"
                                                        data-url=@Url.Action("GetPAStoredProc", "Subjects")>
                                                </select>
                                            </td>
                                            <!-- Action -->
                                            <td class="td-action">
                                                <p class="btn btn btn-success" onclick="saveEparam(0)">
                                                    <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                                </p>
                                            </td>
                                        </tr>
                                        @foreach (var item in Model.ECommerceParams)
                                        {
                                            <tr id="tr-ep-@item.AnQid">
                                                <!-- DocType -->
                                                <td style="width: 20%">
                                                    <select id="input-ep-doctype-@item.AnQid"
                                                            data-placeholder="@Loc.DocType"
                                                            class="form-control select2withAPI"
                                                            data-search-width="450"
                                                            onchange="saveEparam(@item.AnQid)"
                                                            data-url=@Url.Action("GetPoslDog", "Subjects")>
                                                        <option value="@item.DocType" selected>@item.DocTypeText</option>
                                                    </select>
                                                </td>
                                                <!-- Type -->
                                                <td style="width: 20%">
                                                    <select id="input-ep-type-@item.AnQid"
                                                            data-placeholder="@Loc.Type"
                                                            class="form-control select2withAPI"
                                                            data-search-width="450"
                                                            onchange="saveEparam(@item.AnQid)"
                                                            data-url=@Url.Action("GetMailboxParams", "Subjects")>
                                                        <option value="@item.Type" selected>@item.TypeText</option>
                                                    </select>
                                                </td>
                                                <!-- Mailbox -->
                                                <td style="width: 35%">
                                                    <select id="input-ep-mailbox-@item.AnQid"
                                                            data-placeholder="@Loc.Mailbox"
                                                            class="form-control select2withAPI"
                                                            data-search-width="450"
                                                            onchange="saveEparam(@item.AnQid)"
                                                            data-url=@Url.Action("GetMnMailBox", "Subjects")>
                                                        <option value="@item.MailboxQid" selected>@item.MailboxText</option>
                                                    </select>
                                                </td>
                                                <!-- Data -->
                                                <td style="width: 20%">
                                                    <select id="input-ep-data-@item.AnQid"
                                                            data-placeholder="@Loc.Data"
                                                            class="form-control select2withAPI"
                                                            data-search-width="550"
                                                            onchange="setEparamData(@item.AnQid)"
                                                            data-url=@Url.Action("GetPAStoredProc", "Subjects")>
                                                        <option value="@item.Data" selected>@item.Data</option>
                                                    </select>
                                                </td>
                                                <!-- Action -->
                                                <td style="width: 5%" class="td-action">
                                                    <p class="text-center" style="margin-top: 8px !important">
                                                        <span onclick="deleteEparam(@item.AnQid)" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                                    </p>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 padding-top-10">
                        <div class="row padding-top-10">
                            <!-- Spletne trgovine -->
                            <div class="col-md-12 padding-top-10">
                                <h4 class="padding-top-10">@Loc.SubjectWebShops</h4>
                                <table id="tblWebShop" class="table table-bordered setwh-table" role="grid">
                                    <thead>
                                        <tr>
                                            <th>@Loc.Name</th>
                                            <th>@Loc.Description</th>
                                            <th>@Loc.Mailbox</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="tr-ws">
                                            <!-- Name -->
                                            <td style="width: 25%">
                                                <input type="text" id="input-ws-name"
                                                       class="form-control" placeholder="@Loc.Name" autocomplete="off" />
                                            </td>
                                            <!-- Description -->
                                            <td style="width: 35%">
                                                <input type="text" id="input-ws-description"
                                                       class="form-control" placeholder="@Loc.Description" autocomplete="off" />
                                            </td>
                                            <!-- Mailbox -->
                                            <td>
                                                <select id="input-ws-mailbox"
                                                        data-placeholder="@Loc.Mailbox"
                                                        class="form-control select2withAPI"
                                                        data-search-width="450"
                                                        data-url=@Url.Action("GetMnMailBox", "Subjects")>
                                                </select>
                                            </td>
                                            <!-- Action -->
                                            <td class="td-action">
                                                <p class="btn btn btn-success" onclick="saveWebshop(0)">
                                                    <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                                </p>
                                            </td>
                                        </tr>
                                        @foreach (var item in Model.ECommerceWebShops)
                                        {
                                            <tr id="tr-ws-@item.AnQid">
                                                <!-- Name -->
                                                <td style="width: 25%">
                                                    <input type="text" id="input-ws-name-@item.AnQid" style="outline: none !important"
                                                           class="form-control" placeholder="@Loc.Name" value="@item.Name" autocomplete="off" />
                                                </td>
                                                <!-- Description -->
                                                <td style="width: 35%">
                                                    <input type="text" id="input-ws-description-@item.AnQid"
                                                           class="form-control" placeholder="@Loc.Description" value="@item.Description" autocomplete="off" />
                                                </td>
                                                <!-- Mailbox -->
                                                <td style="width: 35%">
                                                    <select id="input-ws-mailbox-@item.AnQid"
                                                            data-placeholder="@Loc.Mailbox"
                                                            class="form-control select2withAPI"
                                                            data-search-width="450"
                                                            onchange="saveWebshop(@item.AnQid)"
                                                            data-url=@Url.Action("GetMnMailBox", "Subjects")>
                                                        <option value="@item.MailboxQid" selected>@item.MailboxText</option>
                                                    </select>
                                                </td>
                                                <!-- Action -->
                                                <td style="width: 5%" class="td-action">
                                                    <p class="text-center" style="margin-top: 8px !important">
                                                        <span onclick="deleteWebshop(@item.AnQid)" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                                    </p>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section pageScripts{
    @* TODO: remove after refactor *@
    @Scripts.Render("~/bundles/validation")
    <script src="~/Scripts/global-script.js"></script>
}

<!-- This will be moved into js on the task finish -->
<script>
    $(document).ready(function () {

    });

    $(document).ajaxError(function () {
        location.reload();
    });

    function deleteEparam(anQid) {
        var deleteText = $("#TxtDeleteQuestion").val();
        var deleteTitle = $("#TxtConfirmation").val();
        var confirmText = $("#TxtConfirm").val();
        var cancelText = $("#TxtCancel").val();

        $().customModal({
            destroyOnClose: true,
            title: deleteTitle,
            showCloseButton: true,
            help: function () {

            },
            id: "modalDeleteEparam",
            type: "question",
            text: deleteText,
            buttons: [{
                icon: 'fa fa-times',
                text: cancelText,
                action: function () {

                },
                closeOnAction: true,
                type: 'ghost'
            },
            {
                icon: 'fa fa-check',
                text: confirmText,
                closeOnAction: true,
                action: async function () {
                    await new Promise((resolve, reject) => setTimeout(function () {
                        removeEparam(anQid);
                        resolve();
                    }, 1500));
                },
                closeOnAction: true,
                type: 'primary'
            }]
        });
    }

    function removeEparam(anQid) {
        $.ajax({
            url: $("#UrlDeleteEparam").val() + '?anQId=' + anQid,
            type: 'GET',
            success: function (data) {
                if (data && data.Status) {
                    $("#tr-ep-" + anQid).remove();
                }
                else {
                    $(document).ready(function () {
                        $().customModal({
                            destroyOnClose: true,
                            title: '',
                            showCloseButton: true,
                            help: function () {

                            },
                            id: "modalDeleteEparamNotPossible",
                            type: "alert",
                            text: $("#TxtDelNotPossible").val(),
                            buttons: [
                                {
                                    icon: 'fa fa-check',
                                    text: $("#TxtConfirm").val(),
                                    closeOnAction: true,
                                    type: 'primary'
                                }]
                        });
                    });
                }
            }
        });
    }

    function setEparamData(anQid) {
        let sufix = anQid != 0 ? "-" + anQid : "";

        let text = $("#input-ep-data" + sufix).val();

        $("#select2-input-ep-data" + sufix + "-container").text(text);

        if (anQid) {
            saveEparam(anQid);
        }
    }

    function saveEparam(anQid) {
        let sufix = anQid != 0 ? "-" + anQid : "";

        let data = {
            AnQid: anQid ? anQid : 0,
            SubjectId: $("#SubjectId").val(),
            MailboxQid: $("#input-ep-mailbox" + sufix).val(),
            DocType: $("#input-ep-doctype" + sufix).val(),
            Type: $("#input-ep-type" + sufix).val(),
            Data: $("#input-ep-data" + sufix).val(),
        };

        postEparam(data);
    }

    function postEparam(data) {
        $.ajax({
            url: $("#UrlSaveEparam").val(),
            type: 'POST',
            data: data,
            success: function (data) {
                location.reload();
            }
        });
    }

    function deleteWebshop(anQid) {
        var deleteText = $("#TxtDeleteQuestion").val();
        var deleteTitle = $("#TxtConfirmation").val();
        var confirmText = $("#TxtConfirm").val();
        var cancelText = $("#TxtCancel").val();

        $().customModal({
            destroyOnClose: true,
            title: deleteTitle,
            showCloseButton: true,
            help: function () {

            },
            id: "modalDeleteWebshop",
            type: "question",
            text: deleteText,
            buttons: [{
                icon: 'fa fa-times',
                text: cancelText,
                action: function () {

                },
                closeOnAction: true,
                type: 'ghost'
            },
            {
                icon: 'fa fa-check',
                text: confirmText,
                closeOnAction: true,
                action: async function () {
                    await new Promise((resolve, reject) => setTimeout(function () {
                        removeWebshop(anQid);
                        resolve();
                    }, 1500));
                },
                closeOnAction: true,
                type: 'primary'
            }]
        });
    }

    function removeWebshop(anQid) {
        $.ajax({
            url: $("#UrlDeleteWebShop").val() + '?anQId=' + anQid,
            type: 'GET',
            success: function (data) {
                if (data && data.Status) {
                    $("#tr-ws-" + anQid).remove();
                }
                else {
                    $(document).ready(function () {
                        $().customModal({
                            destroyOnClose: true,
                            title: '',
                            showCloseButton: true,
                            help: function () {

                            },
                            id: "modalDeleteEparamNotPossible",
                            type: "alert",
                            text: $("#TxtDelNotPossible").val(),
                            buttons: [
                                {
                                    icon: 'fa fa-check',
                                    text: $("#TxtConfirm").val(),
                                    closeOnAction: true,
                                    type: 'primary'
                                }]
                        });
                    });
                }
            }
        });
    }

    function saveWebshop(anQid) {
        let sufix = anQid != 0 ? "-" + anQid : "";

        let data = {
            AnQid: anQid ? anQid : 0,
            SubjectId: $("#SubjectId").val(),
            MailboxQid: $("#input-ws-mailbox" + sufix).val(),
            Name: $("#input-ws-name" + sufix).val(),
            Description: $("#input-ws-description" + sufix).val(),
        };

        postWebshop(data);
    }

    function postWebshop(data) {
        $.ajax({
            url: $("#UrlSaveWebShop").val(),
            type: 'POST',
            data: data,
            success: function (data) {
                location.reload();
            }
        });
    }
</script>