@using Microsoft.AspNetCore.Html
@using Microsoft.AspNetCore.Mvc.Localization
@using Berufsschule_HAM.Models
@using System.Buffers.Text
@using System.Text.Json;
@using System.Text.Json.Serialization;
@model UsersIndexViewModel
@inject IViewLocalizer T
@{
    ViewData["Title"] = T["Users"];
}


<div class="container py-4">
    <h2 class="mb-3">@T["Users"]</h2>

    
    <div class="mb-4 d-flex flex-wrap gap-2">
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
            @T["Create user"]
        </button>
    </div>

    
    <div class="table-responsive">
        <table class="table table-striped align-middle">
            <thead>
                <tr>
                    <th style="width: 2rem;"></th>
                    <th>@T["Username"]</th>
                    <th>@T["Title"]</th>
                    <th>@T["Name"]</th>
                    <th>@T["Surname"]</th>
                    <th>@T["Workplace"]</th>
                    <th>@T["Action"]</th>
                </tr>
            </thead>
            <tbody>
            @{
                foreach (UserTableViewModel userTableViewModel in Model.UserTableViewModels)
                {
                <tr class="user-row">
                    <td>
                    @if (!string.IsNullOrEmpty(userTableViewModel.JpegPhotoBase64))
                    {
                        <img class="rounded-circle user-icon" src="data:image/webp;base64,@userTableViewModel.JpegPhotoBase64" alt="Photo" style="width:32px;height:32px;" width="32" height="32" />
                    }
                    else
                    {
                        <div class="rounded-circle user-icon bg-secondary d-flex align-items-center justify-content-center" style="width:32px;height:32px;">
                            <span class="text-white fw-bold">@userTableViewModel.Name.FirstOrDefault()@userTableViewModel.Surname.FirstOrDefault()</span>
                        </div>
                    }
                    </td>
                    <td>@userTableViewModel.Uid</td>
                    <td>@userTableViewModel.Title</td>
                    <td>@userTableViewModel.Name</td>
                    <td>@userTableViewModel.Surname</td>
                    <td>@userTableViewModel.Description.Workplace</td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-warning"
                                data-user-id="@userTableViewModel.Uid"
                                data-user-title="@userTableViewModel.Title"
                                data-user-name="@userTableViewModel.Name"
                                data-user-surname="@userTableViewModel.Surname"
                                data-user-workplace="@userTableViewModel.Description.Workplace"
                                data-user-birthdate="@userTableViewModel.Description.BirthDate"
                                data-user-address-city="@userTableViewModel.Description.Address.City"
                                data-user-address-street="@userTableViewModel.Description.Address.Street"
                                data-user-address-streetnr="@userTableViewModel.Description.Address.StreetNr"
                                data-user-groups="@JsonSerializer.Serialize(userTableViewModel.Description.Groups)"
                                data-bs-toggle="modal"
                                data-bs-target="#updateModal">
                                @T["Update"]
                            </button>
                            <button class="btn btn-sm btn-danger btn-delete" 
                                data-user-id="@userTableViewModel.Uid"
                                data-bs-toggle="modal"
                                data-bs-target="#deleteModal">
                                @T["Delete"]
                            </button>
                        </div>
                    </td>
                </tr>
                }
            }
            </tbody>
        </table>
    </div>

    @* Pagination Controls *@
    @if (Model.TotalPages > 1)
    {
        <nav aria-label="User pagination" class="mt-4">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted">
                    @T["Showing"] @((Model.CurrentPage - 1) * Model.PageSize + 1) - @Math.Min(Model.CurrentPage * Model.PageSize, Model.TotalUsers) @T["of"] @Model.TotalUsers @T["users"]
                </div>
                <ul class="pagination mb-0">
                    @* Previous Button *@
                    <li class="page-item @(Model.CurrentPage == 1 ? "disabled" : "")">
                        <a class="page-link" href="?page=@(Model.CurrentPage - 1)&pageSize=@Model.PageSize" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    @* Page Numbers *@
                    @{
                        int startPage = Math.Max(1, Model.CurrentPage - 2);
                        int endPage = Math.Min(Model.TotalPages, Model.CurrentPage + 2);

                        if (startPage > 1)
                        {
                            <li class="page-item"><a class="page-link" href="?page=1&pageSize=@Model.PageSize">1</a></li>
                            if (startPage > 2)
                            {
                                <li class="page-item disabled"><span class="page-link">...</span></li>
                            }
                        }

                        for (int i = startPage; i <= endPage; i++)
                        {
                            <li class="page-item @(i == Model.CurrentPage ? "active" : "")">
                                <a class="page-link" href="?page=@i&pageSize=@Model.PageSize">@i</a>
                            </li>
                        }

                        if (endPage < Model.TotalPages)
                        {
                            if (endPage < Model.TotalPages - 1)
                            {
                                <li class="page-item disabled"><span class="page-link">...</span></li>
                            }
                            <li class="page-item"><a class="page-link" href="?page=@Model.TotalPages&pageSize=@Model.PageSize">@Model.TotalPages</a></li>
                        }
                    }

                    @* Next Button *@
                    <li class="page-item @(Model.CurrentPage >= Model.TotalPages ? "disabled" : "")">
                        <a class="page-link" href="?page=@(Model.CurrentPage + 1)&pageSize=@Model.PageSize" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    }
