@model List<Info>

@{
    ViewBag.Title = "InfoPage";
}
</br></br></br></br>

<div id="DetailDIV"></div>

<table class="table table-bordered table-responsive table-hover">
    <tr>
        <th>Info</th>
        <th>stuff</th>
        <th>more info</th>
        <th>Created</th>
    </tr>
    @foreach (var item in Model)
    {
    <tr onclick="DetailedView(@item.Info_ID)">
        <td>
            @item.InfoTitle
        </td>
        <td>
            @item.stuff
        </td>
        <td>
            @item.moreInfo
        </td>
        <td>
            @item.Create_Date
        </td>
    </tr>
    }
</table>


    function DetailedView(id) {
        var url = '@Url.Action("GetInfoModal", "Info", new { Info_ID = "replaceToken" })'.replace("replaceToken", id);
        $("#DetailDIV").load(url, function (responseTxt, statusTxt, xhr) {
            // debugger;
            if (statusTxt == "success") {
                $('body #DetailModal').modal('show');
            }
            if (statusTxt == "error") {
                console.log("Error: " + xhr.status + ": " + xhr.statusText);
            }
        });
    }
</script>

@model Info


<!-- Modal -->
<div class="modal fade" id="DetailModal" tabindex="-1" role="dialog" aria-labelledby="DetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="DetailModalLabel">@Model.InfoTitle</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="col-md-6">
                        more info stuff...
                    </div>
                    <div class="col-md-6">
                        even more info stuff
                    </div>
                    <div width="100%">
                        <button id="QuestionButton" type="button" class="btn btn-primary" onclick="OpenQuestionBox()">Message</button>
                        <div id="QuestionBox" hidden>
                            <textarea id="QuestionContent" placeholder="Question Content"></textarea>
                            <button type="button" class="btn btn-primary" onclick="SendQuestion(@Model.info_ID)">Send Message</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" data-dismiss="modal">Close</button>
                    @*<button type="submit" class="btn btn-primary">Save Changes</button>*@
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function OpenQuestionBox() {
        $('#QuestionButton').hide();
        $('#QuestionBox').show();
    }
    }
</script>

$.ajax({
            url: '@Url.Action("SendQuestion", "Info", new { content = "Content~text", InfoID = "Info_id" })'.Replace("Content~text", text).Replace("Info_id", id),
            type: 'POST',
            dataType: 'json',
            data: {
                content: text,
                Info_id: id
            },
            success: function (result) {
                alert(result);
            }
        });