@extends('layout.master')
@section('title', 'Add Field')
@section('add-fields', 'active')
@section('newCase', 'active')
@section('levelCSS')
    <link rel="stylesheet" href="{{asset('vendors/select2/select2.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendors/select2-bootstrap-theme/select2-bootstrap.min.css')}}">
@endsection

@section('body')

    <div class="col-md-12">
        <div class="tab-content tab-transparent-content pb-0">
            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">

                <form action="{{route('/field/add-post')}}" method="post" id="fieldForm">

                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group">
                                    {{--<input type="hidden" name="id" @if(isset($info)) value="{{$info->id}}" @endif>--}}
                                    <label class="col-sm-6">Field Name</label>
                                    <div class="col-sm-6">
                                        <input type="hidden" name="relative" value="questions">
                                        <input name="description" type="text" class="form-control" required="required" id="description" @if(isset($info)) value="{{$info->description}}" @endif>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6">Field Text</label>
                                    <div class="col-sm-6">
                                        <input name="label" type="text" class="form-control" required="required" id="label" @if(isset($info)) value="{{$info->label}}" @endif>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6">Field Description</label>
                                    <div class="col-sm-6">
                                        <input name="label_description" type="text" class="form-control" id="label" @if(isset($info)) value="{{$info->label_description}}" @endif>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6">Risk Type</label>
                                    <div class="col-sm-6">
                                        <select name="risk_type" class="form-control" id="risk_type" required="required">
                                            <option value=""></option>
                                            <option value="major">Major</option>
                                            <option value="main">Main</option>
                                            <option value="minor">Minor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6">Type</label>
                                    <div class="col-sm-6">
                                        <select name="type" class="form-control" id="type" required="required">
                                            <option value=""></option>
                                            <option value="text">Free Text</option>
                                            <option value="textarea">Free Text (multiple lines)</option>
                                            <option value="single">Single Select Option</option>
                                            <option value="multiple">Multiple Select Options</option>
                                            <option value="radio">Single Radio Option</option>
                                            <option value="checkbox">Multiple Checkbox Options</option>
                                            <option value="hidden">Hidden</option>
                                            <option value="date">Date</option></select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6">Default Value</label>
                                    <div class="col-sm-6">
                                        <input name="value" type="text" class="form-control" id="value" @if(isset($info)) value="{{$info->value}}" @endif>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label class="control-label pull-right">Applicable options</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <div class="table-responsive" id="children">
                                            <table class="table">
                                                <thead>
                                                <tr>
                                                    <td width="45%">Values</td>
                                                    <td width="50%" class="center">(optional explanation)</td>
                                                    <td width="5%" class="center"></td>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr id="addcurrbutton">
                                                    <td colspan="2"></td>
                                                    <td><button class="btn btn-default pull-right mb10" onclick="return add_children()">+</button></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <input type="hidden" id="children_counter" name="children_counter" value="0">

                                            <span id="children_template" data-template="<tr><td><input required name=&quot;children[__index__][text]&quot; type=&quot;text&quot; class=&quot;form-control main-text&quot; value=&quot;&quot; id=&quot;sign___index__&quot;></td><td><input name=&quot;children[__index__][detail]&quot; type=&quot;text&quot; class=&quot;form-control main-text&quot; value=&quot;&quot;></td><td>
					<a title=&quot;Remove line&quot;class=&quot;delete-row&quot; href=&quot;javascript:;&quot; ><i class=&quot; fa fa-trash&quot;></i></a></td></tr>"></span>

                                        </div>

                                    </div>
                                </div>

                                {{ csrf_field() }}
                                <input type="hidden" name="last_updated_by" value="{{currentUser()->id}}">

                                <div class="form-group">
                                    <button class="btn btn-md btn-primary" id="fieldBtn">SAVE INFORMATION</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('levelJS')
    <script src="{{asset('vendors/select2/select2.min.js')}}"></script>
    <script !src="">

        //<!--
        $('#fieldForm').submit(function (e) {
            e.preventDefault();

            $('#fieldBtn').prop('disabled', true).html("Saving <i class='fa fa-spin fa-spinner'></i>");

            var formData = $(this).serialize();
            var url = $(this).attr('action');

            axios({
                method: 'post',
                url: url,
                data: formData
            })
                .then(function (response) {
                    $('#fieldBtn').prop('disabled', false).html('SAVE INFORMATION');
                    if(response.statusText==='OK')
                    {
                        $.toast({text: response.data.done, icon: 'success', position: 'top-right'});
                        location.reload();
                    } else{
                        $.toast({text: response.data.error, icon: 'error', position: 'top-right'});
                    }
                })
                .catch(function (data) {
                    console.log('Oops!: '+data.error);
                    $('#fieldBtn').prop('disabled', false).html('SAVE INFORMATION');
                });
        });
        function add_children() {
            currentCount = parseInt($("#children_counter").val(), 10) + 1;
            var template = $("#children > span").data("template");
            template = template.replace(/__index__/g, currentCount);
            $("#children > table > tbody tr#addcurrbutton").before(template);
            $("#children_counter").val(currentCount);
            return false;
        }
        //-->
    </script>


@endsection