@using PantheonRA.BackOffice.Enums

@inherits PantheonRA.BackOffice.Pages.AuthPage<PantheonRA.WebApi.Contracts.EmployeeFamilyMember>
@{
    var selectedMale = string.Empty;
    var selectedFemale = string.Empty;
    var dateBirth = Model != null && Model.AdDateBirth != null ? Model.AdDateBirth.Value.Date.ToShortDateString() : string.Empty;
    var visaFrom = Model != null && Model.AdVisaFrom != null ? Model.AdVisaFrom.Value.Date.ToShortDateString() : string.Empty;
    var visaTo = Model != null && Model.AdVisaTo != null ? Model.AdVisaTo.Value.Date.ToShortDateString() : string.Empty;
    var isUpheld = Model.AcUpheld;
    bool canEdit = _authInfo.CanUpdateFamilyMember(Model.AcWorker);
}

<div class="pm-accordion-container">
    @*Basic data*@
    <div class="family-basic-data-field">
        <div>
            <h4>@Loc.BasicData</h4>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.AcName, Loc.FirstName, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                <input class="form-control"
                       type="text"
                       name="AcName"
                       id="AcName-@Model.AnId"
                       value="@Model.AcName"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       @(!canEdit ? "disabled" : string.Empty) />
            </div>
            <div class="col-md-1 control-label p-t-10 p-r-0 p-l-0"></div>
            @Html.LabelFor(model => model.AcSurname, Loc.LastName, new { @class = "col-md-2 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                <input class="form-control"
                       type="text"
                       name="AcSurname"
                       id="AcSurname-@Model.AnId"
                       value="@Model.AcSurname"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       @(!canEdit ? "disabled" : string.Empty) />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcUcn, Loc.IdentificationNumber, 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 class="form-control"
                       type="text"
                       name="AcUcn"
                       id="AcUcn-@Model.AnId"
                       value="@Model.AcUcn"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       @(!canEdit ? "disabled" : string.Empty) />
            </div>
        </div>

        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.AdDateBirth, Loc.BirthDate, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                    <div class="date input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        <input type="text"
                               class="form-control custom-datepicker"
                               name="AdDateBirth"
                               id="AdDateBirth-@Model.AnId"
                               value="@dateBirth"
                               autocomplete="off"
                               onchange="setIsDirty(this, 'panel-collapse');"
                               @(!canEdit ? "disabled" : string.Empty) />
                    </div>
                </div>
            </div>

            <div>
                <div class="col-md-1 control-label p-t-10 p-r-0 p-l-0"></div>
                @Html.LabelFor(model => model.AcTaxId, Loc.GridVatNumber, new { @class = "col-md-2 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                    <input class="form-control"
                           type="text"
                           name="AcTaxId"
                           id="AcTaxId-@Model.AnId"
                           value="@Model.AcTaxId"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           @(!canEdit ? "disabled" : string.Empty) />
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcBirthPost, Loc.BirthPlace, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                <select name="AcBirthPost"
                        id="AcBirthPost-@Model.AnId"
                        allow-clear="true"
                        filter-by-country="Country"
                        data-placeholder="@Loc.Post"
                        class="form-control select2withAPI"
                        data-column-names="@Loc.Code,@Loc.Name"
                        data-bootstrap-columns="col-md-6,col-md-6"
                        data-url=@Url.Action("SearchPostsLookup", "Post")
                        onchange="setIsDirty(this, 'panel-collapse'); setRegionByPostCode(this, '#AcBirthCity-@Model.AnId')"
                        @(!canEdit ? "disabled" : string.Empty)>
                    <option selected value="@Model.AcBirthPost">@Model.AcBirthPost</option>
                </select>
            </div>
            <div class="col-md-1 control-label p-t-10 p-r-0 p-l-0"></div>
            <div class="col-md-5 col-sm-12 p-r-0 p-l-0">
                <input class="form-control"
                       type="text"
                       name="AcBirthCity"
                       id="AcBirthCity-@Model.AnId"
                       value="@Model.AcBirthCity"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       disabled />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcRelative, Loc.Relationship, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                <select class="select2 form-control "
                        name="AcRelative"
                        id="AcRelative-@Model.AnId"
                        allow-clear="true"
                        data-search-width="300"
                        data-placeholder="@Loc.Relationship"
                        onchange="setIsDirty(this, 'panel-collapse');"
                        @(!canEdit ? "disabled" : string.Empty)>
                    <option></option>
                    @if (ViewBag.RelativeTypes != null)
                    {
                        foreach (var relative in ViewBag.RelativeTypes)
                        {
                            <option value="@relative.Key" @(Model.AcRelative == relative.Key ? "selected" : string.Empty)>
                                @relative.Value
                            </option>
                        }
                    }
                </select>
            </div>
            <div class="col-md-1 control-label p-t-10 p-r-0 p-l-0"></div>
            @Html.LabelFor(model => model.AcSex, Loc.Gender, new { @class = "col-md-2 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                <select class="select2 form-control"
                        name="AcSex"
                        id="AcSex-@Model.AnId"
                        allow-clear="true"
                        data-placeholder="@Loc.Gender"
                        onchange="setIsDirty(this, 'panel-collapse');"
                        @(!canEdit ? "disabled" : string.Empty)>
                    @if (!string.IsNullOrEmpty(Model.AcSex))
                    {
                        selectedMale = Model.AcSex == Gender.Male ? "selected" : string.Empty;
                        selectedFemale = Model.AcSex == Gender.Female ? "selected" : string.Empty;
                    }
                    <option></option>
                    <option @selectedFemale value="@Gender.Female">@Loc.Female</option>
                    <option @selectedMale value="@Gender.Male">@Loc.Male</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcBirthSurname, Loc.BirthSurname, 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 class="form-control"
                       type="text"
                       name="AcBirthSurname"
                       id="AcBirthSurname-@Model.AnId"
                       value="@Model.AcBirthSurname"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       @(!canEdit ? "disabled" : string.Empty) />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcCountryCitizenship, Loc.Nationality, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-4 col-sm-12 p-r-0 p-l-0">
                <select class="select2 form-control "
                        name="AcCountryCitizenship"
                        id="AcCountryCitizenship-@Model.AnId"
                        allow-clear="true"
                        data-search-width="300"
                        data-placeholder="@Loc.Country"
                        onchange="setIsDirty(this, 'panel-collapse');
                                      setCitizenshipByCountry(this, '#AcCitizenship-@Model.AnId')"
                        @(!canEdit ? "disabled" : string.Empty)>
                    <option></option>
                    @if (ViewBag.Countries != null)
                    {
                        foreach (var country in ViewBag.Countries)
                        {
                            <option value="@country.Country" @(Model.AcCountryCitizenship == country.Country ? "selected" : string.Empty)>
                                @country.Country
                            </option>
                        }
                    }
                </select>
            </div>
            <div class="col-md-1 control-label p-t-10 p-r-0 p-l-0"></div>
            <div class="col-md-4 col-sm-12 p-r-0 p-l-0">
                <input class="form-control"
                       type="text"
                       name="AcCitizenship"
                       id="AcCitizenship-@Model.AnId"
                       value="@Model.AcCitizenship"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       disabled />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcUpheld, Loc.Maintainer, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-1 col-sm-12 p-t-10 p-r-0 p-l-0">
                <input type="checkbox"
                       class="form-control js-switch"
                       name="AcUpheld"
                       id="AcUpheld-@Model.AnId"
                       value="@Model.AcUpheld.ToString()"
                       checked="@Model.AcUpheld"
                       onchange="setCheckboxValue(this);
                                     setIsDirty(this, 'panel-collapse');
                                     toggleHiddenZsVarField(this, @Model.AnId);"
                       @(!canEdit ? "disabled" : string.Empty) />
            </div>
            <div class="col-md-1 control-label p-r-0 p-l-0"></div>
            <div id="ZSVarPreField-@Model.AnId" @(isUpheld ? string.Empty : "hidden")>
                @Html.LabelFor(model => model.CalcZSVarPre, Loc.StatusZsVarPre, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-4 col-sm-12 p-r-0 p-l-0">
                    <select class="select2 form-control "
                            name="CalcZSVarPre"
                            id="CalcZSVarPre-@Model.AnId"
                            allow-clear="true"
                            data-search-width="300"
                            data-placeholder="@Loc.StatusZsVarPre"
                            onchange="setIsDirty(this, 'panel-collapse');"
                            @(!canEdit ? "disabled" : string.Empty)>
                        <option></option>
                        @if (ViewBag.ZSVarPreItems != null)
                        {
                            foreach (var zsVar in ViewBag.ZSVarPreItems)
                            {
                                <option value="@zsVar.Value" @(Model.CalcZSVarPre == zsVar.Value ? "selected" : string.Empty)>
                                    @zsVar.Value
                                </option>
                            }
                        }
                    </select>
                </div>
            </div>
        </div>
    </div>

    @*Permanent Residence*@
    <div class="family-residence-field m-l-sm m-r-sm">
        <div>
            <h4>@Loc.PermanentResidence</h4>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcResidPermStreet, Loc.Address, 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 class="form-control"
                       type="text"
                       name="AcResidPermStreet"
                       id="AcResidPermStreet-@Model.AnId"
                       value="@Model.AcResidPermStreet"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       @(!canEdit ? "disabled" : string.Empty) />
            </div>
        </div>

        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.AcResidPermPost, Loc.Post, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                    <select name="AcResidPermPost"
                            id="AcResidPermPost-@Model.AnId"
                            allow-clear="true"
                            filter-by-country="Country"
                            data-placeholder="@Loc.Post"
                            class="form-control select2withAPI"
                            data-column-names="@Loc.Code,@Loc.Name"
                            data-bootstrap-columns="col-md-6,col-md-6"
                            data-url=@Url.Action("SearchPostsLookup", "Post")
                            onchange="setIsDirty(this, 'panel-collapse'); setRegionByPostCode(this, '#AcResidPermCity-@Model.AnId')"
                            @(!canEdit ? "disabled" : string.Empty)>
                        <option selected value="@Model.AcResidPermPost">@Model.AcResidPermPost</option>
                    </select>
                </div>
            </div>
            <div>
                <div class="col-md-1 control-label p-t-10 p-r-0 p-l-0"></div>
                <div class="col-md-5 col-sm-12 p-r-0 p-l-0">
                    <input class="form-control"
                           type="text"
                           name="AcResidPermCity"
                           id="AcResidPermCity-@Model.AnId"
                           value="@Model.AcResidPermCity"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           disabled />
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcResidPermMunicip, Loc.Municip, 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 class="select2 form-control "
                        name="AcResidPermMunicip"
                        id="AcResidPermMunicip-@Model.AnId"
                        allow-clear="true"
                        data-search-width="300"
                        data-placeholder="@Loc.Municip"
                        onchange="setIsDirty(this, 'panel-collapse');"
                        @(!canEdit ? "disabled" : string.Empty)>
                    <option></option>
                    @if (ViewBag.Municipalities != null)
                    {
                        foreach (var municip in ViewBag.Municipalities)
                        {
                            <option value="@municip.Name" @(Model.AcResidPermMunicip == municip.Name ? "selected" : string.Empty)>
                                @municip.Name
                            </option>
                        }
                    }
                </select>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcResidPermCountry, Loc.Country, 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 class="select2 form-control "
                        name="AcResidPermCountry"
                        id="AcResidPermCountry-@Model.AnId"
                        allow-clear="true"
                        data-search-width="300"
                        data-placeholder="@Loc.Country"
                        onchange="setIsDirty(this, 'panel-collapse');"
                        @(!canEdit ? "disabled" : string.Empty)>
                    <option></option>
                    @if (ViewBag.Countries != null)
                    {
                        foreach (var country in ViewBag.Countries)
                        {
                            <option value="@country.Country" @(Model.AcResidPermCountry == country.Country ? "selected" : string.Empty)>
                                @country.Country
                            </option>
                        }
                    }
                </select>
            </div>
        </div>
    </div>

    @*Temporary Residence*@
    <div class="family-residence-field">
        <div>
            <h4>@Loc.TemporaryResidence</h4>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcResidTempStreet, Loc.Address, 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 class="form-control"
                       type="text"
                       name="AcResidTempStreet"
                       id="AcResidTempStreet-@Model.AnId"
                       value="@Model.AcResidTempStreet"
                       onchange="setIsDirty(this, 'panel-collapse');"
                       @(!canEdit ? "disabled" : string.Empty) />
            </div>
        </div>

        <div class="form-group">
            <div>
                @Html.LabelFor(model => model.AcResidTempPost, Loc.Post, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
                <div class="col-md-3 col-sm-12 p-r-0 p-l-0">
                    <select name="AcResidTempPost"
                            id="AcResidTempPost-@Model.AnId"
                            allow-clear="true"
                            filter-by-country="Country"
                            data-placeholder="@Loc.Post"
                            class="form-control select2withAPI"
                            data-column-names="@Loc.Code,@Loc.Name"
                            data-bootstrap-columns="col-md-6,col-md-6"
                            data-url=@Url.Action("SearchPostsLookup", "Post")
                            onchange="setIsDirty(this, 'panel-collapse'); setRegionByPostCode(this, '#AcResidTempCity-@Model.AnId')"
                            @(!canEdit ? "disabled" : string.Empty)>
                        <option selected value="@Model.AcResidTempPost">@Model.AcResidTempPost</option>
                    </select>
                </div>
            </div>
            <div>
                <div class="col-md-1 control-label p-t-10 p-r-0 p-l-0"></div>
                <div class="col-md-5 col-sm-12 p-r-0 p-l-0">
                    <input class="form-control"
                           type="text"
                           name="AcResidTempCity"
                           id="AcResidTempCity-@Model.AnId"
                           value="@Model.AcResidTempCity"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           disabled />
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcResidTempMunicip, Loc.Municip, 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 class="select2 form-control "
                        name="AcResidTempMunicip"
                        id="AcResidTempMunicip-@Model.AnId"
                        allow-clear="true"
                        data-search-width="300"
                        data-placeholder="@Loc.Municip"
                        onchange="setIsDirty(this, 'panel-collapse');"
                        @(!canEdit ? "disabled" : string.Empty)>
                    <option></option>
                    @if (ViewBag.Municipalities != null)
                    {
                        foreach (var municip in ViewBag.Municipalities)
                        {
                            <option value="@municip.Name" @(Model.AcResidTempMunicip == municip.Name ? "selected" : string.Empty)>
                                @municip.Name
                            </option>
                        }
                    }
                </select>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AcResidTempCountry, Loc.Country, 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 class="select2 form-control "
                        name="AcResidTempCountry"
                        id="AcResidTempCountry-@Model.AnId"
                        allow-clear="true"
                        data-search-width="300"
                        data-placeholder="@Loc.Country"
                        onchange="setIsDirty(this, 'panel-collapse');"
                        @(!canEdit ? "disabled" : string.Empty)>
                    <option></option>
                    @if (ViewBag.Countries != null)
                    {
                        foreach (var country in ViewBag.Countries)
                        {
                            <option value="@country.Country" @(Model.AcResidTempCountry == country.Country ? "selected" : string.Empty)>
                                @country.Country
                            </option>
                        }
                    }
                </select>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AdVisaFrom, Loc.TempResidFrom, new { @class = "col-md-3 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-4 col-sm-12 p-r-0 p-l-0">
                <div class="date input-group">
                    <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                    <input type="text"
                           class="form-control custom-datepicker"
                           name="AdVisaFrom"
                           id="AdVisaFrom-@Model.AnId"
                           value="@visaFrom"
                           autocomplete="off"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           @(!canEdit ? "disabled" : string.Empty) />
                </div>
            </div>
            @Html.LabelFor(model => model.AdVisaTo, Loc.To, new { @class = "col-md-1 col-sm-12 control-label p-t-10 p-r-0 p-l-0" })
            <div class="col-md-4 col-sm-12 p-r-0 p-l-0">
                <div class="date input-group">
                    <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                    <input type="text"
                           class="form-control custom-datepicker"
                           name="AdVisaTo"
                           id="AdVisaTo-@Model.AnId"
                           value="@visaTo"
                           autocomplete="off"
                           onchange="setIsDirty(this, 'panel-collapse');"
                           @(!canEdit ? "disabled" : string.Empty) />
                </div>
            </div>
        </div>
    </div>

</div>
