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

@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 report a COVID-19 case of yourself or someone around you.</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('/')}}" style="color: white;">Take the Self Test</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_reports')}}" 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-covid">
                                    <input name="_source" type="hidden" value="website">
                                <div class="step submit">
                                    <h3 class="main_question">Tell us about the individual!</h3>
                                    <div class="form-group">
                                        <input type="text" name="full_name" class="form-control" placeholder="Name of COVID-19 carrier">
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label for="">Gender / Sex</label>
                                            <select name="gender" required class="form-control" id="gender">
                                                <option value="">-Select-</option>
                                                <option value="Male">Male</option>
                                                <option value="Female">Female</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-6">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <input type="text" name="phone_number" maxlength="11" minlength="11" class="form-control" required placeholder="Your Phone">
                                    </div>
                                    <div class="form-group">
                                        <textarea type="text" name="address" rows="3" class="form-control" required placeholder="Occurrence Address"></textarea>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-4">
                                            <select name="state" id="state_id" required class="form-control">
                                                <option value="" selected="selected" >-Select State-</option>
                                                @foreach($states as $state)
                                                <option value="{{$state->state_id}}" {{$default_state_id == $state->state_id  ? 'selected' : ''}}>{{$state->state_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-sm-4">
                                            <select name="lga" id="lga_id" required class="form-control">
                                                <option value="">-Select LGA-</option>
                                            </select>
                                            <input type="hidden" name="latitude">
                                            <input type="hidden" name="longitude">
                                        </div>
                                        <div class="form-group col-sm-4">
                                            <select name="ward" id="ward_id" required class="form-control">
                                                <option value="">-Select Ward-</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="container_check version_2">This report is for someone else.
                                            <input type="checkbox" name="not_for_self" class="form-control" value="1">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <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 -->
                            <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')

    @include('partials.state_lga_js')
    <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_reports')}}';
                    var dataString = $(this).serialize();
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: dataString,
//                dataType: "JSON",
                        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