@php
    $hasQris      = $qrisEnabled && $qrisImage;
    $hasBanks     = ($banksEnabled ?? true) && count($bankAccounts) > 0;
    $defaultMethod = $hasQris ? 'qris' : ($hasBanks ? 'transfer' : null);
@endphp

<form action="{{ route('pay-manual.upload', $order->order_id) }}"
      method="POST"
      enctype="multipart/form-data"
      id="pay-proof-form">
    @csrf
    <input type="hidden" id="pm-csrf-promo" value="{{ csrf_token() }}">
    <input type="hidden" name="method" id="method-input" value="{{ $defaultMethod }}">
    @php
    $pmI18nData = [
        'apply'       => __('Apply'),
        'fileTooLarge'=> __('File too large. Maximum size is 5MB.'),
        'selectProof'    => __('Please select a payment proof image before submitting.'),
        'invalidMime'    => __('Only image files are allowed (JPG, PNG, WEBP).'),
        'pleaseWait'  => __('Sending...'),
        'copied'      => __('Copied'),
        'copy'        => __('Copy'),
    ];
    @endphp
    <script>window.pmI18n = {!! json_encode($pmI18nData) !!};</script>
    <script>
        window.pmPromoUrl      = '{!! route("pay-manual.validate-promo") !!}';
        window.pmOrderId       = '{!! $order->order_id !!}';
        window.pmOrderAmount   = {!! (float) $order->amount !!};
        window.pmCurrencySymbol = '{!! \Plugins\PayManual\Helpers\CurrencyHelper::symbol($currency) !!}';
        window.pmCurrencyIsZeroDecimal = {!! $currencyIsZeroDecimal ? 'true' : 'false' !!};
    </script>
    <input type="hidden" name="bank_name" id="bank-name-input">

    @if (!$hasQris && !$hasBanks)
        <div class="pm-alert pm-alert-warning">
            ⚠️ {{ __('No payment methods configured yet. Please contact admin.') }}
        </div>
    @else

        @if ($hasQris && $hasBanks)
            <div class="pm-section-title">{{ __('Select Payment Method') }}</div>
            <div class="pm-method-tabs mb-4">
                <button type="button" class="pm-method-tab {{ $defaultMethod === 'qris' ? 'active' : '' }}" data-method="qris">
                    📱 {{ __('QR Code') }}
                </button>
                <button type="button" class="pm-method-tab {{ $defaultMethod === 'transfer' ? 'active' : '' }}" data-method="transfer">
                    🏦 {{ __('Bank / E-Wallet Transfer') }}
                </button>
            </div>
        @endif

        @if ($hasQris)
            <div class="method-panel" id="panel-qris" style="{{ $defaultMethod !== 'qris' ? 'display:none' : '' }}">
                <div class="pm-qris-box">
                    <img src="{{ Storage::url($qrisImage) }}"
                         alt="QR Code"
                         class="pm-qris-img"
                         id="pm-qris-img"
                         onerror="this.style.display='none';document.getElementById('pm-qris-broken').style.display=''">
                    <div id="pm-qris-broken" class="pm-qris-broken" style="display:none">
                        📵 {{ __('QR Code image could not be loaded. Please contact admin.') }}
                    </div>
                    @if ($qrisName)
                        <div class="pm-qris-name">{{ $qrisName }}</div>
                    @endif
                    <div class="pm-qris-hint">{{ __('Scan this QR code with your mobile banking or e-wallet app') }}</div>
                </div>
            </div>
        @endif

        @if ($hasBanks)
            <div class="method-panel" id="panel-transfer" style="{{ $defaultMethod !== 'transfer' ? 'display:none' : '' }}">
                <div class="pm-section-title mb-2">{{ __('Select Destination Account') }}</div>
                @foreach ($bankAccounts as $idx => $bank)
                    <div class="pm-bank-item {{ $idx === 0 ? 'selected' : '' }}"
                         data-bank="{{ $bank['name'] ?? '' }}"
                         role="button">
                        <div>
                            <div class="pm-bank-type-badge">{{ $bank['type'] ?? 'Bank' }}</div>
                            <div class="pm-bank-name">{{ $bank['name'] ?? '' }}</div>
                            <div class="pm-bank-no">{{ $bank['account_number'] ?? '' }}</div>
                            <div class="pm-bank-holder">{{ $bank['account_name'] ?? '' }}</div>
                            @if (!empty($bank['swift_code']))<div class="pm-bank-meta">SWIFT: {{ $bank['swift_code'] }}</div>@endif
                            @if (!empty($bank['ifsc_code']))<div class="pm-bank-meta">IFSC: {{ $bank['ifsc_code'] }}</div>@endif
                            @if (!empty($bank['branch']))<div class="pm-bank-meta">{{ __('Branch') }}: {{ $bank['branch'] }}</div>@endif
                            @if (!empty($bank['notes']))<div class="pm-bank-meta" style="font-style:italic">{{ $bank['notes'] }}</div>@endif
                        </div>
                        <button type="button" class="pm-copy-btn"
                                data-copy="{{ $bank['account_number'] ?? '' }}">
                            📋 {{ __('Copy') }}
                        </button>
                    </div>
                @endforeach
                @if (count($bankAccounts) > 0)
                    <input type="hidden" id="pm-default-bank" value="{{ $bankAccounts[0]['name'] ?? '' }}">
                @endif
            </div>
        @endif

    @endif

    <div class="pm-divider">{{ __('Upload Payment Proof') }}</div>

    <div style="margin-bottom:14px">
        <label class="pm-label" for="sender-name">
            {{ __('Your Full Name') }} <span style="color:var(--pm-danger)">*</span>
        </label>
        <input type="text" id="sender-name" name="sender_name"
               class="pm-input"
               placeholder="{{ __('Full name as in your account') }}"
               value="{{ old('sender_name') }}" required>
    </div>

    <div style="margin-bottom:20px">
        <label class="pm-label" for="sender-phone">
            {{ __('WhatsApp Number') }} <span style="color:var(--pm-danger)">*</span>
        </label>
        <div class="pm-input-group">
            <span class="pm-input-prefix">+</span>
            <input type="text" id="sender-phone" name="sender_phone"
                   class="pm-input"
                   placeholder="628123456789"
                   value="{{ old('sender_phone') }}" required>
        </div>
        <div class="pm-hint">{{ __('Include country code, e.g. 628123... (no leading zero)') }}</div>
    </div>

    <div class="pm-section-title">{{ __('Payment Proof Image') }} <span style="color:var(--pm-danger)">*</span></div>
    <label for="proof-file" class="pm-upload-label" id="pm-upload-area">
        <span class="pm-upload-icon" id="pm-upload-icon">📷</span>
        <div class="pm-upload-main" id="pm-upload-main">{{ __('Click or drag image here') }}</div>
        <div class="pm-upload-sub" id="pm-upload-sub">{{ __('JPG, PNG, WEBP – max 5MB') }}</div>
        <img id="pm-upload-preview" class="pm-upload-preview" alt="{{ __('Preview') }}">
    </label>
    <input type="file" name="proof_image" id="proof-file"
           accept="image/jpeg,image/png,image/webp"
           style="display:none">
    <div class="pm-hint" id="pm-upload-hint">{{ __('No file chosen') }}</div>

    <div style="margin-bottom:16px">
        <label class="pm-label" for="promo-code-input">🎟 {{ __('Promo / Discount Code') }}</label>
        <div style="display:flex;gap:8px">
            <input type="text" id="promo-code-input" name="promo_code"
                   class="pm-input text-uppercase" style="flex:1;letter-spacing:.08em"
                   placeholder="{{ __('Enter promo code (optional)') }}"
                   maxlength="50" autocomplete="off">
            <button type="button" id="pm-check-promo" style="
                background:var(--pm-bg);border:2px solid var(--pm-border);
                border-radius:10px;padding:0 16px;font-weight:600;
                color:var(--pm-primary);cursor:pointer;white-space:nowrap;
                transition:all .15s;font-size:.88rem;
            ">{{ __('Apply') }}</button>
        </div>
        <div id="pm-promo-result" style="display:none;margin-top:8px;padding:10px 14px;
             border-radius:10px;font-size:.85rem;font-weight:600"></div>
    </div>

    <div id="pm-price-summary" style="background:var(--pm-bg);border:2px solid var(--pm-border);
         border-radius:12px;padding:14px 18px;margin-bottom:16px;font-size:.9rem">
        <div style="display:flex;justify-content:space-between">
            <span>{{ __('Order Total') }}</span>
            <span class="fw-semibold">{{ \Plugins\PayManual\Helpers\CurrencyHelper::format($order->amount, $currency) }}</span>
        </div>
        <div id="pm-discount-row" style="display:none;justify-content:space-between;color:var(--pm-success)">
            <span>🎟 {{ __('Discount') }} (<span id="pm-promo-code-label"></span>)</span>
            <span>- <span id="pm-currency-symbol-d">{{ $currencySymbol }}</span> <span id="pm-discount-val">0</span></span>
        </div>
        <div id="pm-final-row" style="display:none;justify-content:space-between;border-top:1px solid var(--pm-border);
             padding-top:8px;margin-top:8px;font-weight:800;font-size:1rem">
            <span>{{ __('You Pay') }}</span>
            <span style="color:var(--pm-primary)"><span id="pm-currency-symbol-f">{{ $currencySymbol }}</span> <span id="pm-final-val">0</span></span>
        </div>
    </div>

    <button type="submit" class="pm-submit" id="pm-submit-btn">
        ✅ {{ __('Submit Payment Proof') }}
    </button>