</div>

<!-- User Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h3 class="modal-title" id="deleteModalLabel">@T["Confirm Delete"]</h3>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>
                    @T["DeleteUserConfirmation", new HtmlString("<strong id=\"userId\"></strong>")]
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
                <form id="deleteForm" method="post" asp-controller="Users" asp-action="Delete">
                    <button type="submit" class="btn btn-danger">@T["Yes, Delete"]</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const deleteModal = document.getElementById('deleteModal');
        let currentButton = null; // The delete button that opened the modal

        deleteModal.addEventListener('show.bs.modal', event => {
            currentButton = event.relatedTarget; // Button that triggered the modal
            const userId = currentButton.getAttribute('data-user-id');

            deleteModal.querySelector('#userId').textContent = userId;

        });

        // Handle submit of deleteForm via fetch()
        const deleteForm = document.getElementById('deleteForm');
        deleteForm.addEventListener('submit', async e => {
            e.preventDefault();
            const userId = deleteModal.querySelector('#userId').textContent;
            const url = `/Users/Delete?uid=${userId}`;

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                });

                const result = await response.json();

                if (result.success) {
                    // Close the modal
                    const modal = bootstrap.Modal.getInstance(deleteModal);
                    modal.hide();

                    // Remove the row from the table
                    const row = currentButton.closest('tr');
                    row.classList.add('table-danger');
                    setTimeout(() => row.remove(), 300);

                    showToast('@T["User deleted successfully"]', 'success');
                } else {
                    showToast(`${result.reason}: ${result.exception || '@T["Unknown error"]'}`, 'danger');
                }
            } catch (error) {
                console.error(error);
                showToast('@T["Error contacting server"]', 'danger');
            }
        });
    });
</script>

