<script>
    var row = 0, row1 = 0, list_row = 0;
    $(function() {
        (list_row = $("#row_count").val() == -1 ? 0 : parseInt($("#row_count").val()) + 1)
        $(".date").datetimepicker({autoclose: true, pickTime: false, startDate: new Date(), format: 'yyyy-MM-dd'});
        $('#starttime_a').timepicker({'timeFormat': 'H:i', 'step': 5, 'minTime': '6:00', 'maxTime': '22:00'});
        $('#endtime_a').timepicker({'timeFormat': 'H:i', 'step': 5, 'minTime': '6:00', 'maxTime': '22:00'});
        $('.date').datetimepicker().on('changeDate', function(ev) {
            $('.date').datetimepicker('hide');
        });
        $("#activity_student_name").select2();
        $("#activity_staff_name").select2();
    });
    function limit_time(e) {
        var arr = $(e).val().split(":")[0] * 3600 + $(e).val().split(":")[1] * 60 + 15 * 60;
        $(e).parent().next().next().next().children().timepicker('option', {disableTimeRanges: [['6:00', arr]]});
        $(e).parent().next().next().next().children().focus();
        $(e).blur();
    }
    function clear_all() {
        $("#activity_modal input").each(function() {
            $(this).val("");
        })
        $("#activity_student_name").select2('val', '');
        $("#activity_student_list tr").remove();
        $("#activity_staff_list tr").remove();
        $("#activity_staff_name").select2('val', '');
    }
    function Add_activity_data() {
        row = 0;
        var title = $("input[name='title']").val()
        var date = $("input[name='date']").val()
        var st = $("input[name='starttime_a']").val()
        var et = $("input[name='endtime_a']").val()
        var payment = ($("input[name='payment']").val());
        var attend = $("input[name='num_attend']").val()
        if (title === "" || date === "" || st === "" || et === "" || payment === "" || attend === "") {
            alert("Have to input data");
            return;
        }
        $("#table_activity").attr("style", "display: block;");
        $("#table_activity").attr("style", "width: 100%");
        var stu_list = add_stu_tolist();
        var str_stu_list = "";
        for (var i = 0; i < stu_list.length; i++) {
            str_stu_list += stu_list[i][0] + "<input type=\"hidden\" name=\"activity_student_id[" + list_row + "][]\" value=\"" + stu_list[i][1] + "\"/><br/>";
        }
        var staff_list = add_staff_tolist();
        var staff_str_list = "";
        for (var i = 0; i < staff_list.length; i++) {
            staff_str_list += staff_list[i][0] + "<input type=\"hidden\" name=\"activity_staff_id[" + list_row + "][]\" value=\"" + staff_list[i][1] + "\"/><br/>";
        }
        $("#content_of_activity").append(
                "<tr id=\"row_list[" + list_row + "]\">" +
                "<td style=\"width:20px;\"><div class=\"btn-group\" style=\"margin: 5px 10px 5px 5px;\"><button class=\"btn\" type=\"button\" onclick=\"deleted_row_All_list(this);\"><i class=\"icon-remove\"></i></button><a href=\"#activity_modal\" data-toggle=\"modal\" data-backdrop=\"static\" class=\"btn\" onclick=\"edit_modal(" + list_row + ");\"><i class=\"icon-edit\"></i></a></div></td>" +
                "<td>" + title + "<input type=\"hidden\" name=\"activity_title[]\" value=\"" + title + "\"/></td>" +
                "<td>" + date + "<input type=\"hidden\" name=\"activity_date[]\" value=\"" + date + "\"/></td>" +
                "<td>" + st + "<input type=\"hidden\" name=\"activity_st[]\" value=\"" + st + "\"/></td>" +
                "<td>" + et + "<input type=\"hidden\" name=\"activity_et[]\" value=\"" + et + "\"/></td>" +
                "<td>" + "$" + toDollor(payment) + "<input type=\"hidden\" name=\"activity_payment[]\" value=\"" + payment + "\"/></td>" +
                "<td>" + attend + "<input type=\"hidden\" name=\"activity_attend[]\" value=\"" + attend + "\"/></td>" +
                "<td>" + str_stu_list + "</td>" +
                "<td>" + staff_str_list + "</td>" +
                "</tr>"
                );
        clear_all();
        list_row++;
        $('#activity_modal').modal('hide')
    }
    function toDollor(amount) {
        var M = parseFloat(amount).toFixed(2).split(".");
        var dollar = M[0];
        var cent = M[1];
        dollar = dollar.split('').reverse().join("").replace(/(\d{3}(?!$))/g, '$1,').split("").reverse().join("");
        return dollar + '.' + cent.slice(0, 2);
    }
    function activity_student() {
        if ($("#activity_student_name").val() === "")
            return;
        var stu = $("#activity_student_name").val();
        var en_name = stu.split(",")[1];
        var ch_name = stu.split(",")[2];
        var root_id = stu.split(",")[3];
        if (check_list(root_id)) {
            $("#activity_student_list").append(
                    "<tr>" +
                    "<td style=\"width:20px;\"><button class=\"btn\" type=\"button\" onclick=\"deleted_row_stulist(this);\"><i class=\"icon-remove\"></i></button></td>" +
                    "<td>" + en_name + " ( " + ch_name + " ) <input type=\"hidden\" id=\"activity_student_id[" + row + "]\" value=\"" + root_id + "\"/></td>" +
                    "</tr>"
                    );
        }
    }
    function check_list(root_id) {
        var flat = true;
        $("#activity_student_list input").each(function() {
            row++;
            if ($(this).val() === root_id) {
                flat = false;
            }
        });
        return flat;
    }
    function check_list_staff(root_id) {
        var flat = true;
        $("#activity_staff_list input").each(function() {
            row1++;
            if ($(this).val() === root_id) {
                flat = false;
            }
        });
        return flat;
    }
    function deleted_row(e) {
        $(e).parent().parent().remove();
    }
    function deleted_row_stulist(e) {
        deleted_row(e);
        row--;
    }
    function deleted_row_stafflist(e) {
        deleted_row(e);
        row--;
    }
    function deleted_row_All_list(e) {
        $(e).parent().parent().parent().remove();
        list_row--;
    }
    function add_stu_tolist() {
        var student_list = new Array();
        $("#activity_student_list td:odd").each(function() {
            student_list.push(new Array($(this).html().split("<")[0], $(this).children().val()));
        });
        return student_list;
    }
    function add_staff_tolist() {
        var staff_list = new Array();
        $("#activity_staff_list td:odd").each(function() {
            staff_list.push(new Array($(this).html().split("<")[0], $(this).children().val()));
        });
        return staff_list;
    }
    function activity_staff() {
        if ($("#activity_staff_name").val() === "")
            return;
        var stu = $("#activity_staff_name").val();
        var en_name = stu.split(",")[0];
        var ch_name = stu.split(",")[1];
        var root_id = stu.split(",")[2];
        if (check_list_staff(root_id)) {
            $("#activity_staff_list").append(
                    "<tr>" +
                    "<td style=\"width:20px;\"><button class=\"btn\" type=\"button\" onclick=\"deleted_row_stafflist(this);\"><i class=\"icon-remove\"></i></button></td>" +
                    "<td>" + en_name + " ( " + ch_name + " ) <input type=\"hidden\" id=\"activity_student_id[" + row + "]\" value=\"" + root_id + "\"/></td>" +
                    "</tr>"
                    );
        }
    }

