@extends('layouts.backend')
@push('style')
    <style>
        .page-link {
            color: #fff
        }

        .page-link:focus,
        .page-link:hover {
            color: #000;
            box-shadow: none;
        }

        .page-item.active .page-link {
            background: #fff;
            border: 1px solid #fff;
            color: #000;
        }

        .page-link {
            padding: 5px 15px;
        }

        .page-item.disabled .page-link {
            color: #fff;
            background-color: #0000;
            border-color: #fff;
        }

        .search-form-outer .input-group .btn {
            padding: 10px;
            height: 35px;
            margin-top: 1px;
        }

        .search-form-outer .input-group .btn:focus,
        .search-form-outer .input-group .btn:hover {
            color: #fff;
            background-color: transparent;
        }

        .btn:active,
        .btn:focus {
            box-shadow: none !important;
        }
        #exampleModal ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>
@endpush
@section('content')
    <div class="row ">
        <div class="col-12 grid-margin">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h4 class="card-title">Quiz Response List of {{ $user_name }}</h4>
                        </div>

                    </div>
                    <div class="table-responsive">
                        <table class="table users-listing">
                            <thead>
                                <tr>
                                    <th> Latest Respond On </th>
                                    <th> Question </th>
                                    <th> Answer </th>
                                    <th> Response </th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($final_quiz_responses))
                                    @foreach ($final_quiz_responses as $i => $final_quiz_response)
                                        <tr>
                                            <td> {{ date('jS F Y h:i:s A', $final_quiz_response->time) }} </td>
                                            <td> {{ substr($final_quiz_response->promptQuestion->question, 0, 30) . '...' }}
                                            </td>
                                            <td>
                                                @if (!empty($final_quiz_response->prompt_value))
                                                    {{ 'Yes' }}@else{{ 'No' }}
                                                @endif
                                            </td>
                                            <td>
                                                @if (!empty($final_quiz_response->prompt_value))
                                                    <a class="btn btn-primary get_prompt_response" href="{{route('admin.users.get-prompt-response',$final_quiz_response->id)}}">View Response</a>
                                                @else
                                                    <a class="btn btn-primary disabled" href="javascript:void(0)">No
                                                        Response</a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td class="text-center" colspan="4">No Response</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                        <div class="d-flex cpagination mt-4 justify-content-end">
                            @if ($final_quiz_responses->appends(request()->query())->count() > 0)
                                {{ $final_quiz_responses->appends(request()->query())->links() }}
                            @else
                                {{ $final_quiz_responses->links() }}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade prompt_response_area" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul>
                        
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
<script>
    $(document).on('click','.get_prompt_response',function(e){
        e.preventDefault();
        let self,href;
        self = $(this);
        href = self.attr('href');
        $.ajax({
            url: self.attr('href'),
            type: 'get',
            dataType: "json",
            success: function(response){
                if(response.status=="success")
                {
                    $('.prompt_response_area ul').html(response.html)
                    $('#exampleModal').modal('show'); 
                    $('#exampleModal .modal-title').html(response.prompt_question)
                }
                else{
                    $('.prompt_response_area ul').html('')
                }
            }
        })
    })

    $('#exampleModal').on('hidden.bs.modal', function () {
        $('#exampleModal .modal-title').html('');
        $('.prompt_response_area ul').html('')
    })
</script>
@endpush