@extends('layouts.app')
@section('title','Bank Transfer Details')

@section('content')
<div class="page-header">
    <h2>🏛 Bank Transfer</h2>
    <p>Complete your payment to get {{ number_format($purchase->total_points) }} points</p>
</div>

<div class="section">
    {{-- Amount to Pay --}}
    <div style="background:linear-gradient(135deg,#1A73E8,#1557B0);color:#fff;border-radius:14px;padding:20px;text-align:center;margin-bottom:16px;">
        <div style="font-size:13px;opacity:.8;margin-bottom:4px;">Transfer Exactly</div>
        <div style="font-size:42px;font-weight:800;">GH₵{{ number_format($purchase->amount_ghs, 2) }}</div>
        <div style="font-size:13px;opacity:.9;margin-top:4px;">For {{ number_format($purchase->total_points) }} Points</div>
        <div style="font-size:11px;opacity:.7;margin-top:4px;">Reference: {{ $purchase->payment_reference }}</div>
    </div>

    {{-- Bank Details --}}
    <div style="background:#FFFBEB;border:2px solid #FED7AA;border-radius:14px;padding:16px;margin-bottom:16px;">
        <div style="font-weight:800;font-size:15px;margin-bottom:14px;color:#92400E;">📋 Bank Details</div>
        @foreach(['Bank Name'=>$bankInfo['name'],'Account Number'=>$bankInfo['account'],'Account Holder'=>$bankInfo['holder'],'Branch'=>$bankInfo['branch']] as $label => $value)
        @if($value)
        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed #FDE68A;">
            <div style="font-size:12px;color:#92400E;">{{ $label }}</div>
            <div style="display:flex;align-items:center;gap:8px;">
                <strong style="font-size:14px;">{{ $value }}</strong>
                <button onclick="copyText('{{ $value }}')" style="background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;">Copy</button>
            </div>
        </div>
        @endif
        @endforeach
        <div style="padding:10px 0;border-bottom:1px dashed #FDE68A;">
            <div style="font-size:12px;color:#92400E;">Transfer Reference</div>
            <div style="display:flex;align-items:center;gap:8px;margin-top:4px;">
                <strong style="font-size:14px;font-family:monospace;">{{ $purchase->payment_reference }}</strong>
                <button onclick="copyText('{{ $purchase->payment_reference }}')" style="background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;">Copy</button>
            </div>
        </div>

        <div style="margin-top:12px;padding:10px;background:#FEF3C7;border-radius:8px;font-size:12px;color:#92400E;line-height:1.6;">
            <i class="fa fa-info-circle"></i> <strong>Instructions:</strong><br>
            {{ $bankInfo['instructions'] }}
        </div>
    </div>

    {{-- Submit Proof Form --}}
    <div class="card card-body">
        <div style="font-weight:700;font-size:15px;margin-bottom:14px;">📸 Upload Payment Proof</div>
        <form method="POST" action="{{ route('buy-points.bank.submit', $purchase) }}" enctype="multipart/form-data">
            @csrf
            @if($errors->any())
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ $errors->first() }}</div>
            @endif

            <div class="form-group">
                <label class="form-label">Your Full Name (as on bank account) *</label>
                <input type="text" name="depositor_name" class="form-control" placeholder="e.g. Kwame Asante" required value="{{ old('depositor_name') }}">
            </div>
            <div class="form-group">
                <label class="form-label">Your Bank Name *</label>
                <input type="text" name="bank_name" class="form-control" placeholder="e.g. GCB Bank, Ecobank" required value="{{ old('bank_name') }}">
            </div>
            <div class="form-group">
                <label class="form-label">Your Account / Mobile Number *</label>
                <input type="text" name="bank_account" class="form-control" placeholder="Account or MoMo number you sent from" required value="{{ old('bank_account') }}">
            </div>
            <div class="form-group">
                <label class="form-label">Payment Screenshot / Receipt *</label>
                <div style="border:2px dashed var(--border);border-radius:10px;padding:20px;text-align:center;cursor:pointer;" onclick="document.getElementById('ss-upload').click();">
                    <div id="ss-preview" style="display:none;"><img id="ss-img" style="max-height:180px;border-radius:8px;"></div>
                    <div id="ss-placeholder">
                        <div style="font-size:32px;margin-bottom:8px;">📸</div>
                        <div style="font-size:13px;font-weight:600;">Tap to upload screenshot</div>
                        <div style="font-size:11px;color:var(--text-muted);">JPG, PNG – max 5MB</div>
                    </div>
                    <input type="file" id="ss-upload" name="screenshot" accept="image/*" style="display:none;" required onchange="previewImage(this)">
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-block btn-lg">
                <i class="fa fa-paper-plane"></i> Submit for Verification
            </button>
            <p style="font-size:11px;color:var(--text-muted);text-align:center;margin-top:10px;">
                ⏱ Points will be credited within 24 hours after verification
            </p>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function copyText(txt) {
    navigator.clipboard.writeText(txt).then(()=>toast('Copied!','success'));
}
function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            document.getElementById('ss-img').src = e.target.result;
            document.getElementById('ss-preview').style.display = 'block';
            document.getElementById('ss-placeholder').style.display = 'none';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush