@extends('admin.layouts.app')

@section('title', 'Incomplete Orders')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Incomplete Orders</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Track abandoned carts and recover sales</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <span class="px-4 py-2 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-xl text-sm font-medium">
                {{ $incompleteOrders->total() }} Abandoned Carts
            </span>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Total Orders</p>
                    <p class="text-2xl font-bold text-slate-800 dark:text-white mt-1" id="totalOrders">{{ $incompleteOrders->total() }}</p>
                </div>
                <div class="w-12 h-12 bg-slate-100 dark:bg-slate-700 rounded-xl flex items-center justify-center">
                    <i data-lucide="shopping-cart" class="w-6 h-6 text-slate-600 dark:text-slate-400"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Pending</p>
                    <p class="text-2xl font-bold text-amber-600 mt-1" id="pendingOrders">{{ $incompleteOrders->where('status', 'pending')->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-xl flex items-center justify-center">
                    <i data-lucide="clock" class="w-6 h-6 text-amber-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Confirmed</p>
                    <p class="text-2xl font-bold text-emerald-600 mt-1" id="confirmedOrders">0</p>
                </div>
                <div class="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center">
                    <i data-lucide="check-circle" class="w-6 h-6 text-emerald-600"></i>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Cancelled</p>
                    <p class="text-2xl font-bold text-red-600 mt-1" id="cancelledOrders">0</p>
                </div>
                <div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-xl flex items-center justify-center">
                    <i data-lucide="x-circle" class="w-6 h-6 text-red-600"></i>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
    <div class="bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 px-4 py-3 rounded-xl">
        {{ session('success') }}
    </div>
    @endif

    <!-- Search & Filters -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-4">
        <form action="{{ route('admin.incomplete-orders.index') }}" method="GET" class="flex flex-wrap gap-4">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name or phone..." 
                    class="w-full px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm">
            </div>
            <div>
                <select name="date_filter" class="px-4 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-sm">
                    <option value="">All Time</option>
                    <option value="today" {{ request('date_filter') == 'today' ? 'selected' : '' }}>Today</option>
                    <option value="week" {{ request('date_filter') == 'week' ? 'selected' : '' }}>This Week</option>
                    <option value="month" {{ request('date_filter') == 'month' ? 'selected' : '' }}>This Month</option>
                </select>
            </div>
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700">
                <i data-lucide="search" class="w-4 h-4 inline mr-1"></i> Search
            </button>
            @if(request()->hasAny(['search', 'date_filter']))
            <a href="{{ route('admin.incomplete-orders.index') }}" class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-200">
                Clear
            </a>
            @endif
        </form>
    </div>

    <!-- Incomplete Orders Table -->
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 dark:bg-slate-700/50">
                    <tr class="text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                        <th class="px-6 py-4">Customer</th>
                        <th class="px-6 py-4">Contact</th>
                        <th class="px-6 py-4">Location</th>
                        <th class="px-6 py-4">Products</th>
                        <th class="px-6 py-4">Charges</th>
                        <th class="px-6 py-4">Time</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                    @forelse($incompleteOrders as $order)
                    @php 
                        $products = $order->products ?? []; 
                        $productCount = array_sum(array_column($products, 'quantity'));
                    @endphp
                    <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <img src="https://ui-avatars.com/api/?name={{ urlencode($order->name ?? 'U') }}&background=f59e0b&color=fff&size=40" class="w-10 h-10 rounded-lg mr-3">
                                <div>
                                    <p class="font-medium text-slate-800 dark:text-white">{{ $order->name ?? 'Unknown' }}</p>
                                    @if($order->email)
                                    <p class="text-xs text-slate-500">{{ $order->email }}</p>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @if($order->phone)
                            <div class="space-y-1">
                                <a href="tel:{{ $order->phone }}" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">{{ $order->phone }}</a>
                                <p class="text-xs text-slate-400">{{ $order->ip_address ?? 'No IP' }}</p>
                            </div>
                            @else
                            <span class="text-slate-400">N/A</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm">
                                @if($order->district || $order->area)
                                <p class="text-slate-800 dark:text-white">{{ $order->district ?? '' }}</p>
                                <p class="text-xs text-slate-500">{{ $order->area ?? '' }}</p>
                                @endif
                                @if($order->address)
                                <p class="text-xs text-slate-400 truncate max-w-[150px]" title="{{ $order->address }}">{{ Str::limit($order->address, 30) }}</p>
                                @else
                                <span class="text-slate-400 text-xs">No address</span>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            @if(count($products) > 0)
                            <div class="space-y-1">
                                <p class="text-sm font-medium text-slate-800 dark:text-white">{{ $productCount }} item(s)</p>
                                @foreach(array_slice($products, 0, 2) as $product)
                                <div class="flex items-center text-xs text-slate-500">
                                    <span class="truncate max-w-[100px]">{{ $product['name'] ?? 'Product' }}</span>
                                    <span class="mx-1">×</span>
                                    <span>{{ $product['quantity'] ?? 1 }}</span>
                                    @if(!empty($product['color']) || !empty($product['size']))
                                    <span class="ml-1 text-slate-400">
                                        ({{ implode(', ', array_filter([$product['color'] ?? null, $product['size'] ?? null])) }})
                                    </span>
                                    @endif
                                </div>
                                @endforeach
                                @if(count($products) > 2)
                                <p class="text-xs text-slate-400">+{{ count($products) - 2 }} more</p>
                                @endif
                            </div>
                            @else
                            <span class="text-slate-400 text-sm">Empty cart</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="space-y-1 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-slate-500">Subtotal:</span>
                                    <span class="text-slate-800 dark:text-white">৳{{ number_format($order->subtotal ?? 0) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-slate-500">Shipping:</span>
                                    <span class="text-slate-800 dark:text-white">৳{{ number_format($order->shipping_charge ?? 0) }}</span>
                                </div>
                                @if($order->shipping_class)
                                <p class="text-xs text-slate-400">{{ $order->shipping_class }}</p>
                                @endif
                                <div class="flex justify-between font-semibold border-t border-slate-200 dark:border-slate-600 pt-1">
                                    <span class="text-slate-600 dark:text-slate-300">Total:</span>
                                    <span class="text-indigo-600 dark:text-indigo-400">৳{{ number_format($order->total ?? 0) }}</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm">
                                <p class="text-slate-600 dark:text-slate-300">{{ $order->created_at?->diffForHumans() }}</p>
                                <p class="text-xs text-slate-400">{{ $order->created_at?->format('M d, h:i A') }}</p>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center justify-end space-x-2">
                                <button onclick="viewOrder({{ $order->id }})" class="p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 rounded-lg hover:bg-blue-200 transition-colors" title="View Details">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                @if($order->phone)
                                <a href="tel:{{ $order->phone }}" class="p-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 rounded-lg hover:bg-emerald-200 transition-colors" title="Call">
                                    <i data-lucide="phone" class="w-4 h-4"></i>
                                </a>
                                <a href="https://wa.me/88{{ preg_replace('/[^0-9]/', '', $order->phone) }}" target="_blank" class="p-2 bg-green-100 dark:bg-green-900/30 text-green-600 rounded-lg hover:bg-green-200 transition-colors" title="WhatsApp">
                                    <i data-lucide="message-circle" class="w-4 h-4"></i>
                                </a>
                                @endif
                                <form action="{{ route('admin.incomplete-orders.convert', $order) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="p-2 bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 rounded-lg hover:bg-indigo-200 transition-colors" title="Convert to Order">
                                        <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                                    </button>
                                </form>
                                <form action="{{ route('admin.incomplete-orders.destroy', $order) }}" method="POST" class="inline" onsubmit="return confirm('Delete this incomplete order?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 bg-red-100 dark:bg-red-900/30 text-red-600 rounded-lg hover:bg-red-200 transition-colors" title="Delete">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center">
                            <i data-lucide="shopping-cart" class="w-16 h-16 text-slate-300 mx-auto mb-4"></i>
                            <h3 class="text-lg font-medium text-slate-800 dark:text-white mb-2">No Incomplete Orders</h3>
                            <p class="text-slate-500">All customers have completed their checkouts!</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($incompleteOrders->hasPages())
    <div class="mt-6">
        {{ $incompleteOrders->links() }}
    </div>
    @endif
</div>

<!-- Order View/Edit Modal -->
<div id="orderModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 py-6">
        <div class="fixed inset-0 bg-slate-900/50" onclick="closeModal()"></div>
        <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-6 py-4 z-10">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Order Details</h3>
                    <button onclick="closeModal()" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
                        <i data-lucide="x" class="w-5 h-5 text-slate-500"></i>
                    </button>
                </div>
            </div>
            <div class="p-6" id="orderModalContent">
                <!-- Content will be loaded dynamically -->
                <div class="flex items-center justify-center py-12">
                    <svg class="animate-spin w-8 h-8 text-indigo-600" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </div>
            </div>
            <div class="sticky bottom-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 px-6 py-4 flex justify-end space-x-3" id="orderModalActions">
                <!-- Actions will be loaded dynamically -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/incomplete-orders-admin.js') }}"></script>
@endpush