@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*/
    </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
   
    <livewire:admin.add-question :$exam> 

@endsection

@section('scripts')
    <script>
        var i = 0; 
        var n=0;
        $("#dynamic-ar").click(function () { 
            ++i; ++n;
        
            // $("#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><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>');
                                                                                                                                                                                                                               
            if(n >2){
                $('#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>
    <script>

        $(document).ready(function() {
            $("input[name$='qtype_id']").click(function() {
                var test = $(this).val(); 

                $("div.box").hide();
                $("#qtype_id" + test).show();
            });
        });
    </script>
@endsection