@extends('layouts.app_new')

@section('style')
<link rel="stylesheet" href="{{asset('datatable/datatables.min.css')}}">
@endsection
@section('content')
    <div class="row flex-fill gutters justify-content-center">
        <div class="col-md-10 col-sm-10 col-10">
            <div class="card shadow">
                <div class="card-body">
                    <h5 class="text-primary card-title">{{__("Groups")}}
                        <a href="{{route('groups.create')}}" class="btn btn-sm btn-primary float-end add">
                            <li class="zmdi zmdi-plus"></li>
                        </a>
                    </h5>
                </div>
                <div class="card-body table-responsive">
                    <table id="countries" class="table table-bordered table-condensed table-striped data-table table-responsive text-center" style="width: 100%">
                        <thead>
                        </thead>
                        <tfoot>
                            <tr>
                                <td colspan="4" class="success text-center text-success"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

        </div>
    </div>

@endsection

@section('script')
<script src="{{asset('datatable/jquery.js')}}"></script>
<script src="{{asset('datatable/datatables.min.js')}}"></script>
<script type="text/javascript">
    $(function () {
        var table = $('.data-table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            ajax: "{{route('groups.index')}}",

            columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex',title:"#", orderable: false, searchable: false,responsivePriority: 1 },
            // {data:'id' ,name:'id',title:'{{__("id")}}'},
            {data: 'ar_title'  , name: 'ar_title' ,title: '{{__("Ar Title")}}'},
            {data: 'en_title'  , name: 'en_title' ,title: '{{__("En Title")}}'},
            {data: 'action'   , name: 'Control' ,title: '{{__("Control")}}', orderable: false, searchable: false},
            ],
        });

        $(document).on('click','.btn-delete',function(){
            if(!confirm("Are you sure?")) return;
            var rowid = $(this).data('rowid')
            if(!rowid) return;
            $.ajax({
                type: "POST",
                dataType: 'JSON',
                url: "{{route('groups.index')}}/" + rowid,
                data: {_method: 'delete',_token:$('meta[name="csrf-token"]').attr('content')},
                success:function(response){
                    if(response) {
                        $('.success').text(response.message);
                        table.draw();
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
    });
</script>
@endsection