@extends('front.layouts.app-auth')

@section('content')
<div class="campaigns-breadcrumbs">
    <a href="{{ route('front.campaigns.index') }}">Campaigns</a>
    <span class="breadcrumb-separator">></span>
    <span class="breadcrumb-current">Payment</span>
</div>

<div class="container-fluid px-0">
    <div class="row">
        <div class="col-lg-7">
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <div class="d-flex align-items-center gap-3">
                        <div class="d-inline-flex align-items-center justify-content-center bg-primary rounded" style="width:36px;height:36px;">
                            <i class="fa fa-credit-card text-white"></i>
                        </div>
                        <div>
                            <h5 class="mb-0">Secure Card Payment</h5>
                            <small class="text-muted d-none">Powered by Authorize.Net — {{ $env === 'production' ? 'Live' : 'Sandbox' }}</small>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @include('admin.components.flash-message')

                    <form id="acceptjsPaymentForm" method="POST" action="{{ route('front.payments.acceptjs.process') }}" novalidate>
                        @csrf
                        <input type="hidden" name="amount" value="{{ $amount }}">
                        <input type="hidden" name="campaign_id" value="{{ $campaignId }}">
                        <input type="hidden" id="dataDescriptor" name="dataDescriptor">
                        <input type="hidden" id="dataValue" name="dataValue">

                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label">Card Number</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-credit-card"></i></span>
                                    <input type="tel" class="form-control" id="cardNumber" placeholder="4111 1111 1111 1111" autocomplete="cc-number" inputmode="numeric" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">CVV</label>
                                <input type="tel" class="form-control" id="cardCode" placeholder="123" autocomplete="cc-csc" inputmode="numeric" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Expiry Month</label>
                                <input type="tel" class="form-control" id="expMonth" placeholder="MM" autocomplete="cc-exp-month" inputmode="numeric" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Expiry Year</label>
                                <input type="tel" class="form-control" id="expYear" placeholder="YYYY" autocomplete="cc-exp-year" inputmode="numeric" required>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Cardholder Name</label>
                                <input type="text" class="form-control" id="cardHolder" placeholder="Name on card" autocomplete="cc-name">
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between mt-4">
                            <div>
                                <span class="text-muted">Amount to pay</span>
                                <div class="h4 mb-0">$ {{ $amount }}</div>
                            </div>
                            <button type="submit" class="btn btn-success">
                                <i class="fa fa-lock me-1"></i> Pay Now
                            </button>
                        </div>
                    </form>

                    <div class="mt-3 text-muted" style="font-size: 12px;">
                        We do not store your card details. Card data is tokenized securely via Authorize.Net Accept.js.
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5>Summary</h5>
                    <ul class="list-unstyled mb-0">
                        <li class="d-flex justify-content-between py-1"><span>Campaign</span><span>#{{ $campaignId }}</span></li>
                        <li class="d-flex justify-content-between py-1"><span>Amount</span><span>$ {{ $amount }}</span></li>
                        <li class="d-flex justify-content-between py-1"><span>Environment</span><span>{{ ucfirst($env) }}</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_script')
<script src="https://js.authorize.net/v1/Accept.js"></script>
<script>
(function(){
    function sanitizeNumber(val) { return (val || '').replace(/\D/g, ''); }

    function showErr(msg){ if (window.showNotification) { window.showNotification('error', msg); } }
    function showInfo(msg){ if (window.showNotification) { window.showNotification('info', msg); } }

    var form = document.getElementById('acceptjsPaymentForm');
    form.addEventListener('submit', function(e){
        e.preventDefault();
        var amount = parseFloat(form.querySelector('input[name=amount]').value || '0');
        if (!(amount > 0)) { return showErr('Please enter a valid amount.'); }

        var cardNumber = sanitizeNumber(document.getElementById('cardNumber').value);
        var expMonth = sanitizeNumber(document.getElementById('expMonth').value);
        var expYear = sanitizeNumber(document.getElementById('expYear').value);
        var cardCode = sanitizeNumber(document.getElementById('cardCode').value);
        if (!cardNumber || !expMonth || !expYear || !cardCode) { return showErr('Please complete card details.'); }

        var authData = {
            clientKey: '{{ $settings->authorize_client_key }}',
            apiLoginID: '{{ $settings->authorize_login_id }}'
        };
        var cardData = {
            cardNumber: cardNumber,
            month: expMonth,
            year: expYear,
            cardCode: cardCode
        };
        var secureData = { authData: authData, cardData: cardData };
        if (typeof Accept === 'undefined' || !Accept.dispatchData) {
            return showErr('Payment library failed to load.');
        }
        showInfo('Processing payment...');
        Accept.dispatchData(secureData, function(response){
            if (response.messages.resultCode === 'Error') {
                var m = (response.messages && response.messages.message && response.messages.message[0] && response.messages.message[0].text) || 'Tokenization failed.';
                return showErr(m);
            }
            var opaque = response.opaqueData;
            if (!opaque || !opaque.dataDescriptor || !opaque.dataValue) {
                return showErr('Invalid tokenized data.');
            }
            document.getElementById('dataDescriptor').value = opaque.dataDescriptor;
            document.getElementById('dataValue').value = opaque.dataValue;
            form.submit();
        });
    });
})();
</script>
@endpush