divan/DiwanRazor/Areas/Admin/Pages/Locations.cshtml

@page
@model DiwanRazor.Areas.Admin.Pages.LocationsModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_AdminLayout";
    ViewData["Title"] = "خاستگاه‌ها";
}

<div class="up-page-header">
    <h1>@ViewData["Title"]</h1>
</div>

@if (!string.IsNullOrEmpty(Model.LastMessage))
{
    <div class="up-alert up-alert--info">@Model.LastMessage</div>
}

<script>
    function displayLocationOnMap() {
        link = document.createElement("a")
        link.href = 'https://maps.google.com/?q=' + document.getElementById('Location_Latitude').value + ',' + document.getElementById('Location_Longitude').value + '&ll=' + document.getElementById('Location_Latitude').value + ',' + document.getElementById('Location_Longitude').value + '&z=3';
        link.target = "_blank"
        link.click()
    }

</script>

<div class="up-card">
    <h2 class="up-card__title">خاستگاه جدید</h2>
    <form method="post" class="up-form">
        @Html.AntiForgeryToken()
        <div class="up-field">
            <label for="Location_Name">نام</label>
            <input asp-for="Location.Name" />
        </div>
        <div class="up-field">
            <label for="Location_Latitude">عرض جغرافیایی (N)</label>
            <input asp-for="Location.Latitude" />
        </div>
        <div class="up-field">
            <label for="Location_Longitude">طول جغرافیایی (E)</label>
            <input asp-for="Location.Longitude" />
        </div>
        <div class="up-form-actions">
            <a onclick="displayLocationOnMap()" class="up-btn up-btn--ghost" role="button">🗺️ مشاهده روی نقشه</a>
            <input type="submit" value="خاستگاه جدید" class="up-btn up-btn--success" />
        </div>
    </form>
</div>

@if (Model.Locations != null && Model.Locations.Length > 0)
{
    <script>
        function editLocation(itemId) {
            var url = '?handler=Edit';
            var nameInput = '#name-' + itemId.toString();
            var latInput = '#lat-' + itemId.toString();
            var lonInput = '#lon-' + itemId.toString();

            $.ajax({
                type: "PUT",
                url: url,
                data: {
                    id: itemId,
                    name: $(nameInput).val(),
                    latitude: $(latInput).val(),
                    longitude: $(lonInput).val(),
                },
                error: function(e) {
                    upToast(e.responseText || String(e), 'error');
                },
                success: function() {
                    upToast('ردیف به درستی ویرایش شد.');
                },

            });
        }

        async function deleteLocation(itemId) {

            var ok = await upConfirm('آیا از حذف این ردیف اطمینان دارید؟');
            if (!ok) return;

            $.ajax({
                type: "DELETE",
                url: '',
                data: {
                    id: itemId
                },
                error: function(e) {
                    upToast(e.responseText || String(e), 'error');
                },
                success: function() {
                    var itemIdBlockId = '#tr-' + itemId;
                    $(itemIdBlockId).remove();
                },
            });
        }
    </script>
    <table>
        <tr>
            <th>نام</th>
            <th>عرض جغرافیایی</th>
            <th>طول جغرافیایی</th>
            <th>
                #
            </th>
        </tr>
        @foreach (var location in Model.Locations)
        {
            <tr id="tr-@location.Id">
                <td><input type="text" name="name-@location.Id" id="name-@location.Id" value="@location.Name" /></td>
                <td><input type="text" name="lat-@location.Id" id="lat-@location.Id" value="@location.Latitude" /></td>
                <td><input type="text" name="lon-@location.Id" id="lon-@location.Id" value="@location.Longitude" /></td>
                <td>
                    <a role="button" onclick="editLocation(@location.Id)" class="up-icon-btn" title="ویرایش" aria-label="ویرایش این خاستگاه">✎</a>
                    <a role="button" onclick="deleteLocation(@location.Id)" class="up-icon-btn" title="حذف" aria-label="حذف این خاستگاه">🗑</a>
                    <a role="button" onclick="viewLocation('@location.Latitude', '@location.Longitude')" class="up-icon-btn" title="مشاهده" aria-label="مشاهدهٔ این خاستگاه روی نقشه">🗺️</a>
                </td>
            </tr>
        }
    </table>
}
else
{
    <partial name="_EmptyState" model="@("هنوز خاستگاهی ثبت نشده است.")" />
}