@extends('test.master')
@section('title', 'Report COVID-19 Case Status')

@section('levelCSS')
    {{--<link rel="stylesheet" href="{{asset('vendors/select2/select2.min.css')}}">--}}
    {{--<link rel="stylesheet" href="{{asset('vendors/select2-bootstrap-theme/select2-bootstrap.min.css')}}">--}}
@endsection
@section('body')
    <div class="container-fluid full-height">
        <div class="row row-height">
            <div class="col-lg-6 content-left">
                <div class="content-left-wrapper">
                    <div>
                        <figure><img src="{{asset('images/logo.png')}}" alt="" class="img-fluid"></figure>
                        <!--h2>COVID-19 Self Assessment</h2-->
                        <p>This page allows you to give daily report of your COVID-19 case to the appropriate authorities.</p>
                        <a href="#"><img src="{{asset('images/android.png')}}" class="img-responsive" style="max-height: 35px;" alt=""></a>
                    </div>
                    <div class="copy"><a href="{{route('/covid19/heatmap')}}" style="color: white;">View Heat Map</a> <br><br>© 2025 eClat Healthcare Ltd</div>
                </div>
                <!-- /content-left-wrapper -->
            </div>
            <!-- /content-left -->
            
            <div class="col-lg-6 content-right" id="start">
                <div id="wizard_container">
                    <div id="top-wizard">
                        <div id="progressbar"></div>
                    </div>
                    <!-- /top-wizard -->
                    <div class="col-sm-12">
                        <form id="wrappe" action="{{route('/covid_status')}}" class="testForm" method="POST">
                            <!-- Leave for security protection, read docs for details -->
                            <div id="middle-wizard">
                                @csrf
                            <!-- /step-->
                                    <input type="hidden" name="form_type" value="report-status">
                                    <input name="_source" type="hidden" value="website">
                                <div class="step submit">
                                    <h3 class="main_question">Please provide information about your present status</h3>
                                    <div class="form-group">
                                        <input type="text" name="case_number" class="form-control" placeholder="COVID-19 Case Number">
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label for="">Date of Confirmation</label>
                                            <input type="date" name="date_of_confirmation" class="form-control" required placeholder="Date of Confirmation">
                                        </div>
                                        <div class="form-group col-sm-6">

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <label for="">Do tick any symptoms you presently feel </label>
                                            @foreach($symptoms as $symp)
                                                <div class="form-group">
                                                    <label class="container_check version_2">{{$symp}}
                                                        <input type="checkbox" name="symptoms[]" value="{{$symp}}" class="required" onchange="getVals(this, 'question_1');">
                                                        <span class="checkmark"></span>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-8">
                                            <label for="">What is your status now?</label>
                                            <select name="status" required class="form-control" id="status">
                                                <option value="">-Select-</option>
                                                <option value="Much better">Much better</option>
                                                <option value="About the same">About the same</option>
                                                <option value="Worse">Worse</option>
                                                <option value="Can't Say">Can't say</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group terms">
                                        <button class="btn btn-md btn-success" id="submitBtn">Submit</button>
                                    </div>
                                </div>
                            </div>
                            <p>We are committed to protecting your personal information and your right to privacy.
                                This is detailed in our <a target="_blank" href="https://eclathealthcare.com/privacy-policy">privacy policy</a>.
                                Please read through!. Note that proceeding with the use of this site will be taken as acceptance of our
                                <a target="_blank" href="https://eclathealthcare.com/privacy-policy">policy</a>.</p>
                        </form>
                    </div>
                </div>
                <!-- /Wizard container -->
            </div>
            <!-- /content-right-->
        </div>
        <!-- /row-->
    </div>
    <!-- /container-fluid -->
@endsection

@section('levelJS')

    <script>
        $(document).ready(function () {
            $('#state_id').trigger('change');
            $('.testForm').submit(function(e){
                e.preventDefault();
                var isValid = $(this).valid();
                if(isValid===true) {
                    $('#loader_form').show();
                    $('#submitBtn').prop('disabled', true).html("Loading Result...");
                    var url = '{{route('/covid_status')}}';
                    var dataString = $(this).serialize();
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: dataString,
                        success: function(data){
                            $('#start').html(data);
                            $('#loader_form').hide();
                        },
                        error: function (e, status) {
                            if (e.status == 500)
                                alert("Something is broken!");
                            $('#loader_form').hide();
                            $('#submitBtn').prop('disabled', false).html("Submit");
                        }
                    });
                }
            });

            $('#submit').click(function (e) {
                e.preventDefault();
            })
        })
    </script>
@endsection