@{
    ViewBag.Title = "Reminder";
}


<script type="text/javascript" src="../Projectscript/ReminderMaster.js"></script>
<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>

@*<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/forms/selects/select2.min.css">*@


@*<div class="row">
    <div class="col-sm-12">
        <div class="content-header">Reminder Board</div>
        <p class="content-sub-header"></p>
    </div>
</div>*@
<!-- Taskboard Starts -->

<div class="myData" data-x="M130" />
<section id="taskboard">

    @*<div class="row">
        <div class="col-md-3 col-12">
            <h4 class="ml-2 mt-2 text-bold-500">
                <i class="ft-list mr-1"></i> To Dos
            </h4>
            <div class='dragdrop-container' id='drag-todos'>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 primary float-left">Responsive</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.'</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-3.png" class="rounded-circle width-50 mr-2">
                        <span class="primary">May 17</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 primary float-left">QA Testing</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-3.png" class="rounded-circle width-50 mr-2">
                        <span class="primary">June 17</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 primary float-left">Budget</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-3.png" class="rounded-circle width-50 mr-2">
                        <span class="primary">May 27</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-12">
            <h4 class="ml-2 mt-2 text-bold-500">
                <i class="ft-trending-up mr-1"></i> In Progress
            </h4>
            <div class='dragdrop-container' id='drag-in-progress'>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 info float-left">checklist</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-1.png" class="rounded-circle width-50 mr-2">
                        <span class="info">Apr 11</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 info float-left">Navigation</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-1.png" class="rounded-circle width-50 mr-2">
                        <span class="info">Apr 11</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 info float-left">Bootstrap 4</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-1.png" class="rounded-circle width-50 mr-2">
                        <span class="info">Apr 11</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-12">
            <h4 class="ml-2 mt-2 text-bold-500">
                <i class="ft-thumbs-up mr-1"></i>Completed
            </h4>
            <div class='dragdrop-container' id='drag-completed'>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 success float-left">Angular 5</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-7.png" class="rounded-circle width-50 mr-2">
                        <span class="success">Aug 22</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 success float-left">Fields</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-7.png" class="rounded-circle width-50 mr-2">
                        <span class="success">Aug 22</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 success float-left">Task board</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-7.png" class="rounded-circle width-50 mr-2">
                        <span class="success">Aug 22</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-12">
            <h4 class="ml-2 mt-2 text-bold-500">
                <i class="ft-alert-octagon mr-1"></i>On Hold
            </h4>
            <div class='dragdrop-container' id='drag-on-hold'>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 warning float-left">Assessment</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-5.png" class="rounded-circle width-50 mr-2">
                        <span class="warning">Jun 19</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 warning float-left">Schedule</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-5.png" class="rounded-circle width-50 mr-2">
                        <span class="warning">Jun 19</span>
                    </div>
                </div>
                <div class="card">
                    <div class="card-block pt-3">
                        <div class="clearfix">
                            <h5 class="text-bold-500 warning float-left">Unit tests</h5>
                            <div class="actions float-right">
                                <i class="ft-edit mr-1 info"></i>
                                <i class="ft-trash-2 danger"></i>
                            </div>
                        </div>
                        <p>Etiam porta sem malesuada magna mollis euismod.</p>
                        <img src="../app-assets/img/portrait/small/avatar-s-5.png" class="rounded-circle width-50 mr-2">
                        <span class="warning">Jun 19</span>
                    </div>
                </div>
            </div>
        </div>
    </div>*@

 
    <section class="taskboard-app-form bg-blue-grey bg-lighten-5">
        <div id="Entry">
          
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                            <h4 class="card-title mb-0">Reminder</h4>
                        </div>
                        <div class="card-body">
                            <div class="px-3">
                                <div class="card-content collapse show">
                                    <div class="card-body">
                                        <div style="height:15px;"></div>
                                        <form action="#">
                                            <div class="form-body">



                                                <div class="row">
                                                    <div class="col-md-5" style="margin-left:70px">
                                                        <div class="form-group row">
                                                            <label>To<span class="danger">*</span></label>
                                                            <div class="col-md-8">
                                                                <input type="text" id="UserName" class="form-control" />
                                                                <input type="hidden" id="UserId" class="form-control" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5" style="margin-left:20px">
                                                        <div class="form-group row">
                                                            <label for="Date">Date<span class="danger">*</span></label>
                                                            <div class="col-md-8">
                                                                <input type="text" id="Date" class="form-control" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div style="margin-left:-20px">
                                                        <button type="button" style="width:100px" id="btnsubmit" class="btn btn-primary btn-min-width mr-1 mb-1">
                                                            <u>S</u>ave <i class="fa fa-check-square-o"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-5" style="margin-left:50px">
                                                        <div class="form-group row">
                                                            <label>Time<span class="danger">*</span></label>
                                                            <div class="col-md-8">
                                                                <input type="Time" id="Time" class="form-control" name="time">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-5" style="margin-left:20px">
                                                        <div class="form-group row">
                                                            <label>Subject<span class="danger">*</span></label>
                                                            <div class="col-md-8">
                                                                <input type="text" id="Subject" class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <button type="button" style="width:100px" id="btnlist" onclick="GetRows(0)" class="btn btn-primary btn-min-width mr-1 mb-1">
                                                        List <i class="ft-align-justify"></i></button>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-5" style="margin-left:20px">
                                                        <div class="form-group row">
                                                            <label>Message<span class="danger">*</span></label>
                                                            <div class="col-md-8">
                                                                <textarea id="ReminderMessage" rows="5" class="form-control"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div style="margin-left:788px">
                                                        <button type="button" style="width:100px" id="btnnew" onclick="formrefresh()" class="btn btn-primary btn-min-width mr-1 mb-1">Clear <i class="ft-refresh-cw position-right"></i></button>
                                                     @*   <button style="display:none" type="button" id="btndelete" class="btn btn-primary btn-min-width mr-1 mb-1">Delete <i class="fa fa-times"></i></button>*@
                                                    </div>
                                                </div>

                                            </div>
                                        
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </section>




    <div style="display:none;" id="listing">
        <section>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <table width="100%">
                                <tr>
                                    <td><h4 class="card-title">Reminder List</h4></td>
                                    <td align="right">
                                        <div class="heading-elements">
                                            <div class="btn-group">
                                                <button type="button" onclick="closetable(1)" class="btn btn-outline-primary"><i class="ft-edit"></i> Add New</button>
                                                <button type="button" class="btn btn-outline-primary"><i class="ft-edit"></i> Export</button>
                                                <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                    <span class="sr-only">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Excel</a>
                                                    <a class="dropdown-item" href="#">PDF</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Print</a>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>


                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body card-dashboard">
                                <table id="tblreminder" class="table table-striped table-bordered base-style dataTable"></table>
                                <br />

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>


    <script>

    $("#UserName").autocomplete({
        source: function (request, response) {
            var data = {};
            data.UserName = $("#UserName").val();
            $.ajax({
                url: '../Master/UserSearch',
                type: "POST",
                data: data,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    response($.map(data, function (item) {
                        return ({
                            ColCount: '1',
                            label: item.UserName,
                            label1: item.UserName,
                            label2: item.UserId,
                            UserId: item.UserId,
                        })
                    }));
                }

            })

        },
        autoFocus: true,
        select: function (event, ui) {
            $('#UserId').val(ui.item.UserId);
            $('#UserName').val(ui.item.UserName);

        },

    });





    $(function () {

            $('#Date').daterangepicker({
                minDate: minDate,
                maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'DD/MM/YYYY'
                }

            });



        });
    </script>


    <div style="display:none"><input type="text" value="0" id="ReminderId" /></div>
    @*<script src="../../../app-assets/vendors/js/forms/select/select2.full.min.js" type="text/javascript"></script>
        <script src="../../../app-assets/js/scripts/forms/select/form-select2.min.js" type="text/javascript"></script>*@