@extends('theme::layouts.app', ['alias' => 'Account'])
@section('theme::title', __('seo.ranking.index'))
@section('theme::sidebar')
    @include('theme::frontend.account.sidebar', ['account_alias' => 'Charging'])
@endsection
@section('theme::content')
    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12 main-content">
        <div class="container">
            <div class="card">


                <div class="card-header d-flex justify-content-between align-items-center">
                    {{-- <a href="{{ route('charging.recharge.form') }}" class="btn btn-primary">Enter Recharge Code</a> --}}
                    <a href="{{ route('charging.request.form') }}" class="btn btn-success">Request Recharge</a>

                    {{-- <a href="{{ route('charging.paypal') }}" class="btn btn-success">Recharge with PayPal</a> --}}
                    {{-- <form action="{{ route('paypal.checkout') }}" method="GET">
                        <label for="amount">Enter Amount (USD):</label>
                        <input type="number" name="amount" id="amount" required class="form-control">
                        <button type="submit" class="btn btn-primary mt-3">Pay with PayPal</button>
                    </form>
                        <div class="card-body text-center">
                            <h4>Recharge $20 using PayPal</h4>
                            <div id="paypal-button-container"></div>
                        </div> --}}
                </div>
                <div class="card-body">
                    <h1 class="text-center mb-5">Recharge Logs</h1>

                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($progress)
                        <div class="mb-4">
                            <h5>Your Recharge Progress</h5>
                            <p>Progress: {{ $progress->progress }} / {{ $progress->target }} recharges</p>
                            <progress value="{{ $progress->progress }}" max="{{ $progress->target }}"></progress>
                            <p>Total Amount: ${{ $progress->amount }}</p>
                        </div>
                    @endif
                    @if ($giftRanges->isNotEmpty())
                    <div class="gift-range-container">
                        <h5 class="gift-range-title">🎁 Gift Rewards Based on <b style="color: red">(same package)</b> Recharge</h5>
                        <p class="gift-info" style="background-color: #ffefef; padding: 10px; border-left: 5px solid red; color: #d60000; font-weight: bold; text-align: center;">
                            ⚠️ Note: When purchasing a package for the first time at a certain price, all subsequent recharges must be at the same price to receive rewards!
                        </p>                        
                        <table class="gift-range-table">
                            <thead>
                                <tr>
                                    <th class="min-amount">Range Amount (💎)</th>
                                    {{-- <th class="min-amount">Min Amount (💎)</th>
                                    <th class="max-amount">Max Amount (💎)</th> --}}
                                    <th class="required-recharges">Required Recharges</th>
                                    <th class="gift-percentage">Gift Balance 🚀</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($giftRanges as $gift)
                                    <tr>
                                        <td class="min-amount">{{ number_format($gift->min_amount, 2) }} ~ <b style="color: red">{{ $gift->max_amount }} </b> 💎</td>
                                        {{-- <td class="min-amount">{{ number_format($gift->min_amount, 2) }} 💎</td>
                                        <td class="max-amount">{{ number_format($gift->max_amount, 2) }} 💎</td> --}}
                                        <td class="required-recharges">{{ $gift->required_recharges }} </td>
                                        <td class="gift-percentage">{{ $gift->gift_percentage }} time free from <b style="color: red">(Gift package)</b></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
                                
                    <h5>Recharge Logs</h5>
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Type</th>
                                <th>Value</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Expires In</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($recharges as $recharge)
                                <tr>
                                    <td>{{ $recharge->code }}</td>
                                    <td>
                                        @if($recharge->type == 'balance')
                                            <span class="badge" style="background-color: #007bff; color: white;">
                                                💎 Balance 
                                            </span>
                                        @elseif($recharge->type == 'gift_balance')
                                            <span class="badge" style="background-color: #ffc107; color: black;">
                                                🌟 Gift Balance 
                                            </span>
                                        @else
                                            <span class="badge badge-secondary">{{ ucfirst($recharge->type) }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $recharge->value }}</td>
                                    <td>
                                        <span
                                        class="badge 
                                        @if ($recharge->status == 'Active') badge-success
                                        @elseif($recharge->status == 'in progress') badge-warning
                                        @elseif($recharge->status == 'Rejected') badge-danger
                                        @else badge-secondary @endif">
                                        {{ ucfirst($recharge->status) }}
                                    </span>                                    
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($recharge->created_at)->format('Y-m-d h:i A') }}</td>
                                    <td>
                                        @if ($recharge->expires_at)
                                            <span class="countdown" data-expiry="{{ $recharge->expires_at }}"></span>
                                        @else
                                            <span class="text-muted">No Expiry</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($recharge->status == 'Active')
                                            <button class="btn btn-primary btn-sm recharge-btn"
                                                data-code="{{ $recharge->code }}">
                                                Recharge
                                            </button>
                                        @else
                                            <button class="btn btn-secondary btn-sm" disabled>Not Available</button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <div id="loading" style="display:none; text-align:center; margin-top:10px;">
                        <span>Processing...</span>
                    </div>


                </div>
            </div>
        </div>
    </div>
    {{-- <script src="https://www.paypal.com/sdk/js?client-id={{ env('PAYPAL_SANDBOX_CLIENT_ID') }}&currency=USD"></script>
    <div id="paypal-button-container"></div>
    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
    return fetch("{{ route('charging.paypal.create') }}", {
        method: "post",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": '{{ csrf_token() }}'
        }
    }).then(function(res) {
        return res.json();
    }).then(function(orderData) {
        if (orderData.id) {
            return orderData.id;
        } else {
            alert("Failed to create PayPal order.");
            throw new Error("Order ID missing from response.");
        }
    });
},
onApprove: function(data, actions) {
    return fetch("{{ route('charging.paypal.capture') }}", {
        method: "post",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            orderID: data.orderID
        })
    }).then(function(res) {
        return res.json();
    }).then(function(response) {
        if (response.success) {
            alert(response.message);
            window.location.href = "{{ route('charging.index') }}";
        } else {
            alert("Payment failed: " + response.message);
        }
    }).catch(function(err) {
        console.error("Error capturing PayPal order:", err);
        alert("An error occurred while processing the payment.");
    });
}

        }).render('#paypal-button-container');
    </script> --}}


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".countdown").forEach(function(element) {
                let expiryDate = new Date(element.getAttribute("data-expiry")).getTime();

                function updateCountdown() {
                    let now = new Date().getTime();
                    let timeLeft = expiryDate - now;

                    if (timeLeft > 0) {
                        let days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
                        let hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        let minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
                        let seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
                        element.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
                    } else {
                        element.innerHTML = "<span class='text-danger'>Expired</span>";
                    }
                }

                setInterval(updateCountdown, 1000);
                updateCountdown();
            });

            document.querySelectorAll(".recharge-btn").forEach(button => {
                button.addEventListener("click", function() {
                    let code = this.getAttribute("data-code");

                    // عرض رسالة تحميل
                    document.getElementById('loading').style.display = 'block';

                    fetch("{{ route('charging.recharge.process') }}", {
                        method: "POST",
                        body: JSON.stringify({
                            code: code
                        }),
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": document.querySelector(
                                'meta[name="csrf-token"]').getAttribute('content')
                        }
                    }).then(response => {
                        return response.json().then(data => ({
                            data,
                            status: response.status
                        }));
                    }).then(result => {
                        // إخفاء رسالة التحميل
                        document.getElementById('loading').style.display = 'none';

                        if (result.status === 200) {
                            if (result.data.success) {
                                toastr.success(result.data.message);

                                // عرض رسالة الهدايا
                                if (result.data.gift_message) {
                                    toastr.info(result.data.gift_message);
                                }

                                setTimeout(() => {
                                    location.reload();
                                }, 2000);
                            } else {
                                handleErrors(result.data);
                            }
                        } else {
                            toastr.error("An error occurred, please try again.");
                        }
                    }).catch(error => {
                        toastr.error("Server error, please try again later.");
                        document.getElementById('loading').style.display = 'none';
                    });

                    function handleErrors(data) {
                        switch (data.type) {
                            case "validation":
                                Object.values(data.errors).forEach(error => toastr.warning(error));
                                break;
                            case "expired":
                                toastr.warning(data.message);
                                break;
                            case "invalid_or_used":
                                toastr.warning(data.message);
                                break;
                            case "invalid_code":
                                toastr.warning(data.message);
                                break;
                            default:
                                toastr.warning(data.message || "Unknown error occurred.");
                        }
                    }
                });
            });


        });
    </script>
@endsection