@extends('admin.layouts.master')
@section('content')
    @include('admin.institutes.partials.delete')
    @include('admin.institutes.partials.bulk-delete-modal')
    <div class="row">
        <div class="col">
            <form action="{{route('admin.institutes.bulk-delete')}}" method="POST" id="bulk-delete-institutes-form">
                @csrf
                @method("DELETE")
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title mb-0">
                            {{__("dashboard.institutes")}}
                        </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="#bulkDeleteInstitutesModal">
                                    <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="institutes-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.name")}}</th>
                                <th>{{__("dashboard.country")}}</th>
                                <th>{{__("dashboard.email")}}</th>
                                <th>{{__("dashboard.otp-code")}}</th>
                                <th>{{__("dashboard.actions")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>

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