@page
@model EveryThing.Pages.Invoices.EditModel
@{
    ViewData["Title"] = "Vnos fakture";
    Layout = "~/Pages/Layouts/_Layout.cshtml";
}
<!-- Editor -->
<link rel="stylesheet" href="~/vendor/libs/quill/typography.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" asp-append-version="true" />
<style type="text/css">
    .tab-pane{
        padding: 10px;
    }
    .table-eddit {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .table-number-edit {
        width: 50px;
    }
    .table-price-edit {
        width: 70px;
    }

    .table-number {
        width: 70px;
        text-align: right;
    }

    .table-header-number {
        text-align: right;
    }

    .table-status {
        width: 140px;
    }
</style>

<form method="post" onsubmit="handleEditors()">
    <h4 class="d-flex justify-content-between align-items-center w-100 font-weight-bold py-1 mb-4">
        <span>
            <span class="text-muted font-weight-light">
                @Model.Invoice.InvoiceTypeHeaderString
                /
            </span> Urejanje
        </span>
    </h4>
    <hr />
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <input type="hidden" asp-for="Invoice.IdInvoice"/>
                    <input type="hidden" asp-for="Invoice.IdCompanyFk"/>
                    <input type="hidden" asp-for="Invoice.Type"/>
                    <input type="hidden" asp-for="Invoice.InvoiceYear"/>
                    <input type="hidden" asp-for="Invoice.InvoiceNumber"/>
                    <input type="hidden" asp-for="@ViewData["Reffer"]" />
                    <input type="hidden" asp-for="Reffer" />
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label asp-for="Invoice.IdPartnerFk" class="control-label"></label>
                                <select asp-for="Invoice.IdPartnerFk" class="form-control select2" asp-items="ViewBag.IdPartnerFk"></select>
                                <span asp-validation-for="Invoice.IdPartnerFk" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label asp-for="Invoice.BuyersOrderNumber" class="form-label"></label>
                                <input asp-for="Invoice.BuyersOrderNumber" class="form-control"/>
                                <span asp-validation-for="Invoice.BuyersOrderNumber" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4">
                            <div class="form-group">
                                <label asp-for="Invoice.State" class="control-label"></label>
                                <select asp-for="Invoice.State" class="form-control" asp-items="ViewBag.States"></select>
                                <span asp-validation-for="Invoice.State" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label asp-for="Invoice.Date" class="form-label"></label>
                                @Html.TextBoxFor(m => m.Invoice.Date, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })
                                @*<input autocomplete="off" asp-for="Invoice.Date" type="date" class="form-control" />*@
                                <span asp-validation-for="Invoice.Date" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                @switch (ViewData["Type"])
                                {
                                    case 1:
                                    case 3:
                                        <label class="form-label">Dobavni rok</label>
                                        break;
                                    default:
                                        <label class="form-label">Datum odpreme</label>
                                        break;
                                }
                                
                                @Html.TextBoxFor(m => m.Invoice.DateOfDispatch, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })
                                @*<input autocomplete="off" asp-for="Invoice.Date" type="date" class="form-control" />*@
                                <span asp-validation-for="Invoice.DateOfDispatch" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 text-right">
                    <label class="form-label">
                        @switch (ViewData["Type"])
                        {
                            case 1:
                                <i>Naročilo dobavitelja</i>
                                break;
                            case 0:
                                <i>Račun</i>
                                break;
                            case 2:
                                <i>Dobavnica</i>
                                break;
                            case 3:
                                <i>Naročilo kupca</i>
                                break;
                            case 4:
                                <i>Kooperacija</i>
                                break;
                            default:
                                <i>Faktura</i>
                                break;
                        }
                    </label>
                    <br />
                    <h4>
                        @Html.DisplayFor(modelItem => Model.Invoice.InvoiceYear) - @Html.DisplayFor(modelItem => Model.Invoice.InvoiceNumber)
                    </h4>
                </div>
            </div>
            <div class="nav-tabs-top nav-responsive-sm">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#tab-items">Pozicije</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-additional-informations">Ostali podatki</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="tab-items">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Artikel</th>
                                    <th class="table-header-number">Količina</th>
                                    <th class="table-header-number">Cena</th>
                                    <th class="table-header-number">Rabat</th>
                                    <th class="table-header-number">DDV</th>
                                    <th class="table-header-number">Vrednost</th>
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model.InvoiceItems)
                                {
                                    <partial name="InvoiceItemDetails" model="item"></partial>
                                }
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-12 text-right">
                                <a asp-page="CreateItem" asp-route-idInvoice="@Model.Invoice.IdInvoice" class="btn btn-sm btn-primary">Dodaj pozicijo</a>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-additional-informations">
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group mb-0">
                                    <label asp-for="Invoice.PreText" class="form-label"></label>
                                    <input type="hidden" id="value-pretext" asp-for="@Model.Invoice.PreText" />
                                    <div id="editor-pretext" style="height: 250px">
                                        @Html.Raw(Model.Invoice.PreText)
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group mb-0">
                                    <label asp-for="Invoice.PostText" class="form-label"></label>
                                    <input type="hidden" id="value-posttext" asp-for="@Model.Invoice.PostText" />
                                    <div id="editor-posttext" style="height: 250px">
                                        @Html.Raw(Model.Invoice.PostText)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer py-3 text-right">
            <a class="btn btn-primary" asp-page="/Invoices/Print" asp-route-id="@Model.Invoice.IdInvoice" data-toggle="tooltip" data-placement="top" title="Tiskanje" data-state="primary"><i class="ion ion-md-print"></i>&nbsp;Natisni</a>
            <input type="submit" value="Shrani" class="btn btn-primary"/>
            @if (!string.IsNullOrWhiteSpace((ViewData["Reffer"] as string)))
            {
                <a class="btn btn-default" href="@ViewData["Reffer"]">Nazaj</a>
            }
            else
            {
                <a class="btn btn-default" asp-page="./Index" asp-route-type="@ViewData["Type"]">Nazaj na seznam</a>
            }
        </div>
    </div>
