@extends('layouts.app')

@section('title', 'Google Pay')

@section('content')
    @php
        $currentYear = (int) date('Y');
        $expYears = range($currentYear, $currentYear + 15);
        $defaultGpDescriptor = 'COMMON.GOOGLEPAY.INAPP.PAYMENT';
    @endphp

    <style>
        .pay-form { max-width: 42rem; margin: 0 auto; }
        .pay-hero { margin-bottom: 1.5rem; }
        .pay-hero h2 {
            margin: 0 0 .5rem 0;
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: #0f172a;
        }
        .pay-hero p { margin: 0; line-height: 1.6; max-width: 36rem; }
        .pay-panel {
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.25rem 1.35rem 1.4rem;
            margin-bottom: 1rem;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        }
        .pay-panel h3 {
            margin: 0 0 1rem 0;
            padding-bottom: .75rem;
            border-bottom: 1px solid #e2e8f0;
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #475569;
        }
        .pay-panel__note { margin: -.35rem 0 1rem 0; font-size: .8125rem; color: #64748b; line-height: 1.5; }
        .pay-sublabel { display: block; margin-top: .75rem; font-size: .8125rem; font-weight: 500; color: #64748b; }
        .row2 { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
        .row2 > .field { flex: 1; min-width: 11rem; }
        .field-hint { font-size: .8125rem; color: #64748b; margin: .35rem 0 0 0; line-height: 1.45; }
        .input-readonly {
            background: #f1f5f9 !important;
            color: #334155 !important;
            border-color: #e2e8f0 !important;
            cursor: default;
        }
        .amount-wrap {
            display: flex; align-items: stretch; max-width: 100%;
            border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff;
        }
        .amount-wrap input { border: 0 !important; border-radius: 0; flex: 1; max-width: none !important; box-shadow: none !important; }
        .amount-wrap .suffix {
            display: flex; align-items: center; padding: 0 1rem; background: #f8fafc;
            color: #475569; font-size: .8125rem; font-weight: 600; border-left: 1px solid #e2e8f0;
        }
        .pay-actions { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e2e8f0; }
        .gp-btn-wrap { min-height: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
        .gp-fallback { font-size: .8125rem; color: #64748b; }
        .pay-nav { font-size: .875rem; margin-bottom: 1rem; }
        .req { color: #dc2626; font-weight: 700; margin-left: .15rem; }
        #gpay-form .pay-panel input[type="text"],
        #gpay-form .pay-panel input[type="email"],
        #gpay-form .pay-panel input[type="number"],
        #gpay-form .pay-panel textarea,
        #gpay-form .pay-panel select { max-width: none; }
    </style>

    <div class="pay-form">
        <div class="pay-hero">
            <h2>Google Pay</h2>
            <p class="muted">Load an order (same as card checkout), then pay with Google Pay. Uses Authorize.Net <strong>authCaptureTransaction</strong> with a Google Pay wallet token — separate from the card form.</p>
        </div>

        <p class="pay-nav muted">
            <a href="{{ route('payments.create', request()->query()) }}">← Card / manual checkout</a>
        </p>

        @if($anetEnabled && ! $anetReady)
            <div class="err">
                <strong>Authorize.Net is enabled but not configured.</strong> Add API credentials or disable the gateway.
            </div>
        @endif

        @if($errors->any())
            <div class="err">
                <ul style="margin:0;padding-left:1.25rem;">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if($error)
            <div class="err">{{ $error }}</div>
        @endif

        @if(! $order)
            <form method="get" action="{{ route('google.pay.create') }}" id="lookup-form-gp" class="stack pay-panel" style="margin-bottom:1rem;">
                <h3>Find order</h3>
                <p class="pay-panel__note">Enter <strong>Record ID</strong> and/or <strong>Invoice number</strong>. Lookup runs automatically shortly after you stop typing.</p>
                <label for="lookup_record_id_gp">Record ID</label>
                <input type="text" id="lookup_record_id_gp" name="record_id" value="{{ $queryRecordId }}" autocomplete="off" placeholder="e.g. mukesh">

                <label for="lookup_invoice_gp">Invoice number</label>
                <input type="text" id="lookup_invoice_gp" name="invoice_number" value="{{ $queryInvoiceNumber }}" autocomplete="off" placeholder="e.g. 2025-04143375">

                <p class="field-hint">You can use Record ID alone, invoice number alone, or both.</p>
                <noscript><button type="submit" class="btn" style="margin-top:.75rem;">Load order</button></noscript>
            </form>
            <script>
            (function () {
                var form = document.getElementById('lookup-form-gp');
                if (!form) return;
                var record = document.getElementById('lookup_record_id_gp');
                var invoice = document.getElementById('lookup_invoice_gp');
                if (!record || !invoice) return;
                var t = null;
                function paramSig(sp) {
                    return (sp.get('record_id') || '') + '\t' + (sp.get('invoice_number') || '');
                }
                function formSearchParams() {
                    var p = new URLSearchParams();
                    var r = (record.value || '').trim();
                    var i = (invoice.value || '').trim();
                    if (r) p.set('record_id', r);
                    if (i) p.set('invoice_number', i);
                    return p;
                }
                function navigateIfNeeded() {
                    var cur = new URLSearchParams(window.location.search);
                    var next = formSearchParams();
                    var r = (record.value || '').trim();
                    var inv = (invoice.value || '').trim();
                    if (r === '' && inv === '') {
                        if (paramSig(cur) !== '\t') {
                            window.location.href = form.action.split('?')[0];
                        }
                        return;
                    }
                    if (paramSig(cur) === paramSig(next)) return;
                    var q = next.toString();
                    window.location.href = q ? form.action.split('?')[0] + '?' + q : form.action.split('?')[0];
                }
                function schedule() {
                    clearTimeout(t);
                    t = setTimeout(navigateIfNeeded, 700);
                }
                record.addEventListener('input', schedule);
                invoice.addEventListener('input', schedule);
            })();
            </script>
        @endif

        @if($order)
        <form id="gpay-form" method="post" action="{{ route('google.pay.store') }}" class="stack">
            @csrf
            <input type="hidden" name="google_pay_opaque_descriptor" id="google_pay_opaque_descriptor" value="{{ old('google_pay_opaque_descriptor', $defaultGpDescriptor) }}">
            <input type="hidden" name="google_pay_opaque_value" id="google_pay_opaque_value" value="{{ old('google_pay_opaque_value') }}">

            @php
                $hidRecord = (string) old('record_id', '');
                $hidOrder = (string) old('order_id', '');
                $hidInvoice = (string) old('invoice_number', '');
                if ($hidRecord === '' && ! empty($order['recordID'])) {
                    $hidRecord = (string) $order['recordID'];
                }
                if ($hidOrder === '' && ! empty($order['orderID'])) {
                    $hidOrder = (string) $order['orderID'];
                }
                if ($hidInvoice === '') {
                    $inv = $order['InvoiceNumber'] ?? $order['invoiceNumber'] ?? null;
                    if ($inv !== null && trim((string) $inv) !== '') {
                        $hidInvoice = trim((string) $inv);
                    }
                }
                $hidOrderLineItemId = (string) old('order_line_item_id', '');
                if ($hidOrderLineItemId === '') {
                    $items = $order['lineItems'] ?? $order['lineitems'] ?? null;
                    if (is_array($items) && $items !== []) {
                        $first = $items[0];
                        if (is_array($first)) {
                            $oli = $first['orderLineItemID'] ?? $first['orderLineItemId'] ?? null;
                            if ($oli !== null && $oli !== '') {
                                $hidOrderLineItemId = (string) $oli;
                            }
                        }
                    }
                }
            @endphp
            <input type="hidden" name="record_id" value="{{ $hidRecord }}">
            <input type="hidden" name="order_id" value="{{ $hidOrder }}">
            <input type="hidden" name="invoice_number" value="{{ $hidInvoice }}">
            <input type="hidden" name="order_line_item_id" value="{{ $hidOrderLineItemId }}">

            <div class="pay-panel">
                <h3>Order details</h3>
                <label for="gp_display_client">Client name <span class="req">*</span></label>
                <input type="text" id="gp_display_client" class="input-readonly" readonly value="{{ $clientName }}">

                <label for="gp_display_inv">Job order number <span class="req">*</span></label>
                <input type="text" id="gp_display_inv" class="input-readonly" readonly
                       value="{{ $order['InvoiceNumber'] ?? $order['invoiceNumber'] ?? $order['orderID'] ?? '' }}">

                <span class="pay-sublabel" style="margin-top:1rem;">Purchaser's name</span>
                <div class="row2">
                    <div class="field">
                        <label for="gp_purchaser_first" class="pay-sublabel">First name</label>
                        <input type="text" id="gp_purchaser_first" name="purchaser_first_name" value="{{ $purchaserFirst }}" autocomplete="given-name">
                    </div>
                    <div class="field">
                        <label for="gp_purchaser_last" class="pay-sublabel">Last name</label>
                        <input type="text" id="gp_purchaser_last" name="purchaser_last_name" value="{{ $purchaserLast }}" autocomplete="family-name">
                    </div>
                </div>

                <label for="gp_purchaser_email">Email <span class="req">*</span></label>
                <input type="email" id="gp_purchaser_email" name="purchaser_email" required value="{{ $purchaserEmail }}" autocomplete="email">

                <label for="gp_display_addr">Subject property address</label>
                <input type="text" id="gp_display_addr" class="input-readonly" readonly value="{{ $propertyAddress }}">

                @php
                    $gpMaxPaymentUsd = isset($order['balanceAmount']) ? round((float) $order['balanceAmount'], 2) : null;
                @endphp
                <label for="gp_amount">Payment amount <span class="req">*</span></label>
                <div class="amount-wrap">
                    <input type="number" step="0.01" min="0.01" id="gp_amount" name="amount" required
                           inputmode="decimal"
                           @if($gpMaxPaymentUsd !== null) max="{{ sprintf('%.2f', $gpMaxPaymentUsd) }}" @endif
                           value="{{ old('amount', $order && isset($order['balanceAmount']) ? $order['balanceAmount'] : '') }}">
                    <span class="suffix">USD</span>
                </div>
                <p class="field-hint">Cannot exceed the API outstanding balance; partial payment is allowed.</p>
                @if($gpMaxPaymentUsd !== null)
                <script>
                (function () {
                    var inp = document.getElementById('gp_amount');
                    if (!inp) return;
                    var max = {{ json_encode($gpMaxPaymentUsd) }};
                    var debounceTimer = null;
                    var alertedWhileOverMax = false;
                    var msg = 'Payment amount cannot exceed $' + max.toFixed(2) + ' USD (outstanding balance). Partial payment up to that amount is allowed.';

                    function sync() {
                        var v = parseFloat(inp.value, 10);
                        if (!isFinite(v) || !isFinite(max)) {
                            inp.setCustomValidity('');
                            alertedWhileOverMax = false;
                            clearTimeout(debounceTimer);
                            return;
                        }
                        if (v > max) {
                            inp.setCustomValidity(msg);
                            clearTimeout(debounceTimer);
                            debounceTimer = setTimeout(function () {
                                var v2 = parseFloat(inp.value, 10);
                                if (!isFinite(v2) || v2 <= max) return;
                                if (!alertedWhileOverMax) {
                                    alertedWhileOverMax = true;
                                    alert(msg);
                                }
                            }, 350);
                        } else {
                            inp.setCustomValidity('');
                            alertedWhileOverMax = false;
                            clearTimeout(debounceTimer);
                        }
                    }

                    inp.addEventListener('input', sync);
                    inp.addEventListener('change', sync);
                    inp.addEventListener('keyup', sync);

                    var form = inp.closest('form');
                    if (form) {
                        form.addEventListener('submit', function (e) {
                            var v = parseFloat(inp.value, 10);
                            if (isFinite(v) && isFinite(max) && v > max) {
                                e.preventDefault();
                                alert(msg);
                                inp.focus();
                            }
                        });
                    }
                    sync();
                })();
                </script>
                @endif
            </div>

            <div class="pay-panel">
                <h3>Billing address</h3>
                <label for="gp_billing_street">Street address</label>
                <input type="text" id="gp_billing_street" name="billing_street" value="{{ old('billing_street') }}" autocomplete="billing street-address">

                <label for="gp_billing_street2">Street address line 2</label>
                <input type="text" id="gp_billing_street2" name="billing_street2" value="{{ old('billing_street2') }}" autocomplete="billing address-line2">

                <div class="row2">
                    <div class="field">
                        <label for="gp_billing_city">City</label>
                        <input type="text" id="gp_billing_city" name="billing_city" value="{{ old('billing_city') }}" autocomplete="billing address-level2">
                    </div>
                    <div class="field">
                        <label for="gp_billing_state">State / province</label>
                        <input type="text" id="gp_billing_state" name="billing_state" value="{{ old('billing_state') }}" autocomplete="billing address-level1">
                    </div>
                </div>

                <div class="row2">
                    <div class="field">
                        <label for="gp_billing_postal">Postal / zip code</label>
                        <input type="text" id="gp_billing_postal" name="billing_postal" value="{{ old('billing_postal') }}" autocomplete="billing postal-code">
                    </div>
                    <div class="field">
                        <label for="gp_billing_country">Country</label>
                        <select id="gp_billing_country" name="billing_country" autocomplete="billing country">
                            <option value="" @selected(old('billing_country', '') === '')>Please Select</option>
                            @foreach(config('payment_countries') as $country)
                                @php $label = $country === 'other' ? 'Other' : $country; @endphp
                                <option value="{{ $country }}" @selected(old('billing_country') === $country)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="pay-panel">
                <h3>Notes</h3>
                <label for="gp_notes">Additional notes <span class="muted" style="font-weight:500;">(optional)</span></label>
                <textarea id="gp_notes" name="notes" placeholder="Reference, memo…">{{ old('notes') }}</textarea>
            </div>

            @if($gpReady)
            <div class="pay-panel">
                <h3>Google Pay</h3>
                <p class="pay-panel__note">Tap the Google Pay button. Your card is tokenized by Google and charged through Authorize.Net — card data does not pass through this server.</p>
                <div id="gp-button-container" class="gp-btn-wrap"></div>
                <p class="gp-fallback" id="gp-not-ready" style="display:none;">Google Pay could not be shown. Use a supported browser, ensure the site is served over HTTPS, and set <code>GOOGLE_PAY_MERCHANT_ID</code> in <code>.env</code>.</p>
            </div>
            @else
            <div class="pay-panel">
                <h3>Google Pay unavailable</h3>
                <p class="pay-panel__note">
                    Enable <code>GOOGLE_PAY_ENABLED=true</code>, set <code>GOOGLE_PAY_MERCHANT_ID</code> (from Google Pay Business Console), and ensure Authorize.Net credentials are configured.
                    Use <a href="{{ route('payments.create', request()->query()) }}">card checkout</a> meanwhile.
                </p>
            </div>
            @endif

            <div class="pay-actions">
                <p class="muted" style="margin:0;padding-left:1.25rem;">
                    <strong>Note:</strong> Submitting the form without using the Google Pay button will fail validation. Use the button above when ready.
                </p>
            </div>
        </form>

        @if($gpReady)
        <script src="https://pay.google.com/gp/p/js/pay.js"></script>
        <script>
        (function () {
            var form = document.getElementById('gpay-form');
            var amountEl = document.getElementById('gp_amount');
            var hiddenVal = document.getElementById('google_pay_opaque_value');
            var hiddenDesc = document.getElementById('google_pay_opaque_descriptor');
            if (!form || !amountEl || !hiddenVal) return;

            var merchantId = @json($gpMerchantId);
            var merchantName = @json($gpMerchantName);
            var gatewayMerchantId = @json($gpGatewayMerchantId);
            var env = @json($gpEnvironment === 'PRODUCTION' ? 'PRODUCTION' : 'TEST');

            if (typeof google === 'undefined' || !google.payments || !google.payments.api) {
                var nr = document.getElementById('gp-not-ready');
                if (nr) nr.style.display = 'block';
                return;
            }

            var paymentsClient = new google.payments.api.PaymentsClient({ environment: env });

            function getAmount() {
                var v = parseFloat(amountEl.value);
                return isNaN(v) ? 0 : v;
            }

            function buildPaymentDataRequest() {
                var total = getAmount().toFixed(2);
                return {
                    apiVersion: 2,
                    apiVersionMinor: 0,
                    allowedPaymentMethods: [{
                        type: 'CARD',
                        parameters: {
                            allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                            allowedCardNetworks: ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA']
                        },
                        tokenizationSpecification: {
                            type: 'PAYMENT_GATEWAY',
                            parameters: {
                                gateway: 'authorizenet',
                                gatewayMerchantId: gatewayMerchantId
                            }
                        }
                    }],
                    merchantInfo: {
                        merchantId: merchantId,
                        merchantName: merchantName
                    },
                    transactionInfo: {
                        totalPriceStatus: 'FINAL',
                        totalPrice: total,
                        currencyCode: 'USD',
                        countryCode: 'US'
                    }
                };
            }

            function onGooglePayClicked() {
                var amt = getAmount();
                if (amt <= 0) {
                    alert('Enter a valid payment amount.');
                    return;
                }
                var maxStr = amountEl.getAttribute('max');
                if (maxStr) {
                    var maxAmt = parseFloat(maxStr, 10);
                    if (isFinite(maxAmt) && amt > maxAmt) {
                        alert('Payment cannot exceed $' + maxAmt.toFixed(2) + ' USD (outstanding balance).');
                        return;
                    }
                }
                if (!form.reportValidity()) return;

                var request = buildPaymentDataRequest();
                paymentsClient.loadPaymentData(request).then(function (paymentData) {
                    try {
                        var tok = paymentData.paymentMethodData.tokenizationData.token;
                        if (typeof tok !== 'string') {
                            tok = JSON.stringify(tok);
                        }
                        hiddenVal.value = tok;
                        if (hiddenDesc && !hiddenDesc.value) {
                            hiddenDesc.value = @json($defaultGpDescriptor);
                        }
                        form.submit();
                    } catch (e) {
                        alert('Could not read Google Pay token.');
                    }
                }).catch(function (err) {
                    if (err && err.statusCode === 'CANCELED') return;
                    console.error(err);
                    alert(err && err.statusMessage ? err.statusMessage : 'Google Pay failed.');
                });
            }

            paymentsClient.isReadyToPay({
                apiVersion: 2,
                apiVersionMinor: 0,
                allowedPaymentMethods: buildPaymentDataRequest().allowedPaymentMethods
            }).then(function (res) {
                if (!res.result) {
                    var nr = document.getElementById('gp-not-ready');
                    if (nr) nr.style.display = 'block';
                    return;
                }
                var btn = paymentsClient.createButton({
                    onClick: onGooglePayClicked,
                    buttonColor: 'black',
                    buttonType: 'pay',
                    buttonSizeMode: 'fill'
                });
                var container = document.getElementById('gp-button-container');
                if (container) container.appendChild(btn);
            }).catch(function () {
                var nr = document.getElementById('gp-not-ready');
                if (nr) nr.style.display = 'block';
            });
        })();
        </script>
        @endif
        @endif
    </div>
@endsection