<style type="text/css">
@media print
{
.noprint {display:none;}
}
</style>
<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" onclick="openaddnew();" class="btn btn-custom waves-effect waves-light" >Add <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                    
                </div>
                <h4 class="page-title">Cities</h4>
            </div>
            
            
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card-box table-responsive">
                    
                    <h4 class="header-title m-t-0 m-b-30">&nbsp;</h4>

                    <table id="datatable-buttons" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                
                                <th>ID</th>
                                <th>City Name</th>
                                <th>Province</th>                                
                                <th>County</th>
                                <th class='noprint'>Edit</th>
                                <th class='noprint'>City Areas</th>
                            </tr>
                        </thead>

                        <tbody>
                            <?php if(isset($cities)) { foreach ($cities as $city){ ?>
                            <tr>
                                
                                <td><?php echo $city['id_cities']; ?></td>
                                <td><?php echo $city['city']; ?></td>
                                <td><?php echo $city['province']; ?></td>
                                <td><?php echo $city['country']; ?></td>
                                <td class='noprint' > 
                                    <button id='btnedit' onclick="openupdate(<?php echo $city['id_cities']; ?>);" class="btn btn-icon waves-effect waves-light btn-info m-b-5"> <i class="fa fa-keyboard-o"></i> </button> 
                                </td>
                                <td class='noprint' > 
                                    <a href="<?php echo base_url();?>city_areas/<?php echo $city['id_cities']; ?>" class="btn btn-icon waves-effect waves-light btn-warning m-b-5"> <i class="fa fa-map-marker"></i> Areas</a> 
                                </td>
                            </tr>
                            <?php }} ?>
                        </tbody>
                    </table>
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->
        
        <!--Modals-->
        
        <!--Add Service Category Modal-->
        <div id="addcity" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addcity" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Add a new cities</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txtcity" class="control-label">City Name</label>
                                    <input type="text" class="form-control" placeholder="City Name" id="txtcity" name="txtcity">
                                </div> 
                            </div> 
                        </div>
                         
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txtprovince" class="control-label">Province</label>
                                    <input class="form-control" placeholder="Province" id="txtprovince" name="txtprovince" >
                                </div> 
                            </div> 
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txtcountry" class="control-label">Country</label>
                                    <input class="form-control" placeholder="Country" id="txtcountry" name="txtcountry" >
                                </div> 
                            </div> 
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <button onclick="addnew();" type="button" class="btn btn-custom waves-effect waves-light">Save</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Service Category Modal-->
        
        <!--Edit Businenss cities Modal-->
        <div id="editcity" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="editcity" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Edit City</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txteditidcities" class="control-label">ID</label>
                                    <input readonly="readonly" type="text" class="form-control" id="txteditidcities" name="txteditidcities">
                                </div> 
                            </div> 
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txteditcity" class="control-label">Name</label>
                                    <input type="text" class="form-control" placeholder="City Name" id="txteditcity" name="txteditcity">
                                </div> 
                            </div> 
                        </div>
                         <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txteditprovince" class="control-label">Province</label>
                                    <input type="text" class="form-control" placeholder="Province" id="txteditprovince" name="txteditprovince">
                                </div> 
                            </div> 
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txteditcountry" class="control-label">Province</label>
                                    <input type="text" class="form-control" placeholder="Country" id="txteditcountry" name="txteditcountry">
                                </div> 
                            </div> 
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <button onclick="update();" type="button" class="btn btn-custom waves-effect waves-light">Save</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Edit Service Category Modal-->
        
        
        
        <script>
           $(document).ready(function() {

                $('#datatable-buttons').DataTable({
                    lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    stateSave: true,
                    <?php if(DOWNLOAD == true || $this->session->userdata('role') == 'Admin' || $this->session->userdata('role')=='Super User'){ ?>
                    dom: "Bfrtlip",
                    buttons: [{extend: "copy", className: "btn-sm btn-custom btn-trans"}, {extend: "csv", className: "btn-sm btn-pink btn-trans"}, {
                            extend: "excel",
                            className: "btn-sm btn-warning btn-trans"
                        }, {extend: "pdf", className: "btn-sm btn-purple btn-trans"}],
                    <?php } else { ?>
                        dom: "frtlip",
                    <?php } ?> 
                    responsive: !0
                });
                
                toastr.options = {
                   "closeButton": true,
                   "debug": true,
                   "newestOnTop": true,
                   "progressBar": true,
                   "positionClass": "toast-bottom-center",
                   "preventDuplicates": true,
                   "onclick": null,
                   "showDuration": "300",
                   "hideDuration": "1000",
                   "timeOut": "5000",
                   "extendedTimeOut": "1000",
                   "showEasing": "swing",
                   "hideEasing": "linear",
                   "showMethod": "fadeIn",
                   "hideMethod": "fadeOut"
               }
                
            });
            
            
            function openaddnew(){
                //alert('ok');
                $("#addcity").modal('show');
            }
            
            
            function addnew(){
                if($("#txtcity").val()!== ""){
                $.ajax({
                        type: 'POST',
                        url: '<?php echo base_url();?>cities_controller/add_city',
                        data: {
                            city: $("#txtcity").val(),
                            province: $("#txtprovince").val(),
                            country: $("#txtcountry").val()                                                        
                        },
                        success: function(data) {
                            var result = data.split("|");
                            if (result[0] === "success") {
                                toastr.success(result[1], ' New City Added');
                                location.reload();
                            }
                        }
                    });
                }
            }
            
            
            function openupdate(id_cities){
                $("#txteditcityid").eq(1).prop('selected', true);
                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url(); ?>cities_controller/get_a_city',
                    data: {id_cities: id_cities},
                    dataType: "json",
                    cache: false,
                    async: true,
                    success: function(data){
                        //console.log(data);
                        for(x=0; x<data.length;x++){
                            //console.log(data[x]);
                            $("#txteditidcities").val(data[x].id_cities);
                            $("#txteditcity").val(data[x].city);
                            $("#txteditprovince").val(data[x].province);
                            $("#txteditcountry").val(data[x].country);
                        }
                        $("#editcity").modal('show');
                        
                    }
                });
            }
            function update(){
                if($("#txteditidcities").val()!== ""){
                $.ajax({
                        type: 'POST',
                        url: '<?php echo base_url(); ?>cities_controller/update_city',
                        data: {
                            id_cities: $("#txteditidcities").val(), 
                            city: $("#txteditcity").val(), 
                            province: $("#txteditprovince").val(),
                            country: $("#txteditcountry").val()
                            
                        },
                        success: function(data) {
                            var result = data.split("|");
                            if (result[0] === "success") {
                                toastr.success(result[1], ' cities Updated');
                                location.reload();
                            }
                        }
                    });
                }
            }
          

        </script>