@include('forms/elements/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">


@include('patients/elements/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">General Questions</h2>
    </li>
</ul>

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

</div>
<!-- Top Bar End -->
<style>
    .card-header {
        background-color: #027eaa!important;
    }
    label{
        font-size: 22px;
    }

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

<div class="page-content-wrapper">
{{--@include('patients.elements.list')--}}

    <div class="container-fluid col-md-10 offset-md-1">

            <div class="pull-right">
                <div class=" text-center">
                    <button type="button" class="btn btn-primary waves-effect waves-light btn-lg help-modal-form" data-toggle="modal" data-target="#myModal"><i class="fa fa-info-circle"></i></button>
                </div>

                <!-- sample modal content -->
                <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title mt-0" id="myModalLabel">How to use:</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">
                                <h4 class="card-header">Enter height & weight in the boxes</h4>
                                <p style="padding:10px;">This will automatically calculate your BMI and
                                    store the value. You are able to change this
                                    at a later date to reflect new surcumstances.</p>
                                <hr>
                                <h4 class="card-header">Choose highest level of education</h4>
                                <p style="padding:10px;">Select the highest level you have achieved in education to date.</p>
                                <hr>
                                <h4 class="card-header">Enter the date of your most recent surgery</h4>
                                <p style="padding:10px;">Please enter the date of the most recent surgery you had.
                                    This is an optional field, so if this does not apply to you, please leave it blank.</p>
                                <hr>
                                <h4 class="card-header">Enter any medical allergies you have</h4>
                                <p style="padding:10px;">Please enter any allergies that you have within this box.</p>
                                <p style="padding:10px;">If you do not have any allergies, please leave this optional field blank</p>
                                <p style="padding:10px;">If you have 2 or more allergies, please separate these values with a comma ' , '</p>
                                <hr>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
            </div>

        <div class="row">
            <div class="col-md-12 col-xl-12">
                <div class="card m-b-30">
                    <div class="card-header text-center">0% complete</div>

                    <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">
                    <h4 class="card-header mt-0">General Questions</h4>

                    <div class="card-body">

                        <form action="{{ isset($id) ?  route('patients.store.general.answer', ['id' => $id]) :  route('patients.store.general.answer') }} " method="POST" enctype="multipart/form-data" autocomplete="off">
                            @csrf

                            <div class="row">

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>
                                            Weight (pounds)
                                        <input type="number" min="1" max="500" class="form-control" id="weight" name="weight"  placeholder="E.g. 140" value="{{ old('weight', $patient->general['weight']) }}">
                                        @if ($errors->has('weight'))
                                            <span class="badge badge-danger">{{ $errors->first('weight') }}</span>
                                        @endif

                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Height (cm)
                                        </label>
                                        <input type="number" min="1" max="500" class="form-control" id="height" name="height" placeholder="E.g. 170" value="{{ old('height', $patient->general['height']) }}">

                                        @if ($errors->has('height'))
                                            <span class="badge badge-danger">{{ $errors->first('height') }}</span>
                                        @endif

                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-lg-10 offset-1 text-center">
                                    <span>
                                        <h1 class="bmi-calc"></h1>
                                        <input type="hidden" class="form-control bmi-calc-input" name="bmi" value="{{ old('bmi', $patient->general['bmi']) }}">

                                    </span>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Age
                                        </label>
                                        <input type="number" min="1" max="140" class="form-control" id="age" name="age" placeholder="E.g 32" value="{{ old('age', $patient->general['age']) }}">

                                        @if ($errors->has('age'))
                                            <span class="badge badge-danger">{{ $errors->first('age') }}</span>
                                        @endif

                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Gender
                                        </label>
                                        <select class="form-control select2 gender-select" id="gender" name="gender">
                                                <option value="" {{ $patient->general['gender'] === NULL ? "selected" : "" }}>Select</option>
                                                <option value="female" {{ $patient->general['gender'] === "female" ? "selected" : "" }}>Female</option>
                                                <option value="male" {{ $patient->general['gender'] === "male" ? "selected" : "" }}>Male</option>
                                        </select>

                                        @if ($errors->has('gender'))
                                            <span class="badge badge-danger">{{ $errors->first('gender') }}</span>
                                        @endif

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


                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Highest level of education
                                        </label>
                                        <select class="form-control select2 education-select" id="education-level" name="education_level">
                                            <option value="" {{ $patient->general['education_level'] === NULL ? "selected" : "" }}>Select</option>
                                            <option value="primary" {{ $patient->general['education_level'] === "primary" ? "selected" : "" }}>Primary</option>
                                            <option value="secondary" {{ $patient->general['education_level'] === "secondary" ? "selected" : "" }}>Secondary</option>
                                            <option value="undergraduate" {{ $patient->general['education_level'] === "undergraduate" ? "selected" : "" }}>College (Undergraduate)</option>
                                            <option value="masters" {{ $patient->general['education_level'] === "masters" ? "selected" : "" }}>College (Masters)</option>
                                            <option value="phd" {{ $patient->general['education_level'] === "phd" ? "selected" : "" }}>College (PhD)</option>
                                        </select>

                                        @if ($errors->has('education_level'))
                                            <span class="badge badge-danger">{{ $errors->first('education_level') }}</span>
                                        @endif

                                    </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" name="first_time_surgery" id="datepicker" value="{{ old('first_time_surgery', $patient->general['first_time_surgery']) }}">
                                        <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>
                                <input type="text" class="form-control" id="medication_allergies" name="medication_allergies[]" placeholder="please separate values with a comma ( , )" value="{{ old('medication_allergies', $patient->general['medication_allergies']) }}">
                                <p>If you have any allergies, please enter them, followed by a comma after each allergy.</p>

                            </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/h3a-logo-black.jpg') }}" alt="Card image cap">
                </div>
            </div>
        </div>
        <!-- end row -->

    </div>


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

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





<!-- sample modal content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel">How to use:</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <h4 class="card-header">Enter height & weight in the boxes</h4>
                <p style="padding:10px;">This will automatically calculate your BMI and
                    store the value. You are able to change this
                    at a later date to reflect new surcumstances.</p>
                <hr>
                <h4 class="card-header">Choose highest level of education</h4>
                <p style="padding:10px;">Select the highest level you have achieved in education to date.</p>
                <hr>
                <h4 class="card-header">Enter the date of your most recent surgery</h4>
                <p style="padding:10px;">Please enter the date of the most recent surgery you had.
                    This is an optional field, so if this does not apply to you, please leave it blank.</p>
                <hr>
                <h4 class="card-header">Enter any medical allergies you have</h4>
                <p style="padding:10px;">Please enter any allergies that you have within this box.</p>
                <p style="padding:10px;">If you do not have any allergies, please leave this optional field blank</p>
                <p style="padding:10px;">If you have 2 or more allergies, please separate these values with a comma ' , '</p>
                <hr>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


@include('forms/elements/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><p>This is your BMI calculation</p>');
            $('.bmi-calc-input').val(bmi.toFixed(2));
        });
        $( "#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><p>This is your BMI calculation</p>');
            $('.bmi-calc-input').val(bmi.toFixed(2));
        });
        $( "#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><p>This is your BMI calculation</p>\n');
            $('.bmi-calc-input').val(bmi.toFixed(2));
        });
    });
    $(function(){
        $('#datepicker').datepicker({
            format: "mm/dd/yyyy",
            language: "en"
        });

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

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

</script>

@include('forms/elements/footer_end')