@extends('mock-test.layouts.ielts-mock-test')


@section('main')
@php
function checkResult($results, $testId)
{
    foreach ($results as $result) {
        if ($result['test_id'] == $testId && $result['status'] != 1) {
            return false;
        }
    }
    return true;
}
@endphp

    <div class="row mt-5">
        <div class="col-12 text-center m-2 mt-5">
            <h1 class="text-decoration-underline mt-4">IELTS Mock Test</h1>
        </div>
    </div>
    @if(!empty($ieltsTests))
        @php
            $firstTestStatus = 'submitted';
        @endphp
    <div class="row">
        @foreach ($ieltsTests as $key => $test)
            <div class="card m-auto mx-3 my-2 col-md-3 col-lg-2 col-5">
                <div class="card-body">
                    <h5 class="card-title">IELTS Test {{ ++$key }} </h5>
                        @if(
                            in_array($test->listening_test_id, array_column($results, 'test_id')) &&
                            in_array($test->writing_test_id, array_column($results, 'test_id')) &&
                            // in_array($test->speaking_test_id, array_column($results, 'test_id')) &&
                            in_array($test->reading_test_id, array_column($results, 'test_id'))
                        )
                            @if(
                                in_array($test->speaking_test_id, array_column($results, 'test_id')) &&
                                checkResult($results, $test->listening_test_id) &&
                                checkResult($results, $test->writing_test_id) &&
                                checkResult($results, $test->reading_test_id) && 
                                checkResult($results, $test->speaking_test_id)
                            )
                                <h6 class="card-subtitle mb-2 text-success"> <i class="fa-solid fa-check"></i> Submitted</h6>
                                <a href="javascript:;" onclick="showResult({{$test->id}})" class="btn btn-success btn-sm" >View Result</a>
                            @else
                                <h6 class="card-subtitle mb-2 text-success"> <i class="fa-solid fa-check"></i> Submitted</h6>
                                <a href="" class="btn btn-secondary btn-sm disabled">Result Pending</a>
                            @endif
                                @php
                                    $firstTestStatus = 'submitted';
                                @endphp
                        @else
                            @if ($firstTestStatus === 'submitted')
                                <h6 class="card-subtitle mb-2 text-primary"> <i class="fa-solid fa-unlock"></i> Unlocked</h6>
                                <a href="{{ route('mock-test.ieltsTest', ['testId' => base64_encode($test->id)]) }}" class="btn btn-primary btn-sm">Start Test</a>
                                    @php
                                        $firstTestStatus = 'unlocked';
                                    @endphp
                            @else
                                <h6 class="card-subtitle mb-2 text-danger"> <i class="fa-solid fa-lock"></i> Locked</h6>
                                <a href="javascript:;" class="btn btn-primary disabled btn-sm">Unlock Test</a>
                            @endif
                        @endif
                </div>
            </div>        
        @endforeach
    </div>
    @else
    <div class="row m-auto">
        <p class="text-center my-5">No Test Found</p>
    </div>
    @endif
  
  <!-- Modal -->
  <div class="modal fade" id="resultModal" tabindex="-1" aria-labelledby="resultModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
            <table class="table">
                <tr>
                    <td>Listening</td>
                    <td id="listeningScore">9.0</td>
                </tr>
                <tr>
                    <td>Reading</td>
                    <td id="readingScore">9.0</td>
                </tr>
                <tr>
                    <td>Writing</td>
                    <td id="writingScore">9.0</td>
                </tr>
                <tr>
                    <td>Speaking</td>
                    <td id="speakingScore">9.0</td>
                </tr>
                <tfoot>
                    <tr>
                        <th>Overall</th>
                        <th id="overallScore">9.0</th>
                    </tr>
                </tfoot>
            </table>
        </div>
      </div>
    </div>
  </div>

@endsection


@section('css')
   <style>
        .modal{
            margin-top: 200px;
        }
        .table tr td , .table tr th{
            padding-left: 20px;
        }
   </style>
@endsection

@section('script')

<script>
    function showResult(id) {
        $.ajax({
            type: 'POST',
            url: '{{ route('mock-test.ieltsgetResult') }}',
            data: {
                id: id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: (res) => {
                if (res.status) {
                    var listeningScore = null;
                    var writingScore = null;
                    var readingScore = null;
                    var speakingScore = null;
                    var allScores = 0;

                    res.results.forEach(function(result) {
                        switch (result.test_type) {
                            case '1':
                                listeningScore = result.score;
                                break;
                            case '3':
                                writingScore = result.score;
                                break;
                            case '4':
                                readingScore = result.score;
                                break;
                            case '2':
                                speakingScore = result.score;
                                break;
                            default:
                                break;
                        }

                        if (result.score) {
                            allScores += parseFloat(result.score);
                        }
                    });

                    // Display scores in respective elements
                    $('#listeningScore').text(listeningScore.toFixed(1) || 'N/A');
                    $('#writingScore').text(writingScore.toFixed(1) || 'N/A');
                    $('#readingScore').text(readingScore.toFixed(1) || 'N/A');
                    $('#speakingScore').text(speakingScore.toFixed(1) || 'N/A');

                    // Calculate and display overall score
                    var numberOfScores = res.results.filter(result => result.score).length;
                    var overallScore = numberOfScores > 0 ? allScores / numberOfScores : null;

                    $('#overallScore').text(overallScore !== null ? overallScore.toFixed(1) : 'N/A');

                    $('#resultModal').modal('show');
                }
            }
        });
    }


</script>

@endsection