@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()->previous() }}"><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-6">
                    <div class="verification">
                        {!! Form::open([
                            'url' => '#',
                            'name' => 'validateForm',
                            'id' => 'validateForm',
                            'enctype' => 'multipart/form-data',
                        ]) !!}
                        <input type="hidden" id="userID" name="userID" value="{{ isset($userID) ? $userID : '' }}">
                        <input type="hidden" id="patientID" name="patientID"
                            value="{{ isset($patientID) ? $patientID : '' }}">
                        <span>Upload</span>
                        <h3 class="py-3">Upload RX Image</h3>

                        @if ($patientTotalRequestCheckFlag)
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="upload_photo">
                                        <div class="gallery_pro">
                                            <img src="{{ asset('front-assets/images/gallery.png') }}">
                                        </div>
                                        <span>Select your image file here or <b>browse <input type="file"
                                                    id="rxImage" name="rxImage"></b></span><br>
                                        <span>Max. File Size: 5MB</span>
                                    </div>
                                    <label id="rxImage-error" class="error" for="rxImage"></label>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="upload_photo">
                                        <div class="gallery_pro">
                                            <img src="{{ asset('front-assets/images/gallery.png') }}">
                                        </div>
                                        <span>Select your image file here or <b>browse <input type="file"
                                                    id="rxImage2" name="rxImage2"></b></span><br>
                                        <span>Max. File Size: 5MB</span>
                                    </div>
                                    <label id="rxImage2-error" class="error" for="rxImage2"></label>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="upload_photo">
                                        <div class="gallery_pro">
                                            <img src="{{ asset('front-assets/images/gallery.png') }}">
                                        </div>
                                        <span>Select your image file here or <b>browse <input type="file"
                                                    id="rxImage3" name="rxImage3"></b></span><br>
                                        <span>Max. File Size: 5MB</span>
                                    </div>
                                    <label id="rxImage3-error" class="error" for="rxImage3"></label>
                                </div>
                            </div>
                        @else
                            <div class="upload_photo">
                                <div class="gallery_pro">
                                    <img src="{{ asset('front-assets/images/gallery.png') }}">
                                </div>
                                <span>Select your image file here or <b>browse <input type="file" id="rxImage"
                                            name="rxImage"
                                            accept="image/jpeg,image/png,image/PNG,image/JPEG"></b><br><span
                                        class="filename" id="fileName"></span></span><br>
                                <span>Max. File Size: 5MB</span>
                            </div>
                            <label id="rxImage-error" class="error" for="rxImage"></label>
                        @endif

                        {{-- 3 RX file add --}}

                        <div class="bill-img">
                            <img src="{{ asset('front-assets/images/bill.png') }}">
                        </div>
                        <p class="pb-2">Rx is commonly known to most as the symbol for a medical prescription you can
                            upload image file here.</p>
                        <button type="submit" id="submit" class="btn btn-primary ">Submit</button>
                        {!! Form::close() !!}
                    </div>
                </div>

            </div>
        </div>
    </section>

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

@include('patient.footer')


<script>
    $(document).ready(function() {
        $.validator.addMethod('filesize', function(value, element, param) {
            // param = size (en bytes)
            // element = element to validate (<input>)
            // value = value of the element (file name)
            return this.optional(element) || (element.files[0].size <= param)
        });

        $('#rxImage').on('change', function() {
            var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
            // console.log(filename);
            $('#fileName').html(filename);
        });

        // $('#rxImage').on('change', function() {
        //     // Check if a file was selected
        //     if (this.files && this.files[0]) {
        //         var reader = new FileReader();

        //         reader.onload = function(e) {
        //             // File has been uploaded, trigger a success notification
        //             $.notify('File uploaded successfully!', 'success');
        //         };

        //         reader.readAsDataURL(this.files[0]);
        //     } else {
        //         // No file was selected, trigger an error notification
        //         $.notify('Failed to upload. Please try again.', 'error');
        //     }
        // });

        $('#validateForm').validate({
            ignore: ".ignore",
            rules: {
                userID: {
                    required: true
                },
                patientID: {
                    required: true
                },
                rxImage: {
                    // required: true,
                    filesize: 5120000
                }
            },
            messages: {
                rxImage: {
                    filesize: "File size must be less than 5 MB."
                }
            },
            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('uploadRxImage') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        $("#submit").html('Submit');
                        // $("#submit").attr('disabled', false);
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            setTimeout(function() {
                                window.location.replace(
                                    '{{ url('all-request-pagination') }}' +
                                    '/' + response.userID +
                                    '/' + response.patientID);
                            }, 2000);
                        } else {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                    }
                }); //ajax
            }
        });

        if ("{{ $patientTotalRequestCheckFlag }}") {
            $("#rxImage2").rules("add", {
                // required: true,
                filesize: 5120000,
                messages: {
                    // required: "This field is required.",
                    filesize: "File size must be less than 5 MB."
                },
            });

            $("#rxImage3").rules("add", {
                // required: true,
                filesize: 5120000,
                messages: {
                    // required: "This field is required.",
                    filesize: "File size must be less than 5 MB."
                },
            });
        }
    });
</script>