@extends('layouts.app')

@section('title', 'Renew Listing')
@section('page-title', 'Renew Listing')

@section('content')
@php
    $currencyCode = strtoupper($paypalCurrency);
    $createOrderUrl = route('products.renew.paypal.order', ['product' => $product->id]);
    $captureOrderUrl = route('products.renew.paypal.capture', ['product' => $product->id]);
@endphp

<style>
    .renew-page{max-width:940px;margin:38px auto;padding:0 16px}
    .renew-card{overflow:hidden;border:1px solid #e2e8f0;border-radius:30px;background:#fff;box-shadow:0 28px 75px rgba(15,23,42,.12)}
    .renew-hero{position:relative;overflow:hidden;padding:34px;background:linear-gradient(135deg,#0f172a,#312e81 58%,#4f46e5);color:#fff}
    .renew-hero:after{content:"";position:absolute;right:-65px;top:-95px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.09)}
    .expired-badge{display:inline-flex;padding:8px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;font-weight:900;letter-spacing:.08em}
    .renew-heading{position:relative;margin:18px 0 8px;font-size:clamp(28px,5vw,42px);font-weight:950;line-height:1.12}
    .renew-intro{position:relative;max-width:680px;margin:0;color:#e0e7ff;font-weight:600;line-height:1.65}
    .renew-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);gap:28px;padding:32px}
    .price-box{padding:24px;border:1px solid #e0e7ff;border-radius:22px;background:linear-gradient(145deg,#eef2ff,#f8fafc)}
    .price-label{font-size:12px;color:#64748b;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
    .price{margin:8px 0 2px;color:#4338ca;font-size:46px;font-weight:950;letter-spacing:-2px}
    .price span{font-size:15px;letter-spacing:0}
    .days{color:#64748b;font-weight:750}
    .benefits{display:grid;gap:12px;margin-top:24px}
    .benefit{display:flex;align-items:flex-start;gap:11px;color:#334155;font-weight:650;line-height:1.5}
    .check{display:grid;flex:0 0 28px;height:28px;place-items:center;border-radius:50%;background:#dcfce7;color:#166534;font-weight:950}
    .checkout{padding:24px;border:1px solid #e2e8f0;border-radius:22px;background:#fff}
    .checkout h2{margin:0 0 6px;font-size:20px;color:#0f172a;font-weight:950}
    .checkout-copy{margin:0 0 18px;color:#64748b;font-size:13px;line-height:1.55}
    .pay-label{margin:0 0 9px;color:#334155;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
    .divider{display:flex;align-items:center;gap:12px;margin:17px 0;color:#94a3b8;font-size:11px;font-weight:900;text-transform:uppercase}
    .divider:before,.divider:after{content:"";height:1px;flex:1;background:#e2e8f0}
    .pay-loading,.pay-message,.card-unavailable{padding:14px;border-radius:14px;font-size:13px;font-weight:750}
    .pay-loading{background:#f8fafc;color:#64748b;text-align:center}
    .pay-message{display:none;margin-bottom:14px}
    .pay-message.success{display:block;background:#dcfce7;color:#166534}
    .pay-message.error{display:block;background:#fee2e2;color:#991b1b}
    .card-unavailable{display:none;background:#f8fafc;color:#64748b;text-align:center}
    .secure{display:flex;justify-content:center;gap:7px;margin-top:16px;color:#64748b;font-size:12px;font-weight:700}
    .back{display:inline-flex;margin-top:20px;padding:12px 18px;border-radius:13px;background:#f1f5f9;color:#0f172a;text-decoration:none;font-weight:900}
    @media(max-width:780px){.renew-hero{padding:27px 23px}.renew-grid{grid-template-columns:1fr;padding:22px}.price{font-size:40px}}
</style>

<div class="renew-page">
    <div class="renew-card">
        <header class="renew-hero">
            <span class="expired-badge">● LISTING EXPIRED</span>
            <h1 class="renew-heading">Renew “{{ $product->title }}”</h1>
            <p class="renew-intro">
                Your listing received {{ number_format($product->views ?? 0) }} views.
                Renew it for another {{ $renewalDays }} days and continue reaching buyers.
            </p>
        </header>

        <div class="renew-grid">
            <section>
                <div class="price-box">
                    <div class="price-label">Renewal total</div>
                    <div class="price">
                        ${{ number_format((float) $renewalPrice, 2) }}
                        <span>{{ $currencyCode }}</span>
                    </div>
                    <div class="days">{{ $renewalDays }} additional listing days</div>
                </div>

                <div class="benefits">
                    <div class="benefit"><span class="check">✓</span><span>The listing activates only after PayPal confirms the payment.</span></div>
                    <div class="benefit"><span class="check">✓</span><span>Card information is entered securely on PayPal's checkout.</span></div>
                    <div class="benefit"><span class="check">✓</span><span>You do not need a PayPal account when guest card checkout is available.</span></div>
                </div>

                <a href="{{ route('dashboard') }}" class="back">← Back to dashboard</a>
            </section>

            <section class="checkout">
                <h2>Secure checkout</h2>
                <p class="checkout-copy">Choose PayPal or pay directly using an eligible debit or credit card.</p>

                <div id="payment-message" class="pay-message" role="alert"></div>
                <div id="payment-loading" class="pay-loading">Loading secure payment options…</div>

                <div id="payment-options" hidden>
                    <div class="pay-label">Pay with PayPal</div>
                    <div id="paypal-button-container"></div>

                    <div id="card-section">
                        <div class="divider">or</div>
                        <div class="pay-label">Pay with debit or credit card</div>
                        <div id="card-button-container"></div>
                        <div id="card-unavailable" class="card-unavailable">
                            Direct card checkout is not available for this device or account. You can still select a card after clicking PayPal.
                        </div>
                    </div>
                </div>

                <div class="secure">🔒 Payment protected by PayPal</div>
            </section>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://www.paypal.com/sdk/js?client-id={{ $paypalClientId }}&currency={{ $currencyCode }}&intent=capture&components=buttons&enable-funding=card"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    'use strict';

    const createUrl = @json($createOrderUrl);
    const captureUrl = @json($captureOrderUrl);
    const loading = document.getElementById('payment-loading');
    const options = document.getElementById('payment-options');
    const message = document.getElementById('payment-message');
    const cardUnavailable = document.getElementById('card-unavailable');

    function notify(text, type = 'error') {
        message.textContent = text;
        message.className = 'pay-message ' + type;
    }

    function getCsrfToken() {
        const token = document.querySelector('meta[name="csrf-token"]');
        if (!token) throw new Error('Security token is missing. Refresh the page.');
        return token.getAttribute('content');
    }

    async function postJson(url, body) {
        const response = await fetch(url, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': getCsrfToken()
            },
            body: JSON.stringify(body || {})
        });

        const result = await response.json().catch(function () { return {}; });
        if (!response.ok) throw new Error(result.message || 'The payment request could not be completed.');
        return result;
    }

    async function createOrder() {
        message.className = 'pay-message';
        const result = await postJson(createUrl);
        if (!result.id) throw new Error('PayPal did not return an order ID.');
        return result.id;
    }

    async function approveOrder(data) {
        notify('Confirming your payment…', 'success');
        const result = await postJson(captureUrl, { order_id: data.orderID });
        notify('Payment confirmed. Your listing was renewed.', 'success');
        window.location.assign(result.redirect_url);
    }

    function cancelled() {
        notify('Payment cancelled. Your listing was not renewed.');
    }

    function failed(error) {
        console.error('PayPal checkout error:', error);
        notify(error && error.message ? error.message : 'PayPal could not complete the payment.');
    }

    if (!window.paypal || !paypal.Buttons) {
        loading.style.display = 'none';
        notify('PayPal could not load. Disable any ad blocker and refresh the page.');
        return;
    }

    const paypalButtons = paypal.Buttons({
        fundingSource: paypal.FUNDING.PAYPAL,
        style: { layout: 'vertical', color: 'gold', shape: 'rect', label: 'paypal', height: 48 },
        createOrder: createOrder,
        onApprove: approveOrder,
        onCancel: cancelled,
        onError: failed
    });

    if (paypalButtons.isEligible()) {
        paypalButtons.render('#paypal-button-container');
    }

    const cardButtons = paypal.Buttons({
        fundingSource: paypal.FUNDING.CARD,
        style: { layout: 'vertical', color: 'black', shape: 'rect', label: 'pay', height: 48 },
        createOrder: createOrder,
        onApprove: approveOrder,
        onCancel: cancelled,
        onError: failed
    });

    if (cardButtons.isEligible()) {
        cardButtons.render('#card-button-container');
    } else {
        cardUnavailable.style.display = 'block';
    }

    loading.style.display = 'none';
    options.hidden = false;
});
</script>
@endpush