@extends('admin.layouts.master')
@section('content')
    @include('admin.levels.partials.delete')
    @include('admin.levels.partials.bulk-delete-modal')
    <div class="row">
        <div class="col">
            <form action="{{route('admin.levels.bulk-delete')}}" method="POST" id="bulk-delete-levels-form">
                @csrf
                @method("DELETE")
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title mb-0">
                            {{__("dashboard.levels")}}
                        </h5>
                        <div class='dropdown'>
                            <button class='btn btn-primary dropdown-toggle' data-bs-toggle='dropdown'>
                                {{__("dashboard.bulk-options")}}
                                <i class='mdi mdi-chevron-down fs-17 align-middle'></i>
                            </button>
                            <div class='dropdown-menu dropdown-menu-animated'>
                                <button type="button" class='dropdown-item text-danger' data-bs-toggle='modal'
                                        data-bs-target="#bulkDeleteLevelsModal">
                                    <div class='dropdown-icon'>
                                        <i class='bi bi-trash'></i>
                                    </div>
                                    <span class='dropdown-content mx-1'>
                                        {{__("dashboard.delete-selected")}}
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mb-0">
                            <div id="datatable-buttons_wrapper" class="d-flex justify-content-center"></div>
                        </div>
                        <table class="table table-striped display nowrap" style="width: 100%;" id="levels-table">
                            <thead>
                            <tr>
                                <th>
                                    <input class="form-check-input m-0 check-all" id="check-all" type="checkbox"/>
                                    <label for="check-all" class="mx-2">
                                        {{__("dashboard.level")}}
                                    </label>
                                </th>
                                <th>{{__("dashboard.cover-image")}}</th>
                                <th>{{__("dashboard.country")}}</th>
                                <th>{{__("dashboard.min-age")}}</th>
                                <th>{{__("dashboard.max-age")}}</th>
                                <th>{{__("dashboard.actions")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>

        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            let levelsTable = initializeDataTable(
                "#levels-table",
                "{{ route('admin.levels.index') }}",
                [
                    {data: 'id', name: 'id', orderable: false, searchable: false},
                    {data: 'cover', name: 'cover', orderable: false, searchable: false},
                    {data: 'country', name: 'country', orderable: false, searchable: true},
                    {data: 'min_age', name: 'min_age', orderable: true, searchable: true},
                    {data: 'max_age', name: 'max_age', orderable: true, searchable: true},
                    {data: 'action', name: 'action', orderable: true, searchable: true},
                ],
                true,
                {},
                ['id', 'min_age', 'max_age', 'country']
            );
        });
    </script>
@endsection