@model PantheonRA.BackOffice.Models.EmployeeCreateViewModel
@using PantheonRA.BackOffice.Enums
@using PantheonRA.WebApi.Contracts.Enums
@using PantheonRA.BackOffice;

@{
    var newResidRowNumber = -1;
    var newContactRowNumber = -1;
    var contactTypes = SubjectContactHelper.GetContactTypes();
}

<div class="modal inmodal fade" id="contact-data-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg employee-modal">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom:none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <a href="@Loc.HelpUrl@HelpIds.EmployeeContactData"
                   target="_blank" class="pull-right m-r-sm default-icon-color"><i class="fa fa-question"></i></a>
                <a class="btn-transparent m-r-sm no-padding pull-right default-icon-color" href="@SiteHelpAttributeHelper.GetHelpUrl(HelpIds.ExampleEmployeeContactData)" target="_blank" title="@Loc.CheckSamples">
                    <i class="fas fa-book-reader clickable-icon"></i>
                </a>
            </div>
            <div class="modal-body" style="padding:10px 30px 30px 30px;">
                <form action="@Url.Action("SaveContactData", "Employees")" method="post" id="contact-data-form">
                    @Html.Hidden("WorkerCodeId", Model.Worker)

                    <div class="row m-b-md">
                        <div class="col-md-12">
                            <div class="form-group">
                                @{
                                    var subjectContact = !string.IsNullOrEmpty(Model.SubjectContact) ? Model.SubjectContact : string.Empty;
                                }
                                <label class="col-md-2 control-label m-t-sm">@Loc.ContactPerson</label>
                                <div class="col-md-10">
                                    <select class="select2"
                                            data-search-width="150"
                                            data-placeholder="@Loc.ContactPerson"
                                            id="SubjectContact">
                                        <option value="@subjectContact" selected>@subjectContact</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h4>
                        <strong>@Loc.Residence</strong>
                    </h4>
                    <table class="table table-condensed table-hover table-bordered collapse-table" id="residence-table">
                        <thead class="modul-bg">
                            <tr>
                                <th width="10%">@Loc.Residence</th>
                                <th width="14%">@Loc.TaBegin</th>
                                <th width="14%">@Loc.TaEnd</th>
                                <th width="22%">@Loc.Address</th>
                                <th width="15%">@Loc.Post</th>
                                <th width="20%">@Loc.Country</th>
                                <th class="th-action-btn" width="5%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="residence-new-row">
                                <td label="@Loc.Residence">
                                    <input type="hidden" id="RAnNo-@newResidRowNumber" />
                                    <input type="hidden" id="RAnQid-@newResidRowNumber" value="0" />
                                    <div class="contact-data-selects" onclick="expandEmployeeTableRow('residence-table', '-1', true)">
                                        <select id="ResidenceType-@newResidRowNumber"
                                                data-placeholder="@Loc.Residence"
                                                data-search-width="150"
                                                data-mobile-width="150"
                                                class="form-control select2withAPI"
                                                data-url=@Url.Action("GetResidenceTypes", "Employees")></select>
                                    </div>
                                </td>
                                <td label="@Loc.TaBegin" class="employee-datePicker">
                                    <input type="text" class="form-control contact-data-input custom-datepicker" id="RDateFrom-@newResidRowNumber" placeholder="@Loc.TaBegin" />
                                </td>
                                <td label="@Loc.TaEnd" class="employee-datePicker">
                                    <input type="text" class="form-control contact-data-input custom-datepicker" id="RDateTo-@newResidRowNumber" placeholder="@Loc.TaEnd" />
                                </td>
                                <td label="@Loc.Address">
                                    <div class="employees-google-search">
                                        <input type="text" class="form-control contact-data-input google-input check-api-key" id="RStreet-@newResidRowNumber" placeholder="@Loc.Address" />
                                    </div>
                                    <div class="employees-plain-search" style="display: none">
                                        <input type="text" class="form-control contact-data-input" id="RStreet-@newResidRowNumber" placeholder="@Loc.Address" />
                                    </div>
                                </td>
                                <td label="@Loc.Post">
                                    <div class="contact-data-selects">
                                        @*<select id="RPost-@newResidRowNumber"
                                                filter-by-country="RCountry-@newResidRowNumber"
                                                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-search-width="300"
                                                data-url=@Url.Action("SearchPostsLookup", "Post")
                                                data-change-url=@Url.Action("GetCountryByPost", "Employees")
                                                onchange="SetCountry('@newResidRowNumber');"></select>*@
                                        <input id="RPost-@newResidRowNumber"
                                               class="form-control input-post"
                                               type="text"
                                               dataUrl="@Url.Action("SearchPosts", "Post")"
                                               autocomplete="off"
                                               data-change-url=@Url.Action("GetCountryByPost", "Employees")
                                               onchange="SetCountry('@newResidRowNumber');"
                                               placeholder="@Loc.Post"/>
                                    </div>
                                </td>
                                <td label="@Loc.Country">
                                    <div class="contact-data-selects">
                                        <select id="RCountry-@newResidRowNumber"
                                                data-placeholder="@Loc.Country"
                                                allow-clear="true"
                                                data-search-width="200"
                                                class="form-control select2withAPI"
                                                data-url=@Url.Action("GetCountriesFull", "Employees")></select>
                                    </div>
                                </td>
                                <td id="btn-col" class="add-btn-td">
                                    <a class="btn btn-success"
                                       title="@Loc.Add"
                                       onclick="addNewResidence();"
                                       href="#">
                                        <i class="fa fa-plus"></i>
                                    </a>
                                </td>
                            </tr>

                            @if (Model.Residences != null)
                            {
                                var index = 0;
                                foreach (var item in Model.Residences)
                                {
                                    var residenceNameFormat = "Residences[" + index + "].{0}";

                                    <tr id="residence-row-@index">

                                        <td label="@Loc.Residence">
                                            <input type="hidden" id="AnNo-@index" name="@string.Format(residenceNameFormat, "AnNo")" value="@item.AnNo" />
                                            <input type="hidden" id="AnQId-@index" name="@string.Format(residenceNameFormat, "AnQid")" value="@item.AnQid" />

                                            <div class="contact-data-selects" onclick="expandEmployeeTableRow('residence-table', @index, true)">
                                                <select name="@string.Format(residenceNameFormat, "ResidenceType")"
                                                        id="ResidenceType-@index"
                                                        data-placeholder="@Loc.Residence"
                                                        data-search-width="150"
                                                        data-mobile-width="150"
                                                        class="form-control select2withAPI"
                                                        data-url=@Url.Action("GetResidenceTypes", "Employees")>
                                                    <option value="@item.ResidenceType.ToString()" selected>
                                                        @(item.ResidenceType == ResidenceType.Temporary ? Loc.Temporary : Loc.Permanent)
                                                    </option>
                                                </select>
                                            </div>

                                        </td>
                                        <td label="@Loc.TaBegin" class="employee-datePicker">
                                            <input type="text" class="form-control contact-data-input custom-datepicker"
                                                   id="RDateFrom-@index"
                                                   name="@string.Format(residenceNameFormat, "DateFrom")"
                                                   value="@item.DateFrom" />
                                        </td>
                                        <td label="@Loc.TaEnd" class="employee-datePicker">
                                            <input type="text" class="form-control contact-data-input custom-datepicker"
                                                   id="RDateTo-@index"
                                                   name="@string.Format(residenceNameFormat, "DateTo")"
                                                   value="@item.DateTo" />
                                        </td>
                                        <td label="@Loc.Address">
                                            <div class="employees-google-search">
                                                <input type="text" class="form-control contact-data-input google-input check-api-key"
                                                       id="RStreet-@index"
                                                       name="@string.Format(residenceNameFormat, "Street")"
                                                       value="@item.Street" />
                                            </div>
                                            <div class="employees-plain-search" style="display: none">
                                                <input type="text" class="form-control contact-data-input"
                                                       id="RStreet-@index"
                                                       name="@string.Format(residenceNameFormat, "Street")"
                                                       value="@item.Street" />
                                            </div>
                                        </td>
                                        <td label="@Loc.Post">
                                            <div class="contact-data-selects">
                                                @*<select name="@string.Format(residenceNameFormat, "Post")"
                                                        id="RPost-@index"
                                                        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-search-width="300"
                                                        data-url=@Url.Action("SearchPostsLookup", "Post")
                                                        data-change-url=@Url.Action("GetCountryByPost", "Employees")
                                                        onchange="SetCountry('@index');">
                                                    <option selected value="@item.Post">@string.Format("{0} {1}", item.Post, item.City)</option>
                                                </select>*@
                                                <input id="RPost-@index"
                                                       name="@string.Format(residenceNameFormat, "Post")"
                                                       class="form-control input-post"
                                                       type="text"
                                                       dataUrl="@Url.Action("SearchPosts", "Post")"
                                                       autocomplete="off"
                                                       value="@item.Post"
                                                       data-change-url=@Url.Action("GetCountryByPost", "Employees")
                                                       onchange="SetCountry('@index');"
                                                       placeholder="@Loc.Post"/>
                                            </div>
                                        </td>
                                        <td label="@Loc.Country">
                                            <div class="contact-data-selects">
                                                <select name="@string.Format(residenceNameFormat, "Country")"
                                                        id="RCountry-@index"
                                                        data-placeholder="@Loc.Country"
                                                        allow-clear="true"
                                                        data-search-width="200"
                                                        class="form-control select2withAPI"
                                                        data-url=@Url.Action("GetCountriesFull", "Employees")>
                                                    <option value="@item.Country" selected="selected">@item.Country</option>
                                                </select>
                                            </div>
                                        </td>
                                        <td>
                                            <a class="a-outline"
                                               title="@Loc.Delete"
                                               onclick="deleteResidence('@index')">
                                                <i class="far fa-trash-alt"></i>
                                            </a>
                                        </td>
                                    </tr>

                                    index++;
                                }
                            }
                        </tbody>
                    </table>

                    <h4>
                        <strong>@Loc.ContactsData</strong>
                    </h4>
                    <table class="table table-condensed table-hover table-bordered collapse-table" id="contactaddress-table">
                        <thead class="modul-bg">
                            <tr>
                                <th width="30%">@Loc.ContactType</th>
                                <th width="25%">@Loc.ContactData</th>
                                <th width="40%">@Loc.Note</th>
                                <th width="5%"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="contactaddress-new-row">
                                <td label="@Loc.ContactType">
                                    <input type="hidden" id="CaAnNo-@newContactRowNumber" />
                                    <input type="hidden" id="CaAnQid-@newContactRowNumber" value="0" />
                                    <input type="hidden" id="CaAnSubNo-@newContactRowNumber" />

                                    <div class="contact-data-selects ca-type" onclick="expandEmployeeTableRow('contactaddress-table', '-1', true)">
                                        <select id="CaType-@newContactRowNumber"
                                                data-placeholder="@Loc.ContactType"
                                                class="form-control select2withAPI"
                                                data-column-names="@Loc.Code, @Loc.Name"
                                                data-bootstrap-columns="col-md-2,col-md-10"
                                                data-search-width="300"
                                                data-mobile-width="150"
                                                data-url=@Url.Action("GetContactTypes", "Employees")>
                                        </select>
                                    </div>
                                </td>
                                <td label="@Loc.ContactData">
                                    <input type="text" class="form-control contact-data-input" id="CaValue-@newContactRowNumber" placeholder="@Loc.ContactData" />
                                </td>
                                <td label="@Loc.Note">
                                    <input type="text" class="form-control contact-data-input" id="CaNote-@newContactRowNumber" placeholder="@Loc.Note" />
                                </td>
                                <td id="btn-col-contact-addr" class="add-btn-td">
                                    <a class="btn btn-success"
                                       title="@Loc.Add"
                                       onclick="addNewContactAddress();"
                                       href="#">
                                        <i class="fa fa-plus"></i>
                                    </a>
                                </td>
                            </tr>

                            @if (Model.ContactAddresses != null)
                            {
                                var index = 0;
                                foreach (var item in Model.ContactAddresses)
                                {
                                    var contactAddressNameFormat = "ContactAddresses[" + index + "].{0}";

                                    <tr id="contactaddress-row-@index">
                                        <td label="@Loc.ContactType">
                                            <input type="hidden" id="AnNo-@index" name="@string.Format(contactAddressNameFormat, "AnNo")" value="@item.AnNo" />
                                            <input type="hidden" id="AnQId-@index" name="@string.Format(contactAddressNameFormat, "AnQid")" value="@item.AnQid" />
                                            <input type="hidden" id="AnSubNo-@index" name="@string.Format(contactAddressNameFormat, "AnSubNo")" value="@item.AnSubNo" />

                                            <div class="contact-data-selects ca-type" onclick="expandEmployeeTableRow('contactaddress-table', @index, true)">
                                                <select name="@string.Format(contactAddressNameFormat, "Type")"
                                                        id="CaType-@index"
                                                        data-placeholder="@Loc.ContactType"
                                                        class="form-control select2withAPI"
                                                        data-column-names="@Loc.Code, @Loc.Name"
                                                        data-bootstrap-columns="col-md-2,col-md-10"
                                                        data-search-width="300"
                                                        data-mobile-width="150"
                                                        data-url=@Url.Action("GetContactTypes", "Employees")>
                                                    <option selected value="@item.Type">
                                                        @(!string.IsNullOrEmpty(item.Type) ?
                                                            (contactTypes.FirstOrDefault(s => s.Key.ToString() == item.Type) == null ?
                                                            string.Empty :
                                                            contactTypes.FirstOrDefault(s => s.Key.ToString() == item.Type).Name) :
                                                            string.Empty)
                                                    </option>
                                                </select>
                                            </div>
                                        </td>
                                        <td label="@Loc.ContactData">
                                            <input type="text" class="form-control contact-data-input"
                                                   id="CaValue-@index"
                                                   name="@string.Format(contactAddressNameFormat, "Value")"
                                                   value="@item.Value" />
                                        </td>
                                        <td label="@Loc.Note">
                                            <input type="text" class="form-control contact-data-input"
                                                   id="CaNote-@index"
                                                   name="@string.Format(contactAddressNameFormat, "Note")"
                                                   value="@item.Note" />
                                        </td>
                                        <td>
                                            <a class="a-outline"
                                               title="@Loc.Delete"
                                               onclick="deleteContactAddress('@index')">
                                                <i class="far fa-trash-alt contact-data-delete-icon"></i>
                                            </a>
                                        </td>
                                    </tr>

                                    index++;

                                }
                            }
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-link"><i class="fa fa-times m-r-xs text-primary"></i>@Loc.Cancel</button>
                <a class="btn btn-primary" onclick="$('#contact-data-form').submit(); closeModal('contact-data-modal')"><i class="fa fa-check m-r-xs text-secondary"></i>@Loc.Save</a>
            </div>
        </div>
    </div>
</div>