@extends('.master')


@push('head')
    <style>
        .badge {
            font-size: 14px !important;
        }
    </style>
@endpush



@section('content')
    <!--begin::Tables Widget 12-->
    <div class="card mb-5 mb-xl-8">
        <div class="card-header border-0 pt-5">
            <div class="d-flex align-items-center gap-2 gap-lg-3">
                <!--begin::Primary button-->
                <a href="{{ route('adMob.create') }}" class="btn fw-bold btn-primary">Add</a>
                <!--end::Primary button-->
            </div>
        </div>
        <div class="row my-5 mx-2">
            <div class="col-md-5">
                <label for="add-mobs-search">Search by type </label>
                <input type="text" name="user" class="form-control searchType"
                    placeholder="Search for types  Only..." id="add-mobs-search">
            </div>

        </div>
        <!--begin::Body-->
        <div class="card-body py-3">

            <!--begin::Table container-->
            <div class="table-responsive">
                <!--begin::Table-->
                <table class="table align-middle gs-0 gy-4 datatables-ajax">
                    <!--begin::Table head-->
                    <thead>
                        <tr class="fw-bold text-muted bg-light">
                            <th class="ps-4 min-w-50px rounded-start">#</th>
                            <th class="min-w-125px">Type</th>
                            <th class="min-w-125px">Code</th>
                            <th class="min-w-125px">Created at</th>
                            <th class="min-w-125px">Actions</th>
                        </tr>
                    </thead>
                    <!--end::Table head-->

                    <!--begin::Table body-->
                    <tbody>
                    </tbody>
                    <!--end::Table body-->
                </table>
                <!--end::Table-->
            </div>
            <!--end::Table container-->
        </div>
        <!--begin::Body-->
    </div>
    <!--end::Tables Widget 12-->
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var table = $('.datatables-ajax').DataTable({
                processing: true,
                serverSide: true,
                // sortable: false,
                // searchable: false,
                ajax: {
                    url: "{{ route('adMob.data') }}",
                    data: function(d) {
                        d.user = $('.searchType').val();
                    }
                },

                columns: [{
                        data: "DT_RowIndex",
                        searchable: false,
                        orderable: false,
                    },
                    {
                        data: "type",

                    },
                    {
                        data: "code",
                    },
                    {
                        data: "created_at",
                        searchable: false,

                    },
                    {
                        data: "actions",
                        searchable: false,
                        orderable: false,
                    },
                ],
                dom: '<"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            });

            $(".searchType").keyup(function() {
                table.draw();
            });
        });
    </script>
@endpush