@using PantheonRA.BackOffice.Enums;

@inherits PantheonRA.BackOffice.Pages.AuthPage<PantheonRA.WebApi.Contracts.EmployeeVariousBookletData>
@{
    var dateIssue = Model != null && Model.DateIssue != null ? Model.DateIssue.Value.Date.ToString(Loc.DateFormat) : string.Empty;
    var dateValid = Model != null && Model.DateValid != null ? Model.DateValid.Value.Date.ToString(Loc.DateFormat) : string.Empty;
    var categories = Model != null && Model.Category != null ? Model.Category.Split(';').ToList() : new List<string>();

    var canUpdate = _authInfo.CanUpdateVariousBooklets(Model.Worker);
}

<div class="pm-accordion-container">
    @*Left side*@
    <div class="work-book-fields-left">
        <div class="form-group">
            @Html.LabelFor(model => model.Active, Loc.Active, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-9 col-sm-12 p-r-0 p-l-0">
                <input id="IsActive-@Model.Id" type="checkbox" class="form-control js-switch" checked="@Model.Active"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       @(!canUpdate ? "disabled" : "") />
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Type, Loc.Type, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-9 col-sm-12 p-r-0 p-l-0">
                <select id="Type-@Model.Id"
                        name="Type"
                        class="form-control select2withAPI"
                        onchange="setIsDirty(this, 'panel-collapse'); setCategoryField(this,'@Model.Id')"
                        data-placeholder="@Loc.Select"
                        data-search-width="350"
                        data-mobile-width="200"
                        data-column-names="@Loc.Type"
                        data-url=@Url.Action("BookletDropdownValues", "VariousBooklets")
                        data-bootstrap-columns="col-md-12"
                        allow-clear="true"
                        @(!canUpdate ? "disabled" : "")>
                    <option value="@Model.Type" selected>@Model.TypeName</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.Number, Loc.Number, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-9 col-sm-12 p-r-0 p-l-0">
                    <input id="Number-@Model.Id"
                           maxlength="30"
                           type="text"
                           class="form-control"
                           value="@Model.Number"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           @(!canUpdate ? "disabled" : "") />
                </div>
            </div>
        </div>
        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.SerialNo, Loc.SerialNumber, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-9 col-sm-12 p-r-0 p-l-0">
                    <input id="SerialNumber-@Model.Id"
                           maxlength="30"
                           type="text"
                           class="form-control"
                           value="@Model.SerialNo"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           @(!canUpdate ? "disabled" : "") />
                </div>
            </div>
        </div>
        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.Issuer, Loc.Issuer, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-9 col-sm-12 p-r-0 p-l-0">
                    <input id="Issuer-@Model.Id"
                           maxlength="30"
                           type="text"
                           class="form-control"
                           autocomplete="off"
                           value="@Model.Issuer"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           @(!canUpdate ? "disabled" : "") />
                </div>
            </div>
        </div>

    </div>

    @*Right side*@
    <div class="work-book-fields-right">
        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.DateIssue, Loc.DateOfIssue, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-9 col-sm-12 p-r-0 p-l-0">
                    <div class="input-group">
                        <span class="input-group-addon border-bottom-none"><i class="far fa-calendar alt"></i></span>
                        <input id="DateOfIssue-@Model.Id"
                               type="text"
                               class="form-control custom-datepicker"
                               autocomplete="off"
                               value="@dateIssue"
                               onchange="setIsDirty(this, 'panel-collapse');"
                               @(!canUpdate ? "disabled" : "") />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.CityIssue, Loc.InvoiceLocation, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-9 col-sm-12 p-r-0 p-l-0">
                    <input id="InvoiceLocation-@Model.Id"
                           maxlength="30"
                           type="text"
                           class="form-control"
                           autocomplete="off"
                           value="@Model.CityIssue"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           @(!canUpdate ? "disabled" : "") />
                </div>
            </div>
        </div>
        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.DateValid, Loc.EffectiveDate, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-9 col-sm-12 p-t-10 p-r-0 p-l-0">

                    <div class="input-group">
                        <span class="input-group-addon border-bottom-none"><i class="far fa-calendar alt"></i></span>
                        <input id="EffectiveDate-@Model.Id"
                               type="text"
                               class="form-control custom-datepicker"
                               autocomplete="off"
                               value="@dateValid"
                               onchange="setIsDirty(this, 'panel-collapse');"
                               @(!canUpdate ? "disabled" : "") />
                    </div>
                </div>
            </div>
        </div>

        <div id="DrivingLicence-@Model.Id" class="form-group @(Model.Type == Booklets.DrivingLicense ? string.Empty : "hidden")" style="margin-top: 20px">
            @Html.LabelFor(model => model.Category, Loc.DrivingTestCategories, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-9 col-sm-12 p-r-0 p-l-0 p-t-10">
                <div class="dropdown driving-lic-dropdown">
                    <div class="driving-lic-container">
                        <div id="SelectedCategoryBoxes-@Model.Id" class="driving-lic-selected-items"></div>
                        <input type="text" class="driving-lic-input form-control" readonly placeholder="Select">
                        <input id="Category-@Model.Id" class="driving-lic-selected-categories" value="@Model.Category" hidden />
                    </div>
                    <div class="driving-lic-dropdown-menu">
                        @foreach (var category in DrivingLicenses.Categories)
                        {
                            <div style="display: flex">
                                <label>
                                    <input class="category-checkbox-@Model.Id custom-checkbox" type="checkbox" value="@category" checked="@categories.Contains(category)" onchange="setIsDirty(this, 'panel-collapse')" @(!canUpdate ? "disabled" : "") />
                                </label>
                                <span style="margin-left: 18px">@category</span>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Note, Loc.Note, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-9 col-sm-12 p-r-0 p-l-0 p-t-10">
                <textarea class="form-control"
                          id="Note-@Model.Id"
                          name="Note"
                          onblur="setIsDirty(this, 'panel-collapse');"
                          style="height: 90px"
                          autocomplete="off"
                          @(!canUpdate ? "disabled" : "")>@Model.Note</textarea>
            </div>
        </div>
    </div>
</div>
