@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>{{ $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',['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>

                <!-- Coupon code input -->
                <div class="coupon-form">
                    <input type="text" class="form-control" name="couponCode" id="couponCode" placeholder="Coupon Code" value="{{ old('couponCode') }}">
                    <button class="btn-coupon" id="applyCoupon" type="submit">Apply</button>

                    @error('couponCode')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </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">Coupon Discount</div>
                        <div class="price-value discount-value">-{{$plan->symbol}}0.00</div>
                    </div>
                    <div class="price-row">
                        <div class="price-label">Tax (<span id="tax-amount">0%</span>)</div>
                        <div class="price-value text-green">+<span id="taxFeeValue">{{$plan->symbol}}0.00</span></div>
                    </div>
                    <div class="price-row" id="gatewayFeeRow">
                        @if($siteDetails['site_tax_rate_type']==="fixed")
                            <div class="price-label">Gateway Fee (<span
                                    id="gateway-amount">{{$plan->symbol}} {{$siteDetails['site_tax_rate']}}</span>)
                            </div>
                        @else
                            <div class="price-label">Gateway Fee (<span id="gateway-amount">{{$siteDetails['site_tax_rate']}}%</span>)
                            </div>
                        @endif
                        <div class="price-value text-green">+<span id="gatewayFeeValue">{{$plan->symbol}}0.00</span>
                        </div>
                    </div>
                    <div class="price-row">
                        <div class="price-label text-primary">Total</div>
                        <div class="price-value text-primary">{{$plan->symbol}}{{$plan->price}}</div>
                    </div>
                </div>

                <!-- Payment gateway selection -->
                <h3>Select Payment Gateway</h3>
                <div class="gateway-selector">
                    <select class="form-select" name="gateway">
                        @foreach ($gateways as $key => $gateway)
                            <option value="{{ $gateway->id }}"
                                    data-fees="{{ $gateway->fees }}"
                                    data-feeType="{{ $gateway->fees_type }}"
                                {{ old('gateway_id') == $gateway->id ? 'selected' : '' }}>
                                {{ $gateway->name == "custom" ? ucfirst($gateway->config['title']) : ucfirst($gateway->name) }}
                            </option>

                        @endforeach
                    </select>
                    {{-- Show validation error --}}
                    @error('gateway_id')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Checkout button -->
                <button class="btn-primary" id="proceedPaymentBtn" type="submit">
                    <i class="fas fa-lock"></i> Proceed to Payment
                </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...';
            });




            const couponInput = document.getElementById('couponCode');
            const applyButton = document.getElementById('applyCoupon');
            const successMessage = document.getElementById('couponSuccess');
            const errorMessage = document.getElementById('couponError');
            const checkoutButton = document.querySelector('.btn-primary');

            // Price elements
            const couponDiscountEl = document.querySelector('.price-row:nth-child(4) .price-value');
            const taxEl = document.getElementById('taxFeeValue');
            const taxPercentEl = document.getElementById('tax-amount');
            const gatewayEl = document.querySelector('#gatewayFeeValue');
            const gatewayPercentEl = document.getElementById('gateway-amount');
            const subtotalEl = document.querySelector('.price-row:nth-child(3) .price-value');
            const totalEl = document.querySelector('.price-row:nth-child(7) .price-value');

            // Gateway selector
            const gatewaySelect = document.querySelector('.gateway-selector select');

            // Plan data
            const currentPlanId = '{{ $plan->id }}';
            const planSymbol = '{{ $plan->symbol }}';
            const basePlanPrice = parseFloat('{{ $plan->price }}');

            let couponApplied = false;

            function formatMoney(amount) {
                return `${planSymbol}${parseFloat(amount).toFixed(2)}`;
            }

            function updatePricing(pricing, initial = false) {
                subtotalEl.textContent = formatMoney(pricing.subtotal);
                if (!initial) {
                    couponDiscountEl.textContent = `-${formatMoney(pricing.discount)}`;
                }

                taxEl.textContent = formatMoney(pricing.tax.amount);
                if (pricing.tax.fee_type === "fixed") {
                    taxPercentEl.textContent = formatMoney(pricing.tax.fee);
                } else {
                    taxPercentEl.textContent = `${pricing.tax.fee}%`;
                }

                gatewayEl.textContent = formatMoney(pricing.gateway.amount);
                if (pricing.gateway.fees_type === "fixed") {
                    gatewayPercentEl.textContent = formatMoney(pricing.gateway.fees);
                } else {
                    gatewayPercentEl.textContent = `${pricing.gateway.fees}%`;
                }

                totalEl.textContent = formatMoney(pricing.total);
            }

            function fetchInitialPricing() {
                const currentGatewayId = gatewaySelect.value;

                fetch(`{{ route('payments.pricing.details') }}?plan_id=${currentPlanId}&gateway_id=${currentGatewayId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            updatePricing(data.pricing, true);
                        } else {
                            errorMessage.innerHTML = `<i class="fas fa-times-circle"></i> ${data.message}`;
                            console.error('Failed to fetch initial pricing');
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching initial pricing:', error);
                    });
            }

            function applyCoupon(couponCode) {
                if (!couponCode) {
                    errorMessage.innerHTML = '<i class="fas fa-times-circle"></i> Please enter a coupon code.';
                    errorMessage.style.display = 'block';
                    return;
                }

                applyButton.disabled = true;
                checkoutButton.disabled = true;
                applyButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Applying...';
                errorMessage.style.display = 'none';
                successMessage.style.display = 'none';

                const currentGatewayId = gatewaySelect.value;

                fetch(`{{ route('payments.validate.coupon') }}?code=${encodeURIComponent(couponCode)}&plan_id=${currentPlanId}&gateway_id=${currentGatewayId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            couponApplied = true;

                            updatePricing(data.pricing);

                            successMessage.innerHTML = `<i class="fas fa-check-circle"></i> Coupon "<strong>${data.coupon.code}</strong>" applied! New total: ${formatMoney(data.pricing.total)}.`;
                            if (data.coupon.is_recurring) {
                                successMessage.innerHTML += `<br><small>This discount will apply to future invoices too.</small>`;
                            }
                            successMessage.style.display = 'block';

                            couponInput.readOnly = true;
                            applyButton.disabled = false;
                            applyButton.textContent = 'Remove';
                            applyButton.style.backgroundColor = '#a30f0f';
                        } else {
                            errorMessage.innerHTML = `<i class="fas fa-times-circle"></i> ${data.message}`;
                            errorMessage.style.display = 'block';
                        }
                    })
                    .catch(error => {
                        console.error('Error validating coupon:', error);
                        errorMessage.innerHTML = '<i class="fas fa-times-circle"></i> Server error. Please try again.';
                        errorMessage.style.display = 'block';
                    })
                    .finally(() => {
                        applyButton.disabled = false;
                        checkoutButton.disabled = false;
                        applyButton.innerHTML = couponApplied ? 'Remove' : 'Apply';
                    });
            }

            applyButton.addEventListener('click', function () {
                if (couponApplied) {
                    // Remove coupon
                    couponApplied = false;
                    couponInput.readOnly = false;
                    applyButton.textContent = 'Apply';
                    applyButton.style.backgroundColor = '';
                    couponInput.value = '';
                    successMessage.style.display = 'none';
                    errorMessage.style.display = 'none';

                    fetchInitialPricing();
                } else {
                    applyCoupon(couponInput.value.trim());
                }
            });

            couponInput.addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    applyButton.click();
                }
            });

            gatewaySelect.addEventListener('change', function () {
                // On gateway change: if coupon applied, reapply coupon; else fetch base pricing
                if (couponApplied) {
                    applyCoupon(couponInput.value.trim());
                } else {
                    fetchInitialPricing();
                }
            });

            // Load initial pricing at page load
            fetchInitialPricing();
        });
    </script>
@endsection