</form>
@Html.AntiForgeryToken()
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <!-- HTMX -->
    <script src="~/vendor/libs/htmx.org/dist/htmx.js" asp-append-version="true"></script>
    <!-- Editor -->
    <script src="~/vendor/libs/quill/quill.js" asp-append-version="true"></script>
    <script src="~/vendor/libs/select2/select2.js" asp-append-version="true"></script>

    <script>
        var Block = Quill.import('blots/block');
        Block.tagName = 'DIV';
        Quill.register(Block, true);

        let editorPreText = new Quill('#editor-pretext', { modules: { toolbar: [['bold', 'italic', 'underline'], ['color'],[{ 'list': 'ordered' }, { 'list': 'bullet' }],['align'],['clean']] }, theme: 'snow' });
        let editorPostText = new Quill('#editor-posttext', { modules: { toolbar: [['bold', 'italic', 'underline'], ['color'],[{ 'list': 'ordered' }, { 'list': 'bullet' }],['align'],['clean']] }, theme: 'snow' });

        function handleEditors() {
            document.getElementById('value-pretext').value = editorPreText.root.innerHTML;
            document.getElementById('value-posttext').value = editorPostText.root.innerHTML;
            document.getElementById('value-cargodescription').value = editorCargoDescription.root.innerHTML;
        }

        $(document).ready(function () {
            $('.select2').select2();
        });

        function updateInvoiceItem(element) {
            let id = $(element).attr('data-iditem');
            let row = $(element).parent().parent();
            
            let idItem = parseInt(row.find("select[id=selTblItem_" + id + "]").val());
            let quantity = parseFloat(row.find("input[id=inpTblQuantity_" + id + "]").val());
            console.log(id);
            console.log("input[id=inpTbQuantity_" + id + "]");
            if (isNaN(quantity)) {//TODO preverjanje pravo
                alert('Nepravilna vrednost v polju količina!');
                return;
            }

            let price = parseFloat(row.find("input[id=inpTblPrice_" + id + "]").val().replace(',', '.'));
            if (isNaN(price)) {//TODO preverjanje pravo
                alert('Nepravilna vrednost v polju cena!');
                return;
            }

            let discount = parseFloat(row.find("input[id=inpTblDiscount_" + id + "]").val().replace(',', '.'));
            if (isNaN(discount)) {//TODO preverjanje pravo
                alert('Nepravilna vrednost v polju rabat!');
                return;
            }

            let tax = parseFloat(row.find("input[id=inpTblTax_" + id + "]").val().replace(',', '.'));
            if (isNaN(tax)) {//TODO preverjanje pravo
                alert('Nepravilna vrednost v polju ddv!');
                return;
            }

            let itemDescription = row.find("input[id=inpTblItemDescription_" + id + "]").val();

            let status = parseInt(row.find("select[id=selTblStatus_" + id + "]").val());
            console.log(status);
            var item = {
                IdItemFk : idItem,
                Quantity : quantity,
                Price : price,
                Discount : discount,
                Tax : tax,
                State : status,
                ItemDescription: itemDescription
            };

            var jsonString = JSON.stringify(item);
            $.blockUI();
            $.ajax({
                type: "POST",
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: "Edit/?handler=UpdateInvoiceItem",
                data: { idItem : id, json : jsonString },
                success: function(data) {
                    document.getElementById('btnTblCancel_' + id).click();
                    $.unblockUI();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }

        function deleteInvoiceItem(element) {
            const idInvoiceItem = $(element).parent().parent().attr('data-idinvoiceitem');

            $.blockUI();
            $.ajax({
                type: "GET",
                url: "Edit/?handler=InvoiceItem",
                data: {
                    idInvoiceItem
                },
                success: function (data) {
                    $.unblockUI();
                    if (data.successful) {
                        if (data.inUse) {
                            Swal.fire('Pozicija ima vezavo!',
                                'Brisanje ni možno!',
                                'warning');
                            return;
                        }
                        Swal.fire({
                            title: `Izbrišem pozicijo?`,
                            text: "Tega dejanja ni možno razveljaviti!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Da, izbriši!',
                            cancelButtonText: 'Prekliči!'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.blockUI();
                                $.ajax({
                                    type: "DELETE",
                                    beforeSend: function (xhr) {
                                        xhr.setRequestHeader("XSRF-TOKEN",
                                            $('input:hidden[name="__RequestVerificationToken"]').val());
                                    },
                                    url: "Edit/?handler=InvoiceItem",
                                    data: {
                                        idInvoiceItem
                                    },
                                    success: function (data) {
                                        $.unblockUI();
                                        if (data.successful) {
                                            $(element).parent().parent().remove();
                                        } else {
                                            Swal.fire('Napaka pri brisanju pozicije',
                                                data.error,
                                                'error');
                                        }

                                    },
                                    error: function (xhr, ajaxOptions, thrownError) {
                                        console.log(xhr);
                                        alert(xhr.responseText);
                                        $.unblockUI();
                                    }
                                });
                            } else {
                                if (onCancel != null) {
                                    onCancel();
                                }
                            }
                        });
                    } else {
                        Swal.fire('Napaka pri branju pozicije',
                            data.error,
                            'error');
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr);
                    alert(xhr.responseText);
                    $.unblockUI();
                }
            });
        }
    </script>
}