@model IEnumerable<boilerplate.Models.Item>
@{
    ViewBag.Title = ViewBag.PageTitle;
    Layout = "~/Views/_PanelSideBar.cshtml";
    var itemType = (int)ViewBag.ItemType;
}

<div class="row">
    <!-- Add New Item Form -->
    <div class="col-md-4">
        <div class="card card-custom">
            <div class="card-header">
                <h3 class="card-title">افزودن آیتم جدید</h3>
            </div>
            <div class="card-body">
                @using (Html.BeginForm("AddItem", "Panel", FormMethod.Post))
                {
                    @Html.AntiForgeryToken()
                    @Html.Hidden("Item_Type", itemType)
                    <div class="form-group">
                        <label>@ViewBag.NewItemLabel</label>
                        <input type="text" name="Item_Title" class="form-control" required />
                    </div>
                    <button type="submit" class="btn btn-primary">افزودن</button>
                }
            </div>
        </div>
    </div>

    <!-- List of Existing Items -->
    <div class="col-md-8">
        <div class="card card-custom">
            <div class="card-header">
                <h3 class="card-title">@ViewBag.PageTitle</h3>
            </div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>نام</th>
                            <th style="width: 120px;">عملیات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr id="item-@item.Item_Id">
                                <td>
                                    <span id="title-text-@item.Item_Id">@item.Item_Title</span>
                                    <input type="text" id="title-input-@item.Item_Id" class="form-control d-none" value="@item.Item_Title" />
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-clean btn-icon" title="ویرایش" id="edit-btn-@item.Item_Id" onclick="editItem(@item.Item_Id)">
                                        <i class="fa fa-edit text-primary"></i>
                                    </button>
                                    <button class="btn btn-sm btn-clean btn-icon d-none" title="ذخیره" id="save-btn-@item.Item_Id" onclick="saveItem(@item.Item_Id)">
                                        <i class="fa fa-save text-success"></i>
                                    </button>
                                    <button class="btn btn-sm btn-clean btn-icon" title="حذف" onclick="deleteItem(@item.Item_Id)">
                                        <i class="fa fa-trash text-danger"></i>
                                    </button>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Script {
    <script>
    function editItem(id) {
        // مخفی کردن متن و نمایش کادر ویرایش
        $('#title-text-' + id).addClass('d-none');
        $('#title-input-' + id).removeClass('d-none').focus();

        // مخفی کردن دکمه ویرایش و نمایش دکمه ذخیره
        $('#edit-btn-' + id).addClass('d-none');
        $('#save-btn-' + id).removeClass('d-none');
    }

    function saveItem(id) {
        var newTitle = $('#title-input-' + id).val();

        if (!newTitle.trim()) {
            toastr.error("نام نمی تواند خالی باشد.");
            return;
        }

        $.post("@Url.Action("UpdateItem", "Panel")", { id: id, newTitle: newTitle }, function(data) {
            if (data.success) {
                // آپدیت متن و بازگشت به حالت نمایش
                $('#title-text-' + id).text(newTitle).removeClass('d-none');
                $('#title-input-' + id).addClass('d-none');

                $('#edit-btn-' + id).removeClass('d-none');
                $('#save-btn-' + id).addClass('d-none');
                toastr.success("آیتم با موفقیت ویرایش شد.");
            } else {
                toastr.error("خطا در ویرایش: " + (data.message || ""));
            }
        }).fail(function() {
            toastr.error("خطا در برقراری ارتباط با سرور.");
        });
    }

    function deleteItem(id) {
        if (confirm("آیا از حذف این آیتم مطمئن هستید؟")) {
            $.post("@Url.Action("DeleteItem", "Panel")", { id: id }, function(data) {
                if (data.success) {
                    $("#item-" + id).fadeOut();
                    toastr.success("آیتم با موفقیت حذف شد.");
                } else {
                    toastr.error("خطا در حذف آیتم.");
                }
            });
        }
    }
    </script>
}