@section('style')
    @parent
@endsection

@section('script')
    @parent


    <script>
        $(function () {
            var t = $('#env_list_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! route('admin.settings.get.env_configs') !!}',
                },
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
                dom:
                    "<'justify-content-center justify-content-sm-between row p-3'<''l><'col text-right'f><'#import_export.text-right'B>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i> <'col-sm-7'p>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'type', name: 'type'},
                    {data: 'description', name: 'description'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action'},
                ],
                columnDefs: [{
                    targets: [0,4],
                    searchable: false,
                    orderable: false,
                },{
                    targets: [4],
                    class: 'text-center'
                }],
                autoWidth: false
            });
        });
    </script>
@endsection

<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title">{{ __('admin_setting.titleListConfigurableEnv')}}</h3>
    </div>
    <!-- /.card-header -->

    <div class="card-body table-responsive p-0">
        <table id="env_list_table" class="table table-bordered table-hover dataTable">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Type</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- /.card-body -->
</div>

@component('components.utility.modal_confirmation_delete')
@endcomponent