<x-app-layout>
    <div class="container mx-auto my-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-2xl font-semibold">Cancel booking</h2>
            <a href="{{ route('student.bookings.index') }}" class="text-blue-600 hover:underline">← Back to My bookings</a>
        </div>

        @if ($errors->any())
            <div class="mb-4 p-3 rounded bg-red-50 text-red-700 text-sm">
                <ul class="list-disc pl-5">
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="border rounded p-4 bg-white shadow-sm space-y-2">
            <p><span class="font-semibold">When:</span> {{ $weekdayName }} {{ $prettyDate }} at {{ $prettyTime }}</p>
            <p><span class="font-semibold">Refund:</span> {{ $refundPercent }}%</p>
            <p class="text-sm text-gray-600">
                Cancellations made 24 hours or more in advance receive a full (100%) refund.
                Cancellations within 24 hours receive a 50% refund.
            </p>
        </div>

        {{-- Confirm cancel (POST) --}}
        <form action="{{ route('student.bookings.cancel.store', ['booking' => $booking->id]) }}"
              method="POST"
              class="mt-6 border rounded p-4 bg-white shadow-sm flex items-center gap-3">
            @csrf
            <button type="submit" class="px-4 py-2 rounded bg-red-600 text-white hover:bg-red-700">
                Confirm cancellation
            </button>
            <a href="{{ route('student.bookings.index') }}" class="text-blue-600 hover:underline">
                Keep this booking
            </a>
        </form>

        @if ($minutesUntil < 24*60)
            <div class="mt-3 text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded p-3">
                Heads up: this session starts in less than 24 hours, so the refund will be 50%.
            </div>
        @endif
    </div>
</x-app-layout>