@extends('layouts.landing')

@section('title', 'Elearning Quiz')

@section('content')
<style>
    .btn-round-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 7px 0px;
        display: inline-block;
        line-height: 35px!important;
        text-align: center;
    }
    .btn-round-sm:hover {
        width: 55px;
        height: 55px;
        padding: 10px 0px;
        transition: .3s;
    }
    .active-border {
        border-left: 2px solid #007bff;
    }
    .btn-line {
        border-bottom: 4px solid;
        width: 80px;
    }
    .btn-line-1 {
        border-bottom: 4px solid #eee;
        width: 80px;
    }
    .line {
        opacity: 0;
    }
    .choices>.dropdown-menu {
        width: 100% !important;
    }
    .hide-input {
        visibility: hidden;
        display: none;
    }
    /* img {
        max-width: 150px;
    } */
</style>
<div class="row ">
    <div class="col">
        <a href="{{route('elearn.edit-course', $test->course_id)}}" class="text-color mb-4"><i class="feather-arrow-left mr-2"></i> Back</a>
    </div>
    <div class="col-auto">
        @if($test->is_active == 0)
            <form class="" action="{{route('elearn.update-test', $test->id)}}" method="POST">
                {{ csrf_field() }}
                {{ method_field('patch') }}
                <input type="hidden" name="is_active" value="1">
                <button type="submit" name="publish" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                    <span class="button__text"><i class="mdi mdi-check"></i> Publish Test</span>
                </button>
            </form>
        @elseif($test->is_active == 1)
            <form class="" action="{{route('elearn.update-test', $test->id)}}" method="POST">
                {{ csrf_field() }}
                {{ method_field('patch') }}
                <input type="hidden" name="is_active" value="0">
                <button type="submit" name="unpublish" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                    <span class="button__text"><i class="mdi mdi-check"></i> Unpublish Test</span>
                </button>
            </form>
        @endif
    </div>
</div>
<div class="row ">
    <div class="col">
        <h3>{{$test->title}}</h3>
    </div>