</script>

<style>
    .modal-activity {        
        height:70%;
        width: 850px;
        left: 40%;
        top:0;
        margin-top: 1px;
    }
    .modal-body {
        max-height:80%;
        overflow:auto;
    }
</style>

<div id="activity_modal" class="modal modal-activity hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="myModalLabel">Add Activity</h4>
    </div>
    <div class="modal-body">        
        <table style="width: 100%" class="" id="table_top">
            <tr>
                <td style="width: 100px;text-align: right;">Title :</td>
                <td style="width: 10px;"></td>
                <td style="padding-top: 10px;" colspan="5"><input style="width: 70%" type="text" name="title" /></td>
            </tr>
            <tr style="height: 15px;"></tr>
            <tr>
                <td style="text-align: right">Date : </td>
                <td></td>
                <td>
                    <div class="input-append date" id="start_date_div">
                        <input type="text" value="" id="start_date_input" name="date"/>
                        <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </td>
            </tr>
            <tr style="height: 15px;"></tr>
            <tr>
                <td style="text-align: right;">Start Time : </td>
                <td></td>
                <td>
                    <input type="text" id="starttime_a" name="starttime_a" onchange="limit_time(this)"/>
                </td>        
                <td style="text-align: right">End Time : </td>
                <td></td>
                <td>
                    <input type="text" id="endtime_a" name="endtime_a" onchange="limit_time(this)"/>
                </td>
            </tr>
            <tr style="height: 15px;"></tr>
            <tr>
                <td style="text-align: right;">Payment : </td>
                <td></td>
                <td>
                    <div class="input-prepend" style="margin-bottom: 1px;">
                        <button type="button" class="btn" disabled>$</button>
                        <input  type="text" style="text-align: right" name="payment" value="" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')" onkeyup="this.value = this.value.replace(/[^\d]/g, '')"/>            
                    </div>
                </td> 
                <td style="text-align: right">Number of attend : </td>
                <td></td>
                <td><input type="text" name="num_attend" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')" onkeyup="this.value = this.value.replace(/[^\d]/g, '')"/></td>
            </tr>            
        </table>
        <div style="height: 15px;"></div>
        <hr/>
        <div style="height: 15px;"></div>
        <div id="1" style="margin: 0;padding: 5px 10px;background-color: #F7F7F7;border: 1px solid #E6E6E6;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.05);">
            <table style="width: 100%">
                <tr>                    
                    <td><label style="text-align:center;padding-top: 5px;">Student Name</label></td>
                    <td style="width: 10px;"></td>
                    <td>
                        <select id="activity_student_name" >
                            <option></option>
                            <?php $sth = $dbh->query("SELECT root_id,`New_stu_ID` id,CONCAT(last_name, ' ', first_name) studentname,`ch_name`FROM `student` WHERE `actived`=1 and`deleted`=0 group by `New_stu_ID`,`Sem_yr`"); ?>
                            <?php while ($ResultSet = $sth->fetch(PDO::FETCH_ASSOC)) { ?>                                        
                                <option value="<?= $ResultSet['id'] ?>,<?= $ResultSet['studentname'] ?>,<?= $ResultSet['ch_name'] ?>,<?= $ResultSet['root_id'] ?>"><?= $ResultSet['studentname'] ?> ( <?= $ResultSet['ch_name'] ?> )</option>
                            <?php } ?>
                        </select>
                    </td>       
                    <td style="margin-top: 10px;text-align: right;"><a href="#1" class="btn"id="btn_addstudent" onclick="activity_student()"><i class="icon-plus" ></i>Add</a></td>
                </tr>
            </table>             
        </div>
        <div style="height: 15px;"></div>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th></th>
                    <th>Student Name</th>
                </tr>
            </thead>
            <tbody id="activity_student_list"></tbody>
        </table>

        <div style="height: 15px;"></div>

        <div id="2" style="margin: 0;padding: 5px 10px;background-color: #F7F7F7;border: 1px solid #E6E6E6;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.05);">
            <table  style="width: 100%">
                <tr>                    
                    <td style="text-align: center"><label>Staff Name</label></td>
                    <td style="width: 7%"></td>
                    <td>
                        <select id="activity_staff_name" >
                            <option></option>
                            <?php $sth = $dbh->query("SELECT CONCAT(`last_name`,' ',`first_name`) staffname, `ch_name` , `root_id` FROM `staff` WHERE `actived`=1 and `deleted`=0 group by root_id"); ?>
                            <?php while ($ResultSet = $sth->fetch(PDO::FETCH_ASSOC)) { ?>                                        
                                <option value="<?= $ResultSet['staffname'] ?>,<?= $ResultSet['ch_name'] ?>,<?= $ResultSet['root_id'] ?>" ><?= $ResultSet['staffname'] ?> ( <?= $ResultSet['ch_name'] ?> ) </option>
                            <?php } ?>
                        </select>
                    </td>
                    <td style="float: right;"><a href="#2" class="btn" id="btn_addstudent" onclick="activity_staff();"><i class="icon-plus" ></i>Add</a></td>
                </tr>
            </table>                        
        </div>
        <div style="height: 15px;"></div>
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th></th>
                    <th>Staff Name</th>
                </tr>
            </thead>
            <tbody id="activity_staff_list"></tbody>
        </table>        
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal" aria-hidden="true" onclick="clear_all();">Back</button>
        <button type="button" class="btn btn-danger" id="btn_Save_Activity_modal" onclick="Add_activity_data();">Save</button>
    </div>
</div>

<table id="table_activity" style="display: none" class="table table-striped table-bordered table-hover table-condensed">
    <thead>
        <tr>
            <th></th>
            <th style="width: 30%;">Title</th>
            <th>Date</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Payment</th>
            <th>No. Attend</th> 
            <th>Student</th>
            <th>Staff</th>
        </tr>
    </thead>
    <tbody id="content_of_activity">
        <?php
        if (isset($_GET['event_id'])) {
            require_once 'Event_DetailFrom_AddActivity_Editpage.php';
        }
        ?>
    </tbody>
</table>