@extends('user_dashboard.layouts.app')
@section('content')
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="section-title">
                            <h3 class="rbt-title-style-style">Course Test</h3>
                        </div>
                        <form action="{{ route('user.start.quiz') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="filter-select rbt-modern-select">
                                        <label for="name" class="form-label">Your Name</label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            placeholder="Your Name..." required>
                                    </div>
                                    @error('name')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-4">
                                    <div class="filter-select rbt-modern-select">
                                        <label for="course_type" class="form-label">Course Type</label>
                                        <select class="w-100" name="course_type" required readonly>
                                            <option value="{{ $selected_plan->id }}">{{ $selected_plan->title }}</option>
                                        </select>
                                    </div>
                                    @error('course_type')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="col-lg-4">
                                    <div class="filter-select-option">
                                        <div class="filter-select rbt-modern-select">
                                            <span class="select-label d-block">Courses</span>
                                            <select name="course" id="course_id" data-live-search="true"
                                                onchange="getQuizDetail()" required>
                                                <option value="">Select Course</option>
                                                @foreach ($courses as $course)
                                                    <option value="{{ $course->id }}">{{ $course->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('course')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12 mt-5">
                                    <button type="submit" class="rbt-btn btn-sm radius-round">Start Test</button>
                                </div>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-md-12 mt-5">
                                <div class="section-title">
                                    <h3 class="rbt-title-style-style">Instructions:</h3>
                                </div>
                                <div id="instruction_div"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    function getQuizDetail() {
        var course_id = $('#course_id').val();

        $.ajax({
            type: 'GET',
            url: "{{ route('user.get.instruction.by.course', '') }}/" + course_id,
            success: function(data) {
                $('#instruction_div').html(data.quiz.instruction)
            },
            error: function(request, status, error) {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                });
                Toast.fire({
                    icon: "error",
                    title: request.responseJSON.msg,
                });
            }
        });
    }
</script>