@extends('layouts.app')

@section('content')
<div class="payment-success-container">
    <div class="success-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
        </svg>
    </div>
    
    <h2>Payment Successful!</h2>
    <p>Your WiFi access has been activated</p>
    
    <div class="payment-details">
        <div class="detail-item">
            <span>Transaction ID:</span>
            <span>{{ $payment->transaction_id }}</span>
        </div>
        <div class="detail-item">
            <span>Amount:</span>
            <span>KSh {{ number_format($payment->amount, 2) }}</span>
        </div>
        <div class="detail-item">
            <span>Valid Until:</span>
            <span>{{ $session->end_time->format('j M Y, H:i') }}</span>
        </div>
    </div>
    
    <a href="{{ route('session.active') }}" class="btn-primary">
        Start Browsing
    </a>
</div>
@endsection