@extends('layout.app')
@section('title', 'UAT Check Bill Rest')
@section('style')
    <style>
        .json-view {
            background-color: #f7f7f9;
            color: #333;
            padding: 15px;
            border-radius: 6px;
            font-family: Consolas, Monaco, monospace;
            font-size: 14px;
            line-height: 1.5;
            white-space: pre;
            overflow-x: auto;
            border: 1px solid #ddd;
        }
    </style>
    <style>
        .btn-outline-secondary {
            font-size: 12px;
            padding: 3px 8px;
            cursor: pointer;
        }
        /* 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 Check Bill Rest - <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-3 mb-3">
                                            <div class="form-group">
                                                <label for="ConversationID">requestId <span class="text-danger">*</span></label>
                                                <input class="form-control" name="requestId" id="requestId" 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="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>
                                                <label for="BillMonth">userIdentityNumber</label>
                                                <input class="form-control" name="userIdentityNumber" id="userIdentityNumber" 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="checkAmount">checkAmount</label>
                                                <input class="form-control" name="checkAmount" id="checkAmount" type="number" 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="startMonth">startMonth</label>
                                                <input class="form-control" name="startMonth" id="startMonth" 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="endMonth">endMonth</label>
                                                <input class="form-control" name="endMonth" id="endMonth" 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="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="inquiryMode">inquiryMode</label>
                                                <select class="form-select w-100 mb-0" name="inquiryMode" id="inquiryMode">
                                                    <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="inquiryType">inquiryType</label>
                                                <select class="form-select w-100 mb-0" name="inquiryType" id="inquiryType">
                                                    <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>
                                    <h6>Extended Parameter</h6>
                                    <div class="row">
                                        <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-2 mb-3">
                                            <div class="form-group">
                                                <label for="InitiatorID">InitiatorID</label>
                                                <input class="form-control" name="InitiatorID" id="InitiatorID" 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="RequesterMSISDN">RequesterMSISDN</label>
                                                <input class="form-control" name="RequesterMSISDN" id="RequesterMSISDN" 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="ContactNo">ContactNo</label>
                                                <input class="form-control" name="ContactNo" id="ContactNo" 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="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>
                                    <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 Check Bill - <span class="text-danger">Response</span>
                                            </h2>
                                            <button class="btn btn-sm btn-outline-primary" type="button" onclick="copyJsonToClipboard()">
                                                <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 JSON
                                            </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 (can hold multiple toasts if needed) -->
                                        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1055">
                                            <div id="jsonCopyToast" 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">
                                                    JSON 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>
        function submitData() {
            const form = $('form');
            const formData = form.serialize();
            const loaderContainer = $('#loaderContainer');
            const responseDiv = $('#responseShow');

            let url = "{{ url('uat-check-bill-rest-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(response) {
                    let parsed;
                    try {
                        parsed = typeof response === "string" ? JSON.parse(response) : response;
                    } catch (e) {
                        parsed = { error: 'Invalid JSON', raw: response };
                    }

                    const pretty = JSON.stringify(parsed, null, 4); // Pretty JSON (like Postman)

                    // Clear any previous background color
                    responseDiv.removeAttr('style').removeClass('bg-danger');

                    if (parsed.resultCode === "0") {
                        // Success response: use random success color
                        const color = getRandomSuccessColor();
                        responseDiv
                            .css('background-color', color)
                            .addClass('text-white');
                    } else {
                        // Error response: use danger class
                        responseDiv
                            .css('background-color', '')
                            .addClass('bg-danger text-white');
                    }

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

                    responseDiv.html(`<pre class="json-view">${escapeHtml(pretty)}</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;
        }

        // Success color logic
        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 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 copyJsonToClipboard() {
            const jsonText = document.querySelector('#responseShow pre')?.innerText;
            if (!jsonText) return;

            navigator.clipboard.writeText(jsonText)
                .then(() => {
                    const toastEl = document.getElementById('jsonCopyToast');
                    const toast = new bootstrap.Toast(toastEl);
                    toast.show();
                })
                .catch(err => {
                    console.error("Copy failed", err);
                });
        }

    </script>
@endsection