@extends('layouts.app-merchant')
@section('content')
    <div class="container">
        <div class="col-md-12 mt-4">
            {{-- @include('errors')
        @include('layouts.messages') --}}
            <form id="paymentform" action="{{ route('merchant.sign') }}" >
                @csrf
                <div class="col">
                    <div class="card shadow-sm border-0 rounded">
                        <div class="card-header" style="background-color:  #f1f1f1;">
                            <h5 class="text-black text-center"><strong>Merchant Request</strong></h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <h5>FPX Request Format</h5>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Left Column -->
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="merchant_id" class="col-sm-4 col-form-label text-sm-right pt-1">1. MERCHANT_ID</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="merchant_id" name="merchant_id"
                                                    value="{{ $merchant_id }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="trx_type" class="col-sm-4 col-form-label text-sm-right pt-1">2. TRX_TYPE</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="trx_type" name="trx_type"
                                                    value="ES">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="trx_product_id" class="col-sm-4 col-form-label text-sm-right pt-1">3. TRX_PRODUCT_ID</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="trx_product_id" name="trx_product_id"
                                                    value="ACCNO9902212442">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="trx_amount" class="col-sm-4 col-form-label text-sm-right pt-1">4. TRX_AMOUNT</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="trx_amount" name="trx_amount"
                                                    value="45.20">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="trx_description" class="col-sm-4 col-form-label text-sm-right pt-1">5. TRX_DESCRIPTION</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="trx_description" name="trx_description"
                                                    value="Payment for ACCNO9902212442 account">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="merchant_transaction_id" class="col-sm-4 col-form-label text-sm-right pt-1">6. MERCHANT_TRANSACTION_ID</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="merchant_transaction_id" name="merchant_transaction_id"
                                                    value="{{ 'TESTBEM' . now()->format('YmdHisv') }}"> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="merchant_transaction_time" class="col-sm-4 col-form-label text-sm-right pt-1">7. MERCHANT_TRANSACTION_TIME</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="merchant_transaction_time" name="merchant_transaction_time"
                                                    value="20260629154508">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="trx_buyer_fullname" class="col-sm-4 col-form-label text-sm-right pt-1">8. TRX_BUYER_FULLNAME</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="trx_buyer_fullname" name="trx_buyer_fullname"
                                                    value="John Doe">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="trx_buyer_email" class="col-sm-4 col-form-label text-sm-right pt-1">9. TRX_BUYER_EMAIL</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="trx_buyer_email" name="trx_buyer_email"
                                                    value="john@email.com">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="trx_buyer_phone_mobile" class="col-sm-4 col-form-label text-sm-right pt-1">10. TRX_BUYER_PHONE_MOBILE</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="trx_buyer_phone_mobile" name="trx_buyer_phone_mobile"
                                                    value="60123456789">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="fpx_buyer_id" class="col-sm-4 col-form-label text-sm-right pt-1">11. FPX_BUYER_ID</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="fpx_buyer_id" name="fpx_buyer_id"
                                                    value="981206108875">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="fpx_buyer_id_type" class="col-sm-4 col-form-label text-sm-right pt-1">12. FPX_BUYER_ID_TYPE</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="fpx_buyer_id_type" name="fpx_buyer_id_type"
                                                    value="1">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="fpx_application_type" class="col-sm-4 col-form-label text-sm-right pt-1">13. FPX_APPLICATION_TYPE</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="fpx_application_type" name="fpx_application_type"
                                                    value="01">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="fpx_max_freq" class="col-sm-4 col-form-label text-sm-right pt-1">14. FPX_MAX_FREQ</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="fpx_max_freq" name="fpx_max_freq"
                                                    value="4">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="fpx_freq_mode" class="col-sm-4 col-form-label text-sm-right pt-1">15. FPX_FREQ_MODE</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="fpx_freq_mode" name="fpx_freq_mode"
                                                    value="MT">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="fpx_effective_date" class="col-sm-4 col-form-label text-sm-right pt-1">16. FPX_EFFECTIVE_DATE</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="fpx_effective_date" name="fpx_effective_date"
                                                    value="20260626">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="fpx_expiry_date" class="col-sm-4 col-form-label text-sm-right pt-1">17. FPX_EXPIRY_DATE</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="fpx_expiry_date" name="fpx_expiry_date"
                                                    value="20260926">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group row col-md-12">
                                            <label for="npg_trx_signature" class="col-sm-4 col-form-label text-sm-right pt-1">Source String Example</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control form-control-sm" id="npg_trx_signature" name="npg_trx_signature"
                                                    value="wdawadaw||wdadwadwd||wdawd||wdwd||" readonly>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col text-center">
                            <button type="submit" class="btn" style="background-color: #ff0000; color: #f0f0f0;">Send Request</button>
                        </div>
                    </div>
                    <div id="result"></div>
                </div>
            </form>
        </div>
    </div>
    <script>
        function updateSignature() {
            const merchantID = document.getElementById("merchant_id").value;
            const trxType = document.getElementById("trx_type").value;
            const trxProductID = document.getElementById("trx_product_id").value;

            const signature = `${merchantID}||${trxType}||${trxProductID}||..........`;
            console.log(merchantID)

            document.getElementById("npg_trx_signature").value = signature;
        }
        updateSignature();

        document.getElementById("merchant_id").addEventListener("input", updateSignature);
        document.getElementById("trx_type").addEventListener("input", updateSignature);
        document.getElementById("trx_product_id").addEventListener("input", updateSignature);
    </script>
    {{-- <script>
        document.getElementById('paymentform').addEventListener('submit', function(e) {
            e.preventDefault();

            let form = this;
            let formData = new FormData(form);

            fetch("{{ route('merchant.sign') }}", {
                method: "POST",
                body: formData,
                headers: {
                    "Accept": "application/json"
                }
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);

                document.getElementById('result').innerHTML = `
                    Status: ${data.status}<br>
                    URL: ${data.url}
                `;
            })
            .catch(error => {
                console.error(error);
            });
        });
        </script> --}}
@endsection