@extends('layout.app')

@section('title', 'DocuSign')

{{-- @php
    use Carbon\Carbon;

    // Get the expiration time from the Cache and convert it to a Carbon instance
    $tokenExpiresAt = Cache::get('docusign_auth_code_expires_at');
    $isTokenExpired = $tokenExpiresAt ? Carbon::parse($tokenExpiresAt)->isPast() : true;
@endphp --}}

@section('content')
    <div class="container">
        @if ($message = Cache::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-bs-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif

        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Laravel Docusign Integration</h5>
            </div>
            <div class="card-body">

                {{-- @if ($message != Cache::has('success') || $isTokenExpired)
                    <p class="card-text">Click the button below to connect your application with Docusign</p>
                @endif --}}
                {{-- @if ($message = Cache::get('success') || !$isTokenExpired) --}}


                {{-- <a href="{{ route('connect.docusign') }}" class="btn btn-primary">Connect Docusign</a> --}}
                {{-- @if (Cache::has('docusign_auth_code_expires_at'))
                        {{Cache::get('docusign_auth_code_expires_at')}}
                        {{ Cache::get('docusign_auth_code') }}
                    @endif --}}

                {{-- For Api accessToken --}}
                {{-- <a href="{{ route('docusign.sign') }}" class="btn btn-primary">Click to Sign Document</a> --}}
                    <form name ='userForm' id ='userForm' enctype="multipart/form-data">
                        @csrf
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                <label for="name">User Name</label>
                                <input type="text" class="form-control" name="name" id="name">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                <label for="email">Email ID</label>
                                <input type="email" class="form-control" name="email" id="email">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                <label for="text">Mobile No.</label>
                                <input type="text" class="form-control" name="mobile_no" id="mobile_no">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary" id="userFormSubmit">Submit</button>
                    </form>

                {{-- @else
                    <a href="{{ route('connect.docusign') }}" class="btn btn-primary">Connect Docusign</a>
                @endif --}}
            </div>
        </div>
        <table class="w-100 table table-striped table-hover datatable text-center" id="datatable" name="datatable">
            <thead class="w-100">
                <tr>
                    <th>Sr. No.</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Mobile No</th>
                    <th>Status</th>
                    <th>Download</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- Modal for Embedded Signing -->
    <div class="modal fade" id="SignModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
        aria-labelledby="SignModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="SignModalLabel">Sign Document</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="iframeContainer">
                    <!-- The iframe will be inserted here -->
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        var UserDataTable;
        $(document).ready(function() {
            // let stopChecking = false; // Flag to stop checking
            // let startTime = Date.now(); // Store the start time

            // when we call ajax token need to directly pass inside data
            function checkDocumentStatus(envelopeId) {
                $.ajax({
                    url: '{{ route('docusign.checkDocumentStatus') }}', // Endpoint to check document status by envelopeId
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        envelopeId: envelopeId
                    },
                    success: function(response) {
                        if (response.status === 'completed') {
                            // Close the modal
                            $('#SignModal').modal('hide');

                            // Refresh DataTable to show updated document status
                            UserDataTable.draw();

                            // Optionally notify user that the document is ready
                            // $.notify("Document signed and ready to view/download!", "success");
                            console.log("Document signed and ready to view/download!");
                        } else {
                            // Retry after a delay if the status is not completed 3 sec check
                            setTimeout(function() {
                                checkDocumentStatus(envelopeId);
                            }, 3000);
                        }
                    },
                    error: function(error) {
                        console.error("An error occurred while checking document status:", error);
                    }
                });
            }
            // $('#UserModal').on('hidden.bs.modal', function() {
            //     // Reset form fields
            //     $(this).find('form')[0].reset();

            //     // Reset hidden input specifically
            //     $('#User_id').val('');

            //     // Reset select boxes to their default value (usually the first option)
            //     $(this).find('select').val('').trigger('change');

            //     // Clear validation error messages and reset the form's validation state
            //     var form = $(this).find('form');
            //     form.validate().resetForm(); // Clears error messages
            //     form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
            // });

            // Check if access token is already set in Cache

            $.validator.addMethod("notOnlySpaces", function(value, element) {
                return $.trim(value).length > 0;
            }, "This field cannot contain only spaces.");

            $('#userForm').validate({
                ignore: ".ignore",
                rules: {
                    name: {
                        required: true,
                        pattern: /^[a-zA-Z0-9\s]*$/,
                        minlength: 1,
                        maxlength: 150,
                        notOnlySpaces: true,
                    },
                    email: {
                        required: true,
                        pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                        minlength: 1,
                        maxlength: 100,
                        notOnlySpaces: true,
                    },
                    // only for indian mobile_no
                    mobile_no: {
                        required: true,
                        pattern: /^[6-9]\d{9}$/, // Starts with 6-9, followed by 9 more digits
                        minlength: 10,
                        maxlength: 10,
                        notOnlySpaces: true,
                    }
                },
                messages: {
                    name: {
                        required: "Name is required.",
                        pattern: "Name can only contain letters and spaces.",
                        minlength: "Name must be at least 1 character long.",
                        maxlength: "Name must not exceed 150 characters.",
                    },
                    email: {
                        required: "Email Id is required.",
                        pattern: "Email Id can only contain letters and spaces.",
                        minlength: "Email Id must be at least 1 character long.",
                        maxlength: "Email Id must not exceed 100 characters.",
                    },
                    mobile_no: {
                        required: "Mobile No is required.",
                        pattern: "Please enter a valid 10-digit mobile number starting with 6, 7, 8, or 9.",
                        minlength: "Mobile number must be exactly 10 digits long.",
                        maxlength: "Mobile number must not exceed 10 digits."
                    },
                },
                errorPlacement: function(error, element) {
                    var placement = $(element).data('error');
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    $("#userFormSubmit").attr('disabled', true);
                    var formData = new FormData($("#userForm")[0]);

                    $.ajax({
                        url: '{{ route('createUser') }}',
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                // $('#UserModal').modal('hide');
                                // $.notify(response.message, "success");
                                console.log("success");
                                // Check if the signing URL is present in the response
                                if (response.signingUrl) {
                                    /* true or false based on your callback status */
                                    let callbackWorking = false;

                                    if (callbackWorking) {
                                        // Open DocuSign signing URL in a new tab
                                        window.open(response.signingUrl, '_blank');
                                    } else {
                                        // Create an iframe element
                                        let iframe =
                                            `<iframe id="docusignIframe" src="${response.signingUrl}" style="width:100%; height:600px;" frameborder="0"></iframe>`;

                                        // Append the iframe to a modal or a specific container for displaying
                                        $('#iframeContainer').html(
                                            iframe
                                        ); // Ensure #iframeContainer exists in your HTML

                                        // Show the modal with the iframe
                                        $('#SignModal').modal(
                                            'show'
                                        ); // Ensure #SignModal is defined in your HTML

                                        // Lisner add AFTER 20 SEC dilay
                                        // if do what to change .htaccess file then below modal close
                                        // setTimeout(function() {
                                        // // Detect when the signing is completed in the iframe
                                        // document.getElementById('docusignIframe').addEventListener('load', function() {
                                        //         // Retrieve the current iframe URL to check if it's the callback URL
                                        //         let iframeUrl = this.contentWindow.location.href;

                                        //         console.log(iframeUrl);
                                        //         // Check for the keyword or part of the URL that indicates signing is complete
                                        //         if (iframeUrl.includes('/signing-complete')) {
                                        //             // Get the iframe element
                                        //             // let iframeurltochange = document.getElementById('docusignIframe');

                                        //             // Set a new URL in the iframe
                                        //             // iframeurltochange.src = "{{ route('docusign.signCompleteView') }}"; // Set the URL you want to load in the iframe
                                        //             // Close the modal
                                        //             $('#SignModal').modal('hide');

                                        //             // Optionally, refresh data or update the UI as needed
                                        //             UserDataTable.draw(); // refresh DataTable with the latest status
                                        //         }
                                        //     });
                                        // }, 20000);
                                    }
                                    // Poll for document status when iframe closes
                                    // if form webhook data whnt to direcly close modal and draw datatable
                                    // Call Function AFTER 20 SEC
                                    // setTimeout(function() {
                                    //     checkDocumentStatus(response
                                    //         .envelopeId);
                                    // }, 20000);

                                    // if user click close then dirctly check
                                    $('#SignModal').on('hidden.bs.modal', function() {
                                        checkDocumentStatus(response.envelopeId);
                                    });
                                }
                            } else if (response.status == 0) {
                                // $.notify(response.error, "error");
                                console.log(response.error);
                            }
                            UserDataTable.draw();
                            $("#userFormSubmit").attr('disabled', false);
                        },
                        error: function(xhr, status, error) {
                            console.error('An error occurred:', error);
                            $("#userFormSubmit").attr('disabled', false);
                        }
                    });
                }
            });

            $(function() {
                var columns = [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        searchable: false,
                        orderable: false,
                    },
                    {
                        data: 'name',
                        name: 'name',
                        orderable: false,
                    },
                    {
                        data: 'email',
                        name: 'email',
                        orderable: false,
                    },
                    {
                        data: 'mobile_no',
                        name: 'mobile_no',
                        orderable: false,
                    },
                    {
                        data: 'status',
                        name: 'status',
                        searchable: false,
                        orderable: false,
                    },
                    {
                        data: 'signed_document',
                        name: 'signed_document',
                        searchable: false,
                        orderable: false,
                    }
                ];
                var columnDefs = [{
                    "width": "150",
                    "targets": [1]
                }];
                getdatatable("{{ route('userPaginate') }}", columns, columnDefs);

                // $("#applyButton").click(function() {
                //     UserDataTable.draw();
                //     // getdatatable("{{ route('userPaginate') }}", columns, columnDefs);
                // });

                // $("#clearButton").click(function() {
                //     UserDataTable.draw();
                //     // getdatatable("{{ route('userPaginate') }}", columns, columnDefs);
                // });
            });

            function getdatatable(url, columns, columnDefs) {
                if ($.fn.DataTable.isDataTable('#datatable')) {
                    $('#datatable').DataTable().destroy();
                }
                UserDataTable = $('#datatable').DataTable({
                    processing: true,
                    serverSide: true,
                    "bDestroy": true,
                    order: [],
                    "scrollX": true,
                    columns: columns,
                    columnDefs: columnDefs,
                    ajax: {
                        method: 'post',
                        url: url,
                        data: function(d) {
                            d._token = "{{ csrf_token() }}"
                        }
                    }
                });
            }
        });
    </script>
@endsection