@extends('layout')

@section('title', __('store.payment_redirect_title'))

@section('content')
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card text-center">
                <div class="card-header">
                    <h4>{{ __('store.payment_redirecting_to_gateway') }}</h4>
                    <small class="text-muted">{{ __('store.payment_invoice_number') }}: {{ $invoice->invoice_number }}</small>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <i class="fas fa-external-link-alt fa-4x text-primary mb-3"></i>
                        <h5>{{ __('store.payment_please_wait') }}</h5>
                        <p class="text-muted">{{ __('store.payment_redirecting_in_seconds') }}</p>
                    </div>

                    <!-- Countdown -->
                    <div class="mb-4">
                        <div class="display-4 text-primary" id="countdown">{{ $countdown ?? 5 }}</div>
                        <p class="text-muted">{{ __('store.payment_seconds_remaining') }}</p>
                    </div>

                    <!-- Progress bar -->
                    <div class="progress mb-4">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar"
                             style="width: 0%"
                             id="progress-bar">
                        </div>
                    </div>

                    <!-- Payment details -->
                    <div class="alert alert-info">
                        <strong>{{ __('store.payment_amount') }}:</strong> {{ number_format($invoice->total_amount, 2) }} {{ $invoice->currency->code }}<br>
                        <strong>{{ __('store.payment_gateway') }}:</strong> {{ $invoice->getEffectiveGatewayName() }}
                    </div>

                    <!-- Manual redirect button -->
                    <div class="d-grid gap-2">
                        @if(isset($redirect_url))
                            <a href="{{ $redirect_url }}" class="btn btn-primary btn-lg" id="manual-redirect">
                                <i class="fas fa-external-link-alt me-2"></i>
                                {{ __('store.payment_click_if_not_redirected') }}
                            </a>
                        @endif

                        <a href="{{ route('store.payment.show', $invoice->id) }}" class="btn btn-outline-secondary">
                            {{ __('store.payment_back_to_payment') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(isset($redirect_url))
<script>
document.addEventListener('DOMContentLoaded', function() {
    const countdownElement = document.getElementById('countdown');
    const progressBar = document.getElementById('progress-bar');
    const manualRedirectBtn = document.getElementById('manual-redirect');

    let countdown = {{ $countdown ?? 5 }};
    const totalSeconds = countdown;

    // Update countdown and progress bar
    const timer = setInterval(function() {
        countdown--;

        if (countdownElement) {
            countdownElement.textContent = countdown;
        }

        if (progressBar) {
            const progress = ((totalSeconds - countdown) / totalSeconds) * 100;
            progressBar.style.width = progress + '%';
        }

        if (countdown <= 0) {
            clearInterval(timer);

            // Show loading state
            if (countdownElement) {
                countdownElement.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">{{ __("store.common_loading") }}</span></div>';
            }

            // Redirect to payment gateway
            window.location.href = '{{ $redirect_url }}';
        }
    }, 1000);

    // Manual redirect button click
    if (manualRedirectBtn) {
        manualRedirectBtn.addEventListener('click', function() {
            clearInterval(timer);
        });
    }
});
</script>
@endif
@endsection