<!-- User Update Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h3 class="modal-title" id="updateModalLabel">@T["Update User"]</h3>
                <button type="button" class="btn-close btn-close-white" style="filter: invert(0);" aria-label="Close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="updateForm">
                    <input type="hidden" id="updateUid" name="Uid" />

                    <div class="row g-3">
                        <h4 class="fw-bold">@T["Personal information"]</h4>
                        <div class="col-md-6">
                            <label class="form-label" for="updateTitle">@T["Title"]</label>
                            <input type="text" id="updateTitle" name="Title" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updateName">@T["Name"]</label>
                            <input type="text" id="updateName" name="Cn" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updateSurname">@T["Surname"]</label>
                            <input type="text" id="updateSurname" name="Sn" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updateBirthdate">@T["Birth Date"]</label>
                            <input type="text" id="updateBirthdate" name="Description.BirthDate" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updateAddressCity">@T["City"]</label>
                            <input type="text" id="updateAddressCity" name="Description.Address.City" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updateAddressStreet">@T["Street"]</label>
                            <input type="text" id="updateAddressStreet" name="Description.Address.Street" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updateAddressStreetNr">@T["Street Nr."]</label>
                            <input type="text" id="updateAddressStreetNr" name="Description.Address.StreetNr" class="form-control" />
                        </div>
                        <hr class="my-3">
                        <h4 class="fw-bold">@T["Workplace & account"]</h4>
                        <div class="col-md-6">
                            <label class="form-label" for="updateWorkplace">@T["Workplace"]</label>
                            <select class="form-select" id="updateWorkplace" name="Description.Workplace">
                                <option value="">@T["Select location"]</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updateGroups">@T["Groups"]</label>
                            <select id="updateGroups" name="Description.Groups" class="form-select" multiple></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updatePassword">@T["New Password"]</label>
                            <input type="password" id="updatePassword" name="UserPassword" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="updatePhotoFile">@T["Photo"]</label>
                            <input type="file" id="updatePhotoFile" accept="image/*" class="form-control" />
                            <input type="hidden" id="updateJpegPhoto" name="JpegPhoto" />
                            <div class="mt-2 text-center">
                                <img id="updatePhotoPreview" src="" alt="Preview" class="img-thumbnail" style="max-height: 150px; display: none;" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
                <button type="submit" form="updateForm" class="btn btn-warning">@T["Save changes"]</button>
            </div>
        </div>
    </div>
</div>

