@extends('admin.layouts.app')
@section('style')
<link rel="stylesheet" href="{{asset('public/assets/admin/css/page-datatable-custom-css.css')}}">
<style>
    @media (max-width: 600px){
        div.dataTables_filter_custom{
            margin-top: 0;
        }
    }
</style>
@endsection
@section('content')
@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 border border-secondary">
    <div class="card-header border-0 bg-light">
        <!--begin::Card title-->
        <div class="card-title">
            {{ $title }}
        </div>
        <!--begin::Card title-->
    </div>
    <div class="row w-100 full-width">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div id="kt_table_users_filter_top" class="dataTables_filter_custom"><input type="search" class="form-control form-control-sm mt-3 mb-3" placeholder="Search..." id="searchFilter" aria-controls="kt_table_users"></div>
        </div>
    </div>
    <div class="card-body py-4">
        <div class="table-responsive custom-row">
            <!--begin::Table-->
            <table class="table align-middle table-row-dashed fs-6 gy-5 table-head-none" id="kt_table_integrations">
                <!--begin::Table body-->
                <tbody>
                </tbody>
                <!--end::Table body-->
            </table>
            <div class="pagination_display"></div>
        </div>
        <!--end::Table-->
    </div>
</div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            const table = $('#kt_table_integrations').DataTable({
                "lengthMenu": [ 200, 500, 1000],
                serverSide: true,
                paging: true,
                info: false, 
                language: {
                    lengthMenu: "Display_MENU_",
                },
                responsive: true,
                ajax: {
                    url: "{{ route('admin.' . $route . '.index') }}",
                    data: function(d) {}
                },
                columns: [{
                        data: 'int_image',
                        name: 'int_image',
                        orderable: false,
                    },
                    {
                        data: 'int_name',
                        name: 'int_name',
                        orderable: true,
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    },
                ]
            });
            let typingTimer;
            $('#searchFilter').on('keyup', function () {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(function () {
                    table1.ajax.reload(null, false);
                }, 300);
            })
    
            $('.dataTables_length').appendTo('.custom-row > .pagination_display');
            $('.dataTables_paginate').appendTo('.custom-row > .pagination_display');
        });
    </script>
@endsection