@extends('layouts.vertical', ["page_title"=> "Add & Edit Products"])
@section('css')
    <link href="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/dropify/dropify.min.css')}}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
<!-- Start Content-->
<div class="container-fluid">
    <form method="post" id="form-availiblity" enctype="multipart/form-data">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <button type="submit" class="btn btn-secondary float-right">Submit</button>         
                </div>
                <h4 class="page-title">{{!$edit ? 'Add New Question':'Edit Question' }}</h4>
            </div>
        </div>
    </div>     
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                        @csrf
                        <input type="hidden" name="correct_ans" value="" id="correct_ans">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="name">Question</label>
                                    <textarea id="question" name="question" class="form-control" placeholder="Question" rows="6" required >{{$edit?$question->question:''}}</textarea>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="alert" role="alert" id="login-alert"></div>
                                <h4>Options <button type="button" class="btn btn-info waves-effect waves-light float-end" id="btn-add-option">Add Option</button></h4>
                                
                                <table class="table mb-0">
                                        <thead>
                                        <tr>
                                            <th>Option</th>
                                            <th style="width:5%">Is Correct</th>
                                            <th style="width:10%"></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                @if($edit)
                                    @foreach($question->options as $option)
                                    <tr>
                                        <td><input type="text" name="options[]" class="form-control" value="{{$option->option}}" required></td>
                                        <td><input type="radio" name="correct" id="" value="option8" {{$option->is_correct?'checked':''}}></td>
                                        <th><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></th>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td><input type="text" name="options[]" class="form-control" value="" required></td>
                                        <td><input type="radio" name="correct" id="" value="option8"></td>
                                        <th><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></th>
                                    </tr>
                                @endif
                                    </tbody>
                                </table>

                            </div> <!-- end col -->
                            
                        </div> <!-- end row -->                         


                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div> <!-- end col -->

    </div>
    </form>
</div>
@endsection

@section('script')
    <script src="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
    <script src="{{ URL::asset('assets/libs/dropify/dropify.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.date-picker').flatpickr();
            $('.datetime-picker').flatpickr({
                enableTime: true,
                dateFormat: "Y-m-d H:i"
            });

            $('#btn-add-option').click(function(){
                $('table tbody').append('<tr><td><input type="text" name="options[]" class="form-control" value="" required></td><td><input type="radio" name="correct" id="" value="option8"></td><th><button type="button" class="btn btn-danger waves-effect waves-light btn-remove"><i class="mdi mdi-close"></i></button></th></tr>');

                $('.btn-remove').unbind();
                $('.btn-remove').click(function(){
                    $(this).parent().parent().remove();
                });
            });
            $('#form-availiblity').submit(function(event) {
                event.preventDefault(); //this will prevent the default submit
                console.log($('#form-availiblity').serialize())
                var index = $("input[type=radio]").index($("input[type=radio]:checked"));
                if(index > -1) {
                    $('#correct_ans').val(index);
                    $('#form-availiblity').unbind('submit').submit();
                } else {
                    $('#login-alert').html('Please select correct Answer');
                    $('#login-alert').removeClass('alert-success');
                    $('#login-alert').addClass('alert-danger');
                    $('#login-alert').show();
                }
            })
        });
    </script>
@endsection