@extends('backend.layouts.app')
@section('content')
<div class="card page-container" id="page-container">
    <div class="card-body p-lg-25 content-wrap">

        <!--begin::Layout-->
        <div class="d-flex flex-column flex-lg-row mb-17">
            <div class="flex-lg-row-fluid me-0 me-lg-20">
                <form action="{{ $action }}" class="form mb-15 repeater" method="POST" id="kt_careers_form" enctype='multipart/form-data'>
                    @csrf
                    @if ($method == 'PUT')
                    @method('put')
                    @endif

                    <div class="row mb-5">
                        @foreach ($languages as $language)
                        <div class="col-md-6 fv-row"  @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif  >
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Question', $language->code) }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $question->name[$language->code] }}" placeholder="{{ TranslationManager::translate('Question', $language->code) }}" name="name[{{ $language->code }}]" />
                            @error("name.$language->code")
                            <span class="error">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        @endforeach
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6 fv-row">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Time') }}</label>
                            <input type="number" class="form-control form-control-solid" value="{{ $question->time }}" placeholder="{{ TranslationManager::translate('Please Enter Time') }}" name="time" />
                            @error('time')
                            <span class="error">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-6 fv-row">
                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Points') }}</label>
                            <input type="text" class="form-control form-control-solid" value="{{ $question->points }}" placeholder="{{ TranslationManager::translate('Please Enter Points') }}" name="points" />
                            @error('points')
                            <span class="error">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                    </div>
                    <div class="separator mb-8"></div>

                    <div id="answers">
                        <legend>{{ TranslationManager::translate('Answers') }}</legend>
                        <div class=" mb-8"></div>
                        <div class="repeater-default">
                            <div data-repeater-list="answers" class="drag">
                                @foreach ($answers as $answerKey => $answer)
                                <div data-repeater-item="">
                                    <div class="row mb-5">
                                        @foreach ($languages as $language)
                                        <div class="col-md-3 fv-row"  @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif  >
                                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Answer', $language->code) }}</label>
                                            <input type="text" class="form-control form-control-solid" value="{{ $answer['name'][$language->code] }}" placeholder="{{ TranslationManager::translate('Answer', $language->code) }}" name="name_{{ $language->code }}" />
                                            @error("answers.$answerKey.name_$language->code")
                                            <span class="error">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        @endforeach
                                        {{-- is True Input --}}
                                        <div class="col-md-3 fv-row">
                                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Is is Correct Answer?') }}</label>
                                            <br>
                                            <input class="form-check-input" type="radio" name="is_correct" {{ @$answer['is_correct'] ? 'checked' : '' }} id="is_correct{{ $answerKey }}">
                                            <label for="is_correct{{ $answerKey }}" class="form-check-label">
                                                {{ TranslationManager::translate('Yes') }}
                                            </label>

                                            @error('answers.is_correct')
                                            <span class="error">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="col-md-3 fv-row">
                                            <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Delete Answer?') }}</label>
                                            <br>
                                            <span data-repeater-delete="" class="btn btn-danger btn-sm">
                                                <span class="glyphicon glyphicon-remove"></span>
                                                {{ TranslationManager::translate('Delete') }}
                                            </span>
                                        </div>


                                    </div>
                                </div>
                                @endforeach

                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-1 col-sm-11">
                                    <span data-repeater-create="" class="btn btn-info btn-md">
                                        <span class="glyphicon glyphicon-plus"></span> {{ TranslationManager::translate('New Answer') }}
                                    </span>
                                </div>
                            </div>
                            <hr>
                        </div>

                    </div>

                    <button type="submit" class="btn btn-primary" id="kt_careers_submit_button">
                        <span class="indicator-label">{{ TranslationManager::translate('Submit') }}</span>
                    </button>
                    <a href="{{ route('admin.exams.index', ['section' => $exam->section]) }}" class="btn btn-danger" id="kt_careers_submit_button">
                        <span class="indicator-label">{{ TranslationManager::translate('Back To Exam') }}</span>
                    </a>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/FontAwesome.otf"></script>

<script>
    var repeater = $('.repeater-default').repeater({
        initval: 1,
    });


    jQuery(".drag").sortable({
        axis: "y",
        cursor: 'pointer',
        opacity: 0.5,
        placeholder: "row-dragging",
        delay: 150,
        update: function(event, ui) {
            console.log('repeaterVal');
            console.log(repeater.repeaterVal());
            console.log('serializeArray');
            console.log($('form').serializeArray());
        }
        // update: function(event, ui) {
        //     $('.repeater-default').repeater( 'setIndexes' );
        // }

    }).disableSelection();

    // jQuery(".drag > div").on("dragover", function(event) {
    //     event.preventDefault();  
    //     event.stopPropagation();
    //     $(this).addClass('dragging');
    // });

    // jQuery(".drag > div").on("dragleave", function(event) {
    //     event.preventDefault();  
    //     event.stopPropagation();
    //     $(this).removeClass('dragging');
    // });

    // jQuery(".drag > div").on("drop", function(event) {
    //     event.preventDefault();  
    //     event.stopPropagation();
    //     alert("Dropped!");
    // });

    // jQuery(".ui-sortable-handle")
    //     // crucial for the 'drop' event to fire
    //     .on('dragover', false) 

    //     .on('drop', function (e) {
    //         // do something
    // console.log('1');
    //         return false;
    //     });
</script>

<script script type="text/javascript">
    $(document).on('click', '#answers input[type="radio"]', function() {
        console.log('click');
        $('#answers input[type="radio"]').each(function() {
            $(this).prop("checked", "");
        });
        $(this).prop("checked", "checked");
    });
</script>
@endpush