@{
    ViewBag.Title = "Index";
}

<div class="content-header row">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/Dashboard/Index">Home</a>
                
            </li>
            
            <li class="breadcrumb-item active">
               Cities
            </li>
        </ol>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">List of All Cities</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                    <a href="@Url.Action("Create","Cities")" class="btn btn-primary btn-square" style="padding:0.5rem 1rem"><i class="icon icon-plus white"></i> Add New</a>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block">
                    <div class="table-responsive">

                        <table class="table table-condensed table-bordered table-hover" id="dgvCities" style="width:100%">
                            <thead class="thead-default">
                                <tr>
                                    <th>Select</th>
                                    <th>
                                        @Html.DisplayName("Id")
                                    </th>
                                    <th>
                                        @Html.DisplayName("City Name")
                                    </th>
                                    <th>
                                        @Html.DisplayName("Country")
                                    </th>
                                  
                                    <th>                                        
                                        @Html.DisplayName("Active")
                                    </th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                
                                
                            </tbody>

                        </table>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <button type="button" id="btnStatus" class="btn mr-1 mb-1 btn-danger pull-right" disabled><i class="icon-trash-o"></i> Delete Range</button>
                        </div>
                    </div>   
                    </div>
                </div>
            </div>
        </div>
    </div>




@section Scripts {
    <script type="text/javascript">

        $(document).ready(function ()    {

            var Shipmentds = [];

            var oTable = $('#dgvCities').DataTable({
                "serverSide": true,
                "ajax": {
                    "type": "POST",
                    "url": '/Cities/DataHandler',
                    "contentType": 'application/json; charset=utf-8',
                    'data': function (data) { return data = JSON.stringify(data); }
                },
              
                "processing": true,
                "paging": true,
                "deferRender": true,
                "columns": [
                    {
                        'data': 'Id',
                        'searchable': false,
                        'sortable': false,
                        'render': function (Id) {
                            return "<input type='checkbox'  name='CityIds[]' value='" + Id + "' class='js-Select' />";
                        }
                    },
               { "data": "Id" },
               { "data": "Name" },
               { "data": "CountryName" },
               {
                   "data": "Active",
                   'render': function (active) {
                       if (active) {
                           return "<label class='tag tag-success'>" + active + "</label>";
                       }
                       else {
                           return "<label class='tag tag-danger'>" + active + "</label>";
                       }
                   }
               },

               {
                   'data': 'Id',
                   'searchable': false,
                   'sortable': false,
                   'render': function (cityId) {
                       return "<a href='/Cities/Edit?id=" + cityId + "' class='btn js-Edit btn-icon btn-pure' data-toggle='tooltip' title='Edit City'><i class='icon-edit info'></i></a> <a href='/Cities/Active?id=" + cityId + "' class='btn js-Active btn-icon btn-pure' data-toggle='tooltip' title='Active City'><i class='icon-check-square-o success'></i></a>  <a href='/Cities/Deactive?id=" + cityId + "' data-city-id='" + cityId + "' class='btn btn-icon btn-pure js-Delete' data-placement='top' data-toggle='tooltip' title='Delete City'><i class='icon-trash-o danger'></i></a>";
                   }
               }
                ],
                "order": [0, "asc"]

            });


            function ActiveButton(list) {
                if (list.length > 0) {
                    $('#btnStatus').prop('disabled', false);
                }
                else {
                    $('#btnStatus').prop('disabled', true);
                }
            }

            $('#select-all').on('click', function () {
                // Check/uncheck all checkboxes in the table

                var rows = table.rows({ 'search': 'applied' }).nodes();
                $('input[type="checkbox"]', rows).prop('checked', this.checked);

                if (this.checked) {
                    $(rows).each(function () {
                        var id = $(this).find('input[type="checkbox"]').val();
                        Shipmentds.push(id);
                    })
                }
                else {
                    Shipmentds.length = 0;
                }
                ActiveButton(Shipmentds);
            });


            $('#dgvCities tbody').on('change', 'input[type="checkbox"]', function () {
                // If checkbox is not checked
                if (!this.checked) {
                    var el = $('#select-all').get(0);
                    // If "Select all" control is checked and has 'indeterminate' property
                    if (el && el.checked && ('indeterminate' in el)) {
                        // Set visual state of "Select all" control 
                        // as 'indeterminate'
                        el.indeterminate = true;

                    }
                    var index = Shipmentds.indexOf($(this).val());
                    if (index > -1) {
                        Shipmentds.splice(index, 1);
                    }

                }
                else {

                    Shipmentds.push($(this).val());

                }
                ActiveButton(Shipmentds);
            });

            $('#btnStatus').on('click', function () {

                var postData = { values: Shipmentds };

                swal({
                    title: "Are you sure?",
                    text: "Note: All data will be Deleted Permanently, you can't restore it.",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DA4453",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel plx!",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        
                        $.ajax({
                            type: "POST",
                            url: '/Cities/DeleteRange',
                            data: postData,
                            dataType: 'json',
                            beforeSend: function () {

                                //  $(btn).buttonLoader('start');
                            },
                            success: function (data) {
                                if (data.success) {
                                    swal("Deleted!", "Cities has been deleted.", "success");
                                    setTimeout(function () {
                                        window.location.reload();
                                    }, 2000)
                                }
                            },
                            error: function (jqXHR) {
                                if (jqXHR.status == 400) {
                                    swal("Sorry", "Something Wronge :)", "error");
                                } else if (jqXHR.status == 500) {
                                    swal("Sorry", "Restricted in Demo Mode :)", "error");
                                }
                            }
                        });

                    } else {
                        swal("Cancelled", "Your file is safe :)", "error");
                    }
                });
              

            })



            
        });

        
    </script>
    @Html.Raw(TempData["msg"])
}