@extends('layouts.admin-master')

@section('title')
الأسئلة الخاصة بالاختبار :  <span style="color:green;"> {{$exam->name}}</span>


@endsection

@section('styles')
    <style>
       .accordion {
            margin: 15px;
        }
        .accordion .fa-plus{
            margin-right: 0.2rem;
        }
    </style>

@endsection

@section('button')
    <span>

            <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>

        <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)
        @foreach($exam->questions as $key=>$question)
            <div id="accordion">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center" id="heading{{$loop->iteration}}" >
                        <h5 class="mb-0" style="width:82%">
                            <button class="btn btn-link {{$loop->iteration == 1 ? '' : 'collapsed'}}" data-toggle="collapse" data-target="#collapse{{$loop->iteration}}" aria-expanded="{{$loop->iteration == 1 ? 'true' : 'false'}}" aria-controls="collapse{{$loop->iteration}}">
                                <i class="fa fa-plus changeable"></i>
                                @if($question->question)
                                   {{$key+1}} - {{$question->question}}
                                @endif
                            </button>
                        </h5>
                        <div  style="width:18%">
                            <span style="font-size: 13px;font-weight: bold;" class="subscriberNum1 btn btn-sm btn-outline-primary border-0" title="">( {{ $question->qtype->name }} )</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 id="collapse{{$loop->iteration}}" class="collapse " aria-labelledby="heading{{$loop->iteration}}" data-parent="#accordion">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-sm" 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>
                    </div>
                </div>

            </div>
        @endforeach
    @endif






@endsection

@section('scripts')
<script>

        $(document).ready(function () {
            // Add minus icon for collapse element which
            // is open by default
            $(".collapse.show").each(function () {
                $(this).prev(".card-header").find(".fa")
                    .addClass("fa-minus").removeClass("fa-plus");
            });
            // Toggle plus minus icon on show hide
            // of collapse element
            $(".collapse").on('show.bs.collapse', function () {
                $(this).prev(".card-header").find(".changeable")
                    .removeClass("fa-plus").addClass("fa-minus");
            }).on('hide.bs.collapse', function () {
                $(this).prev(".card-header").find(".changeable")
                    .removeClass("fa-minus").addClass("fa-plus");
            });
        });
    </script>
@endsection