@extends('layout.app')
@section('title', 'UAT Pay Bill')
@section('style')
    <style>
        .xml-view {
            color: #ffffff;
            padding: 0;
            margin: 0;
            font-family: Consolas, Monaco, monospace;
            font-size: 13px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        /* Loader styles */
        .loader-container {
            display: none;
            justify-content: center;
            align-items: center;
            height: 270px;
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </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 Pay Bill - <span class="text-success">Request</span></h2>
                    <div class="user-information" id="user-information">
                        <form>@csrf
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="col-md-2 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-2 mb-3">
                                            <div>
                                                <label for="BillMonth">BillMonth</label>
                                                <input class="form-control" name="BillMonth" id="BillMonth" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="BusinessShortCode">BusinessShortCode <span class="text-danger">*</span></label>
                                                <input class="form-control" name="BusinessShortCode" id="BusinessShortCode" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="BillRefNumber">BillRefNumber <span class="text-danger">*</span></label>
                                                <input class="form-control" name="BillRefNumber" id="BillRefNumber" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="BillAmount">BillAmount</label>
                                                <input class="form-control" name="BillAmount" id="BillAmount" type="number" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>

                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="ChannelCode">ChannelCode<span class="text-danger">*</span></label>
                                                <select class="form-select w-100 mb-0" name="ChannelCode" id="ChannelCode">
                                                    <option value="00">Customer USSD</option>
                                                    <option value="01">Merchant USSD</option>
                                                    <option value="02">Agent USSD</option>
                                                    <option value="03">Agent App</option>
                                                    <option value="10">Customer APP</option>
                                                    <option value="11">Customer Web Porta</option>
                                                    <option value="12">Branch Officer APP</option>
                                                </select>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="InitiatorID">InitiatorID</label>
                                                <input class="form-control" name="InitiatorID" id="InitiatorID" type="number"  placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="InitiatorMSISDN">InitiatorMSISDN</label>
                                                <input class="form-control" name="InitiatorMSISDN" id="InitiatorMSISDN" type="number" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="RequesterMSISDN">RequesterMSISDN</label>
                                                <input class="form-control" name="RequesterMSISDN" id="RequesterMSISDN" type="number"  placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <div class="form-group">
                                                <label for="ContactNo">ContactNo</label>
                                                <input class="form-control" name="ContactNo" id="ContactNo" type="number"  placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="DebitMSISDN">DebitMSISDN</label>
                                                <input class="form-control" name="DebitMSISDN" id="DebitMSISDN" type="number" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="bKashTRXRef">bKashTRXRef<span class="text-danger"> *</span></label>
                                                <input class="form-control" name="bKashTRXRef" id="bKashTRXRef" type="number" value="{{rand(700000000, 799999999)}}" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="ParentID">ParentID</label>
                                                <input class="form-control" name="ParentID" id="ParentID" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="PaymentContractNo">PaymentContractNo</label>
                                                <input class="form-control" name="PaymentContractNo" id="PaymentContractNo" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="PaymentContractNo">PartialAmountFlag</label>
                                                <input class="form-control" name="PartialAmountFlag" id="PartialAmountFlag" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="ActualAmount">ActualAmount</label>
                                                <input class="form-control" name="ActualAmount" id="ActualAmount" type="text" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="SubID">SubID</label>
                                                {{--
                                                                                                <input class="form-control" name="SubID" id="SubID" type="text" placeholder="Example : ********" value="{{ Str::random(3) . substr((string)time(), -6) . Str::random(3) }}" required>
                                                --}}
                                                <input class="form-control" name="SubID" id="SubID" type="text" placeholder="Example : ********" value="{{ 'SUB_TX' . rand(1000, 9999) }}" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="StartMonth">StartMonth</label>
                                                <input class="form-control" name="StartMonth" id="StartMonth" type="number" value="{{ date('Y') . date('m') }}" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="EndMonth">EndMonth</label>
                                                <input class="form-control" name="EndMonth" id="EndMonth"  type="number" value="{{ date('Y') . date('m') }}" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="ProductID">ProductID</label>
                                                <input class="form-control" name="ProductID" id="ProductID"  type="number" value="{{ date('Y') . date('m') }}" placeholder="Example : ********" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="PayMode">PayMode</label>
                                                <select class="form-select w-100 mb-0" name="PayMode" id="PayMode">
                                                    <option value="0">Default</option>
                                                    <option value="01">Outstanding/Postpaid</option>
                                                    <option value="02">PrePaid</option>
                                                </select>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 mb-3">
                                            <div class="form-group">
                                                <label for="PayType">PayType</label>
                                                <select class="form-select w-100 mb-0" name="PayType" id="PayType">
                                                    <option value="0">Default</option>
                                                    <option value="01">Query by Biller Accont ID</option>
                                                    <option value="02">Query By Biller QR/Bar Code</option>
                                                </select>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2 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-2 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-2 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-2 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-2 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-2 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-4">
                                    <div>
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h2 class="h5 mb-0">
                                                UAT Pay Bill - <span class="text-danger">Response</span>
                                            </h2>
                                            <button class="btn btn-sm btn-outline-primary" type="button" onclick="copyXmlToClipboard()">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16">
                                                    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                                                    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                                                </svg>
                                                Copy XML
                                            </button>
                                        </div>
                                        <div class="card border-0 shadow-sm">
                                            <div class="card-body p-0">
                                                <!-- Loader -->
                                                <div class="loader-container" id="loaderContainer">
                                                    <div class="loader"></div>
                                                </div>
                                                <!-- Response Display -->
                                                <div class="p-3" id="responseShow" style="height: 270px; overflow-y: auto;"></div>
                                            </div>
                                        </div>
                                        <!-- Toast container -->
                                        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1055">
                                            <div id="xmlCopyToast" class="toast bg-secondary" role="alert" aria-live="assertive" aria-atomic="true">
                                                <div class="toast-header">
                                                    <svg class="icon icon-xs text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path>
                                                        <path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path>
                                                    </svg>
                                                    <strong class="me-auto">Copied</strong>
                                                    <small class="text-muted">just now</small>
                                                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                                                </div>
                                                <div class="toast-body">
                                                    XML copied to clipboard successfully.
                                                </div>
                                            </div>
                                        </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>
        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) {
            let formatted = '';
            let indent = '';
            const tab = '  ';

            xml.split(/>\s*</).forEach(function(node) {
                if (node.match(/^\/\w/)) indent = indent.substring(tab.length);
                formatted += indent + '<' + node + '>\r\n';
                if (node.match(/^<?\w[^>]*[^\/]$/)) indent += tab;
                                 });

                                 return formatted.substring(1, formatted.length - 3);
                                 }

                                 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;");
        }

        function submitData() {
            const form = $('form');
            const formData = form.serialize();
            const loaderContainer = $('#loaderContainer');
            const responseDiv = $('#responseShow');

            const url = "{{ url('uat-pay-bill-req') }}";

            // Show loader, hide response
            loaderContainer.css('display', 'flex');
            responseDiv.hide();

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

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

                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
                    .css('background-color', '')
                    .addClass('bg-danger text-white');
                }

                // Set height and overflow
                responseDiv.css({
                        'height': '270px',
                        'overflow-y': 'auto'
                    });

                    const formattedXml = formatXml(responseText);
                    responseDiv.html(`<pre class="xml-view">${escapeHtml(formattedXml)}</pre>`);

                    // Hide loader, show response
                    loaderContainer.hide();
                    responseDiv.show();
                },
                error: function (xhr, status, error) {
                responseDiv.css({
                        'height': '270px',
                        'overflow-y': 'auto'
                    });
                    responseDiv.html(
                        `<span class="text-danger">An error occurred: ${xhr.responseText || error}</span>`
                    );

                    // Hide loader, show response
                    loaderContainer.hide();
                    responseDiv.show();
                }
            });

            return false;
        }

                                 function copyXmlToClipboard() {
                                     const xmlText = document.querySelector('#responseShow pre')?.innerText;
            if (!xmlText) return;

            navigator.clipboard.writeText(xmlText)
            .then(() => {
                                         const toastEl = document.getElementById('xmlCopyToast');
                                         const toast = new bootstrap.Toast(toastEl);
                                         toast.show();
                                     })
                .catch(err => {
                                         console.error("Copy failed", err);
                                     });
        }
                                 </script>
@endsection