@extends('layouts.app')
@section('title','Payment Successful — Rukay\'s')
@section('content')
<style>
.success-wrap { max-width:560px; margin:4rem auto; padding:0 1rem 5rem; }
.success-card { background:#fff; border-radius:1rem; border:1px solid #E8D5C4; overflow:hidden; box-shadow:0 4px 24px rgba(139,50,82,.1); }
.success-header { background:linear-gradient(135deg,#059669,#34d399); color:#fff; padding:2.75rem; text-align:center; }
.success-header .icon { font-size:3.5rem; margin-bottom:.75rem; }
.success-header h1 { font-size:1.8rem; margin-bottom:.4rem; }
.success-header p { opacity:.9; font-size:.95rem; }
.ref-block { background:#f0fdf4; border:1px solid #6ee7b7; border-radius:.5rem; margin:1.5rem; padding:1rem 1.25rem; text-align:center; }
.ref-block .lbl { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:#059669; margin-bottom:.3rem; }
.ref-block .code { font-size:1.5rem; font-weight:800; color:#065f46; letter-spacing:.1em; font-family:'Playfair Display',serif; }
.detail-row { display:flex; justify-content:space-between; padding:.65rem 1.5rem; border-bottom:1px solid #f0e8e0; font-size:.9rem; }
.detail-row:last-child { border-bottom:none; }
.detail-row .lbl { color:#7A6058; }
.detail-row .val { font-weight:600; }
.success-footer { padding:1.5rem; border-top:1px solid #E8D5C4; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.whatsapp-strip { background:#25D366; color:#fff; padding:1rem 1.5rem; text-align:center; font-size:.9rem; }
.whatsapp-strip a { color:#fff; font-weight:700; text-decoration:underline; }
</style>
<div class="success-wrap">
    <div class="success-card">
        <div class="success-header">
            <div class="icon">✅</div>
            <h1>Payment Successful!</h1>
            @if($booking->payment_status === 'deposit_paid')
            <p>Your deposit has been received. Your appointment is confirmed!</p>
            @else
            <p>Full payment received. Your appointment is confirmed!</p>
            @endif
        </div>

        <div class="ref-block">
            <div class="lbl">Booking Reference</div>
            <div class="code">{{ $booking->reference_code }}</div>
        </div>

        <div class="detail-row"><span class="lbl">Service</span><span class="val">{{ $booking->service_name }}</span></div>
        <div class="detail-row"><span class="lbl">Date</span><span class="val">{{ \Carbon\Carbon::parse($booking->appointment_date)->format('D, M j, Y') }}</span></div>
        <div class="detail-row"><span class="lbl">Time</span><span class="val">{{ $booking->appointment_time }}</span></div>
        @if($booking->staff_name)
        <div class="detail-row"><span class="lbl">Stylist</span><span class="val">{{ $booking->staff_name }}</span></div>
        @endif
        <div class="detail-row"><span class="lbl">Status</span>
            <span class="val"><span style="background:#d1fae5;color:#065f46;padding:.2rem .6rem;border-radius:9999px;font-size:.78rem;font-weight:700;">Confirmed ✓</span></span>
        </div>
        @if($payment)
        <div class="detail-row"><span class="lbl">Amount Paid</span><span class="val" style="color:#059669;font-size:1.05rem;">₵{{ number_format($payment->amount,2) }}</span></div>
        @if($booking->payment_status === 'deposit_paid')
        <div class="detail-row" style="background:#fef3c7;">
            <span class="lbl">Balance Due on Day</span>
            <span class="val" style="color:#92400e;">₵{{ number_format($booking->total_amount - $booking->amount_paid,2) }}</span>
        </div>
        @endif
        @if($payment->channel && $payment->channel !== 'demo')
        <div class="detail-row"><span class="lbl">Payment Via</span><span class="val">{{ ucfirst(str_replace('_',' ',$payment->channel)) }}</span></div>
        @endif
        <div class="detail-row"><span class="lbl">Transaction Ref</span><span class="val" style="font-family:monospace;font-size:.8rem;">{{ $payment->transaction_ref }}</span></div>
        @endif

        @if(isset($settings['whatsapp_number']) && $settings['whatsapp_number'])
        <div class="whatsapp-strip">
            Questions? Chat with us on <a href="https://wa.me/{{ preg_replace('/[^0-9]/','',$settings['whatsapp_number']) }}?text=Hi!+I+just+booked+{{ urlencode($booking->reference_code) }}" target="_blank">WhatsApp</a>
        </div>
        @endif

        <div class="success-footer">
            <a href="{{ route('home') }}" class="btn btn-outline">← Back to Home</a>
            <a href="{{ route('booking.index') }}" class="btn btn-primary">Book Another</a>
            @auth
            <a href="{{ route('portal.bookings') }}" class="btn btn-outline">My Bookings</a>
            @endauth
        </div>
    </div>

    <div style="text-align:center;margin-top:1.25rem;color:#7A6058;font-size:.85rem;">
        A confirmation has been sent to <strong>{{ $booking->client_email }}</strong>
    </div>
</div>
@endsection