@extends('layout.temp')

@section('title', 'Pembayaran Berhasil - ' . ($shop_settings['shop_name'] ?? 'PrintPro'))

@section('styles')
<style>
    :root {
        --s-primary: #2563eb;
        --s-success: #10b981;
        --s-background: #f8fafc;
        --s-card-bg: #ffffff;
        --s-text-main: #0f172a;
        --s-text-muted: #64748b;
        --s-radius: 40px;
    }

    body {
        background-color: var(--s-background);
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .premium-success-scene {
        min-height: 100vh;
        padding: 100px 0;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.05), transparent 600px),
                    radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.05), transparent 600px);
    }

    .success-card-premium {
        background: white;
        border-radius: var(--s-radius);
        border: 1px solid rgba(0,0,0,0.04);
        box-shadow: 0 50px 100px -20px rgba(15, 23, 42, 0.1);
        overflow: hidden;
        position: relative;
    }

    .success-hero-section {
        padding: 80px 40px 60px;
        text-align: center;
        position: relative;
    }

    .success-lottie-mock {
        width: 140px;
        height: 140px;
        background: var(--s-success);
        border-radius: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 60px;
        color: white;
        margin: 0 auto 40px;
        box-shadow: 0 30px 60px -10px rgba(16, 185, 129, 0.3);
        transform: rotate(-5deg);
        animation: hero-pop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes hero-pop {
        0% { transform: scale(0) rotate(-45deg); opacity: 0; }
        100% { transform: scale(1) rotate(-5deg); opacity: 1; }
    }

    .success-main-title {
        font-size: clamp(2.5rem, 5vw, 3.8rem);
        font-weight: 950;
        color: var(--s-text-main);
        letter-spacing: -3px;
        line-height: 1;
        margin-bottom: 20px;
    }

    .success-order-id {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #f1f5f9;
        padding: 12px 24px;
        border-radius: 100px;
        font-weight: 800;
        color: var(--s-primary);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Summary Details */
    .summary-grid-v6 {
        background: #fdfdfd;
        border-top: 1px solid #f1f5f9;
        padding: 60px 50px;
    }

    .summary-title-v6 {
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--s-text-muted);
        display: block;
        margin-bottom: 30px;
    }

    .item-row-premium {
        display: flex;
        align-items: center;
        gap: 25px;
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px dashed #e2e8f0;
    }

    .item-row-premium:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

    .item-img-box {
        width: 80px;
        height: 80px;
        background: white;
        border-radius: 20px;
        padding: 10px;
        border: 1px solid #f1f5f9;
    }

    .item-img-box img { width: 100%; height: 100%; object-fit: contain; }

    .item-meta-v6 { flex: 1; }
    .item-name-v6 { font-weight: 800; color: var(--s-text-main); font-size: 1.1rem; block; margin-bottom: 4px; }
    .item-qty-v6 { font-size: 13px; color: var(--s-text-muted); font-weight: 600; }

    .item-price-v6 { font-weight: 900; color: var(--s-text-main); font-size: 1.1rem; }

    .grand-total-section {
        margin-top: 50px;
        padding-top: 50px;
        border-top: 2px solid white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .total-label-box span { display: block; }
    .total-status-v6 { font-size: 11px; font-weight: 950; color: var(--s-success); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 5px; }
    .paid-via-v6 { font-size: 14px; font-weight: 700; color: var(--s-text-main); }

    .total-amt-v6 { font-size: 3rem; font-weight: 950; color: var(--s-text-main); letter-spacing: -2px; }

    /* Action Buttons */
    .success-footer-actions {
        padding: 0 50px 60px;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 20px;
    }

    .btn-premium-v6 {
        height: 75px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        font-weight: 900;
        text-decoration: none;
        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        font-size: 16px;
    }

    .btn-track-v6 { background: var(--s-text-main); color: white; }
    .btn-track-v6:hover { background: var(--s-primary); transform: translateY(-8px); box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25); }

    .btn-home-v6 { background: #f1f5f9; color: var(--s-text-main); }
    .btn-home-v6:hover { background: #e2e8f0; }

    @media (max-width: 768px) {
        .success-hero-section { padding: 60px 25px; }
        .summary-grid-v6 { padding: 40px 25px; }
        .grand-total-section { flex-direction: column; gap: 20px; text-align: center; }
        .total-amt-v6 { font-size: 2.5rem; }
        .success-footer-actions { grid-template-columns: 1fr; padding: 0 25px 40px; }
    }
</style>
@endsection

@section('content')
<main class="premium-success-scene">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-10">
                <article class="success-card-premium animate__animated animate__fadeInUp">
                    <section class="success-hero-section">
                        <div class="success-lottie-mock">
                            <i class="lni lni-checkmark-circle"></i>
                        </div>
                        <h1 class="success-main-title">Pembayaran<br>Berhasil!</h1>
                        <p class="mb-4 text-muted mx-auto" style="max-width: 450px;">
                            Transaksi Anda telah kami verifikasi secara otomatis. Tim kami akan segera menyiapkan pesanan Anda.
                        </p>
                        <div class="success-order-id">
                            <i class="lni lni-tag"></i>
                            ID Pesanan: #ORD-{{ $order->id }}
                        </div>
                    </section>

                    <section class="summary-grid-v6">
                        <span class="summary-title-v6">Rincian Transaksi</span>
                        
                        <div class="item-list-v6">
                            @foreach($order->items as $item)
                            <div class="item-row-premium">
                                <div class="item-img-box">
                                    <img src="{{ asset('storage/' . $item->product->image) }}" alt="{{ $item->product->name }}">
                                </div>
                                <div class="item-meta-v6">
                                    <h3 class="item-name-v6 text-truncate" style="max-width: 320px;">{{ $item->product->name }}</h3>
                                    <span class="item-qty-v6">{{ $item->jumlah }} Unit &bull; {{ $item->product->category->name ?? 'Sparepart' }}</span>
                                </div>
                                <div class="item-price-v6 text-blue">
                                    Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <div class="grand-total-section">
                            <div class="total-label-box">
                                <span class="total-status-v6"><i class="lni lni-shield"></i> Terbayar Lunas</span>
                                <span class="paid-via-v6">{{ $order->payment->metode ?? 'Midtrans Automated' }}</span>
                            </div>
                            <div class="total-amt-v6">
                                Rp {{ number_format($order->total_harga, 0, ',', '.') }}
                            </div>
                        </div>
                    </section>

                    <nav class="success-footer-actions">
                        <a href="{{ route('orders.history') }}" class="btn-premium-v6 btn-track-v6">
                            LACAK PESANAN <i class="lni lni-arrow-right"></i>
                        </a>
                        <a href="{{ route('home') }}" class="btn-premium-v6 btn-home-v6">
                            LANJUT BELANJA
                        </a>
                    </nav>

                    <div class="text-center pb-5 opacity-25">
                        <small>Terima kasih telah mempercayakan perbaikan printer Anda kepada <strong>{{ $shop_settings['shop_name'] ?? 'PrintPro' }}</strong></small>
                    </div>
                </article>
            </div>
        </div>
    </div>
</main>

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const end = Date.now() + (4 * 1000);
        const colors = ['#2563eb', '#10b981', '#3b82f6'];

        (function frame() {
            confetti({
                particleCount: 3,
                angle: 60,
                spread: 55,
                origin: { x: 0, y: 0.6 },
                colors: colors
            });
            confetti({
                particleCount: 3,
                angle: 120,
                spread: 55,
                origin: { x: 1, y: 0.6 },
                colors: colors
            });

            if (Date.now() < end) {
                requestAnimationFrame(frame);
            }
        }());
    });
</script>
@endsection

