@model EmailViewModel

@{
    ViewData["Title"] = "ListAllEmails";
}

<h2></h2>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Subject</th>
            <th>ReceivedOn</th>
            <th>Sender</th>
            <th>Status</th>
            <th>Attachment</th>
            <th>Details</th>
        </tr>
    </thead>
</table>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!-- Modal Body -->
            <div class="modal-body"></div>

            <div class="modal-footer">
                <form asp-controller="Email" asp-action="ChangeValidStatusAsync">
                    <button type="button" class="btn btn-default" id="New" data-dismiss="modal">New</button>
                </form>
                <form asp-controller="Email" asp-action="ChangeInValidStatus">
                <button type="submit" class="btn btn-default" id="NotValid" data-dismiss="modal">Not Valid</button>
                </form>
                @if (User.IsInRole("Manager"))
                {
                    @*<form asp-controller="Email" asp-action="ChangeStatus" asp-route-EmailId="@Model.Id" method="post">*@
                    <button type="submit" class="btn btn-default">Not Reviewed</button>
                    @*</form>*@
                }
            </div>
        </div>
    </div>
</div>

@section Scripts

    {
    <link rel="stylesheet" type="text/css" href="~/lib/DataTables/datatables.css">
    <script type="text/javascript" language="javascript" src="~/lib/DataTables/datatables.js"></script>
    <script src="~/js/site.js"></script>
    <script type="text/javascript" src="~/lib/toast-1.4/toast/toast.js"></script>
    <link rel="stylesheet" type="text/css" href="~/lib/toast-1.4/toast/toast.css">
    <script type="text/javascript" class="init">

        var table = $('#table_id').DataTable({
            "ordering": false,
            "processing": true,
            "serverSide": true,
            //"orderCellsTop": true,
            //"fixedHeader": true,

            "ajax": {
                "url": "@Url.Action("ListAllEmails", "Email")",
                "type": 'POST',
                "dataType": "JSON",
            },

            "columns": [
                { "data": "Id" },
                { "data": "Subject" },
                { "data": "ReceivedOn"},
                { "data": "MerchantEmail" },
                { "data": "EmailStatusType" },
                { "data" : "EmailAttachmentsCount",
                    "render": function (data, type, row) {

                        if (row.EmailAttachmentsCount > 0) {
                            return '<img src="/images/paperclip-vector-paper-clamp-3.png" style="width:18px" />';
                        } else {
                            return 'no attachments'
                        }
                    }
                },
                {
                    "render": function (data, type, email, meta) {
                        return '<button class="details" data-toggle="modal" data-target="#myModalNorm" data-emailid="' + email.Id + '">See more</button>';
                   }
                }
            ]
        });

        $('#myModalNorm').on('shown.bs.modal', function (e) {
            console.log(e);
            var $modal = $(this);
            $body = $modal.find(".modal-body");
            var emailId = $(e.relatedTarget).data('emailid');
            var url = "/Email/Details/" + emailId;
            $.get(url)
                .done(function (responseData) {
                    $body.html(responseData);
                    console.log($('#New'));
                    console.log($('#NotValid'))
                    $('#New').data('emailId', emailId);
                    $('#NotValid').data('emailId', emailId);
                })
        })

        $(function () {
            $('#New').click(function (e) {
                e.preventDefault();
                var id = $(this).data('emailId');

                $.post("/Email/ChangeValidStatusAsync/", { emailId: id }, function (response) {
                    console.log(response);
                    $toast.success('Have fun storming the castle!', 'Miracle Max Says')
                });
            });
        });


        $(function () {
            $('#NotValid').click(function (e) {
                e.preventDefault();
                var id = $(this).data('emailId');

                $.post("/Email/ChangeInValidStatusAsync/", { emailId: id }, function (response) {
                    console.log(response);
                    $toast.success('Have fun storming the castle!', 'Miracle Max Says')
                });
            });
        });

        //$(document).ready(function () {
        //    "Subject, ReceivedOn, Sender, Status, Attachment, Details"
        //    $('#table_id thead tr').clone(true).appendTo('#table_id thead');
        //    $('#table_id thead tr:eq(1) th').each(function (i) {
        //        var title = $(this).text();
        //        $(this).html('<input type="text" placeholder="Search ' + title + '" />');

        //        $('input', this).on('keyup change', function () {
        //            if (table.column(i).search() !== this.value) {
        //                table
        //                    .column(i)
        //                    .search(this.value)
        //                    .draw();
        //            }
        //        });
        //    });
        //});
    </script>
}