@extends('test.master')
@section('title', 'COVID-19 Self Assessment ')

@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">
            <div class="col-lg-6 content-left">
                <div class="content-left-wrapper">
                    <a href="{{route('/')}}" id="logo"><img src="{{asset('images/logo.png')}}" alt="" width="129" height="55"></a>
                    <div id="social">
                        <ul>
                            <li><a href="#"><img src="{{asset('images/android.png')}}" class="img-responsive" style="max-height: 35px;" alt=""></a></li>
                        </ul>
                    </div>
                    <!-- /social -->
                    <div>
                        {{--<figure><img src="img/info_graphic_3.svg" alt="" class="img-fluid"></figure>--}}
                        <h2>COVID-19 Self Assessment</h2>
                        <p>This app will determine your COVID-19 risk factor and if you need to call the Disease Control Hotline or not. This is an assessment tool. Do not use for diagnostic purposes.</p>
                        {{--<a href="#start" class="btn_1 rounded mobile_btn">Start Now!</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_self_test_response')}}" class="contactForm" method="POST">
                            <input id="website" type="text" value="">
                            <!-- Leave for security protection, read docs for details -->
                            <div id="middle-wizard">
                                @csrf
                            <!-- /step-->
                                <div class="step submit">
                                    <h3 class="main_question">Please provide the details of those you may have come in contact with.</h3>
                                    <div class="input_fields_wrap">
                                        <div class="form-group">
                                            <input type="text" name="full_name[]" class="form-control required" required placeholder="Full Name">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="phone_number[]" maxlength="11" minlength="11" class="form-control" required placeholder="Phone Number">
                                        </div><hr>
                                    </div>
                                    <button type="button" name="add" id="add" class="btn add_field_button btn-primary">+</button>
                                        <div class="form-group terms">
                                            <button class="btn btn-md btn-success" id="submitBtn">Submit</button>
                                        </div>   
                                </div>
                            </div>
                            <!-- /middle-wizard -->
                            <div id="bottom-wizard">
                                <button type="button" name="backward" class="backward">Prev</button>
                                <button type="button" name="forward" class="forward">Next</button>
                                <button type="submit" name="process" class="submit" id="submit" style="display: none;">Submit</button>
                                <br><br><br>
                            </div>
                            <!-- /bottom-wizard -->
                        </form>
                    </div>
                </div>
                <!-- /Wizard container -->
            </div>
            <!-- /content-right-->
        </div>
        <!-- /row-->
    </div>
    <!-- /container-fluid -->
@endsection

@section('levelJS')
{{--    <script src="{{asset('vendors/select2/select2.min.js')}}"></script>--}}
    <script src="{{asset('selftest/js/lga.js')}}"></script>
    <script>
        $(document).ready(function () {

            var max_fields      = 10; //maximum input boxes allowed
            var wrapper         = $(".input_fields_wrap"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID
            
            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div><div class="form-group"><input type="text" name="full_name[]" class="form-control required" required placeholder="Full Name"></div><div class="form-group"><input type="text" name="phone_number[]" maxlength="11" minlength="11" class="form-control" required placeholder="Phone Number"></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
                }
            });
            
            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })

            $('.contactForm').submit(function(e){
                e.preventDefault();
                $('#loader_form').show();
                var callback = '{{route('/')}}';
                $('#submitBtn').prop('disabled', true).html("Loading Result...");
                var url = '{{route('/covid_self_test_contact')}}';
                var dataString = $(this).serialize();
                $.ajax({
                    type: "POST",
                    url: url,
                    data: dataString,
                    dataType: "JSON",
                    success: function(response){
                        window.location.replace(callback);
                    },
                    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