@include('includes/header_start')

<link href="{{ asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">

<style>
    label{
        font-size: 22px;
    }
</style>
@include('includes/header_end')

<!-- Page title -->
<ul class="list-inline menu-left mb-0">
    <li class="list-inline-item">
        <button type="button" class="button-menu-mobile open-left waves-effect">
            <i class="ion-navicon"></i>
        </button>
    </li>
    <li class="hide-phone list-inline-item app-search">
        <h2 class="page-title">Dashboard</h2>
    </li>
</ul>

<div class="clearfix"></div>
</nav>

</div>
<!-- Top Bar End -->

<!-- ==================
     PAGE CONTENT START
     ================== -->

<div class="page-content-wrapper">


    <div class="container-fluid">

        <div class="row">
            <div class="col-md-12 col-xl-12">
                <div class="card m-b-30">
                    <div class="card-body">

{{--                        <h4 class="mt-0 header-title">Animated stripes</h4>--}}
                        <div class="">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>

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

        <div class="row">
            <div class="col-md-9 col-xl-9">
                <div class="card m-b-30">
                    <div class="card-header">General Questions</div>

                    <div class="card-body">

                        <form action="{{ isset($id) ?  route('questionnaires.edit.questionnaire', ['id' => $id]) :  route('questionnaires.store.questionnaire') }} " method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Weight
{{--                                            <i class="ion-help-circled" rel="tooltip" title="Select active status" data-content="Select your weight from the dropdown box"></i>--}}
                                        </label>
                                        <select class="form-control select2 weight-select" id="weight" name="weight">
                                            @for($i=20; $i <= 300; $i++)
                                                <option value="{{ $i }}">{{ $i }} pounds</option>
                                            @endfor
                                        </select>

                                        @error('status')
                                        <span class="label label-warning">{{ $message }}</span>
                                        @enderror

                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Height
                                            <i class="ion-help-circled" rel="tooltip" title="Select active status" data-content="Select your height from the dropdown box"></i>
                                        </label>
                                        <select class="form-control select2 height-select" id="height" name="height">
                                            @for($i=60; $i <= 250; $i++)
                                                <option value="{{ $i }}">{{ $i }} centimeters</option>
                                            @endfor
                                        </select>

                                        {{--                        @error('status')--}}
                                        {{--                        <span class="label label-warning">{{ $message }}</span>--}}
                                        {{--                        @enderror--}}

                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-lg-10 offset-1 text-center">
                                    <span>
                                        <h1 class="bmi-calc"></h1>
                                    </span>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Age
                                            <i class="ion-help-circled" rel="tooltip" title="Select active status" data-content="Select your age from the dropdown box"></i>
                                        </label>
                                        <select class="form-control select2 age-select" id="age" name="age">
                                            @for($i=1; $i <= 120; $i++)
                                                <option value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>

                                        {{--                        @error('status')--}}
                                        {{--                        <span class="label label-warning">{{ $message }}</span>--}}
                                        {{--                        @enderror--}}

                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Gender
                                            <i class="ion-help-circled" rel="tooltip" title="Select gender" data-content="Select your gender from the dropdown box"></i>
                                        </label>
                                        <select class="form-control select2 gender-select" id="gender" name="gender">
                                                <option value="female">Select</option>
                                                <option value="female">Female</option>
                                                <option value="male">Male</option>
                                        </select>

                                        {{--                        @error('status')--}}
                                        {{--                        <span class="label label-warning">{{ $message }}</span>--}}
                                        {{--                        @enderror--}}

                                    </div>
                                </div>
                            </div>


                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Highest level of education
                                            <i class="ion-help-circled" rel="tooltip" title="Select highest education leve" data-content="Select your highest education level from the dropdown"></i>
                                        </label>
                                        <select class="form-control select2 education-select" id="education" name="education">
                                            <option value="female">Select</option>
                                            <option value="primary">Primary</option>
                                            <option value="secondary">Secondary</option>
                                            <option value="undergraduate">College (Undergraduate)</option>
                                            <option value="masters">College (Masters)</option>
                                            <option value="phd">College (PhD)</option>
                                        </select>

                                        {{--                        @error('status')--}}
                                        {{--                        <span class="label label-warning">{{ $message }}</span>--}}
                                        {{--                        @enderror--}}

                                    </div>
                                </div>

                            </div>

                            <h5></h5>

                            <div class="form-group">
                                <label>When was your previous surgery date? (if applicable)</label>
                                <div>
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker">
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                        </div>
                                    </div><!-- input-group -->
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Medical Allergies</label>

                                <select class="select2 form-control allergy-select" multiple="multiple" multiple data-placeholder="Choose ...">
                                    <optgroup label="Antibiotics">
                                        <option value="AK">Amoxicillin</option>
                                        <option value="HI">Ampicillin</option>
                                        <option value="HI">Penicillin</option>
                                    </optgroup>
                                    <optgroup label="Nonsteroidal anti-inflammatory">
                                        <option value="CA">Ibuprofen</option>
                                        <option value="NV">Naproxen</option>
                                        <option value="OR">Oregon</option>
                                        <option value="WA">Washington</option>
                                    </optgroup>
                                    <optgroup label="Other">
                                        <option value="CA">Aspirin</option>
                                        <option value="NV">Sulfa Drugs</option>
                                        <option value="OR">Chemotherapy Drugs</option>
                                        <option value="WA">Insulin</option>
                                    </optgroup>

                                </select>

                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary btn-flat pull-right">Submit</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xl-3">
                <div class="card m-b-30">
                    <img class="card-img-top img-fluid" src="{{ asset('assets/images/users/avatar-2.jpg') }}" alt="Card image cap">

                    <div class="card-header text-center">Contact Us</div>
                    <div class="card-body">

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

    </div>


</div> <!-- Page content Wrapper -->

</div> <!-- content -->

@include('includes/footer_start')

<script src="{{ asset('assets/plugins/select2/js/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>

<!-- Plugins Init js -->
<script src="{{ asset('assets/pages/form-advanced.js') }}"></script>


<script>
    $(function () {

        $( "#height" ).change(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
        });
        $( "#weight" ).change(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
        });
        $( "#bmi" ).click(function() {
            $('.bmi-calc').empty();
            var weight = $('#weight').val();
            var height = $('#height').val();

            var bmi = weight/(height/100*height/100);

            $('.bmi-calc').append('<h1>BMI: <small>' + bmi.toFixed(2) + '</small></h1>');
        });
    });
    $(function(){
        $('#datepicker').datepicker({
            format: "dd.mm.yyyy",
            todayBtn: "linked",
            language: "de"
        });

        $(".weight-select").select2();
        $(".height-select").select2();
        $(".gender-select").select2();
        $(".age-select").select2();
        $(".education-select").select2();

        $(".allergy-select").select2();
    });

</script>

@include('includes/footer_end')