@extends('companies.layouts.master')
@section('content')
    <div class="main-content app-content mt-0">
        <div class="side-app">

            <!-- CONTAINER -->
            <div class="main-container container-fluid">

                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <h1 class="page-title">{{ __('common.plans') }}</h1>
                    <div>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('common.tables') }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ __('common.plans') }}</li>
                        </ol>
                    </div>

                </div>

                <div class="row row-sm">
                    <!-- ROW-2 OPEN -->
                    <div class="row">
                        {{-- <div class="panel price panel-color">

                            <h2 class="text-2xl font-bold mb-4 text-center">{{ $checkout['planName'] }}</h2>
                            <p class="text-gray-600 mb-6 text-center">
                                Subscribe to <strong>{{ $checkout['planName'] }}</strong> and unlock all features.
                            </p>

                            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                                <ul class="space-y-2">
                                    <li><span class="font-semibold">Price:</span>
                                        ${{ number_format($checkout['amount'], 2) }}
                                    </li>
                                    <li><span class="font-semibold">Duration:</span> {{ $checkout['duration'] }} days</li>
                                    <li><span class="font-semibold">Tags Included:</span> {{ $checkout['tags'] }}</li>
                                </ul>
                            </div>

                            <!-- Payment Button -->
                            <div class="text-center">
                                <button id="payBtn"
                                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl shadow-md transition duration-200">
                                    Pay with Revolut
                                </button>
                            </div>
                        </div> --}}

                        <div class="card cart">
                            <div class="card-header">
                                <h3 class="card-title">Your Plan</h3>
                            </div>
                            <div class="card-body">
                                <ul class="list-group border br-7 mt-5">
                                    <li class="list-group-item border-0">
                                        Name
                                        <span class="h6 fw-bold mb-0 float-end">{{ $checkout['planName'] }}</span>
                                    </li>
                                    <li class="list-group-item border-0">
                                        Duration
                                        <span class="h6 fw-bold mb-0 float-end">{{ $checkout['duration'] }} days</span>
                                    </li>
                                    <li class="list-group-item border-0">
                                        Tags Included:
                                        <span class="h6 fw-bold mb-0 float-end">{{ $checkout['tags'] }}</span>
                                    </li>
                                    <li class="list-group-item border-0">
                                        Price to Pay
                                        <span
                                            class="h4 fw-bold mb-0 float-end">${{ number_format($checkout['amount'], 2) }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-footer text-center">
                                <input type="button" class="btn btn-primary" value="Place Order" id="payBtn">
                            </div>
                        </div>

                    </div>
                    <!-- ROW-2 CLOSED -->
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('payBtn').addEventListener('click', function() {
            let checkoutUrl = "{{ $checkout['checkoutUrl'] ?? '' }}"; // from controller
            let orderRef = "{{ $checkout['transaction_id'] ?? '' }}"; // from controller

            if (!checkoutUrl) {
                alert("Payment link not available. Try again.");
                return;
            }

            // Open Revolut checkout in popup
            let paymentWindow = window.open(checkoutUrl, "RevolutPayment", "width=600,height=800");

            // Poll every 3s
            let interval = setInterval(function() {
                $.ajax({
                    url: "{{ route('company.confirm-payment') }}?order_id=" + orderRef,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        console.log(data);
                        if (data.status === "success") {
                            clearInterval(interval);
                            paymentWindow.close();
                            window.location.href = "{{ route('company.thank_you') }}";
                        } else if (data.status === "failed") {
                            clearInterval(interval);
                            paymentWindow.close();
                            window.location.href = "{{ route('company.payment-error') }}";
                        }
                        // if pending → keep polling
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error:", error);
                    }
                });
            }, 3000);


        });
    </script>
@endsection