<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
//$link = mysql_connect($servername, $username, $password);
?>

<html>
    <style>
        .container {
            max-width:960px;
            margin:0 auto;
            background-color:#D6D0C1;
            padding:20px;
        }

        .item {
            width:20%;
            float:left
        }
        label {

        }
        .row {
            margin-top:10px;
            clear:both;
        }

        .clearfix:after { 
            content: "."; 
            visibility: hidden; 
            display: block; 
            height: 0; 
            clear: both;
        }

        select {
            min-width:50%;
        }
        #personTable table{
            width:100%;
        }
        #personTable tr th {
            width:10%;
        }
        
    </style>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $(function(){     
            var persons = [];
            var updateTable = function() {
                    $('#personTable').find('table').empty();
                    
                    //creating the heading part
                    
                        var rows = '';
                        $.each(persons, function(index, person){                             
                            rows += '<tr>';
                            rows += '<td>' + parseInt(index+1) + '</td>';
                            rows += '<td>' + person.firstName + '</td>';
                            rows += '<td>' + person.lastName + '</td>';
                            rows += '<td>' + (person.sex == 'm' ? 'Male' : 'Female') + '</td>';
                            rows += '<td>' + person.course + '</td>';
                            rows += '<td>' + actionLinks + '<input type="hidden" value="' + person.lastInsertedId + '" /></td>';                       
                            rows += '</tr>';
                            
                        });                       
                        
                        $('#personTable').find('table').append(rows); 
            }
                
            //updateTable();    
            $('#add').click(function(e){
                e.preventDefault();                
                var form = $('#personForm').serialize();            
                
                $.ajax({
                    url: "http://localhost/tests/prashob/person.php",
                    type: 'POST',
                    //dataType: 'string',
                    data: form
                }).done(function(lastInsertedId){
                    if(typeof(parseInt(lastInsertedId)) == 'number') {
                        var fname = $('input[name="fname"]').val();
                        var lname = $('input[name="lname"]').val();
                        var sex = $("input[name='sex']:checked").val();
                        var course = $('#course').val();
                                               
                        
                        var newPerson = {id: lastInsertedId, firstName: fname,lastName:lname, sex: sex, course:course};
                        persons.push(newPerson);
                        updateTable();
                        
                        $('input[name="fname"]').val('');
                        $('input[name="lname"]').val('');
                        //$("input[name='sex']").val();
                        $('#course').val(0);
                    }
                })
            })
        })
    </script>
    <body>
        <form method="post" id="personForm">    
            <div class="container clearfix">
                <div style="color:red"><?php echo 'hello world'?></div>
                <div class="row clearfix">
                    <div class="item">
                        <label>Name:</label><br />
                        <input type="text" name="fname" id="fname" /> 
                    </div>
                    <div class="item">
                        <label>Sex:</label><br />
                        <input type="radio" name="sex" value="male" />&nbsp;male 
                        &nbsp;&nbsp;
                        <input type="radio" name="sex" value="female" />&nbsp;female
                    </div>
                    <div class="item">
                        <label>Commy</label><br />
                        <select>
                            <option value="0">--Please select--</option>
                            <option value="muslim">Muslim</option>
                            <option value="lc">LC</option>
                            <option value="ezava">Ezava</option>
                        </select>
                    </div>
                    <div class="item">
                        <label>DOB</label><br />
                        <input type="date" name="dob" value="dob" />
                    </div>                    
                </div>
                <div class="row clearfix">
                    <div class="item">
                        <label>Phone</label><br />
                        <input type="text" nam="phone" />
                    </div>
                    <div class="item">
                        <label>Email</label><br />
                        <input type="email" name="email" />
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="item">
                        <label>Test Mark</label><br />
                        <input type="text" name="testMark" />                        
                    </div>
                    <div class="item">
                        <label>Int Mark</label><br />
                        <input type="text" name="intMark" />                        
                    </div>
                    <div class="item">
                        <label>Wtg</label><br />
                        <input type="text" name="weightage" />                        
                    </div>
                    <div class="item">
                        <label>Total</label><br />
                        <input type="text" name="totalMark" />                        
                    </div>                    
                    <div class="item">
                        <br/><input type="submit" id="add" value="Add" />
                    </div>
                </div>
                <br />
                <div id="personTable">
                    <table border="1px solid black">
                        <tr>
                            <th>Name</th>
                            <th style="width:4%">Sex</th>
                            <th>Commy</th>
                            <th style="width:6%">DOB</th>                            
                            <th style="width:4%">TstMrk</th>
                            <th style="width:4%">IntMrk</th>
                            <th style="width:4%">Wtg</th>
                            <th style="width:6%">Total</th>
                            <th>Phone</th>
                            <th>Email</th>
                        </tr>
                    </table>
                </div>
            </div>    
        </form>
    </body>
</html>
