@extends('layouts.app') @push('css') @endpush @section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                @isset($feedback_question)
                <h1 class="m-0 text-dark">{{ $feedback->name }} Feedback Question Edit</h1>
                @else
                <h1 class="m-0 text-dark">{{ $feedback->name }} Feedback Question Create</h1>
                @endisset
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <div class="d-inline p-2 text-white text-right">
                        <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                    </div>
                    <div class="d-inline p-2 text-white text-right">
                        <a href="{{ route('feedbackquestion.index',$feedback->id) }}" class="btn btn-sm btn-primary text-right"><i class="fas fa-arrow-circle-left"></i> Back</a>
                    </div>
                </ol>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Main row -->
        <div class="row">
            <div class="col-md-12 col-x-12 col-sm-12">
                <form action="{{ isset($feedback_question) ? route('feedbackquestion.update', $id) : route('feedbackquestion.store', $id) }}" method="POST">
                    @csrf @isset($feedback_question) @method('PUT') @endisset
                    <div class="card-body">
                        <h5 class="card-title">Manage Feedback Question</h5> <hr>
                        <br />
                        @isset($feedback_question)
                        <div>
                            <h5>Question</h5>
                            <input type="text" name="question" rquired class="form-control @error('question') is-invalid @enderror" value="{{ $feedback_question->question }}"/>
                            @error('question')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            <h6>Answer type</h6>
                            <select id="answer_type" name="answer_type"  class="form-control @error('answer_type') is-invalid @enderror"><br>
                            <option value="">Select Answer Type</option>
                            <option value="written" @isset($feedback_question) {{ $feedback_question->answer_type == 'written' ? 'selected' : '' }} @endif>Written</option>
                            <option value="point" @isset($feedback_question) {{ $feedback_question->answer_type == 'point' ? 'selected' : '' }} @endif>Point</option></select>
                            @error('answer_type')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                            <input type="submit" class="btn btn-primary mt-2" value="Update" />
                        </div>
                        @else
                        <div class="form-group">
                            <label for="quantity">How many questions?</label>
                            <input name="quantity" id="quantity" type="number" placeholder="quantity" class="form-control @error('quantity') is-invalid @enderror" title="quantity" value="" />
                            @error('quantity')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <input id="number_input" class="btn btn-primary" type="button" value="Open Question Fields"/>
                        <div id="questions" class="questions"> 
                        </div>
                        @endisset
                        @isset($feedback_question)
                        
                        @else
                        
                        @endisset
                    </div>

                </form>
            </div>
        </div>
        <!-- /.row (main row) -->
    </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->

@endsection @push('js')
<script>
    document.getElementById('number_input').onclick = function(){
    var totalIterations = parseInt(document.getElementById('quantity').value);
    var output = document.getElementById('questions');
    output.innerHTML = '';
    for(var i = 1; i <= totalIterations; i ++) {
        var item = document.createElement('div');
        item.innerHTML = '<h5>Question number ' + i + '</h5>';
        item.innerHTML += '<input type="text" name="question[]" rquired class="form-control @error('question') is-invalid @enderror" value=""/>';
        item.innerHTML += '@error('question')<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>@enderror';
        item.innerHTML += '<h6>Answer type</h6>';
        item.innerHTML += '<select id="answer_type" name="answer_type[]"  class="form-control @error('answer_type') is-invalid @enderror"><br><option value="">Select Answer Type </option><option value="written" @isset($feedback_question) {{ $feedback_question->answer_type == 'written' ? 'selected' : '' }} @endif>Written</option><option value="point" @isset($feedback_question) {{ $feedback_question->answer_type == 'point' ? 'selected' : '' }} @endif>Point</option></select>';
        output.appendChild(item);
    }
    item.innerHTML +='<input type="submit" class="btn btn-primary mt-2" value="Create Feedback Questions" />'
};
</script>
@endpush