@extends('layouts.admin-master')

@section('title')
الأسئلة الخاصة بالاختبار :  <span class="text-gray-900"> {{$exam->name}}</span>
@endsection

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection

@section('button')
    <span> 
        <!-- @if($exam->questions()->count() < 10) -->
            <a href="{{url('admin/exams/'. $exam->id .'/questions/create')}}" class="btn btn-outline-primary btn-sm">
                <i class="fa fa-plus mr-1" aria-hidden="true"></i>إضافة سؤال
            </a>
        <!-- @endif -->
        <a href="{{url('admin/exams')}}" class="btn btn-outline-info btn-sm" title=" العودة">
            <i class="fa fa-list mr-1" aria-hidden="true"></i> الاختبارات
        </a>
        
    </span>
@endsection

@section('content')
    @if(session('message'))
        <div class="alert alert-{{session('alert_type')}}" id="success-alert">
            <button type="button" class="close" data-dismiss="alert">x</button>
            {{session('message')}}
        </div>
    @endif
   
        
       
            @if($exam->questions()->count()>0)
                <!-- <h6>الأسئلة :  </h6> -->

                @foreach($exam->questions as $key=>$question)
                    <div class="card mb-2 our-skills">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div>
                                @if($question->question)
                                    <h5 class="">{{$key+1}} - {{$question->question}}</h5> 
                                @endif 
                            </div>
                            <div >
                                <span style="font-size: 13px;font-weight: bold;" class="subscriberNum1 btn btn-sm btn-outline-primary border-0" title="عدد المشاركين"></span>
                                
                                <form class="d-inline" action="{{url('admin/exams/'. $exam->id .'/questions/delete/'.$question->id)}}" method="post"> 
                                    @method('DELETE')
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-outline-danger border-0" title="حذف سؤال"> <i class="fa fa-trash"></i></button>
                                </form>
                              
                                
                                <a href="{{route('admin.question.edit',[$exam->id,$question->id])}}" class="btn btn-outline-secondary btn-sm border-0"  title="تعديل السؤال"><i class="fa fa-edit"></i></a>
                               
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="datatable" width="100%" cellspacing="0">
                                    <thead>
                                        <tr class="card-header text-center" style="background-color: transparent;">
                                            <th class="text-center" style="width:70%">الخيارات</th>
                                            <th class="text-center" style="width:30%"> العلامة أو النقاط </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($question->options as $option)
                                            <tr>
                                                <!-- <td style="width:70%">{{ $loop->iteration }}- {{$option->option }}</td> -->
                                                <td style="width:70%"> <i class="fa fa-dot-circle"></i> {{$option->option }}</td>
                                                <td class="text-center" style="width:30%">{{$option->points }}</td>
                                            </tr> 
                                        @endforeach
                                    </tbody>
                                </table>
                            </div><!--table-responsive-->
                         
                        </div><!-- card body-->
                        
                    </div><!--card-->
                @endforeach 
            @endif
            
     
  
@endsection

@section('scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    jQuery.datetimepicker.setLocale('ar'); 
    jQuery('#date').datetimepicker({
        isRTL: true,
        format:'Y-m-d h:i:s',
    });

</script>
@endsection