@page
@model ProjecThing.Pages.CodeTableEmployees.EditModel

@{
    Layout = "~/Pages/Layouts/_Layout.cshtml";
}

@section Styles {
    <link rel="stylesheet" href="~/vendor/libs/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.css">
}

<form enctype="multipart/form-data" method="post">
    <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">Zaposleni /</span> Urejanje
        </span>
        <button type="submit" class="btn btn-secondary"><span class="ion ion-md-save"></span>&nbsp; Shrani delavca</button>
    </h4>

    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <h6 class="card-header">
                    Osnovni podatki
                </h6>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <img id="btn-profile-image" src="~/img/img_avatar.png" style="cursor: pointer;" />
                            <input id="profile-image" asp-for="Employee.ProfileImage" class="form-control" type="file" style="display: none" />
                        </div>
                        <div class="col-md-8">
                            <div class="form-group">
                                <label asp-for="Employee.FirstName" class="form-label"></label>
                                <input asp-for="Employee.FirstName" class="form-control" />
                            </div>
                            <div class="form-group">
                                <label asp-for="Employee.LastName" class="form-label"></label>
                                <input asp-for="Employee.LastName" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label asp-for="Employee.Gender" class="form-label"></label>
                                <select asp-for="Employee.Gender" class="form-control selectpicker" data-style="btn-default" asp-items="Html.GetEnumSelectList<Models.CodeTable.CodeTableEmployeeGender>()">
                                    <option value="">Izberite spol</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label asp-for="Employee.BirthDate" class="form-label"></label>
                                <input asp-for="Employee.BirthDate" type="text" class="form-control dtp-datenotime" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label asp-for="Employee.EmploymentDate" class="form-label"></label>
                                <input asp-for="Employee.EmploymentDate" type="text" class="form-control dtp-datenotime" />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label asp-for="Employee.CitizenIdNumber" class="form-label"></label>
                                <input asp-for="Employee.CitizenIdNumber" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label asp-for="Employee.TaxNumber" class="form-label"></label>
                                <input asp-for="Employee.TaxNumber" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label asp-for="Employee.BankAccount" class="form-label"></label>
                        <input asp-for="Employee.BankAccount" class="form-control" />
                    </div>
                </div>
                <hr class="mb-0 mt-0" />
                <div class="card-body">
                    <div class="text-light small font-weight-semibold mb-3">Kontaktni podatki</div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label asp-for="Employee.Telephone" class="form-label"></label>
                                <input asp-for="Employee.Telephone" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label asp-for="Employee.MobileTelephone" class="form-label"></label>
                                <input asp-for="Employee.MobileTelephone" class="form-control" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label asp-for="Employee.Email" class="form-label"></label>
                        <input asp-for="Employee.Email" class="form-control" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <h6 class="card-header">
                    Podatki o prebivališču
                </h6>
                <div class="card-body">
                    <div class="text-light small font-weight-semibold mb-3">Stalni naslov</div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label asp-for="Employee.Street" class="form-label"></label>
                                <input asp-for="Employee.Street" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label asp-for="Employee.HouseNumber" class="form-label"></label>
                                <input asp-for="Employee.HouseNumber" class="form-control" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-0">
                        <label asp-for="Employee.City" class="form-label"></label>
                        <input asp-for="Employee.City" class="form-control" />
                    </div>
                </div>
                <hr class="mb-0 mt-0" />
                <div class="card-body">
                    <div class="text-light small font-weight-semibold mb-3">Začasni naslov</div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label asp-for="Employee.TemporaryStreet" class="form-label"></label>
                                <input asp-for="Employee.TemporaryStreet" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label asp-for="Employee.TemporaryHouseNumber" class="form-label"></label>
                                <input asp-for="Employee.TemporaryHouseNumber" class="form-control" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label asp-for="Employee.TemporaryCity" class="form-label"></label>
                        <input asp-for="Employee.TemporaryCity" class="form-control" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <h6 class="card-header">
                    Dokumenti
                </h6>
                <div class="card-body">
                    <partial name="Documents/IndexModal" model="Model.Document" />
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Modal placeholder -->
<div id="modal-placeholder"></div>

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

    <script src="~/vendor/libs/moment/moment.js"></script>
    <script src="~/vendor/libs/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.js"></script>

    <script>
        $('#btn-profile-image').on('click', function () {
            $('#profile-image').trigger('click');
        });
    </script>
}