@extends('layouts.app')
@section('title','Pay for Your Booking — Rukay\'s')
@section('content')
<style>
.pay-hero { background:linear-gradient(135deg,#2C1810,#8B3252); color:#fff; padding:3rem 0; text-align:center; }
.pay-hero h1 { font-size:2rem; margin-bottom:.4rem; }
.pay-wrap { max-width:720px; margin:3rem auto; padding:0 1rem 4rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:640px){.pay-wrap{grid-template-columns:1fr;}}
.pay-card { background:#fff; border-radius:.75rem; border:1px solid #E8D5C4; overflow:hidden; }
.pay-card-header { background:#fdf6f0; padding:1rem 1.5rem; border-bottom:1px solid #E8D5C4; }
.pay-card-header h3 { font-size:1.05rem; color:#8B3252; margin:0; }
.detail-row { display:flex; justify-content:space-between; padding:.6rem 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; }
.option-card { border:2px solid #E8D5C4; border-radius:.75rem; padding:1.25rem; cursor:pointer; transition:all .2s; margin-bottom:.75rem; }
.option-card:hover { border-color:#8B3252; background:#fdf0f5; }
.option-card.selected { border-color:#8B3252; background:#fdf0f5; }
.option-card input[type=radio] { display:none; }
.option-label { font-weight:700; font-size:1.05rem; color:#2C1810; }
.option-amount { font-size:1.6rem; font-weight:800; color:#8B3252; margin:.2rem 0; }
.option-desc { font-size:.8rem; color:#7A6058; }
.pay-methods { display:flex; gap:.75rem; margin:1rem 0; }
.method-btn { flex:1; border:2px solid #E8D5C4; border-radius:.5rem; padding:.75rem; text-align:center; cursor:pointer; transition:all .2s; font-size:.875rem; font-weight:500; }
.method-btn:hover, .method-btn.selected { border-color:#8B3252; background:#fdf0f5; color:#8B3252; }
.pay-btn { width:100%; padding:1rem; background:#8B3252; color:#fff; border:none; border-radius:.5rem; font-size:1rem; font-weight:700; cursor:pointer; transition:background .2s; margin-top:1rem; font-family:'Inter',sans-serif; }
.pay-btn:hover { background:#6B2340; }
.pay-btn:disabled { background:#C9B5A8; cursor:not-allowed; }
.secure-note { text-align:center; font-size:.78rem; color:#7A6058; margin-top:.75rem; }
.badge-status { display:inline-block; padding:.2rem .65rem; border-radius:9999px; font-size:.75rem; font-weight:600; }
.badge-pending { background:#fef3c7; color:#92400e; }
</style>

<div class="pay-hero">
    <div class="container">
        <h1>Complete Your Payment</h1>
        <p>Secure your appointment at Rukay's Hairdo & Beauty</p>
    </div>
</div>

<div class="pay-wrap">
    {{-- Booking Summary --}}
    <div>
        <div class="pay-card" style="margin-bottom:1rem;">
            <div class="pay-card-header"><h3>Booking Summary</h3></div>
            <div class="detail-row"><span class="lbl">Ref</span><span class="val" style="font-family:monospace;color:#8B3252;">{{ $booking->reference_code }}</span></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">Client</span><span class="val">{{ $booking->client_name }}</span></div>
            @if($booking->discount_amount > 0)
            <div class="detail-row"><span class="lbl">Discount</span><span class="val" style="color:#059669;">−₵{{ number_format($booking->discount_amount,2) }}</span></div>
            @endif
            <div class="detail-row" style="background:#fdf6f0;">
                <span class="lbl" style="font-weight:700;">Total Due</span>
                <span class="val" style="color:#8B3252;font-size:1.1rem;">₵{{ number_format($booking->total_amount,2) }}</span>
            </div>
        </div>

        @if(session('error'))
        <div style="background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:.5rem;padding:.9rem 1.1rem;font-size:.9rem;">
            {{ session('error') }}
        </div>
        @endif
    </div>

    {{-- Payment Options --}}
    <div>
        <form method="POST" action="{{ route('booking.payment.initiate', $booking->reference_code) }}" id="pay-form">
            @csrf
            <input type="hidden" name="payment_option" id="pay-option-inp" value="full">

            <h3 style="font-size:1rem;font-weight:600;margin-bottom:.85rem;color:#2C1810;">Choose Payment Amount</h3>

            {{-- Full Payment --}}
            <label class="option-card selected" id="opt-full" onclick="selectOption('full')">
                <input type="radio" name="_opt" value="full" checked>
                <div class="option-label">Pay in Full</div>
                <div class="option-amount">₵{{ number_format($booking->total_amount,2) }}</div>
                <div class="option-desc">Complete payment for the entire service — booking confirmed instantly.</div>
            </label>

            {{-- Deposit (only if required & > 0) --}}
            @if($booking->deposit_amount > 0)
            <label class="option-card" id="opt-deposit" onclick="selectOption('deposit')">
                <input type="radio" name="_opt" value="deposit">
                <div class="option-label">Pay Deposit Only</div>
                <div class="option-amount">₵{{ number_format($booking->deposit_amount,2) }}</div>
                <div class="option-desc">Secures your slot. Remaining ₵{{ number_format($booking->total_amount - $booking->deposit_amount,2) }} due on the day.</div>
            </label>
            @endif

            <div style="border-top:1px solid #E8D5C4;padding-top:1rem;margin-top:1rem;">
                <div style="font-size:.875rem;font-weight:600;margin-bottom:.6rem;color:#2C1810;">Payment Method</div>
                <div style="background:#f0f7ff;border:1px solid #bfdbfe;border-radius:.5rem;padding:.8rem 1rem;font-size:.85rem;color:#1e40af;margin-bottom:.75rem;">
                    🔒 You'll be redirected to Paystack's secure checkout where you can pay by <strong>Card</strong> or <strong>Mobile Money</strong> (MTN, Vodafone, AirtelTigo).
                </div>
            </div>

            <button type="submit" class="pay-btn" id="pay-btn">
                🔒 Pay ₵{{ number_format($booking->total_amount,2) }} Now
            </button>
            <div class="secure-note">🔐 Secured by Paystack · SSL Encrypted · No card data stored</div>
        </form>

        <div style="text-align:center;margin-top:1rem;">
            <a href="{{ route('home') }}" style="font-size:.8rem;color:#7A6058;">Cancel and return home</a>
        </div>
    </div>
</div>

@push('scripts')
<script>
const fullAmt    = {{ $booking->total_amount }};
const depositAmt = {{ $booking->deposit_amount ?? 0 }};

function selectOption(opt) {
    document.getElementById('pay-option-inp').value = opt;
    document.getElementById('opt-full').classList.toggle('selected', opt === 'full');
    const depEl = document.getElementById('opt-deposit');
    if (depEl) depEl.classList.toggle('selected', opt === 'deposit');
    const amt = opt === 'deposit' ? depositAmt : fullAmt;
    document.getElementById('pay-btn').textContent = '🔒 Pay ₵' + amt.toFixed(2) + ' Now';
}
</script>
@endpush
@endsection