@extends('layouts.app')

@section('title', 'Abandoned Checkout Details')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header with Back Button -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <a href="{{ route('reports.abandoned-checkouts') }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-sm mb-2 inline-block">
                ← Back to Abandoned Checkouts
            </a>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Abandoned Checkout Details</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                ID: #{{ $abandonment->id }} • {{ $abandonment->created_at->format('M d, Y h:i A') }}
            </p>
        </div>

        <!-- Status Badge -->
        <div>
            @if($abandonment->recovered)
                <span class="px-4 py-2 text-sm rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                    ✓ Recovered
                </span>
            @else
                <span class="px-4 py-2 text-sm rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                    Not Recovered
                </span>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column: Customer & Cart Info -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Customer Information -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Customer Information</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-400">Name</label>
                        <p class="text-gray-900 dark:text-white font-medium">{{ $abandonment->customer_name ?: 'N/A' }}</p>
                    </div>

                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-400">Email</label>
                        <p class="text-gray-900 dark:text-white font-medium">{{ $abandonment->customer_email ?: 'N/A' }}</p>
                    </div>

                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-400">Phone</label>
                        <p class="text-gray-900 dark:text-white font-medium">{{ $abandonment->customer_phone ?: 'N/A' }}</p>
                    </div>

                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-400">Marketing Consent</label>
                        <p class="text-gray-900 dark:text-white font-medium">
                            @if($abandonment->marketing_consent)
                                <span class="text-green-600 dark:text-green-400">✓ Yes</span>
                            @else
                                <span class="text-red-600 dark:text-red-400">✗ No</span>
                            @endif
                        </p>
                    </div>
                </div>

                @if($abandonment->customer_address)
                    <div class="mt-4 pt-4 border-t dark:border-gray-700">
                        <label class="text-sm text-gray-600 dark:text-gray-400">Address</label>
                        <p class="text-gray-900 dark:text-white">
                            {{ $abandonment->customer_address }}<br>
                            @if($abandonment->customer_city)
                                {{ $abandonment->customer_city }}, {{ $abandonment->customer_state }} {{ $abandonment->customer_postcode }}
                            @endif
                        </p>
                    </div>
                @endif
            </div>

            <!-- Cart Items -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Cart Items</h2>

                @if(is_array($abandonment->items) && count($abandonment->items) > 0)
                    <div class="divide-y dark:divide-gray-700">
                        @foreach($abandonment->items as $item)
                            <div class="py-3 flex justify-between">
                                <div>
                                    <p class="text-gray-900 dark:text-white font-medium">{{ $item['name'] ?? 'Product' }}</p>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: {{ $item['quantity'] ?? 1 }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-gray-900 dark:text-white font-medium">RM {{ number_format($item['price'] ?? 0, 2) }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-4 pt-4 border-t dark:border-gray-700 flex justify-between items-center">
                        <span class="text-lg font-semibold text-gray-900 dark:text-white">Total</span>
                        <span class="text-xl font-bold text-gray-900 dark:text-white">RM {{ number_format($abandonment->total_amount, 2) }}</span>
                    </div>
                @else
                    <p class="text-gray-500 dark:text-gray-400">No cart items recorded</p>
                @endif
            </div>

            <!-- Event Timeline -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Timeline</h2>

                @if($abandonment->events->count() > 0)
                    <div class="space-y-4">
                        @foreach($abandonment->events as $event)
                            <div class="flex gap-3">
                                <div class="flex-shrink-0">
                                    <span class="text-2xl">{{ $event->getEventIcon() }}</span>
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $event->getEventLabel() }}</p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $event->created_at->format('M d, Y h:i A') }}</p>
                                    @if($event->event_data)
                                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">{{ json_encode($event->event_data) }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-gray-500 dark:text-gray-400">No events recorded</p>
                @endif
            </div>
        </div>

        <!-- Right Column: Metadata & Actions -->
        <div class="space-y-6">
            <!-- Abandonment Details -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Abandonment Details</h2>

                <div class="space-y-3">
                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-400">Stage</label>
                        <p>
                            <span class="px-2 py-1 text-xs rounded-full bg-{{ $abandonment->getStageColor() }}-100 text-{{ $abandonment->getStageColor() }}-800 dark:bg-{{ $abandonment->getStageColor() }}-900 dark:text-{{ $abandonment->getStageColor() }}-200">
                                {{ $abandonment->getStageLabel() }}
                            </span>
                        </p>
                    </div>

                    @if($abandonment->abandonment_reason)
                        <div>
                            <label class="text-sm text-gray-600 dark:text-gray-400">Reason</label>
                            <p class="text-gray-900 dark:text-white">{{ ucfirst($abandonment->abandonment_reason) }}</p>
                        </div>
                    @endif

                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-400">Time Elapsed</label>
                        <p class="text-gray-900 dark:text-white">{{ $abandonment->days_since_abandonment }} days ago</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ $abandonment->hours_since_abandonment }} hours</p>
                    </div>

                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-400">Last Activity</label>
                        <p class="text-gray-900 dark:text-white">{{ $abandonment->last_activity_at->format('M d, Y h:i A') }}</p>
                    </div>

                    @if($abandonment->salesPage)
                        <div>
                            <label class="text-sm text-gray-600 dark:text-gray-400">Sales Page</label>
                            <p class="text-gray-900 dark:text-white">{{ $abandonment->salesPage->title }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- UTM Tracking -->
            @if($abandonment->utm_source || $abandonment->utm_medium || $abandonment->utm_campaign)
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Marketing Source</h2>

                    <div class="space-y-2">
                        @if($abandonment->utm_source)
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-400">Source</label>
                                <p class="text-gray-900 dark:text-white">{{ $abandonment->utm_source }}</p>
                            </div>
                        @endif

                        @if($abandonment->utm_medium)
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-400">Medium</label>
                                <p class="text-gray-900 dark:text-white">{{ $abandonment->utm_medium }}</p>
                            </div>
                        @endif

                        @if($abandonment->utm_campaign)
                            <div>
                                <label class="text-sm text-gray-600 dark:text-gray-400">Campaign</label>
                                <p class="text-gray-900 dark:text-white">{{ $abandonment->utm_campaign }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <!-- Follow-up Status -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Follow-up Status</h2>

                @if($abandonment->follow_up_sent)
                    <div class="space-y-2">
                        <p class="text-green-600 dark:text-green-400 font-medium">✓ Follow-up sent</p>
                        <p class="text-sm text-gray-600 dark:text-gray-400">
                            Method: {{ ucfirst($abandonment->follow_up_method) }}<br>
                            Sent: {{ $abandonment->follow_up_sent_at->format('M d, Y h:i A') }}
                        </p>
                    </div>
                @else
                    <p class="text-gray-500 dark:text-gray-400">No follow-up sent yet</p>
                @endif
            </div>

            <!-- Recovery Status -->
            @if($abandonment->recovered)
                <div class="bg-green-50 dark:bg-green-900 rounded-lg shadow p-6">
                    <h2 class="text-lg font-semibold text-green-900 dark:text-green-100 mb-4">Recovery Info</h2>

                    <div class="space-y-2">
                        <p class="text-green-800 dark:text-green-200">
                            <strong>Recovered:</strong> {{ $abandonment->recovered_at->format('M d, Y h:i A') }}
                        </p>
                        @if($abandonment->recoveredOrder)
                            <p class="text-green-800 dark:text-green-200">
                                <strong>Order:</strong> {{ $abandonment->recoveredOrder->order_number }}
                            </p>
                        @endif
                    </div>
                </div>
            @endif

            <!-- Actions -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Actions</h2>

                <div class="space-y-2">
                    @if(!$abandonment->recovered && $abandonment->customer_phone)
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $abandonment->customer_phone) }}" target="_blank"
                           class="block w-full px-4 py-2 bg-green-600 text-white text-center rounded-lg hover:bg-green-700">
                            Send WhatsApp
                        </a>
                    @endif

                    @if(!$abandonment->recovered && $abandonment->customer_email)
                        <a href="mailto:{{ $abandonment->customer_email }}"
                           class="block w-full px-4 py-2 bg-blue-600 text-white text-center rounded-lg hover:bg-blue-700">
                            Send Email
                        </a>
                    @endif

                    @if(!$abandonment->recovered)
                        <button onclick="if(confirm('Mark this checkout as recovered?')) document.getElementById('recover-form').submit();"
                                class="block w-full px-4 py-2 bg-purple-600 text-white text-center rounded-lg hover:bg-purple-700">
                            Mark as Recovered
                        </button>

                        <form id="recover-form" action="{{ route('reports.abandoned-checkouts.recover', $abandonment->id) }}" method="POST" class="hidden">
                            @csrf
                            <!-- Note: In real scenario, you'd select an order. For now, this is a placeholder -->
                            <input type="hidden" name="order_id" value="1">
                        </form>
                    @endif
                </div>
            </div>

            <!-- Technical Details -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Technical Details</h2>

                <div class="space-y-2 text-sm">
                    <div>
                        <label class="text-gray-600 dark:text-gray-400">Session ID</label>
                        <p class="text-gray-900 dark:text-white font-mono text-xs">{{ $abandonment->session_id }}</p>
                    </div>

                    @if($abandonment->ip_address)
                        <div>
                            <label class="text-gray-600 dark:text-gray-400">IP Address</label>
                            <p class="text-gray-900 dark:text-white">{{ $abandonment->ip_address }}</p>
                        </div>
                    @endif

                    @if($abandonment->user_agent)
                        <div>
                            <label class="text-gray-600 dark:text-gray-400">Browser</label>
                            <p class="text-gray-900 dark:text-white text-xs">{{ Str::limit($abandonment->user_agent, 50) }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection