@extends('layouts.frontend')

@section('title', '| payment success')

@section('content')
<section id="success-page">
  <div class="container success-page-container">
    @if(isset($verificationError))
        <div class="alert alert-danger">
            {{ $verificationError }}
        </div>
    @else
  <div class="row justify-content-center text-center mb-5">
      <div class="col-md-12">
        <div class="payment-successful-title">
            Verify the document you downloaded that was received from the attorney<br>
        </div>
      </div>
      
      <div class="col-md-12 mt-5">
        <div class="d-flex justify-content-center col-gap">
            <form id="documentVerificationForm" method="POST" action="{{ url('/signed_document_verification') }}">
                @csrf
                <div class="form-group d-flex align-items-center">
                    <input type="file" class="enter_otp_input form-control me-2" id="document" name="document" accept="application/pdf" required>
                    <button class="btn update-btn" type="submit" id="submit">Verify</button>
                </div>
                <div id="verification_message" class="mt-2"></div>
            </form>
        </div>
        <div id="loadingMessage" class="mt-2">
        </div>
      </div>
    
        <div class="col-md-12 mt-4 mb-3">
          <a href="{{ route('userhomePage') }}" class="back_dashboard_btn"><span class="fa fa-chevron-left"></span> Go to Dashboard</a>
      </div>
    </div>
    @endif
  </div>
</section>
@endsection

@section('page-js')
<script>
    $(document).ready(function() {
        $('#document').on('change', function(e) {
            $('#verification_message').empty();
            $('#loadingMessage').empty();
        });

        $('#documentVerificationForm').on('submit', function(e) {
            e.preventDefault(); // Prevent default form submission

            // Get the file input
            var fileInput = $('#document')[0];
            var filePath = fileInput.value;

            // Check if a file has been uploaded and if it's a PDF
            if (!filePath) {
                $('#verification_message').html('<p class="text-danger">Please upload a PDF document.</p>').fadeIn();
                return; // Stop the submission if no file is uploaded
            }

            // Check file extension
            var allowedExtensions = /(\.pdf)$/i;
            if (!allowedExtensions.exec(filePath)) {
                $('#verification_message').html('<p class="text-danger">Invalid file type. Please upload a PDF document.</p>').fadeIn();
                return; // Stop the submission if the file is not a PDF
            }

            var formData = new FormData(this);

            $.ajax({
                url: $(this).attr('action'), // Form action URL
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function() {
                     $('#verification_message').empty();
                     $('#submit').prop('disabled', true);
                     $('#document').prop('disabled', true);
                     
                     // Show loading message with fade-in effect
                     $('#loadingMessage').html('<div class="text-center"  id="spinner"><h6 class="loading_payment_form">Please wait, the document is being verified....</h6><div class="spinner-border loading_payment_form" role="status"><span class="sr-only loading_payment_form">Please wait, the document is being verified....</span> </div></div>').fadeIn();
                },
                success: function(response) {
                    if(response.success){
                        // Show success message with fade-in effect
                        setTimeout(function () {
                            $('#submit').prop('disabled', false);
                            $('#document').prop('disabled', false);
                            $('#loadingMessage').html('<p class="mt-1 text-success">'+response.message+'</p>').fadeIn();
                        }, 4000); // 4000 milliseconds (4 seconds) delay, adjust as needed
                    }else{
                        // Show success message with fade-in effect
                        setTimeout(function () {
                            $('#submit').prop('disabled', false);
                            $('#document').prop('disabled', false);
                            $('#loadingMessage').html('<p class="mt-1 text-danger">'+response.message+'</p>').fadeIn();
                        }, 4000); // 4000 milliseconds (4 seconds) delay, adjust as needed
                    }
                },
                error: function(xhr) {
                    setTimeout(function () {
                            $('#submit').prop('disabled', false);
                            $('#document').prop('disabled', false);
                    }, 4000); // 4000 milliseconds (4 seconds) delay, adjust as needed
                    console.log(xhr.responseJSON.message);
                    $('#loadingMessage').html('<p class="mt-1 text-danger">An error occurred during verification. Please try again.</p>').fadeIn();
                }
            });
        });
    });
</script>
@endsection