@extends('bio::layouts.master')
@section('footerJS')
    <script>
        jQuery(document).on('click', '.sandy-tabs-link', function(){
            jQuery('html, body').animate({ scrollTop: 0 }, 250);
        });
    </script>
@stop
<style>
    .bio-menu, .bio-branding-mobile-wrapper{
        display: none  !important;
    }
</style>
@section('content')
<div class="bio-single-shop-product is-course h-screen flex p--5 pb-0 items-end">
    
    <div class="center course-body mt-0 top-0 pb-0 rounded-none">
        
        
        
        

        
        <a class="text-stage mb-10 underline text-gray-400 flex items-center" href="{{ \Bio::route($bio->id, 'sandy-blocks-course-single-course', ['id' => $course->id]) }}"> <i class="la la-arrow-left mr-3"></i> {{ $course->name }}</a>

        
        @livewire('take-exam-livewire', ['page' => $bio, 'exam_id' => 4, 'course' => $course])

        <div class="dashboard-header-banner relative mt-0 mb-0 bg-white rounded-none">
            <div class="card-container px-0">

                <h4 class="--title">{{ $exam->name }}</h4>
                <p class="--subtitle">{{ $exam->description }}</p>
                
            </div>
        </div>

        <form method="POST" action="{{ $sandy->route('sandy-blocks-course-take-course-exam-post', ['id' => $exam->course_id]) }}" class="hidden">
            @csrf

            <input type="hidden" name="_exam_id" value="{{ $exam->id }}">
            <div class="p-5 flex flex-col gap-4 bg-cream-g">
                @foreach ($exam_op as $item)
                <label class="sandy-big-checkbox">
                    <input type="radio" class="sandy-input-inner" name="selected_answer" value="{{ $item->id }}">
                    <div class="checkbox-inner p-5 h-16 rounded-xl">
                        <div class="checkbox-wrap">
                            <div class="icon">
                                <div class="active-dot">
                                    
                                </div>
                                </div>
                                <div class="content ml-2">
                                    <h1>{{ $item->name }}</h1>
                                </div>
                            
                        </div>
                    </div>
                </label>
                @endforeach
            </div>
    
    
            <div class="bg-transparent w-full mt-5 pb-5 px-5 flex items-center justify-between">
                <div class="text-xs">
                    Q1/5
                </div>
                <button class="sandy-expandable-btn p-0 bg-white"><span>{{ __('Next') }}</span></button>
            </div>
        </form>
    </div>
    <div class="mb-32"></div>
</div>
@endsection