@extends('layouts.app')

@section('content')
    <article class="about active" data-page="customer-checkout">
        <header>
            <h2 class="h2 article-title">Checkout - {{ $product->name }}</h2>
        </header>

        <section class="about-text">
            <form method="POST" action="{{ route('checkout.process', ['product' => $product->slug]) }}">
                @csrf

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if($plans->count() === 1)
                    @php($plan = $plans->first())
                    <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                    @if($plan->seat_price_cents === 0)
                        <input type="hidden" name="seats" value="1">
                    @endif
                    <div class="mb-4">
                        <h4 class="mb-1">{{ $plan->name }}</h4>
                        @if($plan->description)
                            <p class="mb-2">{{ $plan->description }}</p>
                        @endif
                        <p class="mb-0">
                            ${{ number_format($plan->price_usd, 2) }}
                            {{ $plan->billing_period === 'one_time' ? 'one-time' : '/' . $plan->billing_period }}
                        </p>
                        @if($plan->seat_price_cents > 0)
                            <div class="mb-3">
                                <label for="seats" class="form-label">Seats</label>
                                <input type="number" id="seats" name="seats" class="form-control" min="1" value="1" required>
                                <small class="form-text text-muted">Base price plus ${{ number_format($plan->seat_price_cents / 100, 2) }} per additional seat.</small>
                            </div>
                            <div class="mb-3">
                                <strong>Total:</strong>
                                <span id="checkout-total">${{ number_format($plan->price_usd, 2) }}</span>
                            </div>
                        @endif
                    </div>
                @else
                    <div class="mb-3">
                        <label for="plan_id" class="form-label">Choose Plan</label>
                        <select name="plan_id" id="plan_id" class="form-select" required>
                            @foreach($plans as $plan)
                                <option
                                    value="{{ $plan->id }}"
                                    data-base-price="{{ $plan->price_cents }}"
                                    data-seat-price="{{ $plan->seat_price_cents }}"
                                >
                                    {{ $plan->name }} - ${{ number_format($plan->price_usd, 2) }} {{ $plan->billing_period === 'one_time' ? 'one-time' : '/' . $plan->billing_period }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @if($plans->pluck('seat_price_cents')->max() > 0)
                        <div class="mb-3" id="seat-pricing-panel" style="display: none;">
                            <label for="seats" class="form-label">Seats</label>
                            <input type="number" id="seats" name="seats" class="form-control" min="1" value="1">
                            <small class="form-text text-muted" id="seat-price-note"></small>
                            <div class="mb-3 mt-2" id="total-row" style="display:none;">
                                <strong>Total:</strong>
                                <span id="checkout-total"></span>
                            </div>
                        </div>
                    @endif

                    <div class="mb-4">
                        @foreach($plans as $plan)
                            <div class="mb-3">
                                <strong>{{ $plan->name }}</strong>
                                <div>
                                    ${{ number_format($plan->price_usd, 2) }} {{ $plan->billing_period === 'one_time' ? 'one-time' : '/' . $plan->billing_period }}
                                </div>
                                @if($plan->seat_price_cents > 0)
                                    <div class="small text-muted">
                                        Base price plus ${{ number_format($plan->seat_price_cents / 100, 2) }} per seat.
                                    </div>
                                @endif
                                @if($plan->description)
                                    <div>{{ $plan->description }}</div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="mb-3">
                    <label class="form-label">Payment Method</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="payment_method" id="payment_method_stripe" value="stripe" checked>
                        <label class="form-check-label" for="payment_method_stripe">Stripe (USD)</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="payment_method" id="payment_method_coinbase" value="coinbase">
                        <label class="form-check-label" for="payment_method_coinbase">Coinbase Commerce (BTC)</label>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary">Continue to Payment</button>
            </form>
        </section>
    </article>

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const seatsInput = document.getElementById('seats');
            const totalOutput = document.getElementById('checkout-total');
            const noteOutput = document.getElementById('seat-price-note');
            const seatPricingPanel = document.getElementById('seat-pricing-panel');
            const planSelect = document.getElementById('plan_id');

            const formatCurrency = (value) => '$' + value.toFixed(2);
            const updateTotal = (basePrice, seatPrice) => {
                const seats = Math.max(1, parseInt(seatsInput?.value, 10) || 1);
                const total = basePrice + (seatPrice * (seats - 1));
                if (totalOutput) {
                    totalOutput.textContent = formatCurrency(total);
                }
            };

            const updateSeatPanel = () => {
                if (!planSelect || !seatPricingPanel || !seatsInput || !noteOutput || !totalOutput) {
                    return;
                }

                const selectedOption = planSelect.selectedOptions[0];
                const basePrice = Number(selectedOption.dataset.basePrice || 0) / 100;
                const seatPrice = Number(selectedOption.dataset.seatPrice || 0) / 100;

                if (seatPrice > 0) {
                    seatPricingPanel.style.display = 'block';
                    noteOutput.textContent = 'Base price plus ' + formatCurrency(seatPrice) + ' per additional seat.';
                    updateTotal(basePrice, seatPrice);
                } else {
                    seatPricingPanel.style.display = 'none';
                    seatsInput.value = '1';
                }
            };

            if (planSelect) {
                planSelect.addEventListener('change', updateSeatPanel);
                updateSeatPanel();
            }

            if (seatsInput && totalOutput && !planSelect) {
                const basePrice = parseFloat('{{ $plans->count() === 1 ? number_format($plans->first()->price_usd, 2, '.', '') : 0 }}');
                const seatPrice = parseFloat('{{ $plans->count() === 1 ? number_format($plans->first()->seat_price_cents / 100, 2, '.', '') : 0 }}');
                seatsInput.addEventListener('input', () => updateTotal(basePrice, seatPrice));
                updateTotal(basePrice, seatPrice);
            }
        });
    </script>
@endsection