@extends('checkout.layout')
@section('content')
    <div class="checkout-container">
        <!-- Left Side - Plan Information -->
        <div class="plan-info">
            <h2 class="section-title">Plan Details</h2>

            @if (session()->has('alert'))
                <x-alert>
                    @slot('type', session('alert')['type'])
                    @slot('msg', session('alert')['msg'])
                </x-alert>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li class="text-danger">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if(isset($activeOrder))
                <!-- Upgrade notice if applicable -->
                <div class="upgrade-info">
                    <i class="fas fa-arrow-circle-up"></i> Upgrading from
                    <strong>{{$activeOrder->plan_data['title']}}</strong> to <strong>{{ $plan->title }}</strong>
                </div>
            @endif
            <div class="plan-details">
                <div class="plan-name">{{ $plan->title }}</div>
                @php
                    $original = floatval($plan->non_discounted_price);
                    $discounted = floatval($plan->price);

                    if ($original > 0 && $original > $discounted) {
                        $discountPercent = round((($original - $discounted) / $original) * 100);
                    } else {
                        // fallback to 0% off if invalid data
                        $discountPercent = 0;
                    }
                @endphp
                <div class="plan-price">
                    <span class="original-price"><del>{{$plan->symbol}}{{$plan->non_discounted_price}}</del></span>
                    <span class="discounted-price">{{$plan->symbol}}{{$plan->price}}</span>
                    @if($plan->days!="30")
                        <span class="plan-period">/ {{$plan->days}} days</span>
                    @else
                        <span class="plan-period">/ month</span>
                    @endif
                    <span class="discount-badge">{{$discountPercent}}% OFF</span>
                </div>
                <p>Get access to all premium features and unlimited usage.</p>
            </div>

            <h3>What's included:</h3>
            <button class="features-toggle" id="toggleFeatures">
                View Plan Features <i class="fas fa-chevron-down"></i>
            </button>
            <ul class="plan-features" id="planFeatures">
                @foreach($plan->data ?? [] as $key => $data)
                    <li>

                        @if($key == 'messages_limit' || $key == 'device_limit')
                            <span class="feature-value">
                            @if($data == "-1")
                                    ∞
                                @else
                                    {{ number_format($data) }}
                                @endif
                                </span>
                        @else
                            @if(is_bool($data))
                                @if($data)
                                    <span class="feature-check check-yes"></span>
                                @else
                                    <span class="feature-check check-no"></span>
                                @endif
                            @endif
                        @endif
                        <span class="feature-name">{{ __(strtoupper($key)) }}</span>
                    </li>
                @endforeach
            </ul>

        </div>

        <!-- Right Side - Payment Information -->
        <div class="payment-info">
            <h2 class="section-title">Payment Details</h2>

            <form id="checkoutForm" action="{{route('checkout.process.trial',['planId'=>$plan->id])}}" method="post">
                @csrf
                <!-- Error messages if any -->
                <div class="error-container" style="display: none;">
                    <ul>
                        <li>Error message would appear here</li>
                    </ul>
                </div>



                <!-- Success message for coupon -->
                <div class="success-message" id="couponSuccess" style="display: none;">
                    <i class="fas fa-check-circle"></i> Coupon applied successfully!
                </div>

                <!-- Error message for coupon -->
                <div class="error-container" id="couponError" style="display: none;">
                    <i class="fas fa-times-circle"></i> Invalid coupon code.
                </div>

                <!-- Price breakdown -->
                <div class="price-summary">
                    <div class="price-row">
                        <div class="price-label">Original Price</div>
                        <div class="price-value">{{$plan->symbol}}{{$plan->non_discounted_price}}</div>
                    </div>
                    <div class="price-row">
                        <div class="price-label">Plan Discount</div>
                        <div class="price-value discount-value">
                            -{{$plan->symbol}}{{($plan->non_discounted_price-$plan->price)}}</div>
                    </div>
                    <div class="price-row">
                        <div class="price-label">Subtotal</div>
                        <div class="price-value">{{$plan->symbol}}{{$plan->price}}</div>
                    </div>
                    <div class="price-row">
                        <div class="price-label text-danger">Trial Discount</div>
                        <div class="price-value text-danger">- {{$plan->symbol}}{{$plan->price}}</div>
                    </div>
                    <div class="price-row">
                        <div class="price-label text-primary">Total</div>
                        <div class="price-value text-primary">{{$plan->symbol}} 0</div>
                    </div>
                </div>


                <!-- Checkout button -->
                <button class="btn-primary" id="proceedPaymentBtn" type="submit">
                    <i class="fas fa-lock"></i> Start {{$plan->getTrialPeriodText()}} Trial
                </button>
            </form>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const checkoutForm = document.getElementById('checkoutForm');
            const proceedBtn = document.getElementById('proceedPaymentBtn');

            checkoutForm.addEventListener('submit', function (e) {
                // Disable the button to prevent multiple submits
                proceedBtn.disabled = true;

                // Show loading spinner
                proceedBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
            });





        });
    </script>
@endsection