@extends('admin.layouts.app')

@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_containe pt-5" class="app-container container-fluid" data-bs-backdrop='static'>
        <!--begin::Card-->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show mt-2">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="card my-5 m-xl-10">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                    {{ $title }}
                </div>
                <!--begin::Card title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body py-4">
                <div class="table-responsive">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_pages">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-dark fw-bold fs-7 text-uppercase gs-0">
                                <th>Page Name</th>
                                <th></th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-dark fw-semibold">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                </div>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Content container-->
@endsection

@section('script')
    <script>
        const table = $('#kt_table_pages').DataTable({
            "lengthMenu": [ 200, 500, 1000],
            ajax: {
                url: "{{ route('admin.' . $route . '.index') }}",
                data: function(d) {}
            },
            columns: [{
                    data: 'page_name',
                    name: 'page_name',
                    className: 'ps-2',
                    orderable: true
                },
                {
                    data: 'action',
                    name: 'action',
                    className: 'text-end pe-5',
                    orderable: false
                },
            ]
        });
    </script>
@endsection