@extends('master')

@section('title')
    <title>Questions</title>
@endsection

@section('content')
    @if (session('status'))
        <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Surveyor</h1>
    <br>
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <div class="row">
                <div class="col-lg-6">
                    <span class="font-weight-bold text-primary">Question Listing</span>
                </div>
                @if(auth()->user()->can('create_question'))
                    <div class="col-lg-6">
                        <a href="{{ url('/admin/questions/create') }}" class="btn btn-sm btn-primary float-right">Add
                            New</a>
                    </div>
                @endif
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <form method="POST" id="search-form" role="form">
                    <div class="form-row align-items-center">

                    </div>
                </form>
                <br>
                <table class="table table-bordered" id="question_list" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Question EN</th>
                        <th>Question CN</th>
                        <th>Question BM</th>
                        <th>Type</th>
                        <th>Choice EN</th>
                        <th>Choice CN</th>
                        <th>Choice BM</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Question EN</th>
                        <th>Question CN</th>
                        <th>Question BM</th>
                        <th>Type</th>
                        <th>Choice EN</th>
                        <th>Choice CN</th>
                        <th>Choice BM</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        let questionTable = $('#question_list').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ajax: {
                url: '{{ url('/admin/questions/index_data')}}',
                type: "POST",
                data: function (d) {
                    //form request data
//                    d.name = $('input[name=name]').val();
//                    d.team = $('input[name=team]').val();
                }
            },
            columns: [
                {data: 'id', name: 'id'},
                {data: 'question_en', name: 'question_en'},
                {data: 'question_cn', name: 'question_cn'},
                {data: 'question_bm', name: 'question_bm'},
                {data: 'type', name: 'type'},
                {data: 'choice_en', name: 'choice_en'},
                {data: 'choice_cn', name: 'choice_cn'},
                {data: 'choice_bm', name: 'choice_bm'},
                {
                    data: 'active', name: 'active',
                    render: function (data, type, row) {
                        //render function to customize value styling
                        let statusText = '<span style="color:green">Active</span>';
                        if (data == 0) {
                            statusText = '<span style="color:red">Inactive</span>';
                        }
                        return statusText;
                    }
                },
                {
                    data: 'id', name: 'action_id', orderable: false, searchable: false,
                    render: function (data, type, row) {
                        //render function to customize action button
                        let UpdateUrl = "{{ url('/admin/questions') }}/" + data + "/edit";
                        let DeleteUrl = "{{ url('/admin/questions') }}/" + data + "/delete";
                        let btnTxt = "";
                        @can('update_question')
                         btnTxt += '<a href="'+UpdateUrl+'" class="btn btn-sm btn-primary">Edit </a>';
                         btnTxt += '<button onclick="confirm_delete('+ data + ')" class="btn btn-sm btn-danger">Delete </button>';
                        @endcan
                        return btnTxt;
                    }
                },
            ]
        });

        //trigger ajax call and draw
        $('#search-form').on('submit', function (e) {
            questionTable.draw();
            e.preventDefault();
        });

       function confirm_delete(question){
            var deleteurl = "{{ url('/admin/questions') }}/"+question+"/delete";
            console.log(deleteurl);
            Swal.fire({
                    title: 'Are you sure?',
                    text: 'Delete this question?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes'
                }).then((result) => {
                    if (result.isConfirmed) {
                    location.href = deleteurl;
                    }
                });
        }


    </script>
@endsection