@extends('backend::layouts.app')
@section('title', 'Answer')
@push('css')
    <link rel="stylesheet" href="{{ asset('backend/vendor/select2/css/select2.min.css') }}">
@endpush
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">{{ $question->title }}</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('question.index') }}">Question</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Answer</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Answer</h4>
                    {{-- <a href="{{ route('answer.create', base64_encode($question->id)) }}" class="btn btn-primary btn-sm">
                        <i class="fas fa-plus"></i> Create
                    </a> --}}
                </div>
                <div class="card-body">
                    <table id="answerDatatable" class="table table-bordered dt-responsive">
                        <thead>
                            <tr>
                                <th>SN</th>
                                <th>Title</th>
                                <th>Image</th>
                                <th>Sort Order</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="{{ asset('backend/vendor/select2/js/select2.full.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();

            $('#accordion').on('shown.bs.collapse', function(e) {
                $(e.target).find('.select2').select2();
            });

            var questionId = "{{ base64_encode($question->id) }}";

            var table = $('#answerDatatable').DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                responsive: true,
                autosave: true,
                bDestroy: true,
                lengthMenu: [
                    [50, 100, 150, -1],
                    [50, 100, 1500, 'All']
                ],
                ajax: "{{ route('answer.index', ['question' => ':questionId']) }}".replace(
                    ':questionId', questionId),
                columns: [{
                        data: 'DT_RowIndex',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },
                    {
                        data: 'sort_order',
                        name: 'sort_order'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ],
                drawCallback: function(settings) {
                    $('[data-bs-toggle="tooltip"]').tooltip();
                }
            });
        });
    </script>
@endpush