<?php

global $wpdb;

$tablename = $wpdb->prefix.'findus_city';

if(isset($_REQUEST['add_new_city'])){

    $city_name =  $_POST['city_name'];
    $data=array('city_name' => $city_name);
    //var_dump($data);
    $wpdb->insert( $tablename , $data );

    echo "<div id='message' class='updated'><p><strong>City added successfully</strong></p></div>";

}

if (isset($_REQUEST['edit_city'])) {

        $i = 0;

        foreach($_POST['city_id_del'] as $cityData){

            $city_id_del =  $_POST['city_id_del'][$i]; 
            $delete_command = "DELETE FROM " . $tablename ." where id=".$city_id_del ;
            $result = $wpdb->query($delete_command);
            $i++;

        }

        echo "<div id='message' class='updated'><p><strong>Cities deleted successfully</strong></p></div>";

}


$cities = $wpdb->get_results( $wpdb->prepare( "SELECT * FROM $tablename"), ARRAY_A);


?>

    <div class="postbox">

        <h3>Add New City </h3>

        <form action="" method="post">
            <table>
                <tr id="row">
                    <td><label>City Name</label></td>
                    <td><input type="text" name='city_name' value="" ></td>
                    <td> <input type="submit" name="add_new_city" class="button-primary" value="Submit" /></td>
                </tr>
            </table>
        </form>

        <br/>

        <h3 class="hndle"><label for="title">Edit/Delete Cities</label></h3>

        <div class="inside">
            <form action="" method="post">
                <div class="offers_container">
                    <table class="table table-bordered wp-list-table fixed widefat striped" id="dynamic_field">  
                        <thead>
                            <tr>
                                <td width="100"></td>
                                <td>City Name</td>
                                <td></td>
                            </tr>
                        </thead>

                        <?php $i=1;foreach($cities as $city):?>

                            <!-- <tr id="row<?=$i?>"> -->
                            <tr id="<?=$city['id']?>">
                                <td width="100"><input type="checkbox" name="city_id_del[]" value="<?=$city['id']?>"></td>
                                <!-- <td><input type="text" name='city_name[]' value="<?=$city['city_name']?>" ></td> -->
                                <td><label><?=$city['city_name']?></label></td>
                                <td><button type="button" name="remove" id="<?=$i?>" class="button-primary btn_remove">Remove</button></td> 
                            </tr>

                        <?php $i++; endforeach; ?>

                        <!-- <tr>  

                            <td><input type="text" name='city_name[]' ></td>

                            <td><button type="button" name="add" id="add" class="btn btn-success">Add more</button></td>

                        </tr> -->

                    </table>

                </div><br/>

                <input type="hidden" name="city_id" value="<?=$id?>">
                <input type="hidden" name="cities_count" id="cities_count" value="<?php echo count($cities); ?>">
                <input type="submit" name="edit_city" class="button-primary" value="Remove All Selected" />
                <a class="cancel-action" href="admin.php?page=add-city-slug">Cancel</a>

            </form>



        </div>

    </div><!-- end of .postbox -->

    
<script type="text/javascript">

    var i = jQuery('#cities_count')+1;

    jQuery('#add').click(function(){   

        i++; 
       jQuery('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="city_name[]" id="city_name'+i+'" ></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');        

    });  



   /* jQuery(document).on('click', '.btn_remove', function(){  

        var button_id = jQuery(this).attr("id");   
        jQuery('#row'+button_id+'').remove();  

    }); */


    jQuery(".btn_remove").click(function(){

        var id = jQuery(this).parents("tr").attr("id");
        if(confirm('Are you sure to remove this record ?'))

        {

            jQuery.ajax({

               url: '<?=FIND_US_URL?>/backend/delete.php',
               type: 'GET',
               data: {cid: id},
               error: function() {
                  alert('Something is wrong');
               },
               success: function(data) {
                    jQuery("#"+id).remove();

                    alert("Record removed successfully");  

               }

            });

        }

    });


</script>