@page
@model EveryThing.Pages.TransportLoadingOrder.CreateModel

@{
    ViewData["Title"] = "Vnos naloga";
    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" />

<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">Nalog /</span> Nov
    </span>
</h4>

<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="#item-basic">Osnovni podatki</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="item-basic">
            <form method="post" onsubmit="handleEditors()">
                <div class="card-body">
                    <input type="hidden" asp-for="TransportLoadingOrder.IdTransportLoadingOrder" />
                    <input type="hidden" asp-for="TransportLoadingOrder.IdCompanyFk" />
                    <input type="hidden" asp-for="TransportLoadingOrder.OrderNumber" />
                    <input type="hidden" asp-for="TransportLoadingOrder.OrderYear" />
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label asp-for="TransportLoadingOrder.IdPartnerFk" class="form-label"></label>
                                <select asp-for="TransportLoadingOrder.IdPartnerFk" class="form-control" asp-items="ViewBag.IdPartnerFk">
                                    <option value="">Izberite partnerja</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <div class="form-group">
                                <label asp-for="TransportLoadingOrder.OrderCity" class="form-label"></label>
                                <input autocomplete="off" asp-for="TransportLoadingOrder.OrderCity" class="form-control" />
                                <span asp-validation-for="TransportLoadingOrder.OrderCity" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label asp-for="TransportLoadingOrder.OrderDate" class="form-label"></label>
                                <input autocomplete="off" asp-for="TransportLoadingOrder.OrderDate" type="date" class="form-control" />
                                <span asp-validation-for="TransportLoadingOrder.OrderDate" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label asp-for="TransportLoadingOrder.VehicleText" class="form-label"></label>
                                <input autocomplete="off" asp-for="TransportLoadingOrder.VehicleText" class="form-control" />
                                <span asp-validation-for="TransportLoadingOrder.VehicleText" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group">
                                <label asp-for="TransportLoadingOrder.Total" class="form-label"></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">€</div>
                                    </div>
                                    <input autocomplete="off" asp-for="TransportLoadingOrder.Total" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group mb-0">
                                <label asp-for="TransportLoadingOrder.PreText" class="form-label"></label>
                                <input type="hidden" id="value-pretext" asp-for="@Model.TransportLoadingOrder.PreText" />
                                <div id="editor-pretext" style="height: 250px">
                                    @Html.Raw(Model.TransportLoadingOrder.PreText)
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group mb-0">
                                <label asp-for="TransportLoadingOrder.PostText" class="form-label"></label>
                                <input type="hidden" id="value-posttext" asp-for="@Model.TransportLoadingOrder.PostText" />
                                <div id="editor-posttext" style="height: 250px">
                                    @Html.Raw(Model.TransportLoadingOrder.PostText)
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer py-3 text-right">
                    <button type="submit" class="btn btn-primary">Shrani nalog</button>
                    <a asp-page="Index" class="btn btn-default">Prekliči</a>
                </div>
            </form>
        </div>
    </div>
</div>

<div asp-validation-summary="ModelOnly" class="text-danger"></div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <!-- Editor -->
    <script src="~/vendor/libs/quill/quill.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;
        }
    </script>
}