<script>

    function unflatten(obj) {
        const result = {};
        for (const [key, value] of Object.entries(obj)) {
            const parts = key.split(".");
            let current = result;
            for (let i = 0; i < parts.length; i++) {
                const part = parts[i];
                if (i === parts.length - 1) {
                    if (typeof value === "string" && /^[\[{]/.test(value.trim())) {
                        try {
                            current[part] = JSON.parse(value);
                        } catch {
                            current[part] = value;
                        }
                    } else {
                        current[part] = value;
                    }
                } else {
                    current[part] = current[part] || {};
                    current = current[part];
                }
            }
        }
        return result;
    }

    document.addEventListener('DOMContentLoaded', () => {
        // --- Update user modal ---
        const updateModal = document.getElementById('updateModal');
        const updateForm = document.getElementById('updateForm');
        let updateButton = null;
        
        updateModal.addEventListener('show.bs.modal', event => {
            updateButton = event.relatedTarget;
            const userId = updateButton.getAttribute('data-user-id');
            const title = updateButton.getAttribute('data-user-title');
            const name = updateButton.getAttribute('data-user-name');
            const surname = updateButton.getAttribute('data-user-surname');
            const workplace = updateButton.getAttribute('data-user-workplace');
            const birthdate = updateButton.getAttribute('data-user-birthdate');
            const addressCity = updateButton.getAttribute('data-user-address-city');
            const addressStreet = updateButton.getAttribute('data-user-address-street');
            const addressStreetNr = updateButton.getAttribute('data-user-address-streetnr');

            // Fill form fields
            updateForm.querySelector('#updateUid').value = userId;
            updateForm.querySelector('#updateTitle').value = title || '';
            updateForm.querySelector('#updateName').value = name || '';
            updateForm.querySelector('#updateSurname').value = surname || '';
            updateForm.querySelector('#updateWorkplace').value = workplace || '';
            updateForm.querySelector('#updateBirthdate').value = birthdate || '';
            updateForm.querySelector('#updateAddressCity').value = addressCity || '';
            updateForm.querySelector('#updateAddressStreet').value = addressStreet || '';
            updateForm.querySelector('#updateAddressStreetNr').value = addressStreetNr || '';
            updateForm.querySelector('#updatePassword').value = '';
            updateForm.querySelector('#updateJpegPhoto').value = '';
        });

        updateForm.addEventListener('submit', async e => {
            e.preventDefault();

            const password = updateForm.querySelector('input[name="UserPassword"]').value;
            if (password.length > 0 && !validatePassword(password)) {
                showToast('@T["Password must be at least 8 characters long and include upper, lower, number, and special character"]', 'danger');
                return;
            }
            var dataFromEntries = Object.fromEntries(new FormData(updateForm).entries());
            var data = unflatten(dataFromEntries);
            data.Description.Groups = Array.from(updateForm.querySelector('#updateGroups').selectedOptions).map(option => option.value);
            try {
                const response = await fetch('/Users/Update', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify(data)
                });

                const result = await response.json();
                if (result.Success) {
                    // Close modal
                    bootstrap.Modal.getInstance(updateModal).hide();

                    // Update table row
                    const row = updateButton.closest('tr');
                    row.querySelector('td:nth-child(2)').textContent = result.NewUid || '';
                    row.querySelector('td:nth-child(3)').textContent = data.Title || '';
                    row.querySelector('td:nth-child(4)').textContent = data.Cn || '';
                    row.querySelector('td:nth-child(5)').textContent = data.Sn || '';
                    row.querySelector('td:nth-child(6)').textContent = data.Description?.Workplace || '';
                    // Update button data attributes, so the next edit uses the new data
                    updateButton.setAttribute('data-user-id', result.NewUid || '');
                    updateButton.setAttribute('data-user-title', data.Title || '');
                    updateButton.setAttribute('data-user-name', data.Cn || '');
                    updateButton.setAttribute('data-user-surname', data.Sn || '');
                    updateButton.setAttribute('data-user-workplace', data.Description?.Workplace || '');
                    updateButton.setAttribute('data-user-groups', JSON.stringify(data.Description?.Groups || []));
                    
                    if (data.JpegPhoto && data.JpegPhoto.length > 0) {
                        const img = row.querySelector('td:first-child img');
                        if (img) {
                            img.src = `data:image/jpeg;base64,${data.JpegPhoto}`;
                            img.classList.add('border', 'border-success'); // optional visual feedback
                            setTimeout(() => img.classList.remove('border', 'border-success'), 1000);
                        }
                    }
                    updateForm.reset();
                    document.getElementById('updatePhotoPreview').style.display = "none";
                    showToast('@T["User updated successfully"]', 'success');
                } else {
                    showToast(`${result.Exception || '@T["Update failed"]'}`, 'danger');
                }
            } catch (err) {
                console.error(err);
                showToast('@T["Error updating user"]', 'danger');
            }
        });
    });

    // Group select drop-down
    document.addEventListener('DOMContentLoaded', () => {
        const updateModal = document.getElementById('updateModal');
        const updateForm = document.getElementById('updateForm');
        const updateGroupsSelect = document.getElementById('updateGroups');
        let updateButton = null;

        updateModal.addEventListener('show.bs.modal', async event => {
            updateButton = event.relatedTarget;

            const userId = updateButton.getAttribute('data-user-id');
            const title = updateButton.getAttribute('data-user-title');
            const name = updateButton.getAttribute('data-user-name');
            const surname = updateButton.getAttribute('data-user-surname');
            const workplace = updateButton.getAttribute('data-user-workplace');
            const groups = JSON.parse(updateButton.getAttribute('data-user-groups'));

            // Fill basic fields
            updateForm.querySelector('#updateUid').value = userId;
            updateForm.querySelector('#updateTitle').value = title || '';
            updateForm.querySelector('#updateName').value = name || '';
            updateForm.querySelector('#updateSurname').value = surname || '';
            let updateWorkplaceElement = updateForm.querySelector('#updateWorkplace');
            await loadLocationsIntoSelect(updateWorkplaceElement);
            updateWorkplaceElement.value = workplace || '';
            updateForm.querySelector('#updatePassword').value = '';
            updateForm.querySelector('#updateJpegPhoto').value = '';

            // Fetch available groups
            await populateGroupsDropdown(updateGroupsSelect, groups);

            // Fetch user's existing groups (you need to provide them via data-attribute or fetch)
            const existingGroups = updateButton.getAttribute('data-user-groups');
            if (existingGroups) {
                const selectedGroups = existingGroups.split(',');
                Array.from(updateGroupsSelect.options).forEach(opt => {
                    opt.selected = selectedGroups.includes(opt.value);
                });
            }
        });

        async function populateGroupsDropdown(selectElement, preselectedGroups) {
            try {
                const res = await fetch('/Groups/Get');
                const json = await res.json();
                if (!json.success) {
                    console.warn('Failed to fetch groups', json);
                    return;
                }
                selectElement.innerHTML = '';
                json.GroupModels.forEach(group => {
                    const opt = document.createElement('option');
                    opt.value = group.Cn;
                    opt.textContent = group.DisplayName || group.Cn;
                    selectElement.appendChild(opt);
                    if (preselectedGroups != null && preselectedGroups.includes(group.Cn)) {
                        setTimeout(() => {
                            opt.selected = true;
                        }, 200);
                    }
                });
            } catch (err) {
                console.error('Error fetching groups', err);
            }
        }
    });

    document.addEventListener('DOMContentLoaded', () => {
        const photoInput = document.getElementById('updatePhotoFile');
        const photoPreview = document.getElementById('updatePhotoPreview');
        const photoHidden = document.getElementById('updateJpegPhoto');

        photoInput.addEventListener('change', () => {
            const file = photoInput.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = e => {
                const base64 = e.target.result.split(',')[1]; // strip data:image/jpeg;base64,
                photoHidden.value = base64;
                photoPreview.src = e.target.result;
                photoPreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        });
    });

</script>


<!-- User Create Modal -->
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h3 class="modal-title" id="createModalLabel">@T["Create user"]</h3>
                <button type="button" class="btn-close btn-close-white" aria-label="Close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createForm">
                    <div class="row g-3">
                        <h4 class="fw-bold">@T["Personal information"]</h4>
                        <div class="col-md-6">
                            <label class="form-label" for="createTitle">@T["Title"]</label>
                            <input type="text" name="Title" id="createTitle" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createName">@T["Name"]</label>
                            <input type="text" name="Cn" id="createName" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createSurname">@T["Surname"]</label>
                            <input type="text" name="Sn" id="createSurname" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createBirthDate">@T["Birth Date"]</label>
                            <input type="text" id="createBirthDate" name="Description.BirthDate" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createCity">@T["City"]</label>
                            <input type="text" id="createCity" name="Description.Address.City" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createStreet">@T["Street"]</label>
                            <input type="text" id="createStreet" name="Description.Address.Street" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createStreetNr">@T["Street Nr."]</label>
                            <input type="text" id="createStreetNr" name="Description.Address.StreetNr" class="form-control" />
                        </div>
                        <hr class="my-3">
                        <h4 class="fw-bold">@T["Workplace & account"]</h4>
                        <div class="col-md-6">
                            <label class="form-label" for="createWorkplace">@T["Workplace"]</label>
                            <select class="form-select" id="createWorkplace" name="Description.Workplace">
                                <option value="">@T["Select location"]</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createGroups">@T["Groups"]</label>
                            <select id="createGroups" id="createGroups" name="Description.Groups" class="form-select" multiple></select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createPassword">@T["Password"]</label>
                            <input type="password" id="createPassword" name="UserPassword" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="createPhotoFile">@T["Photo"]</label>
                            <input type="file" id="createPhotoFile" accept="image/*" class="form-control" />
                            <input type="hidden" id="createJpegPhoto" name="JpegPhoto" />
                            <div class="mt-2 text-center">
                                <img id="createPhotoPreview" src="" alt="Preview" class="img-thumbnail" style="max-height: 150px; display: none;" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
                <button type="submit" form="createForm" class="btn btn-primary">@T["Create"]</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const createModal = document.getElementById('createModal');
        const createForm = document.getElementById('createForm');
        const createGroupsSelect = document.getElementById('createGroups');
        const photoInput = document.getElementById('createPhotoFile');
        const photoPreview = document.getElementById('createPhotoPreview');
        const photoHidden = document.getElementById('createJpegPhoto');

        // Load available groups when modal is shown
        createModal.addEventListener('show.bs.modal', async () => {
            await populateGroupsDropdown(createGroupsSelect);
            createForm.reset();
            let createWorkplaceElement = createForm.querySelector('[name="Description.Workplace"]');
            await loadLocationsIntoSelect(createWorkplaceElement);
            createWorkplaceElement.value = '';

            photoPreview.style.display = 'none';
        });

        // Handle photo upload preview
        photoInput.addEventListener('change', () => {
            const file = photoInput.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = e => {
                const base64 = e.target.result.split(',')[1];
                photoHidden.value = base64;
                photoPreview.src = e.target.result;
                photoPreview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        });

        // Submit create form
        createForm.addEventListener('submit', async e => {
            e.preventDefault();

            const password = createForm.querySelector('input[name="UserPassword"]').value;
            if (password == null || !validatePassword(password)) {
                showToast('@T["Password must be at least 8 characters long and include upper, lower, number, and special character"]', 'danger');
                return;
            }

            const dataFromEntries = Object.fromEntries(new FormData(createForm).entries());
            const data = unflatten(dataFromEntries);
            data.Description.Groups = Array.from(createGroupsSelect.selectedOptions).map(o => o.value);

            try {
                const response = await fetch('/Users/Create', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify(data)
                });

                const result = await response.json();
                if (result.Success) {
                    bootstrap.Modal.getInstance(createModal).hide();
                    showToast('@T["User created successfully"]', 'success');

                    // Add new row to table dynamically
                    const tbody = document.querySelector('table tbody');
                    const newRow = document.createElement('tr');
                    newRow.innerHTML = `
                        <td><img class="rounded-circle user-icon" src="data:image/jpeg;base64,${data.JpegPhoto || ''}" alt="Photo" style="max-width:300px;" /></td>
                        <td>${result.Uid || ''}</td>
                        <td>${data.Title || ''}</td>
                        <td>${data.Cn || ''}</td>
                        <td>${data.Sn || ''}</td>
                        <td>${data.Description?.Workplace || ''}</td>
                        <td>
                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-warning"
                                    data-user-id="${result.Uid || ''}"
                                    data-user-title="${data.Title || ''}"
                                    data-user-name="${data.Cn || ''}"
                                    data-user-surname="${data.Sn || ''}"
                                    data-user-birthdate="${data.BirthDate}"
                                    data-user-address-city="${data.Description.Address.City}"
                                    data-user-address-street="${data.Description.Address.Street}"
                                    data-user-address-streetnr="${data.Description.Address.StreetNr}"
                                    data-user-workplace="${data.Description?.Workplace || ''}"
                                    data-user-groups='${JSON.stringify(data.Description?.Groups || [])}'
                                    data-bs-toggle="modal"
                                    data-bs-target="#updateModal">
                                    @T["Update"]
                                </button>
                                <button class="btn btn-sm btn-danger btn-delete"
                                    data-user-id="${result.NewUid || ''}"
                                    data-user-name="${data.Cn || ''}"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal">
                                    @T["Delete"]
                                </button>
                            </div>
                        </td>
                    `;
                    newRow.setAttribute("data-asset-id", result.Uid);
                    newRow.classList.toggle("user-row");
                    registerRowDetailviewClick(newRow);
                    tbody.appendChild(newRow);
                } else {
                    showToast(`${result.Exception || '@T["Create failed"]'}`, 'danger');
                }
            } catch (err) {
                console.error(err);
                showToast('@T["Error creating user"]', 'danger');
            }
        });

        async function populateGroupsDropdown(selectElement) {
            try {
                const res = await fetch('/Groups/Get');
                const json = await res.json();
                if (!json.success) return;
                selectElement.innerHTML = '';
                json.GroupModels.forEach(group => {
                    const opt = document.createElement('option');
                    opt.value = group.Cn;
                    opt.textContent = group.DisplayName || group.Cn;
                    selectElement.appendChild(opt);
                });
            } catch (err) {
                console.error('Error fetching groups', err);
            }
        }
    });
