@extends ('backend.layouts.app')

@section('title', 'All Forms Structures')

@section('page-header')
<h1>All Forms Structures</h1>
@endsection

@section('content')

<div class="box box-info">
    <div class="box-header with-border">
        <a href="{{ route('admin.form-manager.create') }}" class="btn btn-info btn-sm ">
            <i class="bi bi-plus-circle me-1"></i> Add New Form
        </a>

        
        @if( !empty($DBnames) )
        <div class="box-tools pull-right">
            <select id="categoryFilter" class="form-control">
                <option value="">Select DB name</option>
                @foreach  ($DBnames as $DBname)
                <option value="{{ $DBname->dbname }}">{{ $DBname->dbname }}</option>
                @endforeach
        </select>    
        @endif
    </div>  <!--box-header with-border-->

    <div class="box-body">
        <div class="table-responsive data-table-wrapper">    
            <table id="dbtable-table" class="table table-condensed table-hover table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Form id</th>
                        <th>Form Name</th>
                        <th>Identifier</th>
                        <th>{{  trans('labels.general.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div><!--table-responsive-->
    </div><!-- /.box-body -->

</div><!--box-->
@endsection

@section('after-scripts')

<script src="{{ mix('js/dataTable.js') }}"></script>

<script>
    $(document).ready(function () {
        let dataTable = $('#dbtable-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.form-manager.index') }}", 
                data: function (d) {
                    d.dbname = $('#categoryFilter').val();
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'id', name: 'id' },
                { data: 'form_name', name: 'form_name' },
                { data: 'identifier', name: 'identifier' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false }
            ]
        });

        $('#categoryFilter').on('change', function () {
            dataTable.ajax.reload();
        });
    });
</script>

@endsection