//For search country function
$("#search-btn").on("click", function ()
    {
        if(document.getElementById("search").value.length < 3)
        {
            alert("The characters MUST NOT be less than 3!");
            return false;
        }


        $("#records").empty();
        $(".records").empty();
        $('.searchResults').empty();

        var searchCountry = $("#search").val();

        $.get(
                'searchCountryRecords.php',
                {id: searchCountry}, //left->sql id ,right->script id
                function (data)
                {
                    if (!$.trim(data)){
                        alert("No country with that name is found!");
                        return false;
                    }

                    var userRole = "<?php echo $userRole; ?>";

                    var string = "";

                    string += '<table id="tbl_countries" class="table table-bordered table-hover">';
                    string += '<tr>';
                    string += '<th>Flag</th>';
                    string += '<th>Country Name</th>';
                    string += '<th width=200px>Region</th>';
                    string += '<th>Surface Area</th>';
                    string += '<th>Population</th>';
                    string += '<th width=150px>Independent Year</th>';
                    string += '<th width=100px>City Details</th>';
                    if (userRole === "admin")
                    {
                        string += '<th width=100px>More Details</th>';
                        string += '<th width=100px>Update Details</td>';
                        string += '<th width=100px>Upload Flag</td>';
                    }
                    string += '</tr>';

                    /* from result create a string of data and append to the div */
                    $.each( data, function( key, value )
                    {
                        $("#records").empty();
                        string += "<tr>";
                        //string += "<td>"+"<img src='data:image/png;base64,base64_encode("+value['image']+")"+"'/>"+"</td>";
                        string += "<td>"+"<img src='data:image/jpeg;base64', value="+value['image']+">"+"</td>";
                        string += "<td>"+value['Name']+"</td>";
                        string += "<td>"+value['Region']+"</td>";
                        string += "<td>"+value['SurfaceArea']+"</td>";
                        string += "<td>"+value['Population']+"</td>";
                        string += "<td>"+value['IndepYear']+"</td>";
                        string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#cityModal' id='city_details' name='city_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
                        if (userRole === "admin")
                        {
                        string += "<td>"+"<button class='btn btn-block btn-info btn-sm' data-toggle='modal' data-target='#countryModal' id='more_details' name='country_details' type='submit' value='" + value['A3Code'] + "'><span class='glyphicon glyphicon-info-sign'></button>" + "</td>";
                        string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#updateModal' id='update_HOS' name='update_HOS' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-edit'></i></button>" + "</td>";
                        string += "<td>"+"<button class='btn btn-block btn-default btn-sm' data-toggle='modal' data-target='#uploadModal' id='upload_flag' name='upload_flag' type='submit' value='" + value['A3Code'] + "'><i class='fa fa-flag'></i></button>" + "</td>";
                        }
                    string += "</tr>";
                    });

                    string += '</table>';
                    $("#records").append(string);
                }
            );
    }); // end of search function