@extends('dashboard.layouts.master')

@section('css')
<!-- Sweet Alert -->
    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
<style type="text/css">
    .bg-easy{
        background-color: #F0ECE2 !important;
        /*border: 1px solid !important;*/
    }
    .bg-mid{
        background-color: #ACDBDF !important;
    }

    .bg-good{
        background-color: #dfdfe4 !important;
    }

    .text-black{
        color: #000000 !important;
    }
</style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">تصحيح السؤال</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{trans('labels.dashboard')}}</a></li>
            <li class="breadcrumb-item active">تصحيح السؤال {{$question->question_id}}</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <div class="col-lg-12 dragable-card modal-btn-card" >
                        <div class="card text-black bg-good">
                            <div class="card-body ">
                                <blockquote class="card-blockquote mb-0" >
                                    @php($mainQuestion = $question->question)
                                    <div cl>
                                        <div class="degr">
                                            <p class="p-ans">{!! $mainQuestion->question !!}</p>
                                        </div>
                                    </div>
                                    <div>
                                        @if ($mainQuestion->image_full_path)
                                            <img src="{{ $mainQuestion->image_full_path }}"
                                                style="transform: translate(0%);
                                                border-radius: 10%;
                                                width: 100%;
                                                height: 100%;">
                                        @endif
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12" style="font-size: 18px;">
                                            <p>
                                                اجابة الطالب:
                                            </p>
                                            {!! nl2br($question->answer_id) !!}
                                            
                                        </div>
                                        @if ($question->image)
                                            <img src="{{ $question->image_full_path }}" style="
                                            max-width: 600px;
                                            height: 100%;">
                                        @else
                                            <p>لا توجد صورة</p>
                                        @endif
                                    </div>
                                    <footer class="blockquote-footer font-12 text-black">
                                        <cite title="Source Title" >
                                            <input id="degree" data-degree="{{$question->question_degree}}" value="{{$question->degree}}" class="form-control">
                                            <a class="btn btn-primary" id="checkit" href="{{route('admin.lecture-questions.exam-question.update', $question->id)}}">تصحيح</a>
                                        </cite>
                                    </footer>
                                    @if($mainQuestion->hint)
                                    <div class="question-foot">
                                        <h4>معلومة هامة</h4>
                                        <p style="min-height: 0px !important;">{{$mainQuestion->hint ?? null}}</p>
                                    </div>
                                    @endif
                                    @if($mainQuestion->hint_image_full_path)
                                        <h4>معلومة هامة او الاجابة نموذجية</h4>
                                        <img style="width:100%" src="{{$mainQuestion->hint_image_full_path}}">
                                    @endif
                                    
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')

<script>
    $('#checkit').click(function (event) {
        event.preventDefault();
        const url = $(this).attr('href');
        let degree = $('#degree');
        let check = degree.val() <= degree.data('degree');
        
        if(check){
            $.ajax({
                type: 'post',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'degree': degree.val(),
                    'update': 1,
                },
                dataType: 'json',
                success: function (data) {
                    location.replace("{{route('admin.lecture-questions.exam-questions', ['type'=> 'mine'])}}");
                },
                error: function (data) {
                    alert('Somthing went wrong');
                }
            });
        }else{
            
            alert('Degree cannot be more than '+ degree.data('degree'));
        }
        
    });

</script>
@endsection