</form>

<script>
(function () {

    document.querySelectorAll('.pm-method-tab').forEach(function (tab) {
        tab.addEventListener('click', function () {
            document.querySelectorAll('.pm-method-tab').forEach(function (t) { t.classList.remove('active'); });
            this.classList.add('active');
            var method = this.dataset.method;
            document.getElementById('method-input').value = method;
            document.querySelectorAll('.method-panel').forEach(function (p) { p.style.display = 'none'; });
            var panel = document.getElementById('panel-' + method);
            if (panel) panel.style.display = '';
            if (method === 'transfer') {
                var firstBank = document.querySelector('.pm-bank-item.selected');
                if (firstBank) document.getElementById('bank-name-input').value = firstBank.dataset.bank;
            }
        });
    });

    var defaultBankEl = document.getElementById('pm-default-bank');
    if (defaultBankEl) {
        document.getElementById('bank-name-input').value = defaultBankEl.value;
    }

    document.querySelectorAll('.pm-bank-item').forEach(function (item) {
        item.addEventListener('click', function () {
            document.querySelectorAll('.pm-bank-item').forEach(function (i) { i.classList.remove('selected'); });
            this.classList.add('selected');
            document.getElementById('bank-name-input').value = this.dataset.bank;
        });
    });

    document.querySelectorAll('.pm-copy-btn').forEach(function (btn) {
        btn.addEventListener('click', function (e) {
            e.stopPropagation(); 
            var text = this.dataset.copy;
            var self = this;
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(function () {
                    self.textContent = '✓ ' + window.pmI18n.copied;
                    setTimeout(function () { self.innerHTML = '📋 ' + window.pmI18n.copy; }, 1800);
                });
            } else {
                var ta = document.createElement('textarea');
                ta.value = text;
                ta.style.cssText = 'position:fixed;opacity:0';
                document.body.appendChild(ta);
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
                self.textContent = '✓ ' + window.pmI18n.copied;
                setTimeout(function () { self.innerHTML = '📋 ' + window.pmI18n.copy; }, 1800);
            }
        });
    });

    document.getElementById('proof-file').addEventListener('change', function () {
        hideFormError();
        var file = this.files[0];
        if (!file) return;

        if (file.size > 5 * 1024 * 1024) {
            alert(window.pmI18n.fileTooLarge);
            this.value = '';
            return;
        }

        var area    = document.getElementById('pm-upload-area');
        var icon    = document.getElementById('pm-upload-icon');
        var main    = document.getElementById('pm-upload-main');
        var sub     = document.getElementById('pm-upload-sub');
        var preview = document.getElementById('pm-upload-preview');
        var hint    = document.getElementById('pm-upload-hint');

        hint.textContent = '✅ ' + file.name + ' (' + Math.round(file.size / 1024) + ' KB)';
        area.classList.add('has-file');
        icon.textContent = '🖼';
        main.textContent = file.name;
        sub.textContent  = Math.round(file.size / 1024) + ' KB';

        var reader = new FileReader();
        reader.onload = function (e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    });

    var PROMO_URL    = window.pmPromoUrl;
    var appliedPromo = null;

    function formatAmount(n) {
        if (window.pmCurrencyIsZeroDecimal) {
            return Number(n).toLocaleString(undefined, { maximumFractionDigits: 0 });
        }
        return Number(n).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    document.getElementById('pm-check-promo').addEventListener('click', function () {
        var btn  = this;
        var code = document.getElementById('promo-code-input').value.trim().toUpperCase();
        var result = document.getElementById('pm-promo-result');
        if (!code) { result.style.display = 'none'; appliedPromo = null; resetPriceSummary(); return; }
        btn.disabled = true;
        btn.textContent = '⏳';
        fetch(PROMO_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.getElementById('pm-csrf-promo').value,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({ code: code, amount: window.pmOrderAmount, order_id: window.pmOrderId }),
        })
        .then(function (r) { return r.json(); })
        .then(function (d) {
            btn.disabled = false;
            btn.textContent = window.pmI18n.apply;
            result.style.display = '';
            if (d.valid) {
                result.style.background = '#ecfdf5';
                result.style.color      = '#065f46';
                result.style.border     = '2px solid #10b981';
                result.textContent      = '✅ ' + d.message;
                appliedPromo = d;
                updatePriceSummary(d.discount, d.final_amount, d.code);
            } else {
                result.style.background = '#fef2f2';
                result.style.color      = '#991b1b';
                result.style.border     = '2px solid #ef4444';
                result.textContent      = '❌ ' + d.message;
                appliedPromo = null;
                resetPriceSummary();
            }
        })
        .catch(function () {
            btn.disabled = false;
            btn.textContent = window.pmI18n.apply;
            result.style.display = '';
            result.style.background = '#fef2f2';
            result.style.color = '#991b1b';
            result.textContent = '❌ {{ __("Error validating promo.") }}';
            appliedPromo = null;
        });
    });

    document.getElementById('promo-code-input').addEventListener('input', function () {
        this.value = this.value.toUpperCase();
    });

    document.getElementById('promo-code-input').addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); document.getElementById('pm-check-promo').click(); }
    });

    function updatePriceSummary(discount, final, code) {
        document.getElementById('pm-discount-row').style.display = 'flex';
        document.getElementById('pm-final-row').style.display    = 'flex';
        document.getElementById('pm-promo-code-label').textContent = code;
        document.getElementById('pm-discount-val').textContent    = formatAmount(discount);
        document.getElementById('pm-final-val').textContent       = formatAmount(final);
    }

    function resetPriceSummary() {
        document.getElementById('pm-discount-row').style.display = 'none';
        document.getElementById('pm-final-row').style.display    = 'none';
    }

    document.getElementById('sender-phone').addEventListener('blur', function () {
        var val = this.value.replace(/[^\d+]/g, '');
        if (/^0\d/.test(val)) {
            val = '62' + val.slice(1);
        }
        this.value = val;
    });

    function showFormError(msg) {
        var el = document.getElementById('pm-form-error');
        if (!el) {
            el = document.createElement('div');
            el.id = 'pm-form-error';
            el.style.cssText = 'margin:10px 0;padding:10px 14px;border-radius:8px;background:#fff0f0;border:1.5px solid #f44336;color:#c62828;font-size:0.92em;display:flex;align-items:center;gap:8px;';
            var submitBtn = document.getElementById('pm-submit-btn');
            submitBtn.parentNode.insertBefore(el, submitBtn);
        }
        el.innerHTML = '❌ ' + msg;
        el.style.display = 'flex';
        el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    function hideFormError() {
        var el = document.getElementById('pm-form-error');
        if (el) el.style.display = 'none';
    }

    document.getElementById('pay-proof-form').addEventListener('submit', function (e) {
        hideFormError();
        var file = document.getElementById('proof-file').files[0];

        if (!file) {
            e.preventDefault();
            showFormError(window.pmI18n.selectProof);
            return;
        }

        var allowed = ['image/jpeg', 'image/png', 'image/webp'];
        if (allowed.indexOf(file.type) === -1) {
            e.preventDefault();
            showFormError(window.pmI18n.invalidMime);
            return;
        }

        if (file.size > 5 * 1024 * 1024) {
            e.preventDefault();
            showFormError('{{ __("File size must be under 5 MB.") }}');
            return;
        }

        var btn = document.getElementById('pm-submit-btn');
        btn.disabled = true;
        btn.textContent = '⏳ ' + window.pmI18n.pleaseWait;
    });

})();
</script>