@extends('layouts.admin-master')

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

@section('styles')
    <style>
        /* Start questionnaire*/
        fieldset {
            margin-left: 2px;
            margin-right: 2px;
            padding-top: 0.35em;
            padding-bottom: 0.625em;
            padding-left: 0.75em;
            padding-right: 0.75em;
            border: 2px groove (internal value);
            background-color: #f7f7f7;
        }
        legend {
            width: 11%;
            background-color: #90a8c4;
            color: white;
            padding: 5px 10px;
        }
        /* End questionnaire*/
        
        /*add question - add file for chooses*/
        #customFile .custom-file-control:lang(ar)::after {
        content: "* صيغة الصورة : jpeg ,jpg , png";
        }

        #customFile .custom-file-control:lang(ar)::before {
        content: "استعراض ";
        }

        /*when a value is selected, this class removes the content */
        /* .custom-file-control.selected:lang(en)::before {
        content: "" !important;
        } */

        .custom-file {
        overflow: hidden;
        }
        .custom-file-control {
        white-space: nowrap;
        }
        /* end add question */
    </style>
@endsection

@section('button')
    <div>
        <a href="{{$exam->path()}}" class="btn btn-outline-primary btn-sm" title=" العودة">
            <i class="far fa-arrow-alt-circle-right 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>
        
    </div>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @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
    <form action="{{url('admin/exams/'. $exam->id .'/questions/update/'.$question->id)}}" method="post" enctype="multipart/form-data"> 
        @csrf 
        @method('PATCH')
        <div class="mb-3"> 
            <fieldset>
                <legend> نص السؤال</legend>
                <!-- <label for="question" class="form-label"> السؤال</label> -->
                <input type="text" value="{{old('question',$question->question)}}" class="form-control" name="question" id="question" aria-describedby="questionHelp">

                @error('question')
                    <small class="text-danger"> {{$message}}</small>
                @enderror
                <div class="row mt-3">
                    <div class="col-sm-5">
                        <!-- <h6 class="card-title">إضافة صورة (اختيارية)</h6> -->
                        <h6 class="card-title">الصورة :</h6>
                        @if($question->qimgurl)
                            <img src="{{asset('storage/exams/'.$exam->id.'/qattachments/'.$question->id.'/'.$question->qimgurl)}}" width="503px" height="66px" class="my-2">
                        @endif
                        <div class="custom-file" id="customFile">
                            <input type="file" class="custom-file-input custom-file-control" id="imageHeader"
                                name="qimgurl">
                            <label class="custom-file-label" for="customFile"> </label>
                            <p class="text-danger">* صيغة الصورة : jpeg ,jpg , png </p>
                            @error('qimgurl')
                                <small class="text-danger">{{$message}}</small>
                            @enderror
                        </div>
                    </div>
                </div>
            </fieldset>  
        </div>
        <!-- <hr> -->
        <div class="form-group1">
            <fieldset>
                <legend> الخيارات</legend>
                <table class="table table-bordered" id="dynamicAddRemove">
                    @foreach($question->options as $key=>$option)
                        <tr>
                            <td style="width:40%">
                                <!-- <label for="answer1" class="form-label"> الخيار الأول </label> -->
                                <input type="text" value="{{old('answers.$key.option',$option->option)}}" class="form-control" 
                                    name="answers[{{$key}}][option]" id="answer1" aria-describedby="choicesHelp" placeholder="الخيار الأول">
                                @error('answers.$key.option')  
                                    <small class="text-danger"> {{$message}}</small>
                                @enderror
                            </td>
                            <!-- productsImages -->
                            <td style="width:30%">
                                <div class="mb-3">
                                    @if($option->oimgurl)
                                        <img src="{{asset('storage/exams/'.$exam->id.'/oattachments/'.$option->oimgurl)}}"  style="width:151px;height:46px;" class="img-responsive"/>
                                    @endif
                                    <!-- <label class="form-label" for="inputImage">Select Images</label> -->
                                    <input type="hidden" name="oProductsImages[{{$loop->index}}]" value="{{$option->oimgurl}}">
                                    <input 
                                        type="file" 
                                        name="productsImages[{{$loop->index}}]" 
                                        id="inputImage" 
                                        class="form-control @error('productsImages') is-invalid @enderror">
                                    @error('productsImages')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </td>
                            <td style="width:15%">
                                <div class="mb-3">
                                    <!-- <label class="form-label" for="inputImage"> العلامة </label> -->
                                    <input 
                                        type="text" value="{{old('answers.$key.points',$option->points)}}"  name="answers[{{$key}}][points]"
                                        id="inputImage" 
                                        placeholder=" العلامة"
                                        class="form-control">
                    
                                    @error('answers.$key.points')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </td>
                            @if($loop->first)
                                @if($question->qtype_id == 1) 
                                    <td class="text-center" style="width:15%"><button type="button" name="add" id="dynamic-ar" class="btn btn-outline-primary d-inline"> إضافة خيار جديد</button></td>
                                @endif
                            @else
                                <td class="text-center"><button type="button" class="btn btn-outline-danger remove-input-field">حذف</button></td>
                            @endif
                        </tr>
                    @endforeach
                </table>
                
            </fieldset>
        </div>
        <hr>
        <p id="demo"></p>
       
        <div class="form-footer mt-1 text-center">
            <button type="submit" class="btn btn-primary">تعديل</button>
        </div>
    </form>


@endsection

@section('scripts')
    <script>
        // var i = 0; 
        var i = {{ $question->options->count() }}; 
        var n= {{ $question->options->count() }};
        $("#dynamic-ar").click(function () { 
           
        
            // $("#dynamicAddRemove").append('<tr><td><input type="text" class="form-control" name="answers['+i+'][answer]" value="{{old('answers.".i.".answer')}}" placeholder="خيار آخر"></td> <td><div class="custom-file"><input type="file" class="custom-file-input imageOptions" id="customFile'+i+'" name="productsImages[]"><label class="custom-file-label custom-file-control form-control-file" for="customFile'+i+'"></label></div></td><td class="text-center"><button type="button" class="btn btn-outline-danger remove-input-field">حذف</button></td></tr>');
            $("#dynamicAddRemove").append('<tr><td><input type="text" class="form-control" name="answers['+i+'][option]" value="{{old('answers.".i.".option')}}" placeholder="خيار آخر"></td><td><div class="custom-file"><input type="file" class="custom-file-input imageOptions" id="customFile'+i+'" name="productsImages[]"><label class="custom-file-label custom-file-control form-control-file" for="customFile'+i+'"></label></div></td> <td><input type="text" name="answers['+i+'][points]" value="{{old('answers.".i.".points')}}" id="inputImage" placeholder=" العلامة" class="form-control"></td><td class="text-center"><button type="button" class="btn btn-outline-danger remove-input-field">حذف</button></td></tr>');
            ++i; ++n;                                                                                                                                                                                                             
            if(n >5){
                $('#dynamic-ar').removeClass('d-inline');
                $('#dynamic-ar').addClass('d-none');
            }
        });
        $(document).on('click', '.remove-input-field', function () {
        --n;
            $(this).parents('tr').remove();
            if(n < 9){
                $('#dynamic-ar').removeClass('d-none');
                $('#dynamic-ar').addClass('d-inline');
            }
        });
    </script>
@endsection