@model GheyasPlusShop.Models.Home.ContactUsModel
@section styles
{
    <style>
        body {
            background-color: #f6f6f6;
        }

        .has-float-label{
            margin-bottom:24px;
        }
        .dropdown-toggle::after {
            display: none !important;
        }
    </style>
}

@*ContactUs-list*@
<div id="ContactUs-list" style="padding: 15px;">
    <div class="d-flex justify-content-end py-2 w-100" >
        <button type="button" class="button-accept float-left" onclick="showContactUs()">مشاهده</button>
    </div>
    <div class="grid" id="gridListContactUs" style="height: calc(100vh - 78px);position: relative;">
        <table>
            <thead>
                <tr>
                    <td data-id="code" style="min-width:50px;width:50px;">کد</td>
                    <td data-id="name" style="min-width:230px;width:230px;">نام و نام خانوادگی</td>
                    <td data-id="tell" style="min-width:100px;width:100px;">تلفن تماس</td>
                    <td data-id="email" style="min-width:100px;width:100px;">ایمیل</td>
                    <td data-id="regdatepersian" style="min-width:80px;width:80px;">تاریخ ثبت</td>
                    <td data-id="subject" style="min-width:150px;width:150px;">عنوان</td>
                    <td data-id="description" style="min-width:100%;width:100%;">متن پیام</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

@*ContactUs-show*@
<div class="modal fade" id="ContactUs-show" role="dialog">
    <div class="modal-dialog" style="max-width:538px;">
        <div class="modal-content">
            <div class="modal-header">
                <label class="modal-title" style="font-size: 14px; font-weight: bold;">نمایش مشخصات تماس گیرنده</label>
                <button type="button" class="close" data-dismiss="modal">
                    <img src="~/App_Images/index/Close.svg" class="close-svg" />
                </button>
            </div>
            <div class="modal-body" style="padding:20px;background-color: #f0f8f9;height: calc(100vh - 120px);">
                <div class="col-12 has-float-label">
                    <span class="label-value-readonly" id="name-contactUs"></span>
                    <span>نام و نام خانوادگی</span>
                </div>
                <div class="col-12 has-float-label">
                    <span class="label-value-readonly" id="tell-contactUs"></span>
                    <span>تلفن تماس</span>
                </div>
                <div class="col-12 has-float-label">
                    <span class="label-value-readonly" id="email-contactUs"></span>
                    <span>ایمیل</span>
                </div>
                <div class="col-12 has-float-label">
                    <textarea class="textarea-control" id="subject-contactUs" style="height:54px;" disabled="disabled"></textarea>
                    <span>عنوان</span>
                </div>
                <div class="col-12 has-float-label">
                    <textarea class="textarea-control" id="desc-contactUs" style="height:150px;" disabled="disabled"></textarea>
                    <span>متن پیام</span>
                </div>
            </div>
        </div>
    </div>
</div>


@section scripts{
    <script>
        closeLoading();
        loadGrid("gridListContactUs");
        $("#gridListContactUs").gridBuilder().setCaption(" لیست تماسها ");

        function loadGrid(gridId) {
            var gridBuilder = $("#gridListContactUs").gridBuilder();
            ajax({
                loading: true,
                url: "Admin/LoadGridListContactUs",
                data: JSON.stringify({
                    filter: gridBuilder.getFilter(),
                    sort: gridBuilder.getSortFields(),
                    pageNo: gridBuilder.getCurrentPageNumber()
                }),
                success: function (result) {
                    gridBuilder.loadData(result);
                }
            });
        }


        function showContactUs() {
            code = Number($("#gridListContactUs").gridBuilder().getActiveRowCellValue("Code"));
            if (!code)
                return;
            $("#ContactUs-show").modal("show");
            ajax({
                loading: true,
                url: "Admin/SetDataShowContactUs",
                data: JSON.stringify({ code: code }),
                success: function (result) {
                    $("#name-contactUs").text(result.Name);
                    $("#tell-contactUs").text(result.Tell);
                    $("#email-contactUs").text(result.Email);
                    $("#subject-contactUs").val(result.Subject);
                    $("#desc-contactUs").val(result.Description);
                }
            });
        }


    </script>
}
