@extends('layouts.app')

@section('content')
<script src="https://{{ config('services.square.environment') === 'production' ? 'web' : 'sandbox.web' }}.squarecdn.com/v1/square.js"></script>

<div class="max-w-lg mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4">Pay for {{ $plan['name'] }}</h2>

    @if ($errors->any())
        <div class="bg-red-100 p-4 rounded mb-4">
            @foreach ($errors->all() as $error)
                <p class="text-red-800">{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <p class="mb-2">Total: <strong>${{ number_format($plan['price'] / 100, 2) }}</strong></p>

    <div id="card-container" class="mb-4"></div>
    <button id="card-button" class="btn btn-primary">Pay ${{ number_format($plan['price'] / 100, 2) }}</button>

    <form id="payment-form" method="POST" action="{{ route('payment.charge') }}" style="display: none;">
        @csrf
        <input type="hidden" name="nonce" id="card-nonce">
        <input type="hidden" name="amount" value="{{ $plan['price'] }}">
    </form>
</div>

<script>
    document.addEventListener("DOMContentLoaded", async () => {
        const payments = Square.payments(
            "{{ config('services.square.application_id') }}",
            "{{ config('services.square.location_id') }}"
        );
        const card = await payments.card();
        await card.attach("#card-container");

        document.getElementById("card-button").addEventListener("click", async (event) => {
            event.preventDefault();
            const result = await card.tokenize();

            if (result.status === "OK") {
                document.getElementById("card-nonce").value = result.token;
                document.getElementById("payment-form").submit();
            } else {
                alert("Payment Error: " + (result.errors?.[0]?.message || "Unknown error"));
            }
        });
    });
</script>
@endsection