</script>


<!-- User Detail Modal -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-dark">
                <h3 class="modal-title" id="detailModalLabel">@T["User Details"]</h3>
                <button type="button" class="btn-close btn-close-white" style="filter: invert(0);" aria-label="Close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-4 text-center">
                    <img id="detailPhoto" alt="Photo" class="img-thumbnail rounded-circle" style="max-height:150px;" />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="detailUid">@T["Username"]</label>
                        <input type="text" class="form-control" id="detailUid" value="" disabled />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="detailTitle">@T["Title"]</label>
                        <input type="text" class="form-control" id="detailTitle" value="" disabled />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="detailName">@T["Name"]</label>
                        <input type="text" class="form-control" id="detailName" value="" disabled />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="detailSurname">@T["Surname"]</label>
                        <input type="text" class="form-control" id="detailSurname" value="" disabled />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="detailBirthdate">@T["Birth Date"]</label>
                        <input type="text" class="form-control" id="detailBirthdate" value="" disabled />
                    </div>
                    <hr class="my-3">
                    <h4 class="fw-bold">@T["Address"]</h4>
                    <div class="col-md-4">
                        <label class="form-label" for="detailCity">@T["City"]</label>
                        <input type="text" class="form-control" id="detailCity" value="" disabled />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="detailStreet">@T["Street"]</label>
                        <input type="text" class="form-control" id="detailStreet" value="" disabled />
                    </div>
                    <div class="col-md-2">
                        <label class="form-label" for="detailStreetNr">@T["Street Nr."]</label>
                        <input type="text" class="form-control" id="detailStreetNr" value="" disabled />
                    </div>
                    <hr class="my-3">
                    <h4 class="fw-bold">@T["Workplace & account"]</h4>
                    <div class="col-md-6">
                        <label class="form-label" for="detailWorkplace">@T["Workplace"]</label>
                        <input type="text" class="form-control" id="detailWorkplace" value="" disabled />
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="detailGroups">@T["Groups"]</label>
                        <input type="text" class="form-control" id="detailGroups" value="" disabled />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        const rows = document.querySelectorAll('table tbody tr');

        rows.forEach(row => registerRowDetailviewClick(row));
    });
    function registerRowDetailviewClick(row) {
        const detailModalEl = document.getElementById('detailModal');
        const detailModal = new bootstrap.Modal(detailModalEl);
        row.addEventListener('click', (e) => {
            // Don’t trigger when clicking inside the action buttons
            if (e.target.closest('button')) return;

            const updateBtn = row.querySelector('.btn-warning[data-user-id]');
            if (!updateBtn) return;

            // Extract data from update button
            const data = {
                uid: updateBtn.dataset.userId,
                title: updateBtn.dataset.userTitle,
                name: updateBtn.dataset.userName,
                surname: updateBtn.dataset.userSurname,
                workplace: updateBtn.dataset.userWorkplace,
                birthdate: updateBtn.dataset.userBirthdate,
                city: updateBtn.dataset.userAddressCity,
                street: updateBtn.dataset.userAddressStreet,
                streetNr: updateBtn.dataset.userAddressStreetnr,
                groups: JSON.parse(updateBtn.dataset.userGroups || '[]'),
            };


            // Fill modal fields
            document.getElementById('detailUid').value = data.uid || '';
            document.getElementById('detailTitle').value = data.title || '';
            document.getElementById('detailName').value = data.name || '';
            document.getElementById('detailSurname').value = data.surname || '';
            document.getElementById('detailBirthdate').value = data.birthdate || '';
            document.getElementById('detailCity').value = data.city || '';
            document.getElementById('detailStreet').value = data.street || '';
            document.getElementById('detailStreetNr').value = data.streetNr || '';
            document.getElementById('detailWorkplace').value = data.workplace || '';
            document.getElementById('detailGroups').value = data.groups.join(', ') || '';

            // Photo
            const imgEl = row.querySelector('td:first-child img');
            const detailPhoto = document.getElementById('detailPhoto');
            detailPhoto.src = '';
            detailPhoto.src = `/Home/UserPhoto?uid=${data.uid}&size=256`;
            detailModal.show();
        });
    }
</script>

<style>
    .user-row > td:not(:last-child) {
        cursor: pointer;
    }
    .user-row > td {    
        transition: 0.1s ease;
    }
    .user-row:has(td:not(:last-child):hover) > td {
        background-color: #17a2b8;
    }
</style>