@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">
<link href="{{ asset('assets/plugins/dropzone/dist/dropzone.css') }}" rel="stylesheet" type="text/css">

<style>
    .card-header {
        background-color: #027eaa!important;
    }
    label{
        font-size: 22px;
    }
</style>
@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">Renal</h2>
    </li>
</ul>

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

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

<!-- ==================
     PAGE CONTENT START
     ================== -->
<style>
    html {
    }
    body {
        background-color: transparent!important;
        background-image: url({{ url('/assets/images/background/Renal.jpeg') }});
        max-width: 100%;
        min-height:100%;

        background-size: auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        /*background-color: #cccccc!important;*/
    }
</style>
<div class="content">
    <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">Instructions</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">
                                <h4 class="card-header">Filling the form</h4>
                                <p style="padding:10px;">Please fill in the form, including any information relating to the questions</p>
                                <p style="padding:10px;">On certain questions, you may be greeted with further fields to
                                    include a date or other things.</p>
                                <hr>
                                <h4 class="card-header">Contact Us</h4>
                                <p style="padding:10px;">
                                    If you have any issues filling in the form, please
                                    <a href="{{ route('support.support.patient') }}">contact us</a>
                                    and we will assist with any issues you may have using the system.
                                </p>
                            </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">60% 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="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></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">Renal</h4>

                        <div class="card-body">

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

    {{--                            QUESTION 1    --}}
                                <div class="row">
                                    <div class="col-12">

                                        <div class="form-group">
                                            <label for="example-text-input" class="col-sm-12" style="text-align:center;">Do you have Renal disease?</label>
                                            <div class="col-sm-4 offset-sm-4">
                                                <select class="select2 form-control renal-select" id="renal" name="have_renal_disease" data-placeholder="Choose ...">
                                                    <option value="">Select</option>
                                                    <option value="Yes" {{ old('have_renal_disease')  == 'Yes' ? 'selected="selected"' : '' }}>Yes</option>
                                                    <option value="No" {{ old('have_renal_disease')  == 'No' ? 'selected="selected"' : '' }}>No</option>
                                                </select>

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

                                            </div>
                                        </div>

                                    </div>
                                </div>


                                <div class="form-group row renal-details" style="{{ old("have_renal_disease") === "Yes" ? '' : 'display:none' }}">
                                    <label for="example-text-input" class="col-sm-6 col-form-label">What stage?
    {{--                                    <i class="ion-help-circled" rel="tooltip" title="Select active status" data-content="Please enter what stage your renal disease is at"></i>--}}
                                    </label>
                                    <div class="col-sm-6">
                                        <select class="select2 form-control" id="renal-stage" name="renal_stage" data-placeholder="Choose ...">
                                            <option value="">Select</option>
                                            <option value="Stage 1" {{ old('renal_stage')  == 'Stage 1' ? 'selected="selected"' : '' }}>1</option>
                                            <option value="Stage 2" {{ old('renal_stage')  == 'Stage 2' ? 'selected="selected"' : '' }}>2</option>
                                            <option value="Stage 3" {{ old('renal_stage')  == 'Stage 3' ? 'selected="selected"' : '' }}>3</option>
                                            <option value="Stage 4" {{ old('renal_stage')  == 'Stage 4' ? 'selected="selected"' : '' }}>4</option>
                                            <option value="Stage 5" {{ old('renal_stage')  == 'Stage 5' ? 'selected="selected"' : '' }}>5</option>
                                        </select>

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

                                    </div>

                                </div>

                                <div class="form-group row renal-details" style="{{ old("have_renal_disease") === "Yes" ? '' : 'display:none' }}">
                                    <label for="example-text-input" class="col-sm-6 col-form-label">Are you on dialysis? if yes, which days of the week?
    {{--                                    <i class="ion-help-circled" rel="tooltip" title="Select active status"  multiple="multiple" data-content="Please enter how often you use your rescue inhaler"></i>--}}
                                    </label>
                                    <div class="col-sm-6">
                                        <select class="select2 form-control" id="dialysis" name="dialysis_days" multiple="multiple" data-placeholder="Choose ...">
                                            <option value="No" {{in_array("No", old("dialysis_days") ?: []) ? "selected": ""}}>No</option>
                                            <option value="Mondays" {{in_array("Mondays", old("dialysis_days") ?: []) ? "selected": ""}}>Mondays</option>
                                            <option value="Tuesdays" {{in_array("Tuesdays", old("dialysis_days") ?: []) ? "selected": ""}}>Tuesdays</option>
                                            <option value="Wednesdays" {{in_array("Wednesdays", old("dialysis_days") ?: []) ? "selected": ""}}>Wednesdays</option>
                                            <option value="Thursdays" {{in_array("Thursdays", old("dialysis_days") ?: []) ? "selected": ""}}>Thursdays</option>
                                            <option value="Fridays" {{in_array("Fridays", old("dialysis_days") ?: []) ? "selected": ""}}>Fridays</option>
                                            <option value="Saturdays" {{in_array("Saturdays", old("dialysis_days") ?: []) ? "selected": ""}}>Saturdays</option>
                                            <option value="Sundays" {{in_array("Sundays", old("dialysis_days") ?: []) ? "selected": ""}}>Sundays</option>
                                        </select>

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

                                    </div>
                                </div>

                                <hr>

                                <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 -->

@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 src="{{ asset('assets/plugins/dropzone/dist/dropzone.js') }}"></script>

<script>
    $(function () {

        $( ".renal-select").change(function() {
            if ($(".renal-select").val() === "Yes") {
                $(".renal-details").slideDown();
            } else {
                $(".renal-details").slideUp();
            }
        });

    });

    $(function(){
        $('#surgery_date').datepicker({
            format: "dd.mm.yyyy",
            todayBtn: "linked",
            language: "de"
        });

        $(".select2").select2();
    });

</script>

@include('forms/elements/footer_end')