@extends('layouts.app')
@section('content')
<div class="main-header">
    <div class="admin-header">
        <div class="uk-grid">
            <div class="uk-width-1-2@m uk-text-center uk-text-left@l">
                <h1 class="uk-margin-small-top main-heading">{{$title}}</h1>
            </div>
            <div class="uk-width-1-2@m uk-text-center uk-text-right@l">
                <a class="uk-button uk-button-primary" href="{{url('admin/city/'.$regionId.'/create')}}"> Add City</a>
                <a class="uk-button uk-button-default" href="{{url('admin/regions/'.$provinceId)}}">Back</a>
            </div>
        </div>
    </div>
</div>
<div class="uk-overflow-auto">
    @include('partials.messages')
    <table class="uk-table uk-table-divider" id="city">
        <thead>
            <tr>  
                <th>Actions</th>
                <th>Ordering</th>
                <th>Name</th>
            </tr>
        </thead>
    </table>
</div>    
@endsection
@section('footer-script')
<script>
    $('#city').DataTable({
        processing: true,
        pageLength: 100,
        responsive: true,
        serverSide: true,
        ordering: true,
        bPaginate: true,
        bLengthChange: false,
        bFilter: true,
        bInfo: false,
        bAutoWidth: false,
        language: {
            search: '',
            searchPlaceholder: 'Search'
        },
        // aaSorting: [[1, 'desc']],
        ajax: window.location.href, 
        columns: [
            { data: 'actions',orderable: false, name: 'actions',searchable: false, width: "1%" },
            { data: 'ordering',orderable: true, name: 'ordering',searchable: true, width: "1%" },
            { data: 'name',orderable: true, name: 'name',searchable: true, width: "10%" },
        ],
        order: [[ 1, "asc" ]]
    });
    
    $(document).on('click','.delete-city',function(){
        var id   = $(this).data('id');
        var clst = $(this).closest('tr');
        UIkit.modal.confirm('Are you sure you want to delete this City?').then(function() {
            $.ajax(
            {
                url: url +  "/admin/delete-city",
                type: 'POST',
                dataType: "JSON",
                data : {
                    'id':id
                },
                success: function (res)
                {
                    if(res.success == 1){
                        clst.remove();
                        UIkit.modal.alert('City successfully deleted.');
                    }
                }
            });
        }, function () {
        });
    });
    

</script>
@endsection