@extends('application.billdesk.layout')
@section('title', 'Payment Result')

@section('content')
{{-- @dd($transection) --}}
    <div class="card" id="paymentCard">
        <div style="display:flex; justify-content:space-between; align-items:center;">
            <h1>Payment {{ ucfirst($status) }}</h1>
            <span class="badge {{ $status }}">{{ $status }}</span>
        </div>

        @if (!empty($message))
            <p class="muted" style="margin-top: 8px;">{{ $message }}</p>
        @endif

        @if (!empty($data['orderid']))
            <div class="row" style="margin-top: 14px;">
                <span>Order ID</span><span><code>{{ $data['orderid'] }}</code></span>
            </div>
        @endif
        @if (!empty($data['transactionid']))
            <div class="row"><span>Transaction ID</span><span><code>{{ $data['transactionid'] }}</code></span></div>
        @endif
        @if (!empty($data['amount']))
            <div class="row"><span>Amount</span><span>₹{{ $data['amount'] }}</span></div>
        @endif
        @if (!empty($data['payment_method_type']))
            <div class="row"><span>Method</span><span>{{ $data['payment_method_type'] }}</span></div>
        @endif
        @if (!empty($data['transaction_date']))
            <div class="row"><span>Date</span><span>{{ $data['transaction_date'] }}</span></div>
        @endif
        <!-- <pre>{{ json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre> -->

        <summary style="cursor:pointer;" class="muted">
            Redirecting in <span id="countdown">5</span> seconds...
        </summary>
        <script>
            let seconds = 15;
            let interval = setInterval(function() {
                seconds--;
                document.getElementById('countdown').textContent = seconds;

                if (seconds <= 0) {
                    clearInterval(interval);
                    window.location.href ="{{ @$transection && @$transection?->form_number ? route('application.admissionSuccess', @$transection?->form_number) : route('application.resume') }}";
                }
            }, 1000);
        </script>

        <p style="margin-top: 18px;">
            <a class="btn"
                href="{{ @$transection && @$transection?->form_number ? route('application.admissionSuccess', @$transection?->form_number) : route('application.resume') }}">
                Go to Home
            </a>
            <button id="downloadImage" class="btn btn-secondary">
                <i class="bi bi-download me-2"></i>Download Receipt
            </button>
        </p>
    </div>

    {{-- html2canvas library --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <script>
        document.getElementById('downloadImage').addEventListener('click', function() {
            const element = document.getElementById('paymentCard'); // capture the card section

            html2canvas(element).then(canvas => {
                const link = document.createElement('a');
                link.download = 'payment-result.jpg'; // filename
                link.href = canvas.toDataURL('image/jpeg'); // export as JPG
                link.click();
            });
        });
    </script>
@endsection