@extends('layouts.shop')
@section('title', 'Kasse')
@push('scripts')
@if(config('services.stripe.key'))
<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('{{ config('services.stripe.key') }}');
const elements = stripe.elements();
const cardElement = elements.create('card', { style: { base: { fontSize: '16px' } } });

document.addEventListener('DOMContentLoaded', () => {
    cardElement.mount('#stripe-card-element');
    cardElement.on('change', ({ error }) => {
        const el = document.getElementById('stripe-errors');
        if (error) { el.textContent = error.message; el.classList.remove('hidden'); }
        else { el.classList.add('hidden'); }
    });

    const form = document.querySelector('form[action="{{ route('checkout.address') }}"]');
    form.addEventListener('submit', async (e) => {
        const method = document.querySelector('input[name="payment_method"]:checked')?.value;
        if (method !== 'stripe') return;
        e.preventDefault();

        const res = await fetch('{{ route('stripe.intent') }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
        });
        const { client_secret } = await res.json();

        const { error, paymentIntent } = await stripe.confirmCardPayment(client_secret, {
            payment_method: { card: cardElement }
        });

        if (error) {
            document.getElementById('stripe-errors').textContent = error.message;
            document.getElementById('stripe-errors').classList.remove('hidden');
            return;
        }

        // Adresse speichern und Stripe-Erfolg-URL aufrufen
        const formData = new FormData(form);
        formData.set('payment_method', 'stripe');
        await fetch('{{ route('checkout.address') }}', { method: 'POST', body: formData });
        window.location.href = '{{ route('stripe.success') }}?payment_intent=' + paymentIntent.id;
    });
});
</script>
@endif
@endpush
@section('content')
<h1 class="text-2xl font-bold mb-6">Kasse</h1>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="md:col-span-2">
        <form method="POST" action="{{ route('checkout.address') }}">
            @csrf

            {{-- Gastemail --}}
            @guest
            <div class="bg-white border rounded-lg p-6 mb-6">
                <h2 class="font-semibold mb-4">Kontakt</h2>
                <div>
                    <label class="block text-sm font-medium mb-1">E-Mail-Adresse *</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="w-full border rounded px-3 py-2" required>
                </div>
                <p class="text-sm text-gray-500 mt-3">
                    Bereits Kunde? <a href="{{ route('login') }}" class="text-blue-600 hover:underline">Anmelden</a>
                </p>
            </div>
            @endguest

            {{-- Rechnungsadresse --}}
            @php $defaultAddr = $userAddresses->firstWhere('is_default', true) ?? $userAddresses->first(); @endphp
            <div class="bg-white border rounded-lg p-6 mb-6" x-data="addressForm({{ $userAddresses->toJson() }})">
                <h2 class="font-semibold mb-4">Rechnungsadresse</h2>

                {{-- Gespeicherte Adressen --}}
                @if($userAddresses->count())
                <div class="mb-5">
                    <p class="text-xs text-gray-500 mb-2">Gespeicherte Adressen:</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        @foreach($userAddresses as $addr)
                        <button type="button"
                            @click="fill({{ $addr->id }})"
                            :class="selected === {{ $addr->id }} ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500' : 'border-gray-200 hover:border-blue-300'"
                            class="text-left p-3 border rounded-lg text-sm transition">
                            <p class="font-medium">{{ $addr->first_name }} {{ $addr->last_name }}</p>
                            @if($addr->company)<p class="text-gray-400 text-xs">{{ $addr->company }}</p>@endif
                            <p class="text-gray-500 text-xs mt-0.5">{{ $addr->street }}, {{ $addr->zip }} {{ $addr->city }}</p>
                        </button>
                        @endforeach
                        <button type="button"
                            @click="clear()"
                            :class="selected === null ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500' : 'border-gray-200 hover:border-gray-300'"
                            class="text-left p-3 border rounded-lg text-sm transition text-gray-500">
                            + Neue Adresse eingeben
                        </button>
                    </div>
                </div>
                @endif

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Vorname *</label>
                        <input type="text" name="billing[first_name]" x-model="form.first_name" value="{{ old('billing.first_name', $defaultAddr?->first_name) }}" class="w-full border rounded px-3 py-2 text-sm" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Nachname *</label>
                        <input type="text" name="billing[last_name]" x-model="form.last_name" value="{{ old('billing.last_name', $defaultAddr?->last_name) }}" class="w-full border rounded px-3 py-2 text-sm" required>
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium mb-1">Firma (optional)</label>
                        <input type="text" name="billing[company]" x-model="form.company" value="{{ old('billing.company', $defaultAddr?->company) }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium mb-1">Straße und Hausnummer *</label>
                        <input type="text" name="billing[street]" x-model="form.street" value="{{ old('billing.street', $defaultAddr?->street) }}" class="w-full border rounded px-3 py-2 text-sm" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">PLZ *</label>
                        <input type="text" name="billing[zip]" x-model="form.zip" value="{{ old('billing.zip', $defaultAddr?->zip) }}" class="w-full border rounded px-3 py-2 text-sm" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Stadt *</label>
                        <input type="text" name="billing[city]" x-model="form.city" value="{{ old('billing.city', $defaultAddr?->city) }}" class="w-full border rounded px-3 py-2 text-sm" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Land *</label>
                        <select name="billing[country]" x-model="form.country" class="w-full border rounded px-3 py-2 text-sm">
                            <option value="DE">Deutschland</option>
                            <option value="AT">Österreich</option>
                            <option value="CH">Schweiz</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Telefon</label>
                        <input type="tel" name="billing[phone]" x-model="form.phone" value="{{ old('billing.phone', $defaultAddr?->phone) }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                </div>
            </div>

            {{-- Lieferadresse --}}
            <div class="bg-white border rounded-lg p-6 mb-6" x-data="{ same: true }">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="font-semibold">Lieferadresse</h2>
                    <label class="flex items-center gap-2 text-sm cursor-pointer">
                        <input type="checkbox" name="shipping_same" value="1" x-model="same" checked>
                        Gleich wie Rechnungsadresse
                    </label>
                </div>
                <div x-show="!same" class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-1">Vorname *</label>
                        <input type="text" name="shipping[first_name]" value="{{ old('shipping.first_name') }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Nachname *</label>
                        <input type="text" name="shipping[last_name]" value="{{ old('shipping.last_name') }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium mb-1">Straße und Hausnummer *</label>
                        <input type="text" name="shipping[street]" value="{{ old('shipping.street') }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">PLZ *</label>
                        <input type="text" name="shipping[zip]" value="{{ old('shipping.zip') }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Stadt *</label>
                        <input type="text" name="shipping[city]" value="{{ old('shipping.city') }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1">Land *</label>
                        <select name="shipping[country]" class="w-full border rounded px-3 py-2 text-sm">
                            <option value="DE" selected>Deutschland</option>
                            <option value="AT">Österreich</option>
                            <option value="CH">Schweiz</option>
                        </select>
                    </div>
                </div>
            </div>

            {{-- Zahlungsart --}}
            <div class="bg-white border rounded-lg p-6 mb-6" x-data="{ method: 'prepayment' }">
                <h2 class="font-semibold mb-4">Zahlungsart</h2>
                <div class="space-y-3">
                    <label class="flex items-start gap-3 p-3 border rounded-lg cursor-pointer hover:bg-gray-50"
                           :class="method==='prepayment' ? 'border-blue-500 bg-blue-50' : ''">
                        <input type="radio" name="payment_method" value="prepayment" class="mt-1"
                               x-model="method" @change="method='prepayment'">
                        <div>
                            <div class="font-medium">Vorkasse (Überweisung)</div>
                            <div class="text-sm text-gray-500">Sie überweisen den Betrag auf unser Bankkonto. Wir versenden nach Zahlungseingang.</div>
                        </div>
                    </label>
                    <label class="flex items-start gap-3 p-3 border rounded-lg cursor-pointer hover:bg-gray-50"
                           :class="method==='invoice' ? 'border-blue-500 bg-blue-50' : ''">
                        <input type="radio" name="payment_method" value="invoice" class="mt-1"
                               x-model="method" @change="method='invoice'">
                        <div>
                            <div class="font-medium">Kauf auf Rechnung</div>
                            <div class="text-sm text-gray-500">Sie erhalten die Rechnung per E-Mail. Zahlungsziel: {{ \App\Models\Setting::get('invoice_payment_days', 14) }} Tage.</div>
                        </div>
                    </label>
                    @if(config('paypal.live.client_id') || config('paypal.sandbox.client_id'))
                    <label class="flex items-start gap-3 p-3 border rounded-lg cursor-pointer hover:bg-gray-50"
                           :class="method==='paypal' ? 'border-blue-500 bg-blue-50' : ''">
                        <input type="radio" name="payment_method" value="paypal" class="mt-1"
                               x-model="method" @change="method='paypal'">
                        <div>
                            <div class="font-medium flex items-center gap-2">
                                <svg viewBox="0 0 24 24" class="h-5" fill="none"><rect width="24" height="24" rx="4" fill="#003087"/><path d="M8.5 17H6l2-10h4c1.7 0 2.8.9 2.5 2.5-.4 2-2 3-3.8 3H9.2L8.5 17z" fill="#fff"/><path d="M10.5 11.5H12c1.3 0 2.2-.6 2.5-2 .2-1-.3-1.5-1.3-1.5h-1.5l-1.2 3.5z" fill="#009cde"/></svg>
                                PayPal
                            </div>
                            <div class="text-sm text-gray-500">Sofort und sicher mit PayPal bezahlen.</div>
                        </div>
                    </label>
                    @endif
                    @if(config('services.stripe.key'))
                    <label class="flex items-start gap-3 p-3 border rounded-lg cursor-pointer hover:bg-gray-50"
                           :class="method==='stripe' ? 'border-blue-500 bg-blue-50' : ''">
                        <input type="radio" name="payment_method" value="stripe" class="mt-1"
                               x-model="method" @change="method='stripe'">
                        <div>
                            <div class="font-medium">Kreditkarte (Stripe)</div>
                            <div class="text-sm text-gray-500">Visa, Mastercard, American Express — verschlüsselt über Stripe.</div>
                        </div>
                    </label>
                    @if(config('services.stripe.key'))
                    <div x-show="method==='stripe'" class="mt-3 p-3 border rounded-lg bg-gray-50">
                        <div id="stripe-card-element" class="p-3 bg-white border rounded"></div>
                        <p id="stripe-errors" class="text-red-500 text-sm mt-2 hidden"></p>
                    </div>
                    @endif
                    @endif
                </div>
            </div>

            {{-- Rechtliches --}}
            <div class="bg-white border rounded-lg p-6 mb-6 space-y-3">
                <label class="flex items-start gap-3 cursor-pointer">
                    <input type="checkbox" name="agb" value="1" required class="mt-1">
                    <span class="text-sm">Ich habe die <a href="{{ route('page', 'agb') }}" class="text-blue-600 hover:underline" target="_blank">AGB</a> gelesen und akzeptiere sie. Ich habe die <a href="{{ route('page', 'widerrufsbelehrung') }}" class="text-blue-600 hover:underline" target="_blank">Widerrufsbelehrung</a> zur Kenntnis genommen. *</span>
                </label>
                <label class="flex items-start gap-3 cursor-pointer">
                    <input type="checkbox" name="privacy" value="1" required class="mt-1">
                    <span class="text-sm">Ich habe die <a href="{{ route('page', 'datenschutz') }}" class="text-blue-600 hover:underline" target="_blank">Datenschutzerklärung</a> gelesen. *</span>
                </label>
            </div>

            @if($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                <ul class="text-sm text-red-700 space-y-1">
                    @foreach($errors->all() as $error)<li>• {{ $error }}</li>@endforeach
                </ul>
            </div>
            @endif

            <button type="submit" x-show="method!=='paypal'"
                    class="w-full btn-primary py-3 rounded-lg font-semibold text-lg">
                <span x-text="method==='stripe' ? 'Jetzt bezahlen (Kreditkarte)' : 'Bestellung prüfen →'"></span>
            </button>
            {{-- PayPal: Adresse speichern, dann zu PayPal weiterleiten --}}
            <div x-show="method==='paypal'" class="space-y-2">
                <input type="hidden" name="payment_method" value="paypal" x-bind:value="method">
                <button type="submit" formaction="{{ route('checkout.address') }}"
                        onclick="this.form.action='{{ route('checkout.address') }}'"
                        class="w-full bg-yellow-400 hover:bg-yellow-500 text-gray-900 py-3 rounded-lg font-semibold text-lg flex items-center justify-center gap-2">
                    <svg viewBox="0 0 24 24" class="h-6 w-6"><rect width="24" height="24" rx="4" fill="#003087"/><path d="M8.5 17H6l2-10h4c1.7 0 2.8.9 2.5 2.5-.4 2-2 3-3.8 3H9.2L8.5 17z" fill="#fff"/></svg>
                    Mit PayPal bezahlen
                </button>
            </div>
        </form>
    </div>

    {{-- Zusammenfassung --}}
    <div>
        <div class="bg-white border rounded-lg p-6 sticky top-4">
            <h2 class="font-semibold mb-4">Zusammenfassung</h2>
            <div class="space-y-2 text-sm mb-4 border-b pb-4">
                <div class="flex justify-between"><span>Zwischensumme</span><span>{{ number_format($subtotal, 2, ',', '.') }} €</span></div>
                @if($discount > 0)
                <div class="flex justify-between text-green-600">
                    <span>Gutschein ({{ $couponCode }})</span>
                    <span>- {{ number_format($discount, 2, ',', '.') }} €</span>
                </div>
                @endif
                <div class="flex justify-between"><span>Versand</span><span id="shipping-display">{{ $shippingCost == 0 ? 'Kostenlos' : number_format($shippingCost, 2, ',', '.') . ' €' }}</span></div>
            </div>
            <div class="flex justify-between font-bold text-lg">
                <span>Gesamt</span><span id="total-display">{{ number_format($total, 2, ',', '.') }} €</span>
            </div>
            <p class="text-xs text-gray-400 mt-2">inkl. MwSt.</p>

            {{-- Gutscheincode --}}
            <div class="mt-4 border-t pt-4">
                @if(session('coupon_error'))
                    <p class="text-red-600 text-xs mb-2">{{ session('coupon_error') }}</p>
                @endif
                @if(session('coupon_success'))
                    <p class="text-green-600 text-xs mb-2">{{ session('coupon_success') }}</p>
                @endif
                @if($couponCode)
                    <div class="flex items-center justify-between text-sm mb-2">
                        <span class="font-mono bg-green-50 text-green-700 px-2 py-0.5 rounded">{{ $couponCode }}</span>
                        <form method="POST" action="{{ route('checkout.coupon.remove') }}">@csrf
                            <button class="text-red-500 text-xs hover:underline">Entfernen</button>
                        </form>
                    </div>
                @else
                    <form method="POST" action="{{ route('checkout.coupon.apply') }}" class="flex gap-2">
                        @csrf
                        <input type="text" name="coupon_code" placeholder="Gutscheincode"
                               class="flex-1 border rounded px-3 py-1.5 text-sm uppercase" style="text-transform:uppercase">
                        <button class="bg-gray-700 text-white px-3 py-1.5 rounded text-sm hover:bg-gray-800">OK</button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function addressForm(addresses) {
    @php $defaultAddr = $userAddresses->firstWhere('is_default', true) ?? $userAddresses->first(); @endphp
    const defaultId = {{ $defaultAddr?->id ?? 'null' }};
    return {
        addresses,
        selected: defaultId,
        form: {
            first_name: '{{ old('billing.first_name', $defaultAddr?->first_name) }}',
            last_name:  '{{ old('billing.last_name',  $defaultAddr?->last_name) }}',
            company:    '{{ old('billing.company',    $defaultAddr?->company) }}',
            street:     '{{ old('billing.street',     $defaultAddr?->street) }}',
            zip:        '{{ old('billing.zip',        $defaultAddr?->zip) }}',
            city:       '{{ old('billing.city',       $defaultAddr?->city) }}',
            country:    '{{ old('billing.country',    $defaultAddr?->country ?? 'DE') }}',
            phone:      '{{ old('billing.phone',      $defaultAddr?->phone) }}',
        },
        fill(id) {
            const addr = this.addresses.find(a => a.id === id);
            if (!addr) return;
            this.selected = id;
            this.form.first_name = addr.first_name ?? '';
            this.form.last_name  = addr.last_name  ?? '';
            this.form.company    = addr.company     ?? '';
            this.form.street     = addr.street      ?? '';
            this.form.zip        = addr.zip         ?? '';
            this.form.city       = addr.city        ?? '';
            this.form.country    = addr.country     ?? 'DE';
            this.form.phone      = addr.phone       ?? '';
        },
        clear() {
            this.selected = null;
            Object.keys(this.form).forEach(k => this.form[k] = k === 'country' ? 'DE' : '');
        }
    }
}
</script>
@endpush