@include('patient.header')

<!-- //wrapper -->
<div class="wrapper" id="wrapper">
    <section class="login_screen">
        <div class="container h-100">
            <div class="back_arrow">
                <a href="{{ url('').'/'.$userID.'/'.$patientMobile }}"><i class="fa-solid fa-arrow-left"></i></a>
            </div>
            <div class="row d-flex align-items-center h-100 justify-content-center">
                <div class="col-lg-4">
                    {!! Form::open([
                        'url' => '#',
                        'name' => 'validateForm',
                        'id' => 'validateForm',
                        'enctype' => 'multipart/form-data',
                    ]) !!}
                    <input type="hidden" id="mrID" name="mrID" value="{{ isset($userID) ? $userID : '' }}">
                    <input type="hidden" id="patientMobile" name="patientMobile"
                        value="{{ isset($patientMobile) ? $patientMobile : '' }}">
                    <div class="verification">
                        <span>Patient Details</span>
                        <h3 class="py-3">Fill the form to become our guest</h3>
                        <div class="from_scroll">
                            <div class="mb-3">
                                <label for="" class="form-label">Patient Name</label>
                                <input type="text" class="form-control" id="patientName" name="patientName"
                                    placeholder="Enter Your Full Name">
                            </div>
                            <!-- <div class="mb-3">
                                <label for="" class="form-label">Email</label>
                                <input type="email" class="form-control" id="patientEmail" name="patientEmail"
                                    placeholder="Enter Your Email Address">
                            </div> -->
                            <div class="mb-3">
                                <label for="" class="form-label">Address Line 1</label>
                                <input type="text" class="form-control" id="patientAddress1" name="patientAddress1"
                                    placeholder="Enter Your Address">
                            </div>
                            <div class="mb-3">
                                <label for="" class="form-label">Address Line 2</label>
                                <input type="text" class="form-control" id="patientAddress2" name="patientAddress2"
                                    placeholder="Enter Your Address">
                            </div>
                            <div class="mb-3">
                                <label for="patientState" class="form-label">State</label>
                                <select class="form-select js-example-basic-single" id="patientState"
                                    name="patientState" aria-label="Default select example">
                                    <option value="" selected Default disabled>Select your State</option>
                                    @foreach ($states as $state)
                                        <option value="{{ $state->id }}">{{ $state->state }}</option>
                                    @endforeach
                                    {{-- <option value="Gujarat">Gujarat</option> --}}
                                </select>
                                <label id="patientState-error" class="error" for="patientState"></label>
                            </div>

                            <div class="mb-3">
                                <label for="patientCity" class="form-label ">City</label>
                                <select class="form-select js-example-basic-single" id="patientCity" name="patientCity"
                                    aria-label="Default select example">
                                    <option value="" selected Default>Select your City</option>
                                    {{-- <option value="Ahmedabad">Ahmedabad</option> --}}
                                </select>
                                <label id="patientCity-error" class="error" for="patientCity"></label>
                            </div>

                            <div class="mb-3">
                                <label for="" class="form-label">Pincode</label>
                                <input type="text" class="form-control" id="patientPinCode" name="patientPinCode"
                                    placeholder="Enter Your Pincode">
                            </div>
                        </div>
                        <button type="submit" id="submit" name="submit"
                            class="btn btn-primary d-block">Continue</button>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </section>

</div> <!--  wrapper end  -->
<!-- //wrapper-end -->

@include('patient.footer')


<script type="text/javascript">
    $(document).ready(function() {
        $('#validateForm').validate({
            ignore: ".ignore",
            rules: {
                mrID: {
                    required: true
                },
                patientMobile: {
                    required: true,
                    // minlength:10,
                    // maxlength:10,
                    // number: true
                },
                patientName: {
                    required: true,
                    maxlength: 25
                },
                // patientEmail: {
                //     required: true
                // },
                patientAddress1: {
                    required: true,
                    maxlength: 45
                },
                patientAddress2: {
                    // required: true
                    maxlength: 45
                },
                patientCity: {
                    required: true
                },
                patientState: {
                    required: true
                },
                patientPinCode: {
                    required: true,
                    minlength: 6,
                    maxlength: 6,
                    number: true
                }
            },
            messages: {

            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // return false;
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#validateForm")[0]);
                $.ajax({
                    url: "{{ route('patientsignUpStore') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        $("#submit").html('Continue');
                        $("#submit").attr('disabled', false);
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            setTimeout(function() {
                                // window.location.replace(
                                //     '{{ url('patient-dashoard') }}' +
                                //     '/' + response.mrID +
                                //     '/' + response.patientId);
                                window.location.reload();
                            }, 2000);

                        } else {
                            $("#submit").html('Continue');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Continue');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                }); //ajax
            }
        });

        $('#patientState').on('change', function() {
            var idState = this.value;
            $("#city-dropdown").html('');
            $.ajax({
                url: "{{ route('fetchCity') }}",
                type: "POST",
                data: {
                    state_id: idState,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(res) {
                    $('#patientCity').html('<option value="" selected Default>Select your City</option>');
                    $.each(res.cities, function(key, value) {
                        $("#patientCity").append('<option value="' + value
                            .id + '">' + value.city + '</option>');
                    });
                }
            });
        });
    });
</script>