@extends('checkout.layout')

@section('content')
    <div class="checkout-container order-success-container">
        <div class="success-header">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            @php
                function getOrderStatusTitle($status,$isTrial = false) {
                    if ($isTrial) {
                        return 'Trial Activated!';
                    }
                    switch (strtolower($status)) {
                        case 'pending':
                            return 'Order Created!';
                        case 'processing':
                            return 'Payment Processing!';
                        case 'confirmed':
                            return 'Payment Confirmed!';
                        case 'active':
                            return 'Order Active!';
                        case 'paused':
                            return 'Order Paused!';
                        case 'cancelled':
                            return 'Order Cancelled!';
                        default:
                            return 'Order Update';
                    }
                }

                function getOrderStatusMessage($status,$isTrial = false) {
                     if ($isTrial) {
                        return 'Your free trial has been successfully activated!';
                    }
                    switch (strtolower($status)) {
                        case 'pending':
                            return 'Your order has been created but payment is pending.';
                        case 'processing':
                            return 'We have received your payment or screenshot. Awaiting admin confirmation.';
                        case 'confirmed':
                            return 'Your payment has been confirmed by our team.';
                        case 'active':
                            return 'Your order and payment are confirmed. Subscription is now active!';
                        case 'paused':
                            return 'Your order is currently paused.';
                        case 'cancelled':
                            return 'This order has been cancelled.';
                        default:
                            return 'Your order status has been updated.';
                    }
                }
            @endphp

            <h1 class="success-title">{{ getOrderStatusTitle($order->status,$isTrial) }}</h1>
            <p class="success-message-text">{{ getOrderStatusMessage($order->status,$isTrial) }}</p>

        </div>

        <div class="order-details-container">
            <!-- Order Summary Section -->
            <div class="details-section">
                <h2 class="section-title">Order Summary</h2>
                <div class="order-info">
                    <div class="info-row">
                        <span class="info-label">Order ID</span><br/>
                        <span class="info-value">#{{$order->order_number }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Date</span>
                        <span class="info-value">{{$order->created_at->format('F j, Y') }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Plan</span>
                        <span class="info-value">{{$order->plan_data['title']}}</span>
                    </div>

                    @php
                        function statusColorClass($status) {
                            switch (strtolower($status)) {
                                case 'pending':
                                    return 'status-pending';
                                case 'processing':
                                    return 'status-processing';
                                case 'confirmed':
                                    return 'status-confirmed';
                                case 'active':
                                    return 'status-active';
                                case 'paused':
                                    return 'status-paused';
                                case 'cancelled':
                                    return 'status-cancelled';
                                default:
                                    return 'status-default';
                            }
                        }
                    @endphp

                    <div class="info-row">
                        <span class="info-label">Status</span>
                        <span
                            class="info-value {{ statusColorClass($order->status) }}">{{ ucfirst($order->status) }}</span>

                    </div>
                    <div class="info-row total-row">
                        <span class="info-label">Total Amount</span>
                        @if($isTrial)
                            <span class="info-value">{{$order->currency}}0.00</span>
                        @elseif(isset($invoice))
                            <span class="info-value">{{$order->currency}}{{$invoice->total_amount}}</span>
                        @endif

                    </div>
                </div>
            </div>

            @if(isset($gateway))
                <!-- Payment Details Section -->
                @if($gateway['name']=="custom")
                    <!-- Customer Details Section -->
                    <div class="details-section">
                        <h2 class="section-title">Payment Details</h2>
                        <div class="order-info">
                            {!! base64_decode($gateway['config']['html']) !!}
                        </div>
                    </div>
                @else
                    <div class="details-section">
                        <h2 class="section-title">Payment Details</h2>
                        <div class="order-info">
                            <div class="info-row">
                                <span class="info-label">Payment Method</span>
                                <span class="info-value"><i class="fab fa-cc-visa"></i> Visa ****1234</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">Transaction ID</span>
                                <span class="info-value">TXN987654321</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">Bank Reference</span>
                                <span class="info-value">REF3456789012</span>
                            </div>
                        </div>
                    </div>
                @endif
            @endif

            <!-- Customer Details Section -->
            <div class="details-section">
                <h2 class="section-title">Customer Details</h2>
                <div class="order-info">
                    <div class="info-row">
                        <span class="info-label">Name</span>
                        <span class="info-value">{{$order->user->name}}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Email</span>
                        <span class="info-value">{{$order->user->email}}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Phone</span>
                        <span class="info-value">{{$order->user->phone}}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Subscription</span>
                        @if($order->status=="active")
                            <span
                                class="info-value">Active until {{ $order->next_renewal_date->format('F j, Y') }}</span>
                        @else
                            <span class="info-value">----------</span>
                        @endif
                    </div>
                </div>
            </div>

        </div>

        <div class="action-buttons">
            @if(!$isTrial && isset($invoice))
                <a href="{{ route('user.invoices.show', $invoice) }}" class="btn-primary"><i class="fas fa-file-invoice"></i> View Invoice</a>
            @else
                <a href="{{route('dashboard')}}" class="btn-primary"><i class="fas fa-home-alt"></i> Dashboard</a>
            @endif
            @if($order->status=="pending")
                @if(isset($gateway) && $gateway->name=="custom")
                    @if(isset($invoice))
                        <a href="{{ route('user.invoices.mark.payment', $invoice) }}" class="btn-secondary"><i class="fas fa-upload"></i> Upload ScreenShot</a>
                    @endif
                @endif
            @endif
        </div>

        <div class="additional-info">
            <p><i class="fas fa-question-circle"></i> If you have any questions, please contact our <a
                    href="{{route('user.tickets.create') }}"
                    class="text-primary">customer
                    support</a>.</p>
        </div>
    </div>

    <style>
        /* New CSS Styles for Order Success Page */
        .order-success-container {
            max-width: 800px;
            flex-direction: column;
            padding: 0;
            margin: 0 auto;
        }

        .success-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 3rem 2rem;
            text-align: center;
            border-radius: 16px 16px 0 0;
        }

        .success-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            animation: pulse 2s infinite;
        }

        .success-title {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .success-message-text {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .order-details-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.5);
        }

        .details-section {
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .details-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(103, 62, 229, 0.15);
        }

        .order-info {
            margin-top: 1rem;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            color: #666;
            font-weight: 500;
        }

        .info-value {
            font-weight: 600;
            color: var(--text-color);
        }

        .status-success {
            color: var(--success-color);
            background-color: rgba(46, 125, 50, 0.1);
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .total-row {
            margin-top: 0.5rem;
            padding-top: 1rem;
            border-top: 2px dashed rgba(0, 0, 0, 0.1);
            font-size: 1.1rem;
        }

        .total-row .info-label,
        .total-row .info-value {
            font-weight: 700;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            padding: 0 2rem 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-secondary {
            flex: 1;
            max-width: 250px;
            background-color: rgba(255, 255, 255, 0.8);
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            padding: 1rem;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 5px 15px rgba(103, 62, 229, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
        }

        .btn-secondary:hover {
            background-color: rgba(103, 62, 229, 0.1);
            transform: translateY(-3px);
        }

        .btn-secondary i,
        .btn-primary i {
            margin-right: 0.5rem;
        }

        .additional-info {
            padding: 1.5rem 2rem 2rem;
            text-align: center;
            color: #666;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 0 0 16px 16px;
        }

        .additional-info p {
            margin: 0.5rem 0;
        }

        .additional-info i {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .order-details-container {
                grid-template-columns: 1fr;
            }

            .action-buttons {
                flex-direction: column;
                align-items: center;
            }

            .btn-primary, .btn-secondary {
                width: 100%;
                max-width: 100%;
            }
        }
    </style>
@endsection