WitShop/resources/views/shop/widerruf.blade.php

@extends('layouts.shop')
@section('title', 'Widerrufsformular')
@section('content')
<div class="max-w-2xl mx-auto">

<div class="mb-6">
    <h1 class="text-2xl font-bold mb-1">Widerrufsformular</h1>
    <p class="text-gray-500 text-sm">gemäß § 356 BGB – Füllen Sie dieses Formular aus, um Ihr Widerrufsrecht innerhalb von 14 Tagen ab Warenerhalt auszuüben.</p>
</div>

@if(session('success'))
<div class="bg-green-100 text-green-800 px-4 py-4 rounded-lg mb-6 flex items-start gap-3">
    <svg class="w-5 h-5 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
    <div>
        <p class="font-semibold">Widerruf erfolgreich übermittelt</p>
        <p class="text-sm mt-0.5">{{ session('success') }}</p>
    </div>
</div>
@endif

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

<div class="bg-white border rounded-xl shadow-sm p-6">
    <form method="POST" action="{{ route('widerruf.submit') }}" class="space-y-6">
        @csrf

        {{-- Bestelldaten --}}
        <fieldset>
            <legend class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Bestellinformationen</legend>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium mb-1">Kundennummer</label>
                    <input type="text" name="customer_number" value="{{ old('customer_number') }}"
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="z.B. KD-00123">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Bestell- / Rechnungsnummer</label>
                    <input type="text" name="order_number" value="{{ old('order_number') }}"
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Bestelldatum</label>
                    <input type="date" name="order_date" value="{{ old('order_date') }}"
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Datum des Warenerhalts *</label>
                    <input type="date" name="date" value="{{ old('date') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-medium mb-1">Artikelbezeichnung *</label>
                    <input type="text" name="product" value="{{ old('product') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="Artikelname, Variante, Menge …">
                </div>
            </div>
        </fieldset>

        {{-- Kontaktdaten --}}
        <fieldset>
            <legend class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Ihre Kontaktdaten</legend>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium mb-1">Vorname *</label>
                    <input type="text" name="first_name" value="{{ old('first_name') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Nachname *</label>
                    <input type="text" name="last_name" value="{{ old('last_name') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-medium mb-1">E-Mail-Adresse *</label>
                    <input type="email" name="email" value="{{ old('email') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-medium mb-1">Straße und Hausnummer *</label>
                    <input type="text" name="street" value="{{ old('street') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">PLZ *</label>
                    <input type="text" name="zip" value="{{ old('zip') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Ort *</label>
                    <input type="text" name="city" value="{{ old('city') }}" required
                           class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
        </fieldset>

        {{-- Widerrufsgrund --}}
        <fieldset>
            <legend class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Widerrufsgrund</legend>
            <div class="space-y-3">
                <div>
                    <label class="block text-sm font-medium mb-1">Grund (optional)</label>
                    <select name="reason_category" class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">– Bitte wählen –</option>
                        <option value="falsch_bestellt" {{ old('reason_category') === 'falsch_bestellt' ? 'selected' : '' }}>Falsch bestellt</option>
                        <option value="nicht_gefallen" {{ old('reason_category') === 'nicht_gefallen' ? 'selected' : '' }}>Artikel gefällt mir nicht</option>
                        <option value="beschaedigt" {{ old('reason_category') === 'beschaedigt' ? 'selected' : '' }}>Ware beschädigt erhalten</option>
                        <option value="falsch_geliefert" {{ old('reason_category') === 'falsch_geliefert' ? 'selected' : '' }}>Falsche Ware geliefert</option>
                        <option value="zu_spaet" {{ old('reason_category') === 'zu_spaet' ? 'selected' : '' }}>Lieferung zu spät</option>
                        <option value="sonstiges" {{ old('reason_category') === 'sonstiges' ? 'selected' : '' }}>Sonstiges</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Anmerkungen (optional)</label>
                    <textarea name="reason" rows="3"
                              class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                              placeholder="Weitere Details zu Ihrem Widerruf …">{{ old('reason') }}</textarea>
                </div>
            </div>
        </fieldset>

        {{-- Erstattungsart --}}
        <fieldset>
            <legend class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Erstattung</legend>
            <div class="space-y-2 text-sm">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="refund_method" value="original" {{ old('refund_method', 'original') === 'original' ? 'checked' : '' }} class="accent-blue-600">
                    Ursprüngliche Zahlungsart
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="refund_method" value="bank" {{ old('refund_method') === 'bank' ? 'checked' : '' }} class="accent-blue-600">
                    Banküberweisung
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="refund_method" value="credit" {{ old('refund_method') === 'credit' ? 'checked' : '' }} class="accent-blue-600">
                    Gutschrift im Shop
                </label>
            </div>
        </fieldset>

        {{-- Pflicht-Checkboxen --}}
        <fieldset class="border-t pt-4 space-y-3">
            <label class="flex items-start gap-3 text-sm cursor-pointer">
                <input type="checkbox" name="privacy_accepted" value="1" required
                       class="mt-0.5 accent-blue-600">
                <span>Ich habe die <a href="{{ route('page', 'datenschutz') }}" class="text-blue-600 underline" target="_blank">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zur Bearbeitung des Widerrufs zu. *</span>
            </label>
            <label class="flex items-start gap-3 text-sm cursor-pointer">
                <input type="checkbox" name="accuracy_confirmed" value="1" required
                       class="mt-0.5 accent-blue-600">
                <span>Ich bestätige, dass die angegebenen Informationen korrekt und vollständig sind. *</span>
            </label>
        </fieldset>

        <button type="submit"
                class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition text-sm">
            Widerruf verbindlich absenden
        </button>
    </form>
</div>

<div class="mt-6 text-sm text-gray-500 bg-gray-50 rounded-lg p-4 space-y-2">
    <p><strong>Hinweis:</strong> Die 14-tägige Widerrufsfrist beginnt ab dem Tag des Erhalts der Ware. Nach Absenden dieses Formulars erhalten Sie eine Bestätigungs-E-Mail.</p>
    <p>Bitte senden Sie die Ware zurück an:<br>
    <strong class="text-gray-700">{{ \App\Models\Setting::get('shop_owner') }}</strong><br>
    {!! nl2br(e(\App\Models\Setting::get('shop_address'))) !!}</p>
    <p>Alternativ können Sie den Widerruf auch per E-Mail an <a href="mailto:{{ \App\Models\Setting::get('shop_email') }}" class="text-blue-600 underline">{{ \App\Models\Setting::get('shop_email') }}</a> erklären.</p>
</div>

</div>
@endsection