@extends('layout.app')
@section('title', 'UAT Query Bill Create')
@section('style')
    <style>
        .xml-output {
            background-color: #fff1e7;
            color: #333;
            padding: 12px;
            border-radius: 6px;
            overflow-x: auto;
            font-family: Consolas, Monaco, monospace;
            font-size: 14px;
            line-height: 1.4;
            white-space: pre-wrap;
            margin-top: 10px;
        }

        .text-white {
            color: #fff !important;
        }

        .bg-danger {
            background-color: #dc3545 !important;
        }

        #responseDiv {
            padding: 15px;
            border-radius: 5px;
            margin-top: 15px;
        }
    </style>
@endsection
@section('main')
    <div class="row py-4">
        <div class="card card-body border-0 shadow mb-4">

            <div class="row">
                <div class="col-12 col-xl-12">
                    <h2 class="h5">
                        <a href="{{url('home')}}" class="btn btn-outline-warning text-dark d-inline-flex align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" class="icon icon-xs me-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H6M12 5l-7 7 7 7"></path>
                            </svg>
                            Back To Home Page
                        </a></br></br>
                        UAT Query Bill Status - <span class="text-success">Request</span></h2>
                    <div class="user-information" id="user-information">
                        <form>@csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="ConversationID">ConversationID <span class="text-danger">*</span></label>
                                                <input class="form-control" name="ConversationID" id="ConversationID" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="ExtendedParameter1">ExtendedParameter1</label>
                                                <input class="form-control" name="ExtendedParameter1" id="ExtendedParameter1" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <div class="form-group">
                                                <label for="ExtendedParameter2">ExtendedParameter2</label>
                                                <input class="form-control" name="ExtendedParameter2" id="ExtendedParameter2" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="ExtendedParameter3">ExtendedParameter3</label>
                                                <input class="form-control" name="ExtendedParameter3" id="ExtendedParameter3" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="ExtendedParameter4">ExtendedParameter4</label>
                                                <input class="form-control" name="ExtendedParameter4" id="ExtendedParameter4" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="ExtendedParameter5">ExtendedParameter5</label>
                                                <input class="form-control" name="ExtendedParameter5" id="ExtendedParameter5" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <div class="mt-4 text-center">
                                                    <button class="btn btn-info mt-2 animate-up-2 col-md-12" type="button" onclick="submitData()">Send Request</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="">
                                        <h2  class="h5">UAT Check Bill -<span class="text-danger">Response</span> </h2>
                                        <div class="card border-success p-3" id="responseShow" style="height: 270px;">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div><br><br><br><br><br><br><br><br><br><br><br>

@endsection
@section('script')
    <script>
        $(document).ready(function () {

            const successColors = ['#7dba8d', '#5ca16e', '#499c7f', '#2a8062', '#107853'];
            let lastSuccessColor = null;

            function getRandomSuccessColor() {
                const availableColors = successColors.filter(color => color !== lastSuccessColor);
                const newColor = availableColors[Math.floor(Math.random() * availableColors.length)];
                lastSuccessColor = newColor;
                return newColor;
            }

            function formatXml(xml) {
                const PADDING = '  ';
                const reg = /(>)(<)(\/*)/g;
                let formatted = '';
                let pad = 0;

                xml = xml.replace(reg, '$1\r\n$2$3');
                xml.split('\r\n').forEach((node) => {
                    let indent = 0;
                    if (node.match(/^<\/\w/)) indent = -1;
                    else if (node.match(/^<\w[^>]*[^/]>/)) indent = 1;

                    const padding = PADDING.repeat(pad);
                    formatted += padding + node + '\r\n';
                    pad += indent;
                });

                return formatted.trim();
            }

            function escapeHtml(unsafe) {
                if (typeof unsafe !== "string") return "";
                return unsafe
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }

            // Form submission handler
            window.submitData = function () {
                const form = $('form');
                const formData = form.serialize();

                const url = "{{ url('uat-query-status-req') }}";

                $.ajax({
                    url: url,
                    type: "POST",
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    },
                    success: function (responseText) {
                        const cleanedXml = responseText.replace(/\t/g, '').replace(/^\s+|\s+$/gm, '');
                        const parser = new DOMParser();
                        const xmlDoc = parser.parseFromString(responseText, "text/xml");

                        const responseCodeNode = xmlDoc.getElementsByTagName("at:ResponseCode")[0];
                        const responseCode = responseCodeNode ? responseCodeNode.textContent : null;

                        const responseDiv = $('#responseShow');
                        responseDiv.removeClass('bg-success bg-danger text-white');
                        responseDiv.css('background-color', '');

                        if (responseCode === "1") {
                            const color = getRandomSuccessColor();
                            responseDiv
                                .css('background-color', color)
                                .addClass('text-white');
                        } else {
                            responseDiv
                                .addClass('bg-danger text-white');
                        }

                        const formattedXml = escapeHtml(formatXml(cleanedXml));
                        responseDiv.html(`<pre class="xml-output">${formattedXml}</pre>`);
                    },
                    error: function (xhr, status, error) {
                        $('#responseShow').html(
                            `<span class="text-danger">An error occurred: ${xhr.responseText || error}</span>`
                        );
                    }
                });

                return false; // prevent default form submit
            }

        });
    </script>
@endsection