@extends('web.home.layout.master')

@section('content')
    <!-- Google Fonts & FontAwesome -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

    <div class="cod-success-container py-5">
        <div class="container-fluid" style="padding-left: 7.5%; padding-right: 7.5%;">
            
            @if(session('new_order'))
                <!-- Success Header & Info Sections -->
                <div class="row mb-5">
                    <!-- Success Header Card -->
                    <div class="col-12 col-lg-6 mb-4 mb-lg-0">
                        <div class="success-hero-card text-center h-100">
                            <div class="lottie-container">
                                <dotlottie-player src="https://lottie.host/3cbf8c52-78bf-493a-84cd-35ae1c3fe123/8JLSkbfagD.json"
                                    background="transparent" speed="1"
                                    style="width: 140px; height: 140px;"
                                    loop autoplay>
                                </dotlottie-player>
                            </div>

                            <h2 class="success-title">Order Placed Successfully!</h2>
                            <p class="success-message">
                                Thank you for shopping with American Plastic. Your order has been registered and is now being processed.
                            </p>

                            <!-- COD Instruction Alert Box -->
                            <div class="cod-instruction-box">
                                <div class="cod-icon-wrapper">
                                    <i class="fas fa-hand-holding-usd"></i>
                                </div>
                                <div class="cod-text-wrapper">
                                    <strong>Cash on Delivery (COD)</strong>
                                    <p>Please keep the exact amount of LKR ready for our delivery agent upon arrival.</p>
                                </div>
                            </div>

                            <div class="action-buttons mt-4">
                                <a href="{{ route('american.plastic.web') }}" class="btn btn-primary-premium">Continue Shopping</a>
                            </div>
                        </div>
                    </div>

                    <!-- Latest Order Breakdown Card -->
                    <div class="col-12 col-lg-6">
                        <div class="premium-card h-100">
                            <div class="card-header-premium">
                                <i class="fas fa-receipt"></i>
                                <h3>Latest Order Details</h3>
                            </div>
                            <div class="card-body-premium">
                                @php
                                    $latestOrder = $orders->first();
                                    $orderTotal = $latestOrder->total;
                                @endphp
                                
                                <div class="order-id-badge-container">
                                    <span class="label">Order Reference</span>
                                    <span class="order-id-badge">{{ $latestOrder->order_id }}</span>
                                </div>

                                <div class="details-list mt-4">
                                    <div class="detail-row">
                                        <span class="detail-label"><i class="far fa-calendar-alt me-2"></i> Date</span>
                                        <span class="detail-value">{{ $latestOrder->created_at->format('d M Y') }}</span>
                                    </div>
                                    <div class="detail-row">
                                        <span class="detail-label"><i class="fas fa-box-open me-2"></i> Quantity</span>
                                        <span class="detail-value">{{ $latestOrder->quantity }} item(s)</span>
                                    </div>
                                    <div class="detail-row">
                                        <span class="detail-label"><i class="fas fa-info-circle me-2"></i> Order Status</span>
                                        <span class="detail-value">
                                            <span class="status-badge status-processing">Processing</span>
                                        </span>
                                    </div>
                                    
                                    <div class="detail-row total-row-premium mt-4 pt-3">
                                        <span class="detail-label">Grand Total</span>
                                        <span class="detail-value total-price">LKR {{ number_format($orderTotal, 2) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Order History List Card -->
            <div class="row">
                <div class="col-12">
                    <div class="premium-card">
                        <div class="card-header-premium">
                            <i class="fas fa-history"></i>
                            <h3>Your Order History</h3>
                        </div>
                        <div class="card-body-premium">
                            @if($orders->count() > 0)
                                <div class="table-responsive">
                                    <table class="table-premium">
                                        <thead>
                                            <tr>
                                                <th>Order Reference</th>
                                                <th>Order Date</th>
                                                <th>Total Items</th>
                                                <th>Status</th>
                                                <th class="text-end">Order Total</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $grandTotal = 0;
                                            @endphp
                                            @foreach($orders as $order)
                                                @php
                                                    $orderTotal = $order->total;
                                                    $grandTotal += $orderTotal + $order->service_fee;
                                                @endphp
                                                <tr>
                                                    <td class="fw-bold">{{ $order->order_id }}</td>
                                                    <td>{{ $order->created_at->format('d M Y') }}</td>
                                                    <td>{{ $order->quantity }} item(s)</td>
                                                    <td>
                                                        <span class="status-badge status-processing">Processing</span>
                                                    </td>
                                                    <td class="text-end fw-bold text-slate">LKR {{ number_format($orderTotal, 2) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr class="grand-total-footer-row">
                                                <td colspan="4" class="text-end fw-bold text-slate">Grand Total (Shipping included):</td>
                                                <td class="text-end fw-bold text-primary-color">LKR {{ number_format($totalamount, 2) }}</td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            @else
                                <div class="text-center py-5">
                                    <div class="empty-icon mb-3">
                                        <i class="fas fa-shopping-bag text-muted opacity-50 fa-3x"></i>
                                    </div>
                                    <p class="text-muted">You haven't placed any orders yet.</p>
                                    <a href="{{ route('american.plastic.web') }}" class="btn btn-primary-premium mt-3">Start Shopping</a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    <!-- Styles for Premium COD Success Screen -->
    <style>
        .cod-success-container {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            min-height: 80vh;
            color: #0f172a;
        }

        /* Hero success card styles */
        .success-hero-card {
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid #f1f5f9;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01), 0 10px 30px rgba(0, 0, 0, 0.02);
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .lottie-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
        }

        .success-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 10px;
        }

        .success-message {
            font-size: 0.95rem;
            color: #64748b;
            max-width: 480px;
            margin-bottom: 25px;
            line-height: 1.6;
        }

        /* COD instruction block */
        .cod-instruction-box {
            display: flex;
            align-items: center;
            gap: 16px;
            background: #fafcf5;
            border: 1px dashed rgba(133, 194, 38, 0.4);
            border-radius: 16px;
            padding: 20px;
            max-width: 480px;
            text-align: left;
            margin-bottom: 20px;
        }

        .cod-icon-wrapper {
            background: rgba(133, 194, 38, 0.1);
            color: #85c226;
            font-size: 1.5rem;
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .cod-text-wrapper strong {
            font-size: 0.95rem;
            color: #0f172a;
            display: block;
            margin-bottom: 4px;
        }

        .cod-text-wrapper p {
            font-size: 0.85rem;
            color: #64748b;
            margin: 0;
            line-height: 1.4;
        }

        /* Cards styles */
        .premium-card {
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid #f1f5f9;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01), 0 10px 30px rgba(0, 0, 0, 0.02);
            padding: 30px;
        }

        .card-header-premium {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #f1f5f9;
        }

        .card-header-premium i {
            color: #85c226;
            font-size: 1.25rem;
            background: rgba(133, 194, 38, 0.08);
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }

        .card-header-premium h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
        }

        /* Latest Order details mapping */
        .order-id-badge-container {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .order-id-badge-container .label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #94a3b8;
            text-uppercase: uppercase;
            letter-spacing: 0.05em;
        }

        .order-id-badge {
            font-size: 1.2rem;
            font-weight: 800;
            color: #85c226;
            background: rgba(133, 194, 38, 0.05);
            border: 1px solid rgba(133, 194, 38, 0.2);
            border-radius: 10px;
            padding: 8px 16px;
            display: inline-block;
            align-self: flex-start;
        }

        .details-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9375rem;
        }

        .detail-label {
            color: #64748b;
            font-weight: 500;
        }

        .detail-value {
            font-weight: 700;
            color: #0f172a;
        }

        .total-row-premium {
            border-top: 2px dashed #e2e8f0;
        }

        .total-row-premium .detail-label {
            font-size: 1.1rem;
            font-weight: 800;
            color: #0f172a;
        }

        .total-row-premium .total-price {
            font-size: 1.3rem;
            font-weight: 800;
            color: #85c226;
        }

        /* Buttons */
        .btn-primary-premium {
            background: #85c226 !important;
            color: #ffffff !important;
            border: none !important;
            border-radius: 12px !important;
            padding: 12px 28px !important;
            font-size: 0.95rem !important;
            font-weight: 700 !important;
            transition: all 0.25s ease !important;
            cursor: pointer;
            display: inline-block;
            box-shadow: 0 4px 12px rgba(133, 194, 38, 0.25);
        }

        .btn-primary-premium:hover {
            background: #6fa81d !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(133, 194, 38, 0.35);
        }

        /* Badge status */
        .status-badge {
            font-size: 0.75rem;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 20px;
            display: inline-block;
        }

        .status-processing {
            background-color: rgba(133, 194, 38, 0.1);
            color: #85c226;
            border: 1px solid rgba(133, 194, 38, 0.2);
        }

        /* Table styles */
        .table-premium {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9375rem;
            text-align: left;
        }

        .table-premium th {
            padding: 14px 16px;
            color: #64748b;
            font-weight: 600;
            border-bottom: 2px solid #f1f5f9;
        }

        .table-premium td {
            padding: 18px 16px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
        }

        .table-premium tbody tr:hover {
            background-color: #fafbfc;
        }

        .grand-total-footer-row td {
            padding-top: 24px;
            font-size: 1.1rem;
            border-bottom: none;
        }

        .text-primary-color {
            color: #85c226 !important;
            font-size: 1.25rem;
        }

        .text-slate {
            color: #334155;
        }

        /* Responsive */
        @media (max-width: 991px) {
            .cod-success-container {
                padding-top: 20px;
            }
            .success-hero-card {
                padding: 30px 20px;
            }
            .premium-card {
                padding: 20px;
            }
            .success-title {
                font-size: 1.5rem;
            }
        }
    </style>
@endsection