</div>
<div class="row ">
    <div class="col-12 col-lg-6 col-xl-6">
        <div class="card w-100 shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3">
            <div class="card-body p-0">
                <h5>Test questions</h5>
                <p class="text-muted">Start adding questions and options for your quiz</p>
                <div class="row">
                    <div class="col-12">
                        <form class="pb-4" action="{{route('elearn.store-question')}}" method="POST">
                            @csrf
                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                            <input type="hidden" name="test_id" value="{{$test->id}}">
                            <div class="">
                                <div class="mt-2 pt-2 mb-3">
                                    <div class="form-group">
                                        <label class="form-label mb-1">
                                           Question
                                        </label>
                                        <input type="text" name="title" class="form-control">
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-md-6 col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                   Option A
                                                </label>
                                                <input type="text" name="option_a" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                   Option B
                                                </label>
                                                <input type="text" name="option_b" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-md-6 col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                   Option C
                                                </label>
                                                <input type="text" name="option_c" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                   Option D
                                                </label>
                                                <input type="text" name="option_d" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-md-6 col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                   Answer
                                                </label>
                                                <input type="text" name="answer" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-6 col-lg-6">
                                            <div class="form-group">
                                                <label class="form-label mb-1">
                                                   Points
                                                </label>
                                                <input type="number" name="points" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <button type="submit" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                        <span class="button__text"><i class="mdi mdi-plus"></i> Add question</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 col-xl-6">
        <div class="card shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3" data-list='{"valueNames": ["item-name"], "page": 10, "pagination": {"paginationClass": "list-pagination"}}' id="contactsList">
            <div class="card-header">
                <div class="row ">
                    <div class="col">
                        <h5>Questions</h5>
                    </div>
                    <div class="col-auto">
                        @if(empty($certificate))
                            <h6><a href="{{route('elearn.certificate', $course->id)}}" class="font-xsss text-color"><i class="mdi mdi-plus"></i> Add Certification</a></h6>
                        @else
                            <h6><a href="{{route('elearn.edit-certificate', @$certificate->id)}}" class="font-xsss text-color">{{@$certificate->title}}</a></h6>
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-header">
                <div class="row ">
                    <div class="col">
                        <form>
                            <div class="input-group input-group-flush input-group-merge input-group-reverse">
                                <input class="form-control list-search" type="search" placeholder="Search questions">
                                <span class="input-group-text">
                                    <i class="fe fe-search"></i>
                                </span>
                            </div>
                        </form>
                    </div>
                    <div class="col-auto me-n3">
                        <small>{{$question_count}} questions</small>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if(count($questions) > 0)
                    <ul class="list-group list-group-lg list-group-flush list my-n4">
                        @php
                            $question_number = 1;
                        @endphp
                        @foreach($questions as $question)
                            <li class="list-group-item">
                                <div class="row">
                                    <div class="col">
                                        <span data-toggle="collapse" class="d-flex justify-content-between" href="#collapse{{$question->id}}" role="button" aria-expanded="false" aria-controls="multiCollapse{{$question->id}}">
                                            <h5 class="mb-1 item-name mr-2 font-xs">
                                                {{$question_number}}. {{Str::words($question->title, 10, '')}}
                                                @php
                                                    $question_number++;
                                                @endphp
                                            </h5>
                                            <span class="">
                                                <a href="{{route('elearn.edit-question', $question->id)}}" class="text-color">
                                                   <i class="mdi mdi-pencil"></i>
                                                </a>
                                                <span class="ml-3 text-danger"><i class="mdi mdi-delete"></i></span>
                                            </span>
                                        </span>
                                        <div class="">
                                            <div class="collapse multi-collapse" id="collapse{{$question->id}}">
                                                <div class="mt-2 p-3" style="line-height: 25px; font-weight: 400">
                                                    <h6 class="recent-link mb-2">
                                                        {{$question->title}}
                                                    </h6>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input" type="checkbox" id="blankCheckbox1" value="option1" aria-label="" disabled>
                                                        <label class="text-grey-500 font-xss" for="blankCheckbox1">{{$question->option_a}}</label>
                                                    </div>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input" type="radio" id="blankCheckbox1" value="option1" aria-label="" disabled>
                                                        <label class="text-grey-500 font-xss" for="blankCheckbox1">{{$question->option_b}}</label>
                                                    </div>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input" type="radio" id="blankCheckbox1" value="option1" aria-label="" disabled>
                                                        <label class="text-grey-500 font-xss" for="blankCheckbox1">{{$question->option_c}}</label>
                                                    </div>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input" type="radio" id="blankCheckbox1" value="option1" aria-label="" disabled>
                                                        <label class="text-grey-500 font-xss" for="blankCheckbox1">{{$question->option_d}}</label>
                                                    </div>
                                                    <div class="form-check mt-1">
                                                        <input class="form-check-input" type="checkbox" id="blankCheckbox1" value="option1" aria-label="" checked disabled>
                                                        <label class="text-success font-xss" for="blankCheckbox1">{{$question->answer}}: Answer - {{$question->points}} points</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                    @else
                    <div class="mt-4">
                        <div class="text-center">
                            <h6 class="mb-4">No questions created</h6>
                        </div>
                    </div>
                @endif
            </div>
            <div class="row g-0">
                <ul class="col list-pagination-prev pagination pagination-tabs justify-content-start">
                    <li class="page-item">
                        <a class="page-link" href="#">
                        <i class="fe fe-arrow-left me-1"></i> Prev
                        </a>
                    </li>
                </ul>
                <ul class="col list-pagination pagination pagination-tabs justify-content-center"></ul>
                <ul class="col list-pagination-next pagination pagination-tabs justify-content-end">
                    <li class="page-item">
                        <a class="page-link" href="#">
                        Next <i class="fe fe-arrow-right ms-1"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection