@extends('layout.public')
@section('title','Payment Failed')
@section('content')
    <div class="container-xxl">
        <div class="authentication-wrapper authentication-basic container-p-y">
            <div class="authentication-inner">
                <!-- Register -->
                <div class="card UserLogin">
                    <div class="card-body text-center">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="message-box _success _failed">
                                        <img src="{{ asset('assets/img/failed.png') }}" width="150">
                                        <h4> Your Meter Recharge failed </h4>
                                        <p> Try again later </p>
                                        <p>You will be redirected in <span id="countdown">5</span> seconds...</p>
                                        <a id="backToHomeBtn" href="{{ url('customer-home') }}" class="btn btn-outline-danger">Back To Home</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Register -->
            </div>
        </div>
    </div>

    <script>
        // Countdown logic
        let countdown = 5;
        const countdownElement = document.getElementById('countdown');
        const redirectUrl = "{{ url('customer-home') }}"; // Home page URL

        // Function to update the countdown and redirect after 5 seconds
        const countdownInterval = setInterval(() => {
            countdown--; // Decrease countdown by 1
            countdownElement.textContent = countdown; // Update countdown on the page

            // If countdown reaches 0, stop the interval and redirect
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                window.location.href = redirectUrl; // Redirect to the home page
            }
        }, 1000); // Update every second

        // Optionally, show the redirect button after the countdown finishes
        setTimeout(() => {
            document.getElementById('backToHomeBtn').classList.remove('d-none');
        }, 5000); // Show button after 5 seconds
    </script>
@endsection