@extends('layout')

@section('css_includes')
    <style>
        #map {
            height: 500px;
        }

        @font-face {
            font-family: poppinsRegular;
            src: url({{ asset('font/poppins/Poppins-Regular.ttf') }});
        }

        p {
            font-size: 17px !important;
        }

        p, h1, h2, h3, h4, h5, h6, span {
            font-family: poppinsRegular !important;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Pre-Screening for Coronavirus (COVID-19)</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div id="wizard" class="form_wizard wizard_horizontal">
                        <ul class="wizard_steps">
                            <li>
                                <a href="#step-1">
                                    <span class="step_no">1</span>
                                    <span class="step_descr">Step 1<br/>
                                        <small>Introduction</small>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#step-2">
                                    <span class="step_no">2</span>
                                    <span class="step_descr">Step 2<br/>
                                        <small>Questions</small>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#step-3">
                                    <span class="step_no">3</span>
                                    <span class="step_descr">Step 3<br/>
                                        <small>Disclaimer</small>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#step-4">
                                    <span class="step_no">4</span>
                                    <span class="step_descr">Step 4<br/>
                                        <small>Result</small>
                                    </span>
                                </a>
                            </li>
                            <li>
                                <a href="#step-5">
                                    <span class="step_no">5</span>
                                    <span class="step_descr">Step 5<br/>
                                        <small>Locate</small>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <div id="step-1" class="text-center">
                            <img src="{{ asset('images/covid-19.jpg') }}">
                            <h3>Overview</h3>
                            <h5>The purpose of this application is to pre-screen you for Coronavirus and help you make
                                decisions about seeking appropriate medical care. </h5>
                        </div>
                        <div id="step-2">
                            <div class="row">
                                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                                <div class="col-md-11 col-sm-11 col-xs-11">
                                    <div id="div_sore_throat" class="form-group">
                                        <h1>Do you have a sore throat?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="sore_throat_status">
                                                Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="sore_throat_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="next_sore_throat" class="btn btn-success"
                                                    style="display: none;">Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_sneezing" class="form-group" style="display: none;">
                                        <h1>Are you sneezing?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="sneezing_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="sneezing_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_sneezing" class="btn btn-success">Previous</button>
                                            <button id="next_sneezing" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_stuffy_running_nose" class="form-group" style="display: none;">
                                        <h1>Do you have a stuffy/running nose?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1"
                                                       name="stuffy_running_nose_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0"
                                                       name="stuffy_running_nose_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_stuffy_running_nose" class="btn btn-success">Previous
                                            </button>
                                            <button id="next_stuffy_running_nose" class="btn btn-success"
                                                    style="display: none;">Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_cough_chest_discomfort" class="form-group" style="display: none;">
                                        <h1>Do you have cough/chest discomfort?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1"
                                                       name="cough_chest_discomfort_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0"
                                                       name="cough_chest_discomfort_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_cough_chest_discomfort" class="btn btn-success">Previous
                                            </button>
                                            <button id="next_cough_chest_discomfort" class="btn btn-success"
                                                    style="display: none;">Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_fatigue_weakness" class="form-group" style="display: none;">
                                        <h1>Do you have fatigue/weakness?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1"
                                                       name="fatigue_weakness_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0"
                                                       name="fatigue_weakness_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_fatigue_weakness" class="btn btn-success">Previous</button>
                                            <button id="next_fatigue_weakness" class="btn btn-success"
                                                    style="display: none;">Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_fever" class="form-group" style="display: none;">
                                        <h1>Do you have fever?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="fever_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="fever_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_fever" class="btn btn-success">Previous</button>
                                            <button id="next_fever" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_aches" class="form-group" style="display: none;">
                                        <h1>Do you have aches?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="aches_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="aches_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_aches" class="btn btn-success">Previous</button>
                                            <button id="next_aches" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_chills" class="form-group" style="display: none;">
                                        <h1>Do you have chills?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="chills_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="chills_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_chills" class="btn btn-success">Previous</button>
                                            <button id="next_chills" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_headache" class="form-group" style="display: none;">
                                        <h1>Do you have headache?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="headache_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="headache_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_headache" class="btn btn-success">Previous</button>
                                            <button id="next_headache" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_shortness_of_breath" class="form-group" style="display: none;">
                                        <h1>Do you have shortness of breath?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1"
                                                       name="shortness_of_breath_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0"
                                                       name="shortness_of_breath_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_shortness_of_breath" class="btn btn-success">Previous
                                            </button>
                                            <button id="next_shortness_of_breath" class="btn btn-success"
                                                    style="display: none;">Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_nausea" class="form-group" style="display: none;">
                                        <h1>Do you have nausea?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="nausea_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="nausea_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_nausea" class="btn btn-success">Previous</button>
                                            <button id="next_nausea" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_vomiting" class="form-group" style="display: none;">
                                        <h1>Do you have vomiting?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="vomiting_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="vomiting_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_vomiting" class="btn btn-success">Previous</button>
                                            <button id="next_vomiting" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_diarrhea" class="form-group" style="display: none;">
                                        <h1>Do you have diarrhea?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="diarrhea_status"> Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="diarrhea_status"> No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_diarrhea" class="btn btn-success">Previous</button>
                                            <button id="next_diarrhea" class="btn btn-success" style="display: none;">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_stomach_pain" class="form-group" style="display: none;">
                                        <h1>Do you have stomach pain?</h1>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="1" name="stomach_pain_status">
                                                Yes
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label style="font-size: 30px; margin: 30px 0;">
                                                <input type="radio" class="flat" value="0" name="stomach_pain_status">
                                                No
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <button id="prev_stomach_pain" class="btn btn-success">Previous</button>
                                            <button id="next_stomach_pain" class="btn btn-success"
                                                    style="display: none;">Next
                                            </button>
                                        </div>
                                    </div>
                                    <div id="div_review" class="form-group text-center" style="display: none;">
                                        <button id="prev_review" class="btn btn-success">Previous</button>
                                        <button id="review" class="btn btn-info">Review questions</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="step-3">
                            <p class="text-center">
                                By <strong>CONTINUING</strong>, you understand and agree<br>
                                that the application is not designed or intended to be<br>
                                used in place of a full clinical testing or medical<br>
                                diagnosis.
                            </p>
                            <p class="text-center">
                                <strong>
                                    It does not in any way assume the role of a<br>
                                    licensed clinician
                                </strong>
                            </p>
                            <p class="text-center">
                                <strong>Call your doctor:</strong> If you think you have been exposed to COVID-19 and
                                develop a fever<br>
                                and symptoms, such as cough or difficulty breathing, call your health care provider
                                for<br>
                                medical advice.
                            </p>
                        </div>
                        <div id="step-4">
                            <div class="row">
                                <div class="col-md-8">
                                    <p id="result_covid_19" class="text-center text-danger" style="display: none;">
                                        <strong>COVID</strong><br>
                                        Based on your response to the screening questions so far, it will<br>
                                        be a good idea to contact your doctor or visit the nearest<br>
                                        <strong>Coronavirus Testing</strong> Center.<br>
                                        Select the closest hospital or urgent care location
                                    </p>
                                    <p id="result_norovirus" class="text-center text-danger" style="display: none;">
                                        <strong>NOROVIRUS</strong><br>
                                        Based on your response to the screening questions so far, it will<br>
                                        be a good idea to contact your doctor or visit the nearest<br>
                                        <strong>Coronavirus Testing</strong> Center.<br>
                                        Select the closest hospital or urgent care location
                                    </p>
                                    <p id="result_flu" class="text-center text-danger" style="display: none;">
                                        <strong>FLU</strong><br>
                                        Based on your response to the screening questions so far, it will<br>
                                        be a good idea to contact your doctor or visit the nearest<br>
                                        <strong>Coronavirus Testing</strong> Center.<br>
                                        Select the closest hospital or urgent care location
                                    </p>
                                    <p id="result_cold" class="text-center text-danger" style="display: none;">
                                        <strong>COLD</strong><br>
                                        Based on your response to the screening questions so far, it will<br>
                                        be a good idea to contact your doctor or visit the nearest<br>
                                        <strong>Coronavirus Testing</strong> Center.<br>
                                        Select the closest hospital or urgent care location
                                    </p>
                                    <p class="text-center">
                                        Wash your hands. Drink a lot of warm fluid. Avoid body contact with outsiders.
                                        Make sure to get some rest. Contact your doctor if your symptoms worsen.
                                    </p>
                                    <p class="text-center">
                                        <strong>Call your doctor:</strong> If you think you have been exposed to COVID-19 and
                                        develop a fever<br>
                                        and symptoms, such as cough or difficulty breathing, call your health care provider
                                        for<br>
                                        medical advice.
                                    </p>
                                </div>
                                <div class="col-md-4">
                                    <div class="radio">
                                        <label style="font-size: 20px;">
                                            <input type="radio" class="flat" id="covid_19_checker" name="covid_19_checker" disabled> COVID-19
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label style="font-size: 20px;">
                                            <input type="radio" class="flat" id="norovirus_checker" name="norovirus_checker" disabled> NOROVIRUS
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label style="font-size: 20px;">
                                            <input type="radio" class="flat" id="flu_checker" name="flu_checker" disabled> FLU
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label style="font-size: 20px;">
                                            <input type="radio" class="flat" id="cold_checker" name="cold_checker" disabled> COLD
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="step-5">
                            <div class="row">
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <div class="x_panel">
                                        <div class="x_content">
                                            <div id="map"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <div class="x_panel">
                                        <div class="x_content">
                                            @if(session('store_location') == 'yes')
                                                <form id="form" action="{{ route('location.update', $location_id) }}"
                                                      method="post"
                                                      data-parsley-validate class="form-horizontal form-label-left">
                                                    @csrf
                                                    @method('PUT')
                                                    <div class="form-group">
                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                                               for="first_name">First name
                                                            <span class="required">*</span>
                                                        </label>
                                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                                            <input id="first_name" name="first_name" required="required"
                                                                   class="form-control col-md-7 col-xs-12" type="text">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                                               for="last_name">Last name <span
                                                                    class="required">*</span>
                                                        </label>
                                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                                            <input id="last_name" name="last_name" required="required"
                                                                   class="form-control col-md-7 col-xs-12" type="text">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"
                                                               for="email">Email <span
                                                                    class="required">*</span>
                                                        </label>
                                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                                            <input id="email" name="email" required="required"
                                                                   class="form-control col-md-7 col-xs-12" type="email">
                                                        </div>
                                                    </div>
                                                    <input id="location_id" name="location_id" hidden type="text"
                                                           value="{{ $location_id }}">
                                                    <input id="user_lat" name="user_lat" hidden type="text">
                                                    <input id="user_long" name="user_long" hidden type="text">
                                                    <div class="ln_solid"></div>
                                                    <div class="form-group">
                                                        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                                            <button type="submit" class="btn btn-success">Submit
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js_includes')

    <script>
        $(document).ready(function () {
            var changeable = true;

            $('input[type=radio][name=sore_throat_status]').change(function () {
                if (changeable) {
                    $('#div_sore_throat').hide();
                    $('#div_sneezing').show();
                    $('#next_sore_throat').show();
                }
            });
            $('#next_sore_throat').click(function () {
                $('#div_sore_throat').hide();
                $('#div_sneezing').show();
            });

            $('input[type=radio][name=sneezing_status]').change(function () {
                if (changeable) {
                    $('#div_sneezing').hide();
                    $('#div_stuffy_running_nose').show();
                    $('#next_sneezing').show();
                }
            });
            $('#prev_sneezing').click(function () {
                $('#div_sneezing').hide();
                $('#div_sore_throat').show();
            });
            $('#next_sneezing').click(function () {
                $('#div_sneezing').hide();
                $('#div_stuffy_running_nose').show();
            });

            $('input[type=radio][name=stuffy_running_nose_status]').change(function () {
                if (changeable) {
                    $('#div_stuffy_running_nose').hide();
                    $('#div_cough_chest_discomfort').show();
                    $('#next_stuffy_running_nose').show();
                }
            });
            $('#prev_stuffy_running_nose').click(function () {
                $('#div_stuffy_running_nose').hide();
                $('#div_sneezing').show();
            });
            $('#next_stuffy_running_nose').click(function () {
                $('#div_stuffy_running_nose').hide();
                $('#div_cough_chest_discomfort').show();
            });

            $('input[type=radio][name=cough_chest_discomfort_status]').change(function () {
                if (changeable) {
                    $('#div_cough_chest_discomfort').hide();
                    $('#div_fatigue_weakness').show();
                    $('#next_cough_chest_discomfort').show();
                }
            });
            $('#prev_cough_chest_discomfort').click(function () {
                $('#div_cough_chest_discomfort').hide();
                $('#div_stuffy_running_nose').show();
            });
            $('#next_cough_chest_discomfort').click(function () {
                $('#div_cough_chest_discomfort').hide();
                $('#div_fatigue_weakness').show();
            });

            $('input[type=radio][name=fatigue_weakness_status]').change(function () {
                if (changeable) {
                    $('#div_fatigue_weakness').hide();
                    $('#div_fever').show();
                    $('#next_fatigue_weakness').show();
                }
            });
            $('#prev_fatigue_weakness').click(function () {
                $('#div_fatigue_weakness').hide();
                $('#div_cough_chest_discomfort').show();
            });
            $('#next_fatigue_weakness').click(function () {
                $('#div_fatigue_weakness').hide();
                $('#div_fever').show();
            });

            $('input[type=radio][name=fever_status]').change(function () {
                if (changeable) {
                    $('#div_fever').hide();
                    $('#div_aches').show();
                    $('#next_fever').show();
                }
            });
            $('#prev_fever').click(function () {
                $('#div_fever').hide();
                $('#div_fatigue_weakness').show();
            });
            $('#next_fever').click(function () {
                $('#div_fever').hide();
                $('#div_aches').show();
            });

            $('input[type=radio][name=aches_status]').change(function () {
                if (changeable) {
                    $('#div_aches').hide();
                    $('#div_chills').show();
                    $('#next_aches').show();
                }
            });
            $('#prev_aches').click(function () {
                $('#div_aches').hide();
                $('#div_fever').show();
            });
            $('#next_aches').click(function () {
                $('#div_aches').hide();
                $('#div_chills').show();
            });

            $('input[type=radio][name=chills_status]').change(function () {
                if (changeable) {
                    $('#div_chills').hide();
                    $('#div_headache').show();
                    $('#next_chills').show();
                }
            });
            $('#prev_chills').click(function () {
                $('#div_chills').hide();
                $('#div_aches').show();
            });
            $('#next_chills').click(function () {
                $('#div_chills').hide();
                $('#div_headache').show();
            });

            $('input[type=radio][name=headache_status]').change(function () {
                if (changeable) {
                    $('#div_headache').hide();
                    $('#div_shortness_of_breath').show();
                    $('#next_headache').show();
                }
            });
            $('#prev_headache').click(function () {
                $('#div_headache').hide();
                $('#div_chills').show();
            });
            $('#next_headache').click(function () {
                $('#div_headache').hide();
                $('#div_shortness_of_breath').show();
            });

            $('input[type=radio][name=shortness_of_breath_status]').change(function () {
                if (changeable) {
                    $('#div_shortness_of_breath').hide();
                    $('#div_nausea').show();
                    $('#next_shortness_of_breath').show();
                }
            });
            $('#prev_shortness_of_breath').click(function () {
                $('#div_shortness_of_breath').hide();
                $('#div_headache').show();
            });
            $('#next_shortness_of_breath').click(function () {
                $('#div_shortness_of_breath').hide();
                $('#div_nausea').show();
            });

            $('input[type=radio][name=nausea_status]').change(function () {
                if (changeable) {
                    $('#div_nausea').hide();
                    $('#div_vomiting').show();
                    $('#next_nausea').show();
                }
            });
            $('#prev_nausea').click(function () {
                $('#div_nausea').hide();
                $('#div_shortness_of_breath').show();
            });
            $('#next_nausea').click(function () {
                $('#div_nausea').hide();
                $('#div_vomiting').show();
            });

            $('input[type=radio][name=vomiting_status]').change(function () {
                if (changeable) {
                    $('#div_vomiting').hide();
                    $('#div_diarrhea').show();
                    $('#next_vomiting').show();
                }
            });
            $('#prev_vomiting').click(function () {
                $('#div_vomiting').hide();
                $('#div_nausea').show();
            });
            $('#next_vomiting').click(function () {
                $('#div_vomiting').hide();
                $('#div_diarrhea').show();
            });

            $('input[type=radio][name=diarrhea_status]').change(function () {
                if (changeable) {
                    $('#div_diarrhea').hide();
                    $('#div_stomach_pain').show();
                    $('#next_diarrhea').show();
                }
            });
            $('#prev_diarrhea').click(function () {
                $('#div_diarrhea').hide();
                $('#div_vomiting').show();
            });
            $('#next_diarrhea').click(function () {
                $('#div_diarrhea').hide();
                $('#div_stomach_pain').show();
            });

            $('input[type=radio][name=stomach_pain_status]').change(function () {
                if (changeable) {
                    $('#div_stomach_pain').hide();
                    $('#div_review').show();
                    $('#next_stomach_pain').show();
                }
            });
            $('#prev_stomach_pain').click(function () {
                $('#div_stomach_pain').hide();
                $('#div_diarrhea').show();
            });
            $('#next_stomach_pain').click(function () {
                $('#div_stomach_pain').hide();
                $('#div_review').show();
            });

            $('#prev_review').click(function () {
                $('#div_review').hide();
                $('#div_stomach_pain').show();
            });

            $('#review').click(function () {
                changeable = false;

                $('#div_sore_throat').show();
                $('#div_sneezing').show();
                $('#div_stuffy_running_nose').show();
                $('#div_cough_chest_discomfort').show();
                $('#div_fatigue_weakness').show();
                $('#div_fever').show();
                $('#div_aches').show();
                $('#div_chills').show();
                $('#div_headache').show();
                $('#div_shortness_of_breath').show();
                $('#div_vomiting').show();
                $('#div_diarrhea').show();
                $('#div_stomach_pain').show();

                $('#prev_review').hide();
                $('#review').hide();

                $('#next_sore_throat').hide();
                $('#prev_sneezing').hide();
                $('#next_sneezing').hide();
                $('#prev_stuffy_running_nose').hide();
                $('#next_stuffy_running_nose').hide();
                $('#prev_cough_chest_discomfort').hide();
                $('#next_cough_chest_discomfort').hide();
                $('#prev_fatigue_weakness').hide();
                $('#next_fatigue_weakness').hide();
                $('#prev_fever').hide();
                $('#next_fever').hide();
                $('#prev_aches').hide();
                $('#next_aches').hide();
                $('#prev_chills').hide();
                $('#next_chills').hide();
                $('#prev_headache').hide();
                $('#next_headache').hide();
                $('#prev_shortness_of_breath').hide();
                $('#next_shortness_of_breath').hide();
                $('#prev_nausea').hide();
                $('#next_nausea').hide();
                $('#prev_vomiting').hide();
                $('#next_vomiting').hide();
                $('#prev_diarrhea').hide();
                $('#next_diarrhea').hide();
                $('#prev_stomach_pain').hide();
                $('#next_stomach_pain').hide();
            });

            $('input[type=radio]').change(function () {
                if (
                    $('input[type=radio][name=cough_chest_discomfort_status]:checked').val() === '1' &&
                    $('input[type=radio][name=fever_status]:checked').val() === '1' &&
                    $('input[type=radio][name=shortness_of_breath_status]:checked').val() === '1'
                ) {
                    $('#result_covid_19').show();
                    $('#result_norovirus').hide();
                    $('#result_flu').hide();
                    $('#result_cold').hide();
                    //console.log('covid');
                } else if (
                    $('input[type=radio][name=nausea_status]:checked').val() === '1' &&
                    $('input[type=radio][name=vomiting_status]:checked').val() === '1' &&
                    $('input[type=radio][name=diarrhea_status]:checked').val() === '1' &&
                    $('input[type=radio][name=stomach_pain_status]:checked').val() === '1'
                ) {
                    $('#result_covid_19').hide();
                    $('#result_norovirus').show();
                    $('#result_flu').hide();
                    $('#result_cold').hide();
                    //console.log('norovirus');
                } else if (
                    $('input[type=radio][name=cough_chest_discomfort_status]:checked').val() === '1' &&
                    $('input[type=radio][name=fatigue_weakness_status]:checked').val() === '1' &&
                    $('input[type=radio][name=fever_status]:checked').val() === '1' &&
                    $('input[type=radio][name=aches_status]:checked').val() === '1' &&
                    $('input[type=radio][name=chills_status]:checked').val() === '1' &&
                    $('input[type=radio][name=headache_status]:checked').val() === '1'
                ) {
                    $('#result_covid_19').hide();
                    $('#result_norovirus').hide();
                    $('#result_flu').show();
                    $('#result_cold').hide();
                    //console.log('flu');
                } else if (
                    $('input[type=radio][name=sore_throat_status]:checked').val() === '1' &&
                    $('input[type=radio][name=sneezing_status]:checked').val() === '1' &&
                    $('input[type=radio][name=stuffy_running_nose_status]:checked').val() === '1'
                ) {
                    $('#result_covid_19').hide();
                    $('#result_norovirus').hide();
                    $('#result_flu').hide();
                    $('#result_cold').show();
                    //console.log('cold');
                } else {
                    $('#result_covid_19').hide();
                    $('#result_norovirus').hide();
                    $('#result_flu').hide();
                    $('#result_cold').hide();
                    //console.log('none');
                }

                // result checklist
                if (
                    $('input[type=radio][name=cough_chest_discomfort_status]:checked').val() === '1' &&
                    $('input[type=radio][name=fever_status]:checked').val() === '1' &&
                    $('input[type=radio][name=shortness_of_breath_status]:checked').val() === '1'
                ) {
                    $("#covid_19_checker").prop("checked", true);
                    console.log('covid_19_checker');
                }
                if (
                    $('input[type=radio][name=nausea_status]:checked').val() === '1' &&
                    $('input[type=radio][name=vomiting_status]:checked').val() === '1' &&
                    $('input[type=radio][name=diarrhea_status]:checked').val() === '1' &&
                    $('input[type=radio][name=stomach_pain_status]:checked').val() === '1'
                ) {
                    $("#norovirus_checker").prop("checked", true);
                    console.log('norovirus_checker');
                }
                if (
                    $('input[type=radio][name=cough_chest_discomfort_status]:checked').val() === '1' &&
                    $('input[type=radio][name=fatigue_weakness_status]:checked').val() === '1' &&
                    $('input[type=radio][name=fever_status]:checked').val() === '1' &&
                    $('input[type=radio][name=aches_status]:checked').val() === '1' &&
                    $('input[type=radio][name=chills_status]:checked').val() === '1' &&
                    $('input[type=radio][name=headache_status]:checked').val() === '1'
                ) {
                    $("#flu_checker").prop("checked", true);
                    console.log('flu_checker');
                }
                if (
                    $('input[type=radio][name=sore_throat_status]:checked').val() === '1' &&
                    $('input[type=radio][name=sneezing_status]:checked').val() === '1' &&
                    $('input[type=radio][name=stuffy_running_nose_status]:checked').val() === '1'
                ) {
                    $("#cold_checker").prop("checked", true);
                    console.log('cold_checker');
                }
            });

            $("a").click(function () {
                if ($('#step-4').is(":visible")) {
                    $.ajax({
                        type: 'put',
                        url: '{{ url("location/ajaxUpdate", $location_id)}}',
                        data: {
                            _token: "{{ csrf_token() }}",
                            location_id: "{{ $location_id }}",
                            sore_throat: $('input[type=radio][name=sore_throat_status]:checked').val(),
                            sneezing: $('input[type=radio][name=sneezing_status]:checked').val(),
                            stuffy_running_nose: $('input[type=radio][name=stuffy_running_nose_status]:checked').val(),
                            cough_chest_discomfort: $('input[type=radio][name=cough_chest_discomfort_status]:checked').val(),
                            fatigue_weakness: $('input[type=radio][name=fatigue_weakness_status]:checked').val(),
                            fever: $('input[type=radio][name=fever_status]:checked').val(),
                            aches: $('input[type=radio][name=aches_status]:checked').val(),
                            chills: $('input[type=radio][name=chills_status]:checked').val(),
                            headache: $('input[type=radio][name=headache_status]:checked').val(),
                            shortness_of_breath: $('input[type=radio][name=shortness_of_breath_status]:checked').val(),
                            nausea: $('input[type=radio][name=nausea_status]:checked').val(),
                            vomiting: $('input[type=radio][name=vomiting_status]:checked').val(),
                            diarrhea: $('input[type=radio][name=diarrhea_status]:checked').val(),
                            stomach_pain: $('input[type=radio][name=stomach_pain_status]:checked').val()
                        },
                        success: function(data) {
                            //alert("Data: " + data + "\nStatus: " + status);
                        }
                    });
                    //console.log("The div  is visible.");
                }
            });
        });
    </script>
    <script>
        var map;
        var service;
        var infowindow;

        function initMap() {
            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    @if(session('store_location') == 'yes')
                    document.getElementById("user_lat").value = position.coords.latitude;
                    document.getElementById("user_long").value = position.coords.longitude;

                    $.post('{{ url("location/") }}', {
                            _token: "{{ csrf_token() }}",
                            location_id: "{{ $location_id }}",
                            user_lat: position.coords.latitude,
                            user_long: position.coords.longitude
                        },
                        function (data, status) {
                            //alert("Data: " + data + "\nStatus: " + status);
                        }
                    );
                            @endif

                    var pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                    map = new google.maps.Map(document.getElementById('map'), {
                        center: pos,
                        zoom: 15
                    });

                    var marker = new google.maps.Marker({
                        position: pos,
                        icon: {
                            path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
                            fillColor: 'red',
                            fillOpacity: 0.8,
                            scale: 0.1,
                            strokeColor: 'black',
                            strokeWeight: 1
                        },
                        map: map,
                    });

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('You');
                    infoWindow.open(map);
                    map.setCenter(pos);

                    var request = {
                        query: 'emergency hospital near me',
                        fields: ['name', 'geometry'],
                    };

                    service = new google.maps.places.PlacesService(map);

                    service.findPlaceFromQuery(request, function (results, status) {
                        if (status === google.maps.places.PlacesServiceStatus.OK) {
                            for (var i = 0; i < results.length; i++) {
                                createMarker(results[i]);
                            }

                            map.setCenter(pos);
                        }
                    });
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }

        function createMarker(place) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}&libraries=places&callback=initMap"></script>
@endsection