@extends('admin.layouts.master')
@section('content')
    @include('admin.examples.partials.delete', ['lesson' => $lesson])
    @include('admin.examples.partials.bulk-delete-modal')
    @include('admin.examples.partials.create-modal', ['lesson' => $lesson])
    <div class="row">
        <div class="col">
            <form action="{{route('admin.examples.bulk-delete')}}" method="POST" id="bulk-delete-examples-form">
                @csrf
                @method("DELETE")
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title mb-0">
                            {{__("dashboard.examples")}}
                        </h5>
                        <div class="d-flex align-items-center gap-2">
                            <div class="btn btn-primary" data-bs-toggle='modal' data-bs-target="#createExampleModal">
                                {{__("dashboard.create-example")}}
                            </div>
                            <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="#bulkDeleteExamplesModal">
                                        <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>
                    <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="examples-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.id")}}
                                    </label>
                                </th>
                                <th>{{__("dashboard.lesson")}}</th>
                                <th>{{__("dashboard.actions")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>

        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            let examplesTable = initializeDataTable(
                "#examples-table",
                "{{ route('admin.examples.index', $lesson->slug) }}",
                [
                    {data: 'id', name: 'id', orderable: false, searchable: false},
                    {data: 'lesson_id', name: 'lesson_id', orderable: true, searchable: true},
                    {data: 'action', name: 'action', orderable: true, searchable: true},
                ],
                true,
                {},
                ['id', 'lesson_id']
            );
        });
    </script>